/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
CSS højde problem
Fra : Brian B. Christensen


Dato : 09-06-08 16:14

Jeg har et gevaldigt problem som jeg har stirret mig blind på nu og
andre har ikke rigtigt kunnet give det rigtige svar.

På denne side:

http://www.ibenhellum.dk/index.asp

er der en header, 2 kolonner (kaldet colA og colB i mit stylesheet) og
en bund.

Mit problem er at colA højden ser ud til at være styret af indholdet
og efter at lavede baggrundsfarven på DIV'en (kaldet box2 i mit
stylesheet) til #EEEEEE, er der en lille hvid stribe af colA i bunden
og det hele skal være gråt.

Jeg har prøvet at sætte height:493px på colA og så passer forsiden
fint. Men hvis indholdet i colB så er højere end 493px, så er
problemet endnu nemmere at se. F.eks. her:
http://www.ibenhellum.dk/index.asp?side=3


Hvad gør jeg forkert i mit stylesheet som ligger her
http://www.ibenhellum.dk/style/layout.css , siden at der er hvidt
under det grå?

Jeg har virkelig brugt mange timer på dette nu og må give op Jeg
har prøvet ændringer af padding og margin på colA, colB, box2 og box6
lidt i blinde og uden resultat


Mvh. Brian







 
 
Bertel Lund Hansen (09-06-2008)
Kommentar
Fra : Bertel Lund Hansen


Dato : 09-06-08 16:32

Brian B. Christensen skrev:

> Jeg har et gevaldigt problem som jeg har stirret mig blind på nu og
> andre har ikke rigtigt kunnet give det rigtige svar.

Den slags problemer løser jeg ved at benytte en div med margin.
Hvis man laver marginen f.eks. 30em bred, er der plads til
indhold. Og marginen har jo garanteret samme højde som
hovedfeltet. Hvis man kun skal bruge to spalter, nøjes man med at
sætte venstre margin på, men man kan få tre spalter ved at bruge
dem begge.

Jeg kan desværre ikke huske hvor jeg har fået fidusen fra, og
mine egne sider er ikke lavet pædagogisk med henblik på at
demonstrere den metode, men jeg bruger den f.eks. her:

http://obese.dk/oss/

http://obese.dk/oss/dksoss.css

De steder i CSS-arket hvor der står /* NB! */
forekommer der en værdi der går igen andre steder. Hvis man
ændrer den, skal det gøres overalt.

--
Bertel
http://bertel.lundhansen.dk/      FIDUSO: http://fiduso.dk/

Brian B. Christensen (09-06-2008)
Kommentar
Fra : Brian B. Christensen


Dato : 09-06-08 18:20

>Den slags problemer løser jeg ved at benytte en div med margin.
>Hvis man laver marginen f.eks. 30em bred, er der plads til
>indhold. Og marginen har jo garanteret samme højde som
>hovedfeltet. Hvis man kun skal bruge to spalter, nøjes man med at
>sætte venstre margin på, men man kan få tre spalter ved at bruge
>dem begge.

Jeg har prøvet at kigge lidt i din css og html. Men jeg kan ikke
forstå hvad venstre margin har at gøre med mit problem. Jeg er nok
gevaldig tungnem, men kan du uddybe det en anelse

På forhånd tak.

Mvh. Brian

Bertel Lund Hansen (09-06-2008)
Kommentar
Fra : Bertel Lund Hansen


Dato : 09-06-08 19:11

Brian B. Christensen skrev:

> Jeg har prøvet at kigge lidt i din css og html. Men jeg kan ikke
> forstå hvad venstre margin har at gøre med mit problem.

Du vil have to spalter som er lige høje uanset omfanget af
indholdet, og hvor de har hver sin baggrundsfarve, ikke sandt?

Det kan man opnå ved at operere med en div hvor man bruger 'selve
diven' til hovedfelt og så udvider dens venstre margin og bruger
det til menufelt (eller hvad det nu skal være til).

--
Bertel
http://bertel.lundhansen.dk/      FIDUSO: http://fiduso.dk/

Brian B. Christensen (09-06-2008)
Kommentar
Fra : Brian B. Christensen


Dato : 09-06-08 19:16

On Mon, 09 Jun 2008 20:10:56 +0200, Bertel Lund Hansen
<unospamo@lundhansen.dk> wrote:

>Du vil have to spalter som er lige høje uanset omfanget af
>indholdet, og hvor de har hver sin baggrundsfarve, ikke sandt?

Jeps. Helt enig.

>Det kan man opnå ved at operere med en div hvor man bruger 'selve
>diven' til hovedfelt og så udvider dens venstre margin og bruger
>det til menufelt (eller hvad det nu skal være til).

Det svarer vel til den DIV jeg har rundt om colA og colB DIV's som
hedder two-cols?

Mvh. Brian

Philip Nunnegaard (09-06-2008)
Kommentar
Fra : Philip Nunnegaard


Dato : 09-06-08 20:54

"Brian B. Christensen" <bbcdenmark@gmail.com> skrev i meddelelsen
news:8psq44du9tsbi56btmuq59ngbr7ur87bom@4ax.com...

> Det svarer vel til den DIV jeg har rundt om colA og colB DIV's som
> hedder two-cols?

Det svarer vist mere til at colA ligger inde i colB, hvor colB har en
venstre-margin der er stor nok til at colA kan ligge der.

<div id="colB">
Indholdet på din side (det som du i dag har i colB)
<div id="colA">
Din menu
</div>
</div


Brian B. Christensen (09-06-2008)
Kommentar
Fra : Brian B. Christensen


Dato : 09-06-08 19:15

>Jeg har virkelig brugt mange timer på dette nu og må give op Jeg
>har prøvet ændringer af padding og margin på colA, colB, box2 og box6
>lidt i blinde og uden resultat

Nu har jeg prøvet at sætte height:100% på two-cols, colA og colB. Så
virker det faktisk, omvend der er meget blank plads uanset indholdet,
men.....

Da indholdet er dynamisk og jeg aldrig kan vide hvor meget tekst der
er heri, ryger det så uden for colB DIV'en hvis der er for meget
tekst. F.eks.: http://www.ibenhellum.dk/index.asp?side=3

Kan det så løses i stedet på en eller anden måde?

Mvh. Brian

Jørgen Farum Jensen (09-06-2008)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 09-06-08 19:52

Brian B. Christensen skrev:

> Da indholdet er dynamisk og jeg aldrig kan vide hvor meget tekst der
> er heri, ryger det så uden for colB DIV'en hvis der er for meget
> tekst. F.eks.: http://www.ibenhellum.dk/index.asp?side=3

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

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

Brian B. Christensen (09-06-2008)
Kommentar
Fra : Brian B. Christensen


Dato : 09-06-08 19:56

On Mon, 09 Jun 2008 20:52:19 +0200, Jørgen Farum Jensen
<jfjenzen@yahoo.dk> wrote:

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

Ja, den ser lidt mere stueren ud, end den jeg google mig til.

Mange tak Jørgen. Den er bookmarked

Mvh. Brian

Brian B. Christensen (09-06-2008)
Kommentar
Fra : Brian B. Christensen


Dato : 09-06-08 19:46

Så fandt jeg løsningen. Den er nogen weird, men det virker umiddelbart
i IE, FF og Opera.

Jeg fandt løsningen her:

http://www.ejeliot.com/samples/equal-height-columns/example-7.html

Og det jeg har puttet i mit stylesheet er:

overflow: hidden; på min div udenom colA og colB.

Og så:

margin-bottom: -1000px; padding-bottom: 1000px;

på min colA.


Det lugter af noget fusk, men det ser ud til at virke.

Og Bertel, mange tak for din hjælp!


Mvh. Brian

Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408849
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste