Avtor: -primož- 12.11.09

Preprosta CSS sredinska poravnava z a img hover

CSS postavitev za foto bloge!

Ta CSS vodič vam bo predstavil kodo, ki poskrbi, da so vaše slike lepo poravnane, ena pod drugo, z možnostjo dodajanja besedila pod sliko in nad sliko. Ta CSS koda je v bistvu nadgradnja kode za grafični meni, ki ga lahko v praksi vidite tukaj.

Praktičen primer te CSS kode v kombinaciji z lightbox efektom si lahko ogledate tukaj.

Koda je veliko bolj preprostejša, kot iz grafičnega menija. Pa si jo poglejmo!

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<style type="text/css">
 
body {
  text-align: center;
}
 
.okvir {
  width: 500px;
  border: 1px solid #3399ff;
  text-align: center;
  margin: 0 auto;
}
 
.okvir a img {
  border: solid 4px #3399ff;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  margin:auto;
}
 
.okvir a:hover img {
  border-color: #ff9900;
}
 
</style>
</head>
 
<body>
<div class="okvir">
 
<br />
<p>Besedilo</p>
<br />
<a href="#"><img src="slike/animacija.png" /></a>
<br />
<p>Besedilo</p>
<br />
<a href="#"><img src="slike/a.png" /></a>
<br />
<p>Besedilo</p>
<br />
 
</div>
 
</body>
</html>

RAZLAGA:

Vsem slikam, ki so obdane z <a> in </a> je določen margin:auto; , ki poskrbi za to, da so slike pozicionirane na sredini diva (.okvir). Za sredinsko poravnavo pa je potrebno definirati še širino ( width: 500px; ) diva in pa sredinsko poravnavo ( text-align: center; ).

-moz-border-radius: in -webkit-border-radius: sem dodal, ker zaobljeni robovi popestrijo stran. Več o zaobljenih robovih!

.okvir a:hover img določa izgled slike, medtem, ko smo mi z miško preko nje.

[ Na vrh ]

Komentiraj:

Sorodni vodiči
Kurzorji na spletnih straneh DIV z drsniki CSS Povečava slike CSS sprites meni s hover efektom CSS galerija 650	Drugačna prva črka CSS ozadje Uvoz CSS kode v HTML dokument CSS okvir na sredini, s slikami Meni s slikami + HOVER

Moje-Mesto.com

Slovenska spletna stran s HTML, CSS, Windows in Photoshop vodiči.

Facebook oglaševanje

Izdelava spletnih strani

Ustvari.si

Nescafé

!joomlacomment 4.0 Copyright (C) 2009 Compojoom.com . All rights reserved."

Moje-Mesto.com

Oglasi

Naključni CSS vodiči