Det første script skal kunne sætte positionen på min boks med navnet #main, så main kommer til at stå midt i browservinduet. Jeg har lavet funktionen til bestemmelsen af placeringen:
browserwidth = window.innerWidth;
pos = ((browserwidth - 750) / 2)
document.write ('left: ' + pos + 'px')
Men jeg ved ikke, hvordan jeg får det sat ind i mit html, og hvordan jeg får lavet resten af scriptet, så boksens position bliver defineret ved "onload" og "onresize".
2. script:
Det andet script behøver måske ikke engang være et script. Men jeg ved ikke, hvordan jeg skal lave det, så de 3 bokse, #main, #left_side og #right_side er lige så lange som boksen #content. Hvis #content så er mindre end browservinduet, skal de 3 andre bokse fylde 100% i browservinduet. Hvis problemet kan løses uden javascript, er det bare godt.
2. Du skal i alle fald starte med at styre og sætte højde på de ydre elementer:
html, body { height: 100%; } body { margin: 0; padding: 0; }
Og derefter kan du prøve at bevare position:absolute på #main. Men hvis jeg har forstået dig rigtigt vil du have at det er indholdet af #content der skal bestemme højden af de bokse der omgiver denne, således at de udvider sig med #content.
Hvilke styles har du på #content_wires og #content_menu ?
Du kan få 75 point nu. Men jeg mangler stadig en ordentlig løsning på det andet problem. Som du kan se, er alle tre divs lige lange... Men content skal jo være kortere end de andre.
Du har jo så blandet nogle med forskellige grundegenskaber, men sådan kan det løses:
<script type="text/javascript"> //id'er på de elementer, som skal være lige høje, antallet er ligegyldigt; var elms = ['left_side','right_side','main','content'];
function synchronizeDivs(){ var maxH = 0; for(i=0;elms.length>i;i++){ maxH = Math.max(maxH,document.getElementById(elms[i]).offsetHeight); } for(i=0;elms.length>i;i++){ document.getElementById(elms[i]).style.height=((i!=3)?180:0)+maxH + 'px'; } }
Jamen, det hjælper jo ikke noget at lave statiske sidebars. Hvis en bruger ikke lige har den opløsning, jeg designer længden af mine sidebars efter, så vil mine sidebars slutte midt på hans side!
Mine sidebars skal også tilpasse sig efter browserstørrelsen.
Nå. Jeg smutter i seng nu. Det ville være skønt, hvis du kunne finde en løsning på problemet... og endnu bedre, hvis løsningen var uden brug af javascript!
Det er nok højst sandsynligt ikke rigtigt javascript. Men du kan vel godt forstå hvad jeg mener med det. Jeg sætter varH til at være højden på browservinduet. Hvis så browservinduet er for lille til at kunne vise hele "menuskærmen", så sætter jeg varH til en minimumshøjde, jeg selv bestemmer.
Du får point, hvis du kan sætte den funktion her ind i den anden, så det fungerer.
Når jeg sætter det ind, som jeg har gjort her virker det ikke. Skal det sættes ind et andet sted?
<script type="text/javascript"> //id'er på de elementer, som skal være lige høje, antallet er ligegyldigt; var elms = ['left_side','right_side','main','content'];
function synchronizeDivs(){ var maxH = Math.max(document.body.clientheight,512); for(i=0;elms.length>i;i++){ maxH = Math.max(maxH,document.getElementById(elms[i]).offsetHeight); } for(i=0;elms.length>i;i++){ document.getElementById(elms[i]).style.height=((i!=3)?180:0)+maxH + 'px'; } }
Det virker helt fint med clientHeight i Firefox. Så det holder jeg mig bare til. Giv et svar, og du får alle 150 point. Det her har været til stor hjælp for mig.
Ja, jeg havde glemt at teste noget. Scriptet virker faktisk ikke helt, som det skal. da jeg lavede en ordentlig test, viste det sig, at "document.body.clientHeight" ikke virkede i begge browsere. Så jeg satte det andet ind i stedet for.
Nu virker det fint i mozilla - bortset fra at siden bliver længere og længere, hver gang jeg resizer! (Jeg har sat onresize ind).
Men i IE kan den slet ikke loade siden færdig.
Her er mit script:
<script type="text/javascript"> //id'er på de elementer, som skal være lige høje, antallet er ligegyldigt; var elms = ['left_side','right_side','main','content'];
function synchronizeDivs(){ var maxH = Math.max((((window.innerHeight)?window.innerHeight:document.body.clientHeight)-180),333); for(i=0;elms.length>i;i++){ maxH = Math.max(maxH,document.getElementById(elms[i]).offsetHeight); } for(i=0;elms.length>i;i++){ document.getElementById(elms[i]).style.height=((i!=3)?180:0) + maxH + 'px'; } }
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.
