Vis/skjul tekst
i venstre kolonne.
Vis/skjul tekst
i højre kolonne.
Dette eksempel er en kombination af favoritlayout 3 og principlayout 7, hvori jeg demonstrerede, hvordan vi kan få det til at se ud, som om spalterne er lige høje.
Ideen er, at vi i stedet for de brede marginer, vi sædvanligvis sætter på den midterste kolonne, sætter marginerne til 0 og i stedet indsætter nogle rammekanter (borders), der er lige så brede som vore marginer var.
Det stylesheet, der skaber effekten på denne side, er for de væsentligste deles vedkommende:
#indhold {
/* Før: margin: 0 170px 0 180px; */
margin:0;
border-width:0 180px 0 200px; /* Ny */
border-style:solid;
border-left-color:#dedede;
border-right-color:#dedede; }
#leftcol {
position:absolute;
left:10px;
top:80px;
width:180px;}
#rightcol {
position:absolute;
right:10px;
top:96px;
width:160px;
}
Disse tre formdeklarationer
#indhold
-elementet#leftcol
-element
oven i den venstre border, 10 pixel til højre for
#page
-elementets venstre kantI et CSS-baseret layout skabes vandrette og lodrette streger af
en tynd border
omkring de de forskellige elementer. Afstanden
mellem noget tekst og en streg skabes sædvanligvis af padding
-egenskaben,
mens stregens afstand til andre elementer sædvanligvis skabes af
margin
-egenskaben.
I dette eksempel må vi imidlertid gå lidt utraditionelt tilværks,
idet de to væsentlige sider af #indhold
-kassen allerede har en border
, nemlig den meget brede border
, der
skaber plads til venstre og højre spalte.
Derfor laver jeg stregerne på højre og venstre side af alt indholdet ved at sætte en border-left
og en border-right
på #page
-elementet. Og derfor er jeg nødt til at fjerne border-left
og border-right
fra #banner
- og #footer
-elementerne.
Stregerne på venstre og højre side af #indhold
-elementet kan laves ved at omslutte indholdet med en “wrapper”, eller en #textcontainer
som jeg kalder den:
#textcontainer { margin:0; border-width: 0 1px; border-style: solid; border-color:black; padding:0 1em; position:relative;}
Når jeg har fjernet padding-left
og padding-right
fra #indhold
-elementet presser teksten #textcontainer
helt ud til siderne. padding-left
og padding-right
på #textcontainer
skaber nu luft mellem teksten og den
border-left
og border-right
, der laver
stregerne.
position:relative
burde være overflødig, men er en
god universalkur for en række dårligdomme i Internet Explorers
CSS-fortolkning, således også her: Hvis jeg ikke havde gjort det,
ville stregerne forsvinde i denne browser.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Hvis du vil se html-kildekoden og stylesheet'et for hele siden, må du bruge browserens Vis kilde funktion.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam bibendum tempor nulla. Sed commodo. Aliquam feugiat lorem nec sem. Nullam consequat tristique libero. Suspendisse id erat. Duis ante sem, laoreet nec, nonummy non, posuere at, sapien. Nam porta. Cras sapien tortor, vehicula at, scelerisque quis, consequat at, enim. Fusce quis tortor. Quisque magna. Proin nunc. Phasellus purus metus, tempus a, lobortis in, mollis sed, erat. Nulla facilisi. Curabitur wisi.
Quisque posuere lobortis turpis. Aenean eu lacus. Donec sed lacus eget dui rhoncus tempor. Pellentesque tellus tortor, mattis non, posuere ac, mattis sed, diam. Maecenas accumsan libero sit amet libero. Sed velit ligula, vulputate sit amet, commodo non, ultrices vel, velit. Donec vitae risus quis erat semper congue. Nunc ornare faucibus enim. Aenean pretium elit nec velit. Phasellus commodo, nibh at vulputate dapibus, nisl quam venenatis sem, quis ornare nunc nulla ut libero. Aenean ipsum. Fusce lacinia congue mauris. Maecenas non libero. Nullam eget enim. Integer iaculis arcu dictum ligula. Ut neque ipsum, vestibulum ut, interdum at, aliquam vel, felis.
Praesent imperdiet volutpat enim. Donec eget lectus. Morbi ornare dui vel eros. Morbi sit amet magna. Proin a tortor et mi iaculis cursus. Vivamus iaculis felis in justo. Donec dolor dolor, mollis et, sodales eget, vestibulum id, sapien. Proin fringilla risus ut lorem. Phasellus quis leo et sem tincidunt ultricies. Etiam dui lorem, gravida ac, volutpat at, mollis eu, wisi. Nam iaculis cursus arcu. Donec cursus, sem quis pulvinar bibendum, est leo sodales felis, sed laoreet lectus nibh at lacus. Sed erat. Aenean volutpat lacus sit amet pede. Duis nibh dui, tempor in, dictum non, ornare ac, ante. Nulla semper eros in justo. Nulla vel mauris.
Suspendisse mi pede, feugiat non, volutpat ut, placerat vitae, urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla a tellus. Quisque dolor nisl, placerat a, mollis ac, dignissim at, turpis. Curabitur wisi enim, commodo sit amet, iaculis et, ullamcorper non, quam. Donec arcu arcu, adipiscing a, tincidunt ut, laoreet non, eros. Proin bibendum gravida nisl. Nullam scelerisque consectetuer magna. Nam interdum risus non tortor. Donec eget sapien. In scelerisque, enim vitae porta vehicula, nibh ipsum elementum ipsum, eget hendrerit urna enim eu libero. Donec ornare lacinia diam. Phasellus venenatis lacus ac nulla. Integer euismod. Praesent nec purus. Mauris eget magna.