Nå gir jeg snart opp og går tilbake tabeller.

bazzo · 10. februar 2005

Nå gir jeg snart opp og bruker tabeller igjen.

Får ikke bg bilde til å fylle hele <div>en

Problemet er at når "div_Innhold" inneholder masse tekst følger ikke bg i "div_Meny_Body" med nedover siden.

Hvordan fikser jeg det ?

Dette er siste forsøk før jeg sverger til tabeller igjen.

index fil:

<body>

<div class="div_Center">

<div class="div_Header"></div>

<div class="div_Meny_Body">

<div class="div_Meny_Head"></div>

<div class="div_Meny">Her kommer menyen</div>

</div>

<div class="div_Body">

<div class="div_Innhold"><?php $xxxx; ?></div>

</div>

<div class="div_Foot_01"></div>

<div class="div_Foot_02"></div>

</div>

</body>

Her er css:

body {

background-color: #A4BA8C;

margin: auto;

text-align: center;

margin: 0px;

padding: 0px;

}

.div_Center {

background-color: #E0D5A7;

margin: 0 auto;

text-align: left;

vertical-align: top;

width: 824px;

}

.div_Header {

background-image: url(../images/header_q50.jpg);

background-repeat: no-repeat;

height: 147px;

width: 824px;

}

.div_Body {

width: 629px;

background-image: url(../images/right_border_bg_q50.jpg);

background-repeat: repeat-y;

background-position: right;

background-color: #E0D5A7;

float: left;

}

.div_Meny_Body {

background-image: url(../images/meny_bg_q50.jpg);

background-repeat: repeat-y;

width: 195px;

float: left;

}

.div_Meny_Head {

background-image: url(../images/meny_head_q50.jpg);

background-repeat: no-repeat;

height: 49px;

width: 195px;

}

.div_Innhold {

width: 590px;

}

.div_Foot_01 {

background-image: url(../images/foot_01_q50.jpg);

background-repeat: no-repeat;

height: 63px;

width: 824px;

float: left;

}

.div_Foot_02 {

background-image: url(../images/foot_02_q50.jpg);

background-repeat: no-repeat;

height: 66px;

width: 824px;

float: left;

}

PoleCat · 10. februar 2005

Vanskelig å si hva du ønsker å oppnå ut fra bare koden, for meg iallefall.

Har du en lenke?

Jesper Karsrud · 10. februar 2005

For meg virker det som det du leter etter er Faux Columns. Du kan også søke etter dette her på forumet, så vil du nok få opp en del treff, det er spørsmål om dette mange ganger om dagen her inne.

kroekkete · 10. februar 2005

Denne er fra tidligere i dag...

Hvordan la en div få variabel høyde? [LØST]

Mvh Primaxx

bazzo · 10. februar 2005

Aha, da tror jeg at jeg forstår litt mer...

Det fungerte perfekt i IE, men ikke i Firefox.

La inn bg på div'en rundt designet, og det fungerte bra i IE men ikke i Firefox.

.div_Center {

background-image: url(../images/meny_bg_q50.jpg);

background-repeat: repeat-y;

background-color: #E0D5A7;

margin: 0 auto;

text-align: left;

vertical-align: top;

width: 824px;

}

kroekkete · 10. februar 2005

Hva skar seg?

mohuhau · 10. februar 2005

Elementer som flyter skal flyte utforbi foreldreelementet, dette gjør at center diven din ikke er så høy som du regner med at den skal være.

Legg til clear: both; på den nederste diven så blir det nok bedre.

bazzo · 10. februar 2005

Da er jeg nesten i mål :w00t:

Her er hva jeg gjorde.

Index.php

<body>

<div class="div_Center">

<div class="div_MenyBG"> 

<div class="div_Header"></div>

<div class="div_BodyBG"> 

<div class="div_Meny_Head"></div>

<div class="div_Meny">menyen kommer her</div>

<div class="div_Innhold"> innholdet skrives her</div>

<div class="div_Foot_01"></div>

<div class="div_Foot_02"></div>

</div> 

</div> 

</div> 

</body>

main.css der jeg la inn "div_BodyBG" og "div_MenyBG"

body {

background-color: #A4BA8C;

margin: auto;

text-align: center;

margin: 0px;

padding: 0px;

}

.div_Center {

margin: 0 auto;

text-align: left;

vertical-align: top;

width: 824px;

}

.div_BodyBG {

width: 824px;

background-image: url(../images/right_border_bg_q50.jpg);

background-repeat: repeat-y;

background-position: right;

float: left;

}

.div_MenyBG {

background-image: url(../images/meny_bg_q50.jpg);

background-repeat: repeat-y;

background-color: #E0D5A7;

float: left;

}

.div_Header {

background-image: url(../images/header_q50.jpg);

background-repeat: no-repeat;

height: 147px;

width: 824px;

}

.div_Meny_Head {

background-image: url(../images/meny_head_q50.jpg);

background-repeat: no-repeat;

height: 49px;

width: 195px;

}

.div_Meny {

width: 195px;

float: left;

}

.div_Innhold {

width: 590px;

float: left;

}

.div_Foot_01 {

background-image: url(../images/foot_01_q50.jpg);

background-repeat: no-repeat;

height: 63px;

width: 824px;

float: left;

}

.div_Foot_02 {

background-image: url(../images/foot_02_q50.jpg);

background-repeat: no-repeat;

height: 66px;

width: 824px;

float: left;

}

Men problemet nu er at teksten i innholdet ikke legger seg helt i toppen...?

bazzo · 10. februar 2005

Og det fikset jeg med at jeg:

Fjernet disse:

main.css

.div_Meny_Head {

background-image: url(../images/meny_head_q50.jpg);

background-repeat: no-repeat;

height: 49px;

width: 195px;

}

index.php

<div class="div_Meny_Head"></div>

Og endret denne:

.div_Meny {

background-image: url(../images/meny_head_q50.jpg);

background-repeat: no-repeat;

padding-top: 50px;

width: 195px;

float: left;

}

Supert, tusen takk for all hjelp :thumbup:

mohuhau · 10. februar 2005

Men problemet nu er at teksten i innholdet ikke legger seg helt i toppen...?

Det blir så veldig mye enklere for oss å forstå hva du mener dersom du hadde lagt opp eksempelet på web. Nå må vi gjette oss til hvordan siden ser ut og hva som er galt...

Logg inn

Nå gir jeg snart opp og går tilbake tabeller.

Anbefalte innlegg

bazzo

Lenke til kommentar

Videoannonse

PoleCat

Lenke til kommentar

Jesper Karsrud

Lenke til kommentar

kroekkete

Lenke til kommentar

bazzo

Lenke til kommentar

kroekkete

Lenke til kommentar

mohuhau

Lenke til kommentar

bazzo

Lenke til kommentar

bazzo

Lenke til kommentar

mohuhau

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer