[CSS & IE] Rechts uitgelijnde pagina - Softwareontwikkeling

donderdag 6 mei 2004 20:28

Acties:

Topicstarter

Ik ben bezig met basis-ontwerpje voor een website. Het idee is om het geheel rechts uitgelijnd te hebben en het content-stuk naar links groter te laten worden als het browservenster wordt vergroot. Het ding is hier te bezichtigen: test 19.
Dat voorbeeld werkt prima in FF en Opera. Alleen IE maakt er een zooitje van als je het venster te smal maakt.

2 problemen:
• de header en footer verdwijnen aan de linkerkant uit beeld
• het content venster wordt onterecht versmald

Het 1e probleem heb ik min of meer weten op te lossen met wat ranzige code (test 20). Dan blijft iig alles leesbaar. Probleem blijft dat de margin van het content venster wordt berekend vanaf de rand van het venster en niet vanaf de rand van de "containing div". Is dit een bug in IE of is dit op te lossen?

Zaken die ik al heb geprobeerd:
• Wrapper om de content heen (helpt alleen als de boel een vaste breedte krijgt, en dat was nou net niet de bedoeling)
• "spacing divs" om een minimale breedte af te dwingen
• verscheidene display types voor zowel de body als de relevante divs

Op de een of andere manier krijg ik het niet voor elkaar, iemand nog inzichten om het op te lossen (of iig beter te krijgen)?

Regeren is vooruitschuiven

donderdag 6 mei 2004 20:34

Acties:

Verwijderd

Kun je niet voor IE iets van 'body{_width:<length>;}' gebruiken? Je kunt trouwens beter niet 'min-width' op zowel HTML als BODY zetten en 'margin' al helemaal niet, vanwege wat margin collapse bugs.

Daarnaast, als je 'margin' zegt, zeg dan ook 'padding' (Opera heeft bijvoorbeeld default 'padding' op het BODY element).

donderdag 6 mei 2004 20:40

Acties:

T-MOB

Topicstarter

Verwijderd schreef op 06 mei 2004 @ 20:34:
Kun je niet voor IE iets van 'body{_width:<length>;}' gebruiken?

Did that

. Alleen IE's width is niet helemaal min-width. _width leidt ertoe dat de content niet meer meeschuift met het venster...

Je kunt trouwens beter niet 'min-width' op zowel HTML als BODY zetten en 'margin' al helemaal niet, vanwege wat margin collapse bugs.

Weer wat geleerd

Daarnaast, als je 'margin' zegt, zeg dan ook 'padding' (Opera heeft bijvoorbeeld default 'padding' op het BODY element).

Stond er eerst ook, is verdwenen na verwoede pogingen om het goed te krijgen...

[ Voor 7% gewijzigd door T-MOB op 06-05-2004 20:41 ]

Regeren is vooruitschuiven

vrijdag 7 mei 2004 22:59

Acties:

T-MOB

Topicstarter

Voor een 'mooie' oplossing hou ik me nog steeds aanbevolen...

Ik heb het nu opgelost met een stukje javascript:

code:

<script type="text/javascript" />
function ieMinWidth() 
{ 
  if (navigator.appName == "Microsoft Internet Explorer")  
  { 
   var iebody = document.getElementById('iebody');
   if (document.body.clientWidth <= 693)
     { 
        iebody.style.width = '693px'; 
     } else { 
        iebody.style.width = 'auto'; 
     }
  }
}
 </script>

en in de html:

code:

<body onLoad="ieMinWidth();" onResize="ieMinWidth();">
<div id="iebody">
[...]
</div>
</body>

Regeren is vooruitschuiven

zaterdag 8 mei 2004 14:48

Acties:

Verwijderd

Het is sowieso al een stuk mooier als je dat scriptje extern doet:

code:

1 2	window.onload = blaat; window.onresize = blaat;

(O ja, attributen moeten in lowercase in XHTML)

zondag 9 mei 2004 02:35

Acties:

T-MOB

Topicstarter

Ik ben met je eens dat het mooier is, sterker nog ik heb het geprobeerd. Als je de resize zou kunnen uitvoeren op window.onresize hoef je er geen extra markup voor toe te voegen (document.body.style.width = 'bla').

Op de een of andere manier krijg ik IE er echter niet mee overweg. Ik ben een 0 qua javascript, maar window.onload=alert('alert') werkt in IE prima. window.onload=ieMinWidth(); doet nix.

window.onresize krijgt in IE niet eens een alertje de lucht in (Firefox $_/-\o_$ ) , maar mijn probleem is ie-only. Iets meer uitleg is dus welkom.....

Regeren is vooruitschuiven

zondag 9 mei 2004 08:26

Acties:

Verwijderd

Je had het ook 'iets' beter moeten lezen. Er is een subtiel verschil tussen

code:

1
2
3

window.onload = blaat;
/* en */
window.onload = blaat();

Wat je ook kunt gebruiken is, zeker handig bij meerdere onloads:

code:

window.onload = function(){
 blaat();
 blaatblaat();
 etc();
}

zondag 9 mei 2004 16:37

Acties:

T-MOB

Topicstarter

Aha, reuze bedankt

Ik gebruik nu het volgende scriptje:

code:

if (navigator.appName == "Microsoft Internet Explorer") 
 { 
  function ieMinWidth() 
  {
  document.getElementById('iebody').style.width=(document.body.clientWidth <= 693)?'693px':'auto';
  }
 window.onresize=ieMinWidth;
 window.onload=ieMinWidth;
 }

Regeren is vooruitschuiven