Avatar billede tjakobsen Nybegynder
25. april 2006 - 17:36 Der er 6 kommentarer og
1 løsning

Mindre problem med boks elementers højde.

Hej eksperter.

Jeg har tre sidestillet div's, som på denne figur:

| |      | |
| |      | |
|1|  2  |3|
| |      | |
| |      | |

Hvor div #1 og #3 indholder billeder der udgør en border.

Div #3 indholde selve sidens indhold (tekst, billeder mm.). Problemet er, at når denne div bliver højere og højere, skal div #1 og #3's højde følge med.

Altså afhænger div #1 og #3's højde af #2.

Koden til de tre divs ses her:
<div>

    <div id="OuterLeftBorder">
        <div id="OuterLeftBorderTopCorner"></div>
        <div id="OuterLeftBorderMiddle"></div>
        <div id="OuterLeftBorderBtmCorner"></div>
    </div>

    <div id="Inner">
        /* Content */
    </div>
   
    <div id="OuterRightBorder">
        <div id="OuterRightBorderTopCorner"></div>
        <div id="OuterRightBorderMiddle"></div>
        <div id="OuterRightBorderBtmCorner"></div>
    </div>
     
</div>

Eller på http://tj.pastebin.com/681069

Håber jeg har beskrevet mit problem grundigt nok.

På forhånd tak.
Avatar billede webstuff Nybegynder
25. april 2006 - 18:39 #1
<script type="text/javascript">
function SammeHoejde(){
var olb = document.getElementById("OuterLeftBorder");
var inner = document.getElementById("Inner");
var orb = document.getElementById("OuterRightBorder");

if(olb.offsetHeight<inner.offsetHeight){
  olb.style.height = inner.offsetHeight + "px"
}
if(orb.offsetHeight<inner.offsetHeight){
  orb.style.height = inner.offsetHeight + "px"
}
}
</script>

og så bare:

<body onLoad="SammeHoejde();">
Avatar billede tjakobsen Nybegynder
25. april 2006 - 18:54 #2
Mange tak webstuff.
Ved du hvilke browsere dit JS eksempel er kombitabelt med?

Men burde dette ikke kunne gøres med CSS?
Avatar billede olebole Juniormester
25. april 2006 - 18:58 #3
<ole>

Når indholdet er opdelt i søjler, der skal være lige høje, er det, du har brug for jo et tabel-element, der er det eneste markup-element, der fra fødslen er konstrueret til den slags  :)

/mvh
</bole>
Avatar billede webstuff Nybegynder
25. april 2006 - 18:59 #4
Det skulle gerne være crossbrowser.
Det kan olebole sikkert svare på;o)
Avatar billede olebole Juniormester
25. april 2006 - 19:08 #5
Scriptet er så X-browser, som den slags kan laves (jeg kan ikke nævne en eneste aktuel browser, der vil fejle) ... men jeg ville nu nok alligevel bruge en enkelt tabel  =)
Avatar billede tjakobsen Nybegynder
25. april 2006 - 19:24 #6
Som du også siger olebole, så er det nemmest at løse problemet ved brug af tables, og det har jeg også besluttet mig for at gøre nu.

Dog ér der måde at gøre det på ved brug af divs. Bl.a. Faux Columns. Dette virker dog noget besværligt og jeg ser ingen grund til ikke at bruge tables.

Lidt om Faux Colums:
http://meyerweb.com/eric/thoughts/2004/09/03/sliding-faux-columns/
http://www.alistapart.com/articles/fauxcolumns/

Her er der også et eksempel på at det kan lade sig gøre. Om det lige er Faux metoden tror jeg ikke, men det virker i hvertfald i Firefox:
http://www.tanfa.co.uk/css/layouts/flexi-floats-3col.asp

Men som jeg læser det hele, så er det stadig sikrest at bruge tables indtil CSS får  grid layout understøttelse (og indtil diverse browsere understøtter det, hvilket nok vil tage en generations tid).

Du får 30 points webstuff, fordi jeg kan bruge dit eksempel til noget andet og fordi du tog dit tid til at lave det. Tak.
Avatar billede webstuff Nybegynder
25. april 2006 - 19:48 #7
Okay.. Jeg takker for pointene, selvom det nu ikke tog pokkers lang tid at skrive :-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester