---

Ja, så er han der igen...

Jeg kan simpelthen ikke få min hvide <div> med tekstindhold til
at fylde hele højden - nogen der har et bud?

http://www.poda.dk/jeanjensen/test03/index.html

\ Kapunen

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Jean Jensen wrote in dk.edb.internet.webdesign.html:
> Ja, så er han der igen...
>
> Jeg kan simpelthen ikke få min hvide <div> med tekstindhold til
> at fylde hele højden - nogen der har et bud?
>
Hvad har du angivet i dit css?

hvis du vil have et div til at fylde hele det område du ønsker,
må du angivew højde og bredde i dit css. Det er ikke nok f.eks.
at angive 100%, så følger det indholdets/tekstens/billede
størrelse.

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

tage jørgensen wrote in dk.edb.internet.webdesign.html:
>
>
> hvis du vil have et div til at fylde hele det område du ønsker,
> må du angivew højde og bredde i dit css. Det er ikke nok f.eks.
> at angive 100%, så følger det indholdets/tekstens/billede
> størrelse.
>
>
Men når nu indholdet af denne div ændres i takt med hvilket link man
lader sig navigere hen til, og siderne på ingen måde indeholder den
samme mængde tekst/billeder, så ændres højden jo gangske naturligt.

Jeg ønsker at den sorte kant altid når ned til min "footer".

Nogle sider er mendre end den grå søjle i venstre side - andre er
højere...



--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Jean Jensen wrote:

> Nogle sider er mendre end den grå søjle i venstre side - andre er
> højere...

Måske kan du bruge dette:
http://www.webdesign101.dk/csslayout/ex/favorit_4.html

--
Med venlig hilsen
Lisbet

---

Lisbet Laursen wrote in dk.edb.internet.webdesign.html:
>
>
> Måske kan du bruge dette:
> http://www.webdesign101.dk/csslayout/ex/favorit_4.html
>
>
Den giver mig desværre ikke den fleksible højde på min <div>...



--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Lisbet Laursen skrev:
> Jean Jensen wrote:
>
>> Nogle sider er mendre end den grå søjle i venstre side - andre er
>> højere...
>
> Måske kan du bruge dette:
> http://www.webdesign101.dk/csslayout/ex/favorit_4.html
>


http://webdesign101.dk/layout/eksempel6.php

er måske er bedre eksempel.

Til Jean vil jeg side, at du aldrig nogensinde
kan få to spalter ved siden af hinanden til at være
lige høje. Det du kan gøre, som ovenstående link
er et eksempel på, er at du kan få to (eller flere)
spalter til at *se lige høje ud*.

Og det der det, der sker i ovenstående eksempel.



--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

Jean Jensen wrote in dk.edb.internet.webdesign.html:
> Ja, så er han der igen...
>
> Jeg kan simpelthen ikke få min hvide <div> med tekstindhold til
> at fylde hele højden - nogen der har et bud?
>
> http://www.poda.dk/jeanjensen/test03/index.html
>
> \ Kapunen

Jeg har et bud... med få lov :)

Du sidder med nøjagtig det samme problem som tidligere gav mig
grå hår og hovedbrud - men i virkeligheden er det slet ikke så
svært - du skal bare liiiige vide et par enkle ting :)

Det første du skal vide er, at for at "height:100%;" på noget
element får en betydning for browseren kræver det at du vedhæfter
nøjagtig den samme værdi på enten dit html-tag, eller body tag
(selv foretrækker jeg at sætte den på den allerførste, nemlig
html-tagget).

Når du har givet dit html eller body en værdi på 100% så får din
brower en værdi at forholde sig til hvis du senere i forløbet
laver en div eller table e.l. med en værdi af %'er.

Gir det mening? Ellers må du sige til, så skal jeg forsøge at
forklare det metaforisk i stedet for :)

Men HUSK!! - Altid angiv 100% på html eller body hvis du ønsker
at bruge % værdier på struktur elementer senere hen.

//Jahirah

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

YES!

Har lagt en div rundt om de 2 kolonner og har givet denne div en
omgang

*******************************
background-color:#FFFFFF;
border-width:0px 1px 0px 1px;
border-color:#000000;
border-style:solid;
*******************************

Nu undrer jeg mig bare over, at FF er ligeglade med disse tiltag
- IE er vældig tilfreds...

\ Jean

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Jean Jensen skrev:
> YES!
>
> Har lagt en div rundt om de 2 kolonner og har givet denne div en
> omgang
>
> *******************************
> background-color:#FFFFFF;
> border-width:0px 1px 0px 1px;
> border-color:#000000;
> border-style:solid;
> *******************************
>
> Nu undrer jeg mig bare over, at FF er ligeglade med disse tiltag
> - IE er vældig tilfreds...

Der er såmænd ikke noget at undre sig over,
IE viser det forkert. Tjek lige
http://webdesign101.dk/css/floatcontainer.php


--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/

---

Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
> Jean Jensen skrev:
> >
> > Nu undrer jeg mig bare over, at FF er ligeglade med disse tiltag
> > - IE er vældig tilfreds...
>
> Der er såmænd ikke noget at undre sig over,
> IE viser det forkert. Tjek lige
> http://webdesign101.dk/css/floatcontainer.php
>

Har nu prøvet alle dine forslag og ingen af dem afhjalp mit problem
(zoom er ikke W3 valid)

Hvis jeg bare kunne få forklaret, hvorfor tingene er præcis som jeg
godt vil have det i IE... Du siger det vises forkert i IE, men da det
jo vises som jeg ønsker, vil jeg mene at det er FF der viser det
forkert - kan du forklare mig, det...?

\ Jean

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Jean Jensen skrev:

> Har nu prøvet alle dine forslag og ingen af dem afhjalp mit problem
> (zoom er ikke W3 valid)

Folk, der kan finde på at teste din webside
for validitet ved udmærket godt, at zoom er
en Microsoft-specifik egenskab, som ikke er
en del af standarden. Og de vil også vide
hvor du har brugt den... Netop for at få
IE til at opføre sig som en standardbrowser,
se nedenfor.

> Hvis jeg bare kunne få forklaret, hvorfor tingene er præcis som jeg
> godt vil have det i IE... Du siger det vises forkert i IE, men da det
> jo vises som jeg ønsker, vil jeg mene at det er FF der viser det
> forkert - kan du forklare mig, det...?

Når jeg skriver "forkert" mener jeg forkert
i forhold til de standarder, der gælder
for websidekonstruktion. Hvis du følger med
i disse nyhedsgrupper burde du vide at man
først tester i en browser, der overholder
standarden godt - Firefox eller Opera - og
derefter laver særlige regler for IE's forskellige
versioner. Heldigvis har Microsoft givet os et
redskab i hænde til at gøre dette forholdsvis
smertefrit:
http://webdesign101.dk/artikler/conditionalcomments.php

I den konkrete sag ligger der et forståelses-
problem:

Et float'et element har ikke nogen iboende
højde, men kun den højde som indholdet
betinger.
Et float'et elementet inden i en div vil
derfor *ikke* skubbe underkanten af denne
div nedad og dermed give dette overordnede
element nogen højde - undtagen i IE.

Denne HTML-kode vil opføre sig som du
ønsker:

<div id="wrapper">
<div id="leftcol">
....
</div>
<div id="rightcol">
....
</div>
*<div class="clear"></div>*
</div> <!-- slut wrapper -->

og den tilhørende formdeklaration:

..clear {clear:both;}

Hvis du gi'r #wrapper-elementet
en baggrundsfarve med og uden
det fremhævede element vil du i
Firefox tydeligt kunne se forskellen.
#wrapper-elementets underkant skydes
nedad af den spalte, der har det mindste
indhold.

Det er dette forhold og de forskellige
forholdsregler,man kan tage, jeg skriver
om i artiklen
http://webdesign101.dk/css/floatcontainer.php

Det *næste* problem, folk almindeligvis
løber ind i, er ønsket om at få det til at
*se ud* som om spalterne er lige høje, uanset
hvilken en af spalterne der har mest indhold.

Det har jeg skrevet en efterhånden endeløs
række af artikler om, bl.a.
http://webdesign101.dk/csslayout/float_layout.php#equal
http://webdesign101.dk/csslayout/equal_height_spalter.php
og senest
http://webdesign101.dk/layout/

foruden de mange sider, jeg har skrevet om det
selvsamme i mine bøger.



--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/

---

Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
>
> I den konkrete sag ligger der et forståelses-
> problem:
>
Dér er vi helt enige!

Prøv at kigge på http://www.poda.dk/jeanjensen/test03/index.html _nu_ og
du vil i IE se et skriggrønt felt nederst i højre kolonne, men i FF er
selv samme <div> transparent......

Hvordan giver jeg denne <div> en baggrundsfarve, som slår igennem
_også_i FF?

*******************************
#page {
clear:both;
width: 698px;
background-color:#00FF00;
margin: 0 auto;
border-width:0px 1px 0px 1px;
border-color:#000000;
border-style:solid;
}
*******************************

\ Jean

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Jean Jensen skrev:
> Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
>>
>> I den konkrete sag ligger der et forståelses-
>> problem:
>>
> Dér er vi helt enige!
>
> Prøv at kigge på http://www.poda.dk/jeanjensen/test03/index.html _nu_ og
> du vil i IE se et skriggrønt felt nederst i højre kolonne, men i FF er
> selv samme <div> transparent......
>
> Hvordan giver jeg denne <div> en baggrundsfarve, som slår igennem
> _også_i FF?
>
> *******************************
> #page {
> clear:both;
> width: 698px;
> background-color:#00FF00;
> margin: 0 auto;
> border-width:0px 1px 0px 1px;
> border-color:#000000;
> border-style:solid;
> }
> *******************************
>
> \ Jean
>
Hvaffen div er det du snakker om?
Den hvide baggrund du kan se i FF
er den du har givet dit content-
element, den grønne baggrund, du kan
se i IE stammer fra dit #page-element.

Det ser ikke ud til at du har clear'et
dine floatede elementer, som jeg
beskrev i mit foregående svar.


--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/

---

Nå, så tager vi den helt fra knogleopbygningen:

http://www.poda.dk/jeanjensen/test09/default.html

Hvorfor er den grønne og den røde kolonne ikke lige høje? Den blå farve er
div'en omkring hele møllen...

\ Jean

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

> Hvorfor er den grønne og den røde kolonne ikke lige høje? Den blå farve er
> div'en omkring hele møllen...

Du har et element, det grønne, som indeholder en del tekst.
Derfor bliver den længere end den røde.
Man kan ikke sætte højden til at være lige høje på de 2 elementer uden at de
får en fast højde.
Hvis indholdet i det ene felt overstiger det andet bliver det felt størst.

Derfor lavede jeg oprindeligt mine design som skulle se ud som det her på
følgende måde:

<div id="blaa">
<div id="groen">
Grøn
</div>
<div id="roed">
Rød
</div>
<div>

#blaa {
background: url("back.png") repeat-y top left;
}
#groen {
float: left;'
width: 250px;
}
#roed {
margin: 0px 0px 0px 250px;
}

Hvor baggrunden så har en fast bræde på 250 px, evt. med en streg der
markere overgangen til det røde/blå felt.

Hvis nu det røde felt er længere end det grønne kan man stadigvæk kun se
baggrundsbilledet som går fra top til bund.

Christian

---

Christian Kragh wrote in dk.edb.internet.webdesign.html:
>
> Du har et element, det grønne, som indeholder en del tekst.
> Derfor bliver den længere end den røde.
> Man kan ikke sætte højden til at være lige høje på de 2 elementer uden at de
> får en fast højde.
> Hvis indholdet i det ene felt overstiger det andet bliver det felt størst.
>
- og derfor kan jeg ikke angive en bestemt højde - indholdet ændres jo alt
efter hvilken side man er på...
>
> Hvis nu det røde felt er længere end det grønne kan man stadigvæk kun se
> baggrundsbilledet som går fra top til bund.
>
Kan de ikke bare være "background-color:#FFFFFF;" ?

Skyldes hele denne misære måske, at baggrunden i den omkringliggende div, skal
være et billede???

\ Jean

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

>> Hvis nu det røde felt er længere end det grønne kan man stadigvæk kun se
>> baggrundsbilledet som går fra top til bund.
>>
> Kan de ikke bare være "background-color:#FFFFFF;" ?
>
> Skyldes hele denne misære måske, at baggrunden i den omkringliggende div,
> skal
> være et billede???

Nej, det gør det ikke.

Jeg har lige lave 5 bokse så du kan se det i praksis.

http://web.5mm.dk/2spalter/

Spørg hvis der er yderligere spørgsmål.

Christian

---

> Jeg har lige lave 5 bokse så du kan se det i praksis.
>
> http://web.5mm.dk/2spalter/

Jeg skal lige skynde mig at sige at den 4. boks har en fejl i baggrunden i
FF da jeg ikke har sat baggrundsbilledet på roed4 som jeg har på roed5.
Det er en forglemmelse, men jeg har ikke tid til at rette nu, men så er det
forklaret.

Christian

---

Jean Jensen skrev:
> Nå, så tager vi den helt fra knogleopbygningen:
>
> http://www.poda.dk/jeanjensen/test09/default.html
>
> Hvorfor er den grønne og den røde kolonne ikke lige høje? Den blå farve er
> div'en omkring hele møllen...
>
> \ Jean
>


Jeg har flere gange her i gruppen og en enkelt
gang i et privat svar til dig peget på, at
du *aldrig* kan få to tekstkolonner til at
*være* lige høje. Det du kan opnå er at få
to kolonner til *se lige høje ud*.

Det er det der er "hemmeligheden*. Samt
en forståelse af, at hvis en float-container
(hos dig #wrapper-elementet) skal udvides i
takt med indholdet af det eller de float'ede
elementer, *skal det eller de float'ede elementer
clear'es* før float-containeren lukkes.

Derfor skal HTML-koden se således ud:

<div id="floatcontainer">
   <div id="leftcol">
   [ Venstre kolonne indhold ]
   </div>
   <div id="rightcol">
   [ Højre kolonne indhold ]
   </div>
   *<div class="cb"></div>*
</div>

og stylesheet'et således

#floatcontainer { border: 2px dashed #c00;
background-color:#ddd;}
#leftcol { background:#ddd; width: 20em; float: left; }
#rightcol { background:#ddd; width: 20em; float: right; }
..cb {clear:both;}

Næste skridt er så at lave en baggrundsgrafik
til float-containeren, der skal tegne den ønskede
baggrund.

Men husker jeg din oprindelige side ret, skal
du kun have en kulørt baggrund bag en menuspalte.

Det gør det noget lettere:
#floatcontainer {background-color:#ddd;}
#leftcol {width: 200px; float: left; }
#rightcol { border-left:220px solid green }
..cb {clear:both;}

Det der sker her er at du laver en kulørt border
i venstre side af højre spalte. Tænk på den
border som et frirum, ventre spalte kan placeres
i. (Det er lidt bagvendt i forhold til den virkelige
forklaring, men det kan vel gå an).
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/

---

Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
>
> Jeg har flere gange her i gruppen og en enkelt
> gang i et privat svar til dig peget på, at
> du *aldrig* kan få to tekstkolonner til at
> *være* lige høje. Det du kan opnå er at få
> to kolonner til *se lige høje ud*.
>
Det er bare helt i orden - bare øjnene ser det jeg vil vise (uanset browser).
>
> Det er det der er "hemmeligheden*. Samt
> en forståelse af, at hvis en float-container
> (hos dig #wrapper-elementet) skal udvides i
> takt med indholdet af det eller de float'ede
> elementer, *skal det eller de float'ede elementer
> clear'es* før float-containeren lukkes.
>
> Derfor skal HTML-koden se således ud:
>
> <div id="floatcontainer">
>    <div id="leftcol">
>    [ Venstre kolonne indhold ]
>    </div>
>    <div id="rightcol">
>    [ Højre kolonne indhold ]
>    </div>
>    *<div class="cb"></div>*
> </div>
>
> og stylesheet'et således
>
> #floatcontainer { border: 2px dashed #c00;
> background-color:#ddd;}
> #leftcol { background:#ddd; width: 20em; float: left; }
> #rightcol { background:#ddd; width: 20em; float: right; }
> ..cb {clear:both;}
>
> Næste skridt er så at lave en baggrundsgrafik
> til float-containeren, der skal tegne den ønskede
> baggrund.
>
> Men husker jeg din oprindelige side ret, skal
> du kun have en kulørt baggrund bag en menuspalte.
>
> Det gør det noget lettere:
> #floatcontainer {background-color:#ddd;}
> #leftcol {width: 200px; float: left; }
> #rightcol { border-left:220px solid green }
> ..cb {clear:both;}
>
Meget fint, ellere rettere; ikke så fint:

http://www.poda.dk/jeanjensen/test03/test.html

Jeg kunne jo rigtig godt tænke mig, at den venstre og den højre kolonne SER UD
TIL at være lige høje - det gør de jo bestemt ikke.

Kolonnen med menupunkterne skal have baggrundsfarve HELT NED TIL BUNDEN.
Kolonnen med vrøvleteksten skal have baggrundsfarve HELT NED TIL BUNDEN.

Uanset hvor meget tekst der er i hhv. højre og venstre kolonne.

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Jean Jensen skrev:

> http://www.poda.dk/jeanjensen/test03/test.html
>
> Jeg kunne jo rigtig godt tænke mig, at den venstre og den højre kolonne SER UD
> TIL at være lige høje - det gør de jo bestemt ikke.
>
> Kolonnen med menupunkterne skal have baggrundsfarve HELT NED TIL BUNDEN.
> Kolonnen med vrøvleteksten skal have baggrundsfarve HELT NED TIL BUNDEN.
>
> Uanset hvor meget tekst der er i hhv. højre og venstre kolonne.
>

Du må undskylde, at jeg har forledt dig. Den kode
jeg citerede er tilstrækkeligt til at sikre, at
højre kolonnes indhold forbliver i højre kolonne,
men ikke til at kolorere kolonnerne.

Jeg forlod mig på hukommelsen i forhold til
dette eksempel:

http://webdesign101.dk/csslayout/ex/nichols_3.html

Dette eksempel er omhyggeligt forklaret i slutningen af
artiklen

http://webdesign101.dk/csslayout/equal_height_spalter.php

og skulle være let at omstille til en to-spaltet udgave.


--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/