Gå til innhold

CSS hjelp, nok en gang


Anbefalte innlegg

Hei :)

 

Har laget et 100% høyde design, det funker fint i IE og Opera så lenge det ikke blir mer enn en skjerm høyde.

 

Jeg trodde jeg hadde gjort alt dere har lært meg, men tydeligvis ikke. Er ikke lett å gå over fra tables til div :D hehe.

 

Men håper noe kan hjelpe meg.

 

Siden

 

blogg.css:

html, body {
background-color: #83A8AF;
margin: 0px;
padding: 0px;
height: 100%;

}

div#center {
margin-right: auto;
margin-left: auto;
width: 750px;
height: 100%;
}

div#left {
background-image: url(gfx/left-bg.gif);
float: left;
height: 100%;
width: 50px;

}
div#hoved {
background-color: #ECEEEE;
font-family: "Trebuchet MS";
font-size: 12px;
color: #666666;
float: left;
height: 100%;
width: 640px;
padding-right: 5px;
padding-left: 5px;


}
div#right {
background-image: url(gfx/right-bg.gif);
float: left;
height: 100%;
width: 44px;
font-family: "Trebuchet MS";
font-size: 10px;
text-align: right;
vertical-align: top;
padding-right: 3px;
padding-left: 3px;


}
input {
font-family: "Trebuchet MS";
font-size: 10px;
background-color: #FFFFFF;
border: 1px solid #999999;
}

 

På forhånd tusen takk :)

Lenke til kommentar
Videoannonse
Annonse
Jepp, "simuler" kolonner ved hjelp av et bakgrunnsbilde, istede for å lage masse div's istede ;)

 

Og unngå gjerne bruk av height: 100%; - veldig ofte veldig masse komplikasjoner rundt det.

den tok jeg ikke helt :(

 

masse divs? Har bare tre. En som setter alt i senter, en til venstre kollonne, en til hovedtekst(midten) og en til menyen på høyre siden. Veit ikke helt om jeg skjønte hva du mente der.

 

Ikke 100%? Hvordan får jeg da til det jeg ønsker? Mulig jeg misforstår deg her men :) hehe

 

PS: har ikke rukket å lese artiklene enda. :blush:

Lenke til kommentar

min-height: 100%; er det du egentlig skal bruke, men uheldigvis vet ikke IE hva det betyr. Med height: 100%; blir elementene verken høyere eller lavere enn skjermhøyden.

 

En mulig walkaround kan være å plassere en container bakom beholderen teksten står i, eller å ha et bakgrunnsbilde i body som repteres nedover.

Lenke til kommentar
Jepp, "simuler" kolonner ved hjelp av et bakgrunnsbilde, istede for å lage masse div's istede ;)

 

Og unngå gjerne bruk av height: 100%; - veldig ofte veldig masse komplikasjoner rundt det.

den tok jeg ikke helt :(

 

masse divs? Har bare tre. En som setter alt i senter, en til venstre kollonne, en til hovedtekst(midten) og en til menyen på høyre siden. Veit ikke helt om jeg skjønte hva du mente der.

 

Ikke 100%? Hvordan får jeg da til det jeg ønsker? Mulig jeg misforstår deg her men :) hehe

 

PS: har ikke rukket å lese artiklene enda. :blush:

Studer linkane zethyr kom med - der står det grundig forklart ;)

Lenke til kommentar

Da jeg leste det, syns jeg ikke det var overveldende lett å forstå heller, akkurat...

 

Det hele dreier seg om å ha en container-div rundt de kolonnene du vil ha like lange, og lage et bakgrunnsbilde til denne container-diven. Bakgrunnsbildet skal være 1px høy og så mange px bred som sida skal være. (Evt høyere dersom du skal ha inn f.eks skrå-grids) Så tegner du inn ting som f.eks 1px ramme for de andre div-ene du skal ha like lange, og bakgrunnsfarge i disse.

Dette bakgrunnsbildet setter du på repeat-y.

 

Da vil det se ut som den korteste div-en strekker seg like langt som den lange, og alt er bare fryd og gammen!

Endret av NMI on XTC
Lenke til kommentar

Da har jeg nesten fått det til :) Er bare IE som ikke vil strekke seg 100% om det er lite tekst, men det løser jeg kanskje med dobbelt stilsett.

 

Noen som har en løsning på det? En for IE og en for Opera?

 

Tusen takk for all hjelp :) Toppers :w00t:

 

btw: HER er et eksempel på lite tekst om noen lurte.

Endret av Svendsen
Lenke til kommentar
Tror det funker i mozilla også, ser hvertfall slik ut her...

fint :)

 

Men som sagt det er IE som bugger da, selv Gates fan somjeg er så begynner jeg å like Opera mer og mer fremfor IE, selv om enkelte formateringer ser bedre ut i IE, men det er en annen diskusjon.

 

Men takk for tilbakemeldingen angående Mozilla :thumbup:

Lenke til kommentar

Lag et bakgrunnsbilde som har samme fargane som det du vil ha, 1px * (bredden på sida) - og sett det til repeat-y i body,html. På den måten kan du kvitte deg med to divs, og gjøre alt lettare - og garantert få det til å funke i alle browsere ;)

 

edit: samt fjern "height: 100%;"..

*mekke eksempel*

 

http://absentvoid.com/hwno/testytest.htm <= Slik ;)

Endret av arve87
Lenke til kommentar

Arve: Jeg skjønte hva du mente, men det funket ikke helt i mitt tilfelle. Eneste jeg ikke skjønte er hvordan jeg kan klare meg med to mindre divs. Men det med mindre divs er jo samme, siden jeg synes det blir mer oversiktlig slik jeg har gjrt det.

 

Jeg fikk satt inn bg bilde på body, men den ligger litt til høyre for selve siden. Slik at det ikke stemmer.

 

test siden

CSS fil

 

KAnskje noen av dere ser hvorfor, er som sagt i IE.

 

Nok en gang tusen takk for all hjelp :)

 

 

EDIT: Jeg klarte det, med litt triksing. Tok bort en pixel på sentrerings ramma og menyen :D

 

EDIT2: Da ble det feil i Opera :(

Endret av Svendsen
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
×
×
  • Opprett ny...