Kāpēc to izmantot?
Bieži lapas izskats uz dažādiem pārlūkiem atšķiras, it sevišķi tas attiecas uz Internet Explorer Saglabā pamata CSS failu tīru Pilnīgi pieņemams Microsoft sankcionēts paņēmiens <!--[if IE]>
<LINK href="css/style-ie.css" rel="stylesheet" type="text/css">
<![endif]-->
vertical-align izmanto lai vertikāli pozicionētu inline elementu, relatīvi tā vecāku elementiem vai elementa līnijai. Inline elementi ir elementi, kam nav līnijas pārneses pirms un pēc elementa, piemēram, elementi EM, A, I, INPUT, SELECT, SPAN, TEXTAREA, IMG un citi. Sarakstu ar HTML 4.0 inline elementiem var skatīt šeit: http://htmlhelp.com/reference/html40/inline.html
Sintakse:
vertical-align:baseline;
Vērtība baseline tiek lietota pēc noklusējuma. Novieto elementus uz pamat-līnijas vienādās pozīcijās.
Vērtības var tikt uzdotas procentos (vertical-align:50%), relatīvi elementa līnijas augstumam (line-height). Procentu vērtība paaugstinās elementa pamat-līniju virs vecāku pamat-līnijas, par dotu procentu skaitu.
Vērtības var uzdot CSS mērvienībās, piemēram: vertical-align:5px;
Var izmantot negatīvas vērtības: vertical-align:-5px;
Poga sastāv no trim elementiem – pamata div’s ar gradientu fonā un apaļiem stūriem. Elementu pozicionēšanai izmantotas negatīvas margin-top vērtības.
Darbojas uz Firefox 3.6+, IE8 (bez apaļiem stūriem, bet ar gradientu), Google Chrome.
Kods:
<head><style>body {background-color:black;font-family: Verdana;font-size: 11px;font-weight:bold;}#div1 {width: 200px;height: 40px;margin-bottom: 30px;}#div2 {width: 198px;height: 15px;background-color:#FFE680;margin-bottom: 30px;margin-left:1px;}#div3 {width: 200px;height: 40px;margin-bottom: 30px;}#div4 {width: 198px;height: 15px;background-color:#FFE680;margin-left:1px;margin-top:-69px;}#divText1 {width: 198px;margin-bottom: 30px;text-align:center;color:white;}#divText2 {width: 198px;margin-bottom: 30px;text-align:center;color:black;margin-top:-4px;}.rounded-top {border-top-left-radius: 7px;border-top-right-radius: 7px;-moz-border-radius-topleft: 7px;-moz-border-radius-topright: 7px;}.rounded {border-radius: 7px;-moz-border-radius: 7px;}.gradient {background: -moz-linear-gradient(top, #FED32A, #816700);background: -webkit-gradient(linear, left top, left bottom, from(#FED32A), to(#816700));filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FED32A', endColorstr='#816700');}</style></head><body><div id="div1" class="gradient rounded"></div><div id="div2" class="rounded-top"></div><div id="divText1">This is text for the button</div><div id="div3" class="gradient rounded"></div><div id="div4" class="rounded-top"></div><div id="divText2">This is text on the button</div><body>
IE nosacījuma komentāri. Var izmantot lai specifiski IE saimes pārlūkiem norādītu atsevišķu stilu.
<!--[if IE]><style type="text/css">a { color:#fff; }</style><![endif]-->
Lai iekļautu saiti uz specifiski IE pārlūkiem izveidotu CSS vai Javascript failu.
<!–[if lt IE 8]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js” type=”text/javascript”>
</script>
<![endif]–>
Dinamiska izmēra div elements – mainās atkarībā no pārlūka loga izmēra. Centrēšana izmantojot absolūto pozicionēšanu.
div.centered {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
}
Tikai jāpārliecinās lai visu elementu un to malu summa gan platumā, gan augstumā sastāda 100%. IE pārlūkiem vēl speciāli jāuzstāda:
body {
height: 100%;
padding: 0;
margin: 0;
}
Webkit pārlūkiem (Chrome, Safari u.c.)
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
Firefox 3.6+
background: -moz-linear-gradient(top, #ccc, #000);
Internet Explorer
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient
