Olen tässä rakennellut ulokoasua sivulleni.
Muuten kaikki toimii, kuten pitäisi, mutta ylä- ja alapalkkien välisellä alueella, jolle varsinainen asia tulee, paistaa sivun taustakuva läpi, vaikka koodissa on wrapin taustaksi säädetty valkoinen. Missä vika?
Tässä koodit.
HTML
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>otsikko</title> <link rel="stylesheet" href="tyyli.css" type="text/css" /> </head> <body> <div id="yla"></div> <div id="valikko"> <ul> <li><a href="default.asp">Linkki 1</a></li> <li><a href="news.asp">Linkki 2</a></li> <li><a href="contact.asp">Linkki 3</a></li> <li><a href="contact.asp">Linkki 4</a></li> <li><a href="contact.asp">Linkki 5</a></li> </ul> </div> <div id="wrap"> <div id="sarake">asiateksti</div> <div id="sivuvalikko">linkit</div> </div> <div id="ala">alapalkki</div> </body> </html>
CSS
body {
font-family: verdana, helvetica, sans-serif;
font-size:90%;
line-height:140%;
margin: 0;
padding: 0;
color:#000;
background-image: url(kokotausta.png);
background-repeat: repeat-x repeat-y;´
}
#wrap {
width:1000px;
margin-left: auto;
margin-right: auto;
background:#FFFFFF;
}
#yla {
background-image: url(ylapalkki.png);
padding: 0 0 0 0px;
width: 100%;
height: 160px;
}
#ala {
background-image: url(alapalkki.png);
padding: 0 0 0 0px;
width: 100%;
height: 160px;
clear: both;
}
#valikko {
position: center;
margin: -60px auto;
background: #FFFFFF url(valikkopalkki.png) repeat-x;
font: bold 25px/60px Arial, Helvetica, Sans-serif;
top: 100px;
height: 60px;
width: 1000px;
}
#valikko ul {
float: left;
list-style: none;
margin:0; padding: 0 0 0 0;
}
#valikko ul li {
display: inline;
}
#valikko ul li a {
display: block;
float: left;
padding: 0 12px;
color: #FFFFFF;
text-decoration: none;
}
#valikko ul li a:hover {
color: #33CCFF;
background: #FFFFFF;
text-decoration: underline;
}
#sivuvalikko {
background-color: FFFFFF;
top: 60px;
float:left;
width:250;
}
#sarake {
background-color: FFFFFF;
float:right;
width:750px;
clear: both;
}
#wrap a, a:visited {
color: #326ea1;
background: inherit;
text-decoration: none;
}
#wrap a:hover {
color: #383d44;
background: inherit;
padding-bottom: 0;
border-bottom: 2px solid #dbd5c5;
}Floatatut elementit eivät ole osa parentin ns. content flow'ta eli niitä ei huomioida parentin kokoa laskettaessa. Tämän takia #wrap:n korkeus on nolla. Itse en floattausta käytä kovin hanakasti, koska siitä tulee juuri tällaisia ongelmia.
Laittaisin nuo divit #sarake ja #sivuvalikko vaikka inline-blockeiksi.
P.S. Heitä se Notepadi mehtään ja vaihda kunnon tekstieditoriin, joka osaa sisentääkin. Koodin luettavuus on erittäin tärkeä aspekti, josta valitettavasti suurin osa koodareista ei ymmärrä mitään.
(Mod. poisti alta turhaa väittelyä sopivasta tekstieditorista.)
Voit antaa #wrap tyyliksi vaikka overflow: hidden; ja sitten siitä tulee samankorkuinen. Tämä tosin estää sijoittamasta mitään #wrapin sisäistä sisältöä #wrapin ulkopuolelle, koska se vain katoaa.
Toinen vähempiongelmainen vaihtoehto on luoda nollakorkeuksinen pseudoelementti, joka sijoittaa itsensä kellutettujen elementtien jälkeen:
#wrap:after {
clear: both;
content: '';
display: block;
}Näin #wrap kasvaa täyteen mittaan kellutettujen elementtien korkeuden mukaan.
Vielä yksi vaihtoehto on tietysti jättää toinen elementti kelluttamatta kokonaan:
<div id="sivuvalikko">linkit</div> <div id="sarake">asiateksti</div>
#sivuvalikko {
background-color: #FFFFFF;
top: 60px;
float: left;
width: 250px;
}
#sarake {
background-color: #FFFFFF;
margin-left: 255px;
width: 750px;
}Tähän voi kylläkin yhdistää vielä tuon pseudoelementin tai overflow: hidden; -kikan, jolloin jos #sivuvalikko menee matalammalle kuin #sarake, niin tämä huomioituu #wrap:n korkeudessa.
Aihe on jo aika vanha, joten et voi enää vastata siihen.