Er zitten wel enkele leuke tussen 🙂
Je kunt een element stylen met de beperking dat 2 elementen binnen eenzelfde parent bestaan.
Adjacent sibling
Als de 2 elementen na elkaar moeten komen, kun je dit definiëren door middel van een plus.
bvb:
h1.opener + h2
<h1>Titel</h1>
<h2>subtitel</h2>
General sibling
Als de 2 elementen niet direct na elkaar komen, kun je dit definiëren door middel van een tilde.
bvb:
h1 ~ pre
<h1>Definition of the function a</h1>
Function a(x) has to be applied to all figures in the table.
<pre>function a(x) = 12x/13.5</pre>
Je hebt het waarschijnlijk al meegemaakt, je hebt 2 containers met aparte verticale marge en blijkt dat de uiteindelijke verticale marge niet overeenkomt met het verwachte resultaat… zijnde de som van de 2 marges.
Dat heeft dus te maken met collapsing margins.
Blijkbaar is het zo dat als beide marges positieve zijn, de grootste van de 2 wordt gebruikt en dus niet de som.
Zet je onder een container met een bottom-margin van 15px een andere container met een top-margin van 20px dan zou je verwachten dat de ruimte tussen die 2 containers 35px zou zijn. Wat blijkt, de marge tussen de 2 containers bedraagt 20px.
Hetzelfde scenario gebeurd met parents en children.
Stel de parent heeft een marge van 20px en alle children hebben een marge van 15px, dan zou je verwachten dat de totale marge 35px is maar het blijft dus 20px.
Het enige wat dit verbreekt is het gebruik van iets ‘vast’ tussen de 2 containers zoals een padding van 1px of een border-top van 1px.
Dit onduidelijk gedrag maakt het heel moeilijk om iets altijd correct te tonen.
.ninja { color: black; visibility: hidden; }
“print.css is an open source print stylesheet for the environmentally-conscious web developer”
CSS humor: .titanic { float: none; }
Omdat je niet altijd het warm water opnieuw moet uitvinden: CSS Sticky footer
Op mijn zoektochten in het Internet heb ik Eric Meyer’s resetting css gevonden.
Probleem: zowat elke browser heeft zijn eigen, niet altijd w3c compliant basis-eigenschappen en deze verschillen bezorgen ons webmasters veel kopzorgen.
Oplossing: Eric Meyer heeft een resetting css file gemaakt die ervoor zorgt dat een tag in alle browers dezelfde basis-eigenschappen hebben.
Dus plaats deze css eerst in jouw code en begin daarna met de opbouw van jouw pagina’s:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
Voor de uitleg ga naar Eric’s pagina.
Powered by WordPress
