Problemer med 100% bredde på to div'er

[mariant]

Hei!

 

Jeg har begynt å test litt CSS - og har litt problemer med å sette 100% bredde på to div'er som er plassert under hverandre.

 

Når jeg legger inn 10px padding-left på den underste div'en - blir den "bredere" enn 100%

 

Her er linken: http://home.no.net/mariant/turer/test_css.html

 

NB! Det er bare en test-side...

 

Her er innholdet i CSS-filen:

 

* {

margin:0px;

padding:0px;

}

 

.logo {

position:absolute;

top:0px;

left:0px;

height:50px;

width:100%;

padding-top:10px;

background-color:#FFCC00;

text-align:center;

font-size:24px;

color:black;

}

 

.navigasjon {

position:absolute;

top:50px;

left:0px;

height:20px;

width:100%;

padding-left:10px;

background-color:#FFCC00;

}

 

.navigasjon a {

text-decoration:none;

color:blue;

}

 

Noen som kan gi meg et tips??

[Garreth]

Nå kan det godt være at jeg tar veldig feil, men jeg liker bedre å bruke

 

.logo{
float:left
} 

Istedet for

.logo {
position:absolute;
top:0px;
left:0px;

 

Prøv å bruk float på elementene dine å se om det hjelper.

[mariant]

Har prøvd å bruke float:left istedet for position:absolute - men den nederste div'en blir fremdels "bredere" enn den øverste.

 

Hvis jeg fjerner padding-left:10px så forsvinner problemet - men det er ikke sånn jeg vil at det skal se ut..

[Garreth]

Igjen er jeg ikke helt sikker, men bør ikke

 

<div class="logo">Maria's hjemmeside</div>

være

 

<div class="logo"><h1>Maria's hjemmeside<h1></div>

 

Men det har kanskje ikke så mye å si. Når jeg møte på slike problemer som det, liker jeg å legge ting inn i containere (får kanskje litt flere div-er enn nødvendig) men det fungerer som oftes

 

 

du kan jo begynne å teste hva en #wrap gjør med siden.

 

<div id="wrap">

din gamle html her

</div>

#wrap {
 width: 100%;
 margin-top: 0px;
 margin-left: auto;
 margin-right: auto;
 margin-bottom:0px;
 text-align: center;
}

 

må sikkert litt fiksing på stylingen, men du skjønner ideen.

[mikk-]

Du trenger ikke å spesifisere 100% bredde! Dette ligger i div's "natur" fra før av. Om du har to div-elementer etter hverandre, vil de automatisk få 100% bredde og komme under hverandre. Om du da legger på padding på den ene, vil de være like brede.

[mariant]

Nå har jeg ikke testet #wrap enda (sitter på en annen pc) - men det er jo ikke i "logo-div'en" som problemet er...

 

Men skal teste når jeg er på min pc igjen. Dvs når lillesøstra mi lar meg få'n igjen

[mariant]

Takk for det Mikka!!

[mikk-]

Takk for det Mikka!!

Np, Maria

 

Mens vi først er i gang:

Du kan ta bort apostrofen i «Maria's Hjemmeside». Norsk rettskriving har ingen apostrof for å markere eiendom, og det holder med «Marias».

[mariant]

Du kan ta bort apostrofen i «Maria's Hjemmeside». Norsk rettskriving har ingen apostrof for å markere eiendom, og det holder med «Marias».

Den er grei..

 

Til mitt forsvar: Jeg har skrevet mye på to andre språk det siste året, så det går litt i surr for meg innimellom

[mikk-]

Ingen fare Eiendomsapostrof på norsk er en veldig vanlig feil.

[pekle]

Nå veit eg ikkje heilt kva du vil oppnå, men boks-modellen til CSS er slik at padding blir lagt til utapå width/height, så dette er slik det skal vere. Om du vil at teksten skal litt inn på sida må du sette padding på eit element innafor div'en, td. linken i seg sjølv.

[mariant]

Om du vil at teksten skal litt inn på sida må du sette padding på eit element innafor div'en, td. linken i seg sjølv.

Aha.. Da skjønner jeg hvorfor det så ut som det gjorde.

 

Har som sagt bare så vidt begynt å snuse på CSS..

[Arve Systad]

Du trenger ikke å spesifisere 100% bredde! Dette ligger i div's "natur" fra før av. Om du har to div-elementer etter hverandre, vil de automatisk få 100% bredde og komme under hverandre. Om du da legger på padding på den ene, vil de være like brede.

Korrekt - faktisk så gjelder dette for alle blokkelementer; dei opptar all ledig plass i bredden med mindre du spesifiserer noke anna i stilarket ditt.

 

Trådstarter:

Fjern absolutt posisjonering og angitt bredde, så får du ønska resultat. Uansett så er det ofte lurare å sette margin på innholdet i en boks enn å sette padding på boksen.