Het gaat om een liquid HTML5 ontwerp.
Bron: saila.com
Mijn 1e test: ~~~
Mijn 2e test: ~~
Op http://protofluid.com/ = de testpaginga voor div. apparaten (iPhone, iPad) worden de kolommen keurig onder elkaar weergegeven.
Hier loop ik op vast:
De gele header heeft een vaste hoogte | height: 120px;
Vervolgens krijgen de kolommen een vaste positie | top: 120px; - margin-top: 10px;
1. Door de vaste hoogte van de gele header springt de inhoud hier uit: bij de apparaten en bij het inzoomen op een pc-scherm. Kan dit beter?
2. Hoe zou ik kunnen toevoegen:
een rij onder de gele header
+ een rij onder de kolommen
+ een footer?
Gewoon een divje blijft onzichtbaar ...
Als ik wat probeer met .saila-col kom ik steevast terecht op | top: 120px; - margin-top: 10px;
3. body {
max-width: 930px; /* hier stond 75em;*/
margin: 0 auto;
position: relative;
}
ikzelf heb er van gemaakt 930px, maar zou dit graag weergeven in em, maar weet niet hoe dit te berekenen. pxtoem.com/
http://reference.sitepoint.com/css/pseudoclass-nthoftype
Het is een heel verhaal maar ik denk dat het echt wel een mooi template is. Weet iemand raad?
Groeten van janyep
Dit is de code. Ik heb de decoratie nog zoveel mogelijk verwerkt in de HTML om in deze fase de css overzichtelijker te houden:
Dit is de HTML:
Bron: saila.com
Mijn 1e test: ~~~
Mijn 2e test: ~~
Op http://protofluid.com/ = de testpaginga voor div. apparaten (iPhone, iPad) worden de kolommen keurig onder elkaar weergegeven.
Hier loop ik op vast:
De gele header heeft een vaste hoogte | height: 120px;
Vervolgens krijgen de kolommen een vaste positie | top: 120px; - margin-top: 10px;
1. Door de vaste hoogte van de gele header springt de inhoud hier uit: bij de apparaten en bij het inzoomen op een pc-scherm. Kan dit beter?
2. Hoe zou ik kunnen toevoegen:
een rij onder de gele header
+ een rij onder de kolommen
+ een footer?
Gewoon een divje blijft onzichtbaar ...
Als ik wat probeer met .saila-col kom ik steevast terecht op | top: 120px; - margin-top: 10px;
3. body {
max-width: 930px; /* hier stond 75em;*/
margin: 0 auto;
position: relative;
}
ikzelf heb er van gemaakt 930px, maar zou dit graag weergeven in em, maar weet niet hoe dit te berekenen. pxtoem.com/
http://reference.sitepoint.com/css/pseudoclass-nthoftype
Het is een heel verhaal maar ik denk dat het echt wel een mooi template is. Weet iemand raad?
Groeten van janyep
Dit is de code. Ik heb de decoratie nog zoveel mogelijk verwerkt in de HTML om in deze fase de css overzichtelijker te houden:
HTML:
<style type="text/css" media="screen">
@media screen and (max-width: 620px) {
body .saila-hdr,
body .saila-col:nth-of-type(n) { /* removes the columns at narrow widths */
position: static;
width: auto;
top: auto;
}
}
body {
max-width: 930px; /* hier stond 75em;*/
margin: 0 auto;
position: relative;
}
header {
display: block;
}
.saila-hdr,
.saila-col {
position: absolute;
width: 78%; /* hier stond 20% in de layout met 3 kolommen */
}
.saila-hdr {
height: 120px;
width: 100%;
}
.saila-col {
top: 120px;
margin-top: 10px;
}
.saila-col:nth-of-type(2) {
width: 21%; /* hier stond 58% in de layout met 3 kolommen */
left: 79%; /* hier stond 21% in de layout met 3 kolommen */
}
.saila-col:nth-of-type(3) {
left: auto;
right: 0;
} /* deze .saila-col:nth-of-type(3) werd gebruikt in de layout met 3 kolommen */
</style>
<style type="text/css" media="screen">
/* This is visual formatting for the demo page only. Delete them and the empty paragraph tags in real use */
body { background-color: rgb(204,204,204); color: rgb(0,0,0); }
.saila-hdr, .saila-col { background-color: rgb(255,255,255);}
</style>
<!--[if lte IE 8]>
<style>
.saila-col + .saila-col {
width: 21%; /* hier stond 58% in de layout met 3 kolommen */
left: 79%; /* hier stond 21% in de layout met 3 kolommen */
}
.saila-col + .saila-col + .saila-col {
left: auto;
right: 0;
width: 20%;
} /* deze .saila-col + .saila-col + .saila-col werd gebruikt in de layout met 3 kolommen */
</style>
<script type="text/javascript">
document.createElement("header");
</script>
<![endif]-->Dit is de HTML:
HTML:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<title>Saila 2-column</title>
</head>
<body>
<header class="saila-hdr" style="background-color:yellow;">
<hgroup>
<h1 style="text-align:center;">Een pakkende titel voor de site.nl</h1>
<h4><span style="float:right; color:blue;">Laatst bijgewerkt: 24-10-2010</span><span style="color:red;">2-Column | Liquid | HTML5 | CSS Layout | met hgroup <H1> en <H4> in header</span></h4>
</hgroup>
</header>
<!-- div class="saila-col" style="background-color:lightgreen;" | dit was de eerste, linker kolom van 3 -->
<div class="saila-col" style="background-color:lightblue;">
<p><span style="float:right;"><img src="http://upload.wikimedia.org/wikipedia/commons/b/bb/Platinum-Iridium_meter_bar.jpg" width="270" height="175" alt="Platinum-Iridium meter bar.jpg" title="Platinum-Iridium meter" /></span>
<b>Bron:</b> <a href="http://saila.com/webdesign/layouts/saila-html5/" target="_blank">saila.com/webdesign/layouts/saila-html5/</A>
<br /><b>Past in bijv. iPhone en Ipad (kolommen verschijnen keurig <span style="text-decoration:underline;">onder</span> elkaar):</b> <a href="http://protofluid.com/" target="_blank">protofluid.com/</a>
<br /><b>Aanpassing: body { max-width: 930px; /* hier stond 75em;*/</b>
<br />"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
<div class="saila-col" style="background-color:wheat;">
<p>N<br />A<br />V<br />.<br />-<br />M<br />E<br />N<br />U</p>
</div>
<footer>
<p title="Site "footer" — unstyled"> </p>
</footer>
</body></html>
Laatst bewerkt:
