breedteprobleem IE

Status
Niet open voor verdere reacties.
Johantrax

Johantrax

Terugkerende gebruiker
Lid geworden
18 okt 2006
Berichten
1.268
Hoi,

Ik ben bezig aan een 3kolommenlayout die de volledige breedte van de viewport inneemt. In FireFox werkt alles naar behoren, en in IE (natuurlijk) niet...

De site in kwestie kan je hier bekijken. Het probleem in IE is dat wanneer je de breedte van je venster aanpast, je zal merken dat op bepaalde plaatsen het schild rechtsboven en de groene rechterdiv niet meer 'op de regel' kunnen en naar onderen worden verschoven.

Ik vermoed dat het probleem zit in het feit dat de body een margin van 5px heeft en de divisions (al dan niet samen) een breedte van 100%. Iemand een idee om dit IEprobleem te fixen? Hoeft enkel te werken in IE7+
 
ik zou voor de divs geen 100% geven.. een div is auto 100% breedte.

daarnaast zou ik de rechter en de linker kolom een vaste breedte geven.. Dat die 2 meeschalen is niet zo netjes vind ik persoonlijk. De rechter en de linker kolom zijn floats. Een met float: right en de ander float: left. het middelste vlakje hoef je geen float te geven... die gaat dan auto goed.

HTML: 
<html>
	<head>
		<style>
			* {padding: 5px;}
			body {padding: 10px;}
			#wrapper {border: 1px solid red;}
			#header {height: 100px; background: #ccc;}
			#footer {clear: both; background: blue; color: white}
			#left {float: left; background: #fff; width: 150px; border: 1px solid green;}
			#right {float: right; background: #fff; width: 150px; border: 1px solid green}
			#center {background: #333; margin: 0 180px;}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="header">header</div>
			<div id="right">right</div>
			<div id="left">left</div>
			<div id="center">center</div>
			<div id="footer">footer</div>
		</div>
	
	</body>
</html>

dit is denk ik een beetje wat je bedoeld of niet?

als het er niet goed uitziet moet je even spelen met de volgorde van de left,right en center div
 
Laatst bewerkt:
Bedankt voor je antwoord dicabrio, maar het probleem zat niet in de structuur van de html, maar wel degelijk in het feit dat 20%+60%+20% in IE soms meer dan 100% wordt als dat een margin heeft..

De oplossing was als volgt: de centrale div werd met 1% ingekort en kreeg margin-left van 0.5%, waardoor die nog steeds gecentreerd werd. De rechtse div kreeg float right ipv left. Op deze manier ontstaat er tussen de centrale en rechterdiv een speling van 0.5% waar 'niets' staat.
Wanneer IE in zijn procentberekeningen nu 1 extra pixel aanmaakt, wordt deze opgevangen in de lege ruimte van 0.5% tussen center en rechts.

Het meeschalen van de zijkanten is uiteraard persoonlijke smaak, maar de reden waarom ik dit hier wel gedaan heb is volgende:
Zowel de inhoud van linker als rechterdiv is variabel (moest er rechts altijd een kalender staan, is het idd nutteloos om die te laten schalen). Onze bezoekers hebben zowel 4:3-schermen als 16:9 en 16:10. Wanneer mijn kolommen niet zouden meerekken, zouden de personen met breedbeeldscherm minder info uit de zijbalken en meer uit de centrale ruimte krijgen tov de personen met een 4:3-scherm.
 
ah kijk dat veranderd de zaak. Wat jij wilt is dat je layout aanpast op basis van de grootte van het scherm. Dus je wilt de beste weergave voor de juiste resolutie.

Ik heb ooit een scriptje gemaakt in JS wat er voor zorgt dat je verschillende layouts kunt maken in css voor verschillende resoluties:

http://dicabrio.com/javascript/layout-by-resolution.php

Ik zou dan afstappen met waar je nu mee bezig bent aangezien je dit niet gaat helpen.
Je moet dan je ontwerp aanpassen op bepaalde resolutie.. vb:
ik heb res 800x 600 dan moet ik 3 kolommen te zien krijgen.
kol1 = 150px
kol2 = rest breedte
kol3 = 150px

ik heb res 1024 dan krijg ik ook 3 kol te zien
kol1 = 200px
kol2 = rest breedte
kol3 = 200px

ik heb res groter dan 1024 dan krijg ik ook 3 kol te zien
kol1 = 200px
kol2 = rest breedte
kol3 = 300px

Misschien dat je wat aan mijn scriptje hebt?
 
Ik hoef niet aan te passen aan de resolutie, min-width zorgt voor een goede view bij minimale resoluties, op hogere doen de % hun werk en is er visueel (in centimeterbreedte) geen wijziging. (zoals het hoort in deze layout).
Wat hier wel diende te gebeuren was het verschil in beeldformaat tov de inhoud tegengaan. En dat is nu net waarom de zijkollomen wel dienen te rekken.

Los daarvan: mooie js en goede site die je daar hebt ;)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan