Drsnik po meri
Posted by admin in html / css, tips
Za izdelat sem prejela osnutek spletne strani, ki vsebuje eno stran s po meri narejenim drsnikom. Lahko uporabiš CSS parametre kot so scrollbar-face-color, scrollbar-highlight-color, ampak v mojem primeru sem morala odstraniti puščice na robih in našla sem fleXcroll. S to kodo lahko narediš drsnik točno tak kot ga potrebuješ. Zelo je enostaven za uporabo, zato ga res priporočam.
Spodnji zip vsebuje tudi vse primere za uporabo.
Prenesi fleXcroll (poglej pod naslovom Download).
Koliko HTML/CSS elementov lahko poimenuješ?
Posted by admin in relax, html / css
Tukaj sta 2 zanimiva testa. Preizkusi se!
- Koliko HTML elementov lahko poimenuješ v 5 minutah?
mojRezultat:
53 - Koliko CSS lastnosti lahko poimenuješ v 7 minutah?
mojRezultat:
54
Fiksirana noga na spodnji rob brskalnika
Posted by admin in html / css
Tukaj je primer za fiksiranje noge spletne strani na spodnji rob brskalnika. S premikanjem drsnika se premika tudi vsebina spletne strani, medtem ko je noga fiksna in vidna ves čas.
Oglej si primer.
Centriranje strani vertikalno in horizontalno
Posted by admin in html / css
Večino spletnih strani, ki sem jih naredila, je bilo potrebno postaviti horizontalno na sredino brskalnika in to se enostavno naredi z ‘margin’ in ‘width’ parametri v div-u ‘container’. Potem pa sem naletela na problem: kako postaviti stran na sredino po vertikali? Našla sem nekaj nasvetov s 50% širino in višino div-ov, ampak se je pojavil drug problem in sicer, ko zmanjšaš velikost brskalinka, se je zgornji del strani skril pod okno brskalnika. Tu pa tam je smiselno malo pogledat v preteklost in tako sem našla rešitev z uporabo tabele (že precej časa namreč uporabljam samo div-e!). Stran vertikalno centriraš, če dodaš ‘vertical-align’ parameter v ‘table’ oznako. Spodaj je celotna koda za centriranje strani.
HTML koda:
<html>
<head>
<title>Centriranje strani vertikalno in horizontalno</title>
</head>
<body>
<table id=”container”>
<tr>
<td>Vsebina je centrirana horizontalno in vertikalno!</td>
</tr>
</table>
</body>
</html>
CSS koda:
html, body, #container {
height:100%;
margin: 0;
padding: 0;
border: none;
text-align: center;
}
#container {
margin: 0 auto;
text-align: left;
vertical-align: middle;
width: 400px;
}
Tukaj je primer.
Prilepi nogo na spodnji rob s CCS-jem
Posted by admin in html / css
Tukaj je uporabna koda za postavitev noge na spodnji rob brskalnika s CSS-jem.
HTML koda:
<html>
<title>Stick Footer</title>
<body>
<div id=”container”>
<div id=”content”>
<p>Content text …</p>
</div>
<div class=”push”></div>
</div>
<div id=”footer”>
<p>Footer text …</p>
</div>
</body>
</html>
CSS koda:
* {
margin: 0;
}
html, body {
height: 100%;
}
#container {
width:700px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px auto -40px; /* spodnji margin je negativna vrednost višine noge */
}
.push {
height: 40px; /* .push mora biti iste višine kot #footer */
}
#content {
padding:20px;
}
#footer {
width:700px;
margin:0px auto;
height: 40px;
}
Tukaj je primer.
