[Novosti]

Novosti:

[Bernard [TI]]

U ovoj temi prikupljat ćemo neke od korisnih CSS trikova. Pridružite se...

Index :

• Centriranje bloka teksta (kompatibilno sa svim browserima & W3C standardima)
• Centriranje tablice u sredinu stranice (kompatibilno sa svim browserima & W3C standardima)

[Bernard [TI]]

Mnogi se pitaju kako pravilno centrirati blok teksta (paragraf) koji će raditi i u IE5+, a da bude kompatibilno sa W3C standardima. Pa evo primjera:

HTML

Kod:

<div class="div-center">
  <p class="p-center">
     Neki blok tekta...
     koji se prostire na ...
     nekoliko redaka...
  </p>
</div>

CSS

Kod:

.div-center {
text-align: center;
}
.p-center {
margin-left: auto;
margin-right: auto;
width: 60%; //ovdje može biti i fiksna širina, npr "100px"
text-align: left;
}

[Bernard [TI]]

Slijedeći primjer centriranja je kada želimo da tablica bude centrirana u sredini stranice pomoću DIV layera. Slijedeći primjer radi u svim browserima (uključujući IE5+ i NS4+) :

HTML

Kod:

<div class="centriranje">
<table>
</table>
</div>

CSS

Kod:

div.centriranje {
  text-align: center;
}

div.centriranje table {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

Alternativna elegantna verzija je i slijedeća :

CSS

Kod:

div.centriranje {
  text-align: center;
}

div.centriranje table {
  margin: 0 auto;
  text-align: left;
}

[Bernard [TI]]

Evo načina kako da čistim CSS-om dobijete efekt transparentnosti, a recimo da se na pomicanje miša iznad slike prikaže u punoj vidljivosti. Pa evo kako :

CSS:

Kod:

a.prozirnost img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;}

a.prozirnost:hover img {
filter:alpha(opacity=100);   
-moz-opacity: 1.0;   
opacity: 1.0;
}

HTML:

Kod:

<a class="prozirnost" href="http://www.vasadomena.com/ciljni-link.html"><img src="http://www.vasadomena.com/slike/nekaslika.jpg" width="100" height="119" style="border:1px solid black;"></a>

Detaljni pregled prozirnosti (transparencije) u browserima pogledajte u ovoj temi, odakle je uzet i obrađen ovaj primjer..