Avatar billede champman2000 Nybegynder
25. oktober 2004 - 15:34 Der er 7 kommentarer og
2 løsninger

Tableless design - CSS problem - FLOAT element flyder udenfor

Ok, nu har jeg siddet og bakset med at få min HP sat op i et "tableless" design. Det har givet en del problemer med at få IE og Mozilla til at vise det samme. Derfor også en masse hovsaløsninger. Det skal lige siges til browserdebatten at jeg har haft logikproblemer med begge browsers - de har været lige gode om det. :) Nok snik snak.

Jeg har egentlig to problemer men først til det vigtigste. Jeg har lavet eksempel der kan ses på nedenstående url. Jeg har cuttet en del indhold ud for at gøre det nemmere at overskue:

http://www.langelykke.dk/temp/index.html

I IE (og Opera for den sags skyld) vises siden som jeg ønsker. I Mozilla flyder den højreboks (#content_menu) ned ud fra div-tag med id content_main. Dette er selvfølgelig ikke særlig optimalt. Ved ikke om min fejl er at bruge float til placeringen elementet, men har altså ikke kunnet finde løsninger som ikke ødelagde placeringen af det generelle indhold i content_main og content_menu.

Mht. det andet problem. Hvis man ser bort fra ovenstående problem, ønsker jeg også, at min content_menu er lige så høj som hele content_main. Har forsøgt med height: 100% men uden held - igen Mozilla der ikke er enig mig.

http://www.langelykke.dk/temp/index2.html
Avatar billede champman2000 Nybegynder
25. oktober 2004 - 15:37 #1
Lige et direkte link til CSS filen:

http://localhost/langelykke.dk/temp/temp.css
Avatar billede champman2000 Nybegynder
25. oktober 2004 - 15:40 #2
Avatar billede roenving Novice
25. oktober 2004 - 15:47 #3
Jeg tror det er float-egenskaben, som i Gecko-maskinen tolkes, som om den flyder ud over det normale dokument-flow ...

-- men en rimelig simpel løsning på begge problemer er at synkronisere højde af de to onload, og så sætte en minimums-højde:

<script type="text/javascript">
var elms = ['content_main','content_menu'];

function synchronizeDivs(){
  var maxH = 400;/* Minimumshøjde !-) */
  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=maxH + 'px';
  }
}
window.onload = synchronizeDivs;
</script>
Avatar billede notes2c Nybegynder
25. oktober 2004 - 16:05 #4
Prøv en at sætte følgende på .content_bar

clear: both;

Du er nok også nødt til at sætte <div class="content_bar_padding"> før <div class="content_bar"> i bunden
Avatar billede champman2000 Nybegynder
25. oktober 2004 - 16:24 #5
Skal jeg kysse jer nu? Ej okay, der må jeg skuffe jer, det gør jeg ikke.

Men hver især fik i løst mine to problemer. Godt nok lidt problem med margin imellem content_bar og content_menu, da content_menu ikke ændre sig iforhold til content_bar's margin. Men med lidt fiksfakseri løser jeg det helt sikkert selv :D

http://www.langelykke.dk/temp/

Er det egentlig muligt at dele point hvis i begge afgiver svar?
Avatar billede roenving Novice
25. oktober 2004 - 16:27 #6
-- selvfølgelig er det det, læs f.eks. mere her: http://expfaq.1go.dk !-)

Velbekomme '-)
Avatar billede notes2c Nybegynder
25. oktober 2004 - 18:03 #7
velbekommen :o)
Avatar billede roenving Novice
25. oktober 2004 - 18:37 #8
-- og tak for point ;~}
Avatar billede champman2000 Nybegynder
26. oktober 2004 - 16:13 #9
det var det mindste jeg kunne gøre ;)
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