css layout drit

[Stressed_out]

Heisann,

 

Holder på å mekke denne sida her http://pgrim.centelia.net med min begrensa css kunnskap, men dog..

 

Greia er at i IE6 er div'en som holder teksten til venstre og div'en til høyre som holder linksa ved siden av hverandre, flott. Men i FF hopper høyre div nedenfor venstre, og alt ser drit ut. Hva er det som skjer??

 

Hvis noen kan hjelpe meg blir jeg glad

 

css koden:

Klikk for å se/fjerne innholdet nedenfor

<style type="text/css">

<!--

 

body {

background-image: url(images/wp_damask_228.gif);

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

#main {

background-color: #FFFFFF;

width: 620px;

margin-right: auto;

margin-left: auto;

position: relative;

height: 620px;

border: thin solid #000000;

z-index: 1;

margin-top: 50px;

min-height:100%;

}

#content_left {

width: 305px;

float: left;

padding-top: 20px;

padding-left: 30px;

padding-right: 20px;

height: 470px;

}

#nye_bilder {

height: 266px;

background-color: #f9f2f6;

text-align: center;

padding-top: 30px;

}

.overskrift {

color: #a02967;

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

font-weight: bold;

}

.avsnitt {

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

color: #000000;

}

.link_spacer {

padding-top: 1px;

padding-bottom: 1px;

}

#content_right {

float: right;

height: 495px;

}

#left {

height: 39px;

width: 620px;

background-color: #511735;

float: left;

}

#main #header {

background-color: #FFFFFF;

padding: 25px;

}

-->

</style>

Endret 20. januar 2007 av Stressed_out

[Drømmemannen]

Du trenger en clearfix etter content_left og content_right. Altså en slik en:

 

<div style="clear:both"></div>

Da vil main alltid legge seg rundt alle floats den inneholder. Et element som er float er ikke begrenset av kontainerens størrelse. Et element som er clear:both vil alltid legge seg under alle floats. Hvis denne selv ikke er float vil den trekke kontaineren ut slik at kontaineren vil inneholde den, og da også automatisk inneholde alle floats.

 

Altså:

...
<div id="main">
 ...
 <div id="content_left">
   ...
 </div>
 <div id="content_right">
   ...
 </div>
 <div style="clear:both"></div>
</div>
...

Endret 20. januar 2007 av balletryne

[Stressed_out]

Takk for hjelpa, men det hjalp ikke. Ingen forskjell

[Drømmemannen]

Det kan kanskje hjelpe å ikke definere høyden på alt, men la det bli litt mer flytende.

[Stressed_out]

Det kan kanskje hjelpe å ikke definere høyden på alt, men la det bli litt mer flytende.

7761562[/snapback]

 

Thx, skal prøve på det.

[Stressed_out]

Mener du da bare content left og right? Eller hele skiten?

[Drømmemannen]

Da mener jeg å fjerne height og min-height i #main, height i #content_left, #content_right og #nye_bilder. Ingen grunn til at ikke innholdet skal få bestemme hvor mye plass det trenger.

 

I tillegg tror jeg du skal kunne fjerne width og float:left i #left. Blokkelementer vil automatisk legge seg under hverandre og bruke maksimal bredde, med mindre noe annet er angitt.

Endret 20. januar 2007 av balletryne

[Patience]

Emnetittelen i denne tråden er ikke god nok, om ikke dette blir endret slik at det er lettere å forstå hva slags informasjon tråden omhandler vil denne bli stengt! En god emnetittel er en tittel som forklarer godt hva innholdet i posten din går ut på. En bruker bør kunne skaffe seg oversikt over hovedinnholdet i posten bare ut fra å lese tittelen. Vennligst forsøk å ha dette i tankene neste gang du starter en tråd, og orienter deg om hva vår nettikette sier om dårlig bruk av emnetitler.

 

Bruk -knappen i første post for å endre emnetittelen.

 

(Dette innlegget vil bli fjernet ved endring av emnetittel. Vennligst ikke kommenter dette innlegget, men rapporter gjerne dette innlegget når tittelen er endret, så vil det bli fjernet.)

[maxM]

Hvis du bruker "layers" i sidendin kand et være grunnen. Layers oppfører seg forskjellig i noen netlesere pga. nettlesere ikke leser html koder 100% likt.

Det er en kode som fikser dette men den har ikke jeg.

Er ingen ekspert på CSS selv så kan ikke hjelpe deg med det tor jeg

[attach]

Unnskyld meg, men det er ikke mye hjelp i deg hvis du i flere tråder råder folk til å bruke tabeller istedet for layers. Spesielt ikke med tanke på at du selv sier du ikke har særlig greie på CSS.

 

Layers har en tendens til å oppføre seg forskjellig i forskjellige nettlesere noen ganger. Så personlig vil jeg annbefale å sette opp sida til i tables (tabeller). Da kan du skrive direkte inn i di forskjellige delene av tabellen og det oppfører seg likt over alt.

7986000[/snapback]

Endret 20. februar 2007 av attach

[Runar]

Hvis du bruker "layers" i sidendin kand et være grunnen. Layers oppfører seg forskjellig i noen netlesere pga. nettlesere ikke leser html koder 100% likt.

Det er en kode som fikser dette men den har ikke jeg.

Er ingen ekspert på CSS selv så kan ikke hjelpe deg med det tor jeg

7983003[/snapback]

Hold deg i OT-baren du (ikke ment som et personangrep)

 

Du bør ikke uttale deg om ting du absolutt ikke har greie på. Ihvertfall ikke i den kategorien det gjelder.

[Patience]

*** Brukeren har ikke etterkommet advarselen, tråden stenges! ***