Moikka!
Olen tekemässä div+css -leiskaa. Tässä on karkea kuva leiskan alaosasta. Kuvassa kohdan A pitää venyä sisällön määrän kasvaessa - tässä ei ole ongelmaa. Kohta B on footer, joka on divin A sisällä. Kohta C on sivun alalaitaan tuleva viiva, joka sekin on divi.
Ja ongelmaan: Jos sivulla ei ole sisältöä riittävästi, kohtien B ja C väliin jää rako. Jos laitan A-diville minimikorkeuden, näkyy se yhdellä näyttökoolla oikein - pienemmillä näytöillä täytyy scrollata alas nähdäkseen footerin ja suuremmilla näytöillä tulee taas ruma rako kohtien B ja C väliin. Mitä teen?
Et antanut koodia, joten tässä on jotain mikä on todennäköisesti aivan totaalisen erilainen siihen nähden mitä olet jo tehnyt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#dokumentti {
width : 100%;
}
#vasen,#oikea {
background : #EEE;
float : left;
height : 500px;
padding : 5px;
position : relative;
width : 140px;
z-index : 1;
}
#oikea {
float : right;
}
#sisalto {
margin : 0 150px;
padding : 10px 10px 160px 10px;
}
#footer {
border-bottom : 10px solid #AAA;
border-top : 1px solid #AAA;
clear : both;
line-height : 150px;
margin : 0;
padding : 0;
position : relative;
text-align : center;
top : -151px;
z-index : 0;
}
</style>
</head>
<body>
<div id="dokumentti">
<div id="vasen"><p>... Vasen ...</p></div>
<div id="oikea"><p>... Oikea ...</p></div>
<div id="sisalto">
<h2>... Sisältö ...</h2>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<p id="footer">... Footer ...</p>
</div>
</body>
</html>Muuta kohdasta #vasen,#oikea korkeuden arvoa, ja huomaat että se pelittänee juuri niin kuin haluat. Ehkä.
Vasen ja oikea kuvassa ovat siis sivun taustaa, niissä ei ole mitään divejä.
Nyt on operalla ja FF:llä kunnossa. IE:llä taas - yllätys yllätys - ei. Tartteis vielä saada alapalkki pysymään ihan pikselilleen kiinni alareunassa, ja pysyvän myös siellä vaikka tekstiä olisi sivulla metrikaupalla. Positioneja on kokeiltu relativee, absolutee, fixediä... laiteltu bottomit nollille jne. mutta ei vaan suostu menemään sinne. Miten onnistuis?
Pistä jotain koodia, jotta on mahdollista nähdä missä virhe on. On vaikea auttaa kun ei näe missä ongelma on, varsinkin kun kuvauksesi perusteella leiska vaikuttaa hyvin yksinkertaiselta - itseasiassa en vielä ole hoksannut, miksi B:n pitää olla A:n sisällä.
B ei ole enään A:n sisällä.
Koodi menee footerin ja alaviivan osalta näin:
<div class="bottom">
<div class="footer">
<div class="footertext">
Footerteksti
</div>
</div>
<div class="bottombar"></div>
</div>div.bottom {
position: fixed;
float: bottom;
bottom: 0;
height: 40px;
z-index: 5;
}
div.bottombar {
z-index: 2;
position:fixed;
bottom:0;
left:0;
float: left;
width: 100%;
height: 8px;
background-image: url(bar.jpg);
}
div.footer{
position: fixed;
width: 707px;
height: 35px;
background-color: #eff0f4;
z-index: 4;
bottom: 8px;
left: 221px;
}
div.footertext{
float: left;
width: 707px;
height: 35px;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
color: #000000;
margin: 4px 0 0 8px;
}Bottomilla yritin vetää molemmat divit sivun alareunaan, mutta ei onnistu.
Yksinkertaistetaan asioita, ylimääräiset elementit pois sekoittamasta asioita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
html,body { height : 100%; margin : 0; padding : 0; }
#dokumentti {
border : 1px solid red;
margin : 0 auto;
min-height : 99%;
position : relative;
width : 707px;
}
#sisalto {
margin : 0;
padding : 10px 10px 50px 10px;
}
#footer {
background : #eff0f4 url('bar.jpg') repeat-x 0% 100%;
bottom : 0;
color : #000;
font : normal 10px 'Verdana', 'Arial', 'Helvetica', sans-serif;
height : 48px;
left : 0;
position : absolute;
width : 100%;
}
#footer p {
margin : 0;
padding : 4px;
}
</style>
</head>
<body>
<div id="dokumentti">
<div id="sisalto">
<h2>... Sisältö ...</h2>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div id="footer">
<p>Footerteksti</p>
</div>
</div>
</body>
</html>Tutustu myös CSS Property Indexiin.
Laitoin tuon html,bodyn 100% säännön vain sen takia, että voit katsoa miten se reagoi isännöivän elementin venyessä. Olennaisia asioita ovat mm. position: relative; vaikutus position: absolute; -elementin sijoitteluun.
Kohdan B kuuluu olla vain sisältöosan verran leveä ja kohdan C koko sivun verran. Tossa molemmat on yhtä leveitä, kuin sisältöosa... Molempien pitää myös pysyä kokoajan sivun alareunassa riippumatta siitä, onko yläpuolella sisältöä vai ei.
Aseta #footer 100% ja rajoita #footer p leveyttä. Jos taustaväri pitää siirtää niin se on helppo homma muuttaa. Tarkista korkeusmitat, että ne menevät summatessa yhteen oikein (huomioi ainakin padding ja height). position: fixed; tulee tietty käyttöön #footeriin.
#footer {
position: fixed;
background : url('bar.jpg') repeat-x 0% 100%;
bottom : 0;
height : 48px;
left : 0;
width : 100%;
}
#footer p {
position: absolute;
background : #eff0f4;
with: 707px;
}Firefox näyttää taas ihan oikein, mutta IE näyttää noi molemmat ihan sivun ylälaidassa. Yritetty taas vaikka mitä, en saa noita alalaitaan. :/
Mikä versio IE:stä? IE6 ei tue position: fixed; joten vaihtoehdoksi jää korjata se ehdollisilla kommenteilla syöttäen vain IE:ssä toimivaa koodia tai sitten käyttää vaikkapa Dean Edwardsin IE7.js -kirjastoa, joka korjaa jo kirjoitetun CSS:n automaattisesti semmoiseen muotoon jota IE6 ymmärtää, nostaen CSS-tuen IE7:n tasolle.
Ton pitäis toimia kaikilla selaimilla, eli myös IE6:lla. Mulla itellä on käytössä kutosversio.
Koitin tuota IE7.js:ää, mutta se teki sivun vasempaan reunaan muutaman pikselin tyhjän raon. Miten muuten toi onnistuis? Millasta koodia käyttämällä?
<!--[if lt IE 7]><style type="text/css">
#footer {
position : absolute;
top : expression((eval(document.compatMode && document.compatMode == 'CSS1Compat') ? documentElement.scrollTop + documentElement.clientHeight : document.body.scrollTop + document.body.clientHeight) - this.clientHeight);
}
</style><![endif]-->Toi pätkä venyttää sivua loputtomiin, samalla tavalla, ku excelissä. Tyhjää riitttää niin kauan kun vaan scrollailee...
Silloin siinä on laskuvirhe, siihen voi kokeilla offsetHeightiä tai määrittää käsipelillä tuon vähennettävän summan, eli korvaa this.clientHeight vaikka luvulla 100 ja katsoo mitä tapahtuu.
Tämän olisi tietty voinut korjata myös toimimaan oikein IE7.js:llä, mutta se olisi vaatinut koko sivun koodin ja CSS:n, että ongelman olisi voinut paikantaa.
Koitan muutella tuota lukua.
Toi IE7.js teki tyhjän muutaman pikselin leveän alueen sivun vasempaan reunaan. En voi täällä antaa sivun osoitetta, mutta laitoin sulle profiilissa olevaan sähköpostiin.
Sinulta puuttuu sivun alusta DOCTYPE, joten IE:t putoavat quirks modeen, mikä aiheuttaa ylimääräisiä ongelmia (ja siksi sinulla näyttäisi olevan aikamoinen määrä korjauksia IE:lle).
Pienen pätkimisen saanet pois lisäämällä seuraavanlaisen pätkän vielä tuohon samaan korjaukseen:
html { background : url('\') no-repeat fixed; }IE7.js tekisi myös PNG-korjauksia, mutta ehkä parempi nyt toimia tuon expressionin varassa suoraan kun sivu on muutenkin toteutettu runsain erillisten IE-korjauksien avuin.
Muoks!
Vetäise myös validaattorista lävitse, koodissa on joitakin pieniä virheitä.
Lisäsin tuon pätkän.
Ei meinaa onnistua, doctypen lisäämisen jälkeen en saa IE6:lla sisältöosaa enään oikeaan kohtaan. Jostain syystä se menee ympärillä olevan divin oikeaan reunaan, kun pitäisi mennä vasempaan.
Alhaalla leveä taustakuva näköjään venyttää sivua. Saako taustakuvaa niin, ettei se venytä sivua vaan osa siitä jää kokonaan sivun ulkopuolelle?
Noniin, enään yksi ongelma: Divillä on leveä taustakuva, että se ei lopu kesken isommilla näytöillä. Pienemmillä näytöillä taustakuva kuitenkin venyttää sivua sivuttaissuunnassa. Miten saan tehtyä niin, että se ei venytä sivua, vaan ylimääräinen osa taustakuvasta jää kokonaan sivun ulkopuolelle?
Kiitoksia paljon auttamisestasi!
Mua kiinnostais, miten oot yleensä saanu *taustakuvan* venyttämään elementtiä, jolle se on asetettu :)
Näin:
#footer{
width: 100%;
height: 38px;
bottom: 0;
z-index: 8;
padding: 0 0 0 0;
}
#footer p {
background-image:url(footerbackground.jpg);
width: 100%;
height: 38px;
z-index: 4;
padding: 0 0 0 230px;
}
<div id="footer">
<p>
Footerteksti
</p>
</div>Venyy siis IE6:lla. Huomasinpa just ton 100% ja sehän sitä venyttikin, taustakuvan verran. :D Eli ei enään mitään, kiitoksia paljon auttamisista. :)
Aihe on jo aika vanha, joten et voi enää vastata siihen.