Koulussa oli tarkotus tehdä pieni css-harjoitus. Tässä harjoituksessa piti tehdä tälläinen html-dokumentti, jossa siis css-tyylit. Kun kerran pelkästään divejä sai käyttää, niin loin tämän tyylisen html-dokumentin:
<html>
<head>
<style>
body {
background-color: gray;
font-family: tahoma;
font-size: 12px;
}
#otsikko, #alapalkki {
background-color: lightgray;
padding: 20px;
font-size: 28px;
font-family: arial;
width: 800px;
}
#tasaaja {
width: 800px;
padding: 20px;
/*height: 345px;*/
}
#teksti {
float: left;
padding: 20px;
padding-top: 0px;
padding-bottom: 0px;
width: 540px;
}
#kuva {
float: right;
width: 200px;
}
</style>
<title>Asemointiharjoitus 1</title>
</head>
<body>
<center>
<div id='otsikko'>
Asemointiharjoitus div-elementtien ja css:n avulla
</div>
<div id='tasaaja'>
<div id='teksti'>
<p>
(...)
</p>
<p>
(...)
</p>
<p>
(...)
</p>
</div>
<img id='kuva' src='(...)' />
</div>
<div id='alapalkki'>
</div>
</center>
</body>
</html>Tuossa koodissa siis on sellainen ongelma, että tuo div "alapalkki" tulee heti tuon tasaajan jälkeen, eli teksti ja kuva tulee sen päälle. Tämän pystyy tietenkin korjaamaan tasaajassa height-määritelmää (kommentoituna), mutta tämähän ei olisi dynaamista, johon itse ainakin pyrin. Toinen vaihtoehto ja helpompikin olisi käyttää tablea tuossa, mutta diveillä piti tehdä... Miten tuon saisi divin saisi toimimaan oikein kun noissa kahdessa elementissä on tuo float-määritelmä. Tässä vielä toivottu tulos ja saatu tulos.
auttaako jos poistat tuosta tasaajasta tuon
height: 345px;
peg kirjoitti:
auttaako jos poistat tuosta tasaajasta tuon
height: 345px;
No siis jos poistan sen niin silloin se juuri menee päin mäntyä :( Kun katsot tuossa tekstissä mainitun toivotun ja saadun tuloksen linkkejä, niin niissä ei ole muuta eroa kuin tuossa saadussa on tuo height jätetty pois.
Käytä muuten ihan oikeita lainausmerkkejä kun kirjoitat HTML:n attribuutteja. Hipsuja käytetään enemminkin JavaScriptissä, PHP:ssa ja CSS:ssä, ne eivät ole osa HTML-koodia vaikka selaimet sen osaavatkin yleensä niellä virheenkäsittelyn kautta oikein.
Toinen seikka on sitten se, että otsikot on hyvä tehdä oikeilla otsikkotageilla. CSS:llä kyllä saa tyylit sitten kohdilleen. Tietty, eri asia jos jostain kumman syystä on pakotettu käyttämään divejä... mutta käyttäisin ihan hyvien tapojen oppimisen vuoksi aina niitä oikeita tageja.
Mutta sitten lopuksi tämmöinen temppu:
#tasaaja {
overflow : hidden;
position : relative;
}Kas kuinka sitten kävikään: #tasaajasta tuli oikeasti sisältönsä mittainen!
Sellainen huomautus, että kannattaa käyttää näissä HTML-dokumenteissa DOCTYPE-ominaisuutta, jottei selain mene siihen quirk-modeen. Sillä on meinaan vaikutusta siihen miten selain tulkitsee noita CSS-juttuja.
Saattaa helpottaa elämää... :)
Aihe on jo aika vanha, joten et voi enää vastata siihen.