Få høgda på sida til å tilpasse seg innhaldet

[Bozzeye]

Eg koder på sida mi, og kjem til å skrive ein del ting på den. Problemet er at når innhaldet på sida blir lengre enn wrapperen (div'en alt er inni), så blir footeren forskjøvet heilt til venstre og innhaldet går nedforbi wrapperen.

Det eg lurer på er korleis eg kan få sida til å bli minimum så og så lang og når innhaldet blir lengre enn det så blir wrapperen lengre. Altså tilpassa innhaldet, slik at innhaldet blir innanfor wrapperen. Eit anna problem er at når innhaldet kjem ned til footeren så blir den forskjøvet. Footeren er ikkje innanfor wrapperen.

 

Nokon som veit kva eg skal gjere?

[Haraldson]

Hvorfor ikke en link til eksempelet?

 

Uansett, du har alltid min-height-egenskapen i CSS. IE6 tolker height som min-height, så du kan sende inn _height: XXpx; til IE6 for eksempel. Slik vil container-diven din alltid ha en viss høyde, og utvide seg om mer innhold.

 

Når det gjelder footeren kan du sette body til position: relative; og posisjonere footeren absolutt i bunn og i midten, og sette padding-bottom på containeren tilsvarende høyden av footeren. Da har du i alle fall fått noen hint.

[Bozzeye]

Når det gjelder footeren kan du sette body til position: relative; og posisjonere footeren absolutt i bunn og i midten, og sette padding-bottom på containeren tilsvarende høyden av footeren. Da har du i alle fall fått noen hint.

Eg har aldri vert borti position, så korleis gjer eg dette? Har satt body til position: relative; og padding-bottom.

[Bozzeye]

Klarte å få footeren plassert i midten med position: absolute; left: 50%; margin-left: 400px; (sida er 800px breid).

 

Men footeren går over wrapperen, kva skal/kan eg gjere med det?

 

Edit: Skrivefeil.

Endret 29. oktober 2007 av überSviker

[Stian Jacobsen]

fjern absolute, bruk

width: 800px;

margin: 0 auto;

text-align: left;

 

Så legger du til text-align: left; i wrapper og text-align: center; i body (IE fix)

[Bozzeye]

Og korleis kan text-align: left; hindre wrapperen i å leggje seg over footeren, om eg tør spørre?

[Haraldson]

Stian: Det skader ikke å lese hva han ønsker å oppnå.

Vi sliter ikke med å midtstille

 

At footeren går over wrapperen kan du vel ikke unngå, med mindre du setter margin-bottom på wrapperen tilsvarende høyden av footeren.

[Bozzeye]

Innhaldet (der eg skriv diverse ting) blir lengre enn wrapperen, sjølv om wrapperen har min-height. Har to div'ar på sida av kvarandre i wrapperen. Kan også nemne at sida ikkje går heilt ned i kanten. Fekk det ikkje til i starten, så eg har ikkje giddet å prøvd meir på å få det.

[pvp]

Bruk float og ikke definer høyde (høyden vil da tilpasse seg i alle nettlesere).

På footeren din setter du style/CSS:

 

.myContainer {

float:left;

margin-left:20px;

}

 

Dette sørger for at footer ikke forskyves:

.myFooter {

clear:both;

}

 

Har du meny til venstre definerer du bare en float for den og plasser div'en dens før div'en for innholdet ditt. Du lager mellomrom med margin (utsiden av div) og evt. padding (innsiden).

Endret 30. oktober 2007 av pvp

[Haraldson]

pvp: Leste du delen om at han ikke ville at footer skulle bli forskjøvet av innholdet? clear: both; sørger bare for at footer ligger i bunnen, men den forskyves fortsatt.

[Stian Jacobsen]

Skjønner ikke hva som er så vanskelig med å bruke google om man ikke forstår html/css?

1 søk på google fikk opp følgende

http://www.xs4all.nl/~peterned/examples/csslayout1.html

[Bozzeye]

Har sett på den sida, og prøvd og testa/endra for å prøve om eg får det til, men dessverre får eg det ikkje til.

 

Eg har padding på #content (innhaldet) lik høgda på footeren, men footeren går ikkje heilt ned, som #content gjer. Det funker i IE, men ikkje Opera.

 

Stian Jacobsen: Eg kan HTML og CSS, det er bare det at eg ikkje kan dette som eg prøver på no.

[AnaXyd]

Jeg har ihvertfall lært at å bruke position blir bare tull. Bruk float og padding!

[Haraldson]

Ja, du må nok ha litt peiling for å bruke position...

[Bozzeye]

Korleis kan eg bruke float for å plassere footeren i botnen?

 

Har kanskje nesten fått det til. #content er ca 1000(/1024?) px høg om eg har 100% height eller min-height mindre enn 1000px, men om eg har meir enn 1000px på min-height blir #content lengre.

[AnaXyd]

Footer må ligge nederst i koden din. Link til siden din, eller koden?

Endret 4. november 2007 av AnaXyd

[Haraldson]

Har slettet to innlegg som var OT.

 

Om trådstarter kan HTML og CSS eller ei har ingenting med saken å gjøre, og er totalt uinteressant. Hjelp kan han få enten han kan det eller ei.

 

 

Ovenpå-holdningene kan man ta med seg til et elitist-forum om man finner et, og man mener man er god nok til å bli medlem.

[Bozzeye]

Footer må ligge nederst i koden din. Link til siden din, eller koden?

Link til sida: http://thesvikersite.frac.dk/index3.php

Stilarket/Stylesheet'en: http://thesvikersite.frac.dk/stilark3.css

 

Footer liggjer nederst i #container, og er ikkje inni #content.

 

Edit: Om du ser sida i Firefox kan det vere den ikkje ser bra ut. Har kun testa/sett i Opera, men skal fikse så det blir betre i Firefox og IE, men tar det etter eg har fiksa dette.

Endret 4. november 2007 av überSviker

[AnaXyd]

Skal vi se her...

 

For det første, det er feil å bruke <h2> så mye som du gjør. Er det ikke?

 

Samme det, jeg får prøve å hjelpe deg litt med footer..

 

 

Om du ser på css'n til footeren din:

div#footer {
background-color: white;
width: 100%; [b]<-- Bruk bestemte bredder, eller auto hvis den skal tilpasse seg en annen container den står i[/b]
margin: 0 auto;
margin-left: -400px;
border-top: 1px dotted black;
padding-bottom: 20px;
position: absolute; [b]<-- Fy,fy! Fjern denne med en gang[/b]
left: 50%; [b]<-- Hva er denne til?[/b]
bottom: 0;
}

 

Det er mye man kan luke vekk der. Om du ser på footeren på en hjemmeside jeg har kodet, så er css'n slik:

 

div#footer {
float: left;
width: 900px;
height: 53px;
background: url(images/footer.png);
}

div#footertxt {
padding: 14px;  <-- Dette er for å få tekst midtstilt i footeren
}

 

Og slik ser html'n ut da:

<div id="footer">
<div id="footertxt">
<p align="center"><span class="style1">Design og kode av Per | <a href="kontakt.php">Kontakt</a> | <a href="om_oss.php">Om oss</a></span></p>
</div>
</div>

 

Håper dette klarer opp litt..

Endret 4. november 2007 av AnaXyd

[Bozzeye]

Kva skal eg bruke i staden for <h2>? <h3> kanskje?

 

Problemet no er at den kvite bakgrunnen ikkje går frå toppen til botnen. Det er eit gjennomsiktig mellomrom. Kva kan eg gjere med dette?