CSS: Pagina layout met drie kolommen

**Bertold** · 7 januari 2006, 14:41

De titel spreekt voor zich ik heb dus een layout met een header, drie kolommen en een footer.
in firefox ziet dat er allemaal oké uit maar in internet explorer raakt alles in de war

link: http://users.telenet.be/betee/site/index.html
en : http://users.telenet.be/betee/site/opmaak.css

ps. ik heb gebruik gemaakt van de tutorial op css.maxdesign

**Bertold** · 7 januari 2006, 21:30

niemand?

**3razor** · 8 januari 2006, 11:01

er moet iets misgelopen zijn met je floating en margin

...

--EDIT

gefixed maar je hoogte van Menu viel tegen tov hoogte van het menu zelf en dus ff 15px vergroot en die BALK eronder 15 verkleint

alles in orde dus

btw werk beter met ID's voor de layoutopmaak zodat je nog een class kan gebruiken voor eventuele tekst en dergelijke

in css maakt dat # ipv .

opmaak.css

Code:

/* CSS Document for www.btfolio.be by btfolio */

/* Main Container */

#center_container{
	width: 714px;
	height: 802px;
	margin: 0px auto;
	}

/* Boven */

#boven{
	width: 712px;
	height: 170px;
	}

#header{
	width: 512px;
	height: 120px;
	margin: 0px;
	float: left;
	background-color: #FFFF00;
	}
	
#navcontainer{
	width: 200px;
	height: 120px;
	float: right;
	background-color: #0000FF;
	}
	
#balk{
	clear: both;
	width: 712px;
	height: 50px;
	margin-left: 0px;
	background-color: #FF0000;
	}

/* Midden */

#midden{
	width: 712px;
	height: 604px;
	}

#links{
	width: 41px;
	height: 604px;
	margin: 0;
	background-color: #FF00FF;
	float: left;
	}

#main{
	float: left;
	width: 630px;
	height: 604px;
	background-color: #00FFFF;
	}

#rechts{
	width: 41px;
	height: 604px;
	float: right;
	background-color: #00FF00;
	}

/* Onder */

#onder{
	width: 712px;
	height: 26px;
	background-color: #000099;s
	}

je index.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" href="opmaak.css" type="text/css" />
		<title>www.btfolio.be</title>
	</head>

	<body>
		<div id="center_container">	
			<div id="boven">
				<div id="header"></div>
				<div id="navcontainer">
					<ul><li>Link1</li>
						<li>Link2</li>
						<li>Link3</li>
						<li>Link4</li>
						<li>Link5</li></ul>
				</div>
				<div id="balk"></div>
			</div>
			<div id="midden">
				<div id="links"></div>
				<div id="main"></div>
				<div id="rechts"></div>
			</div>
			<div id="onder"></div>
		</div>	
	</body>
</html>

**Bertold** · 8 januari 2006, 14:31

bedankt voor de oplossing !

**3razor** · 8 januari 2006, 14:55

graag gedaan

daar is een formusectie zoals deze voor eh

Greetz

**Bertold** · 8 januari 2006, 15:38

kheb nu weer een ander probleempje maar nu met het menuutje. Kheb ondertussen afbeeldingen ingevoegd en tis opnieuw in IE dat het een beetje f*cked up is terwijl het er in firefox goed uitziet

link: http://users.telenet.be/betee/site/index.html

stylesheet: http://users.telenet.be/betee/site/opmaak.css

**Bertold** · 9 januari 2006, 17:58

Niemand? (tweede keer)

**3razor** · 9 januari 2006, 18:00

ik heb nergens problemen mee zeker niet FF zoals je al zei maar ook niet in FF

neem anders een een screenshot zodat er zo hulp kan geboden worden want om te helpen is er zicht nodig op de fout ...

**Bertold** · 9 januari 2006, 18:14

http://users.telenet.be/betee/IEfout.PNG

hierzo

kheb al vanalles geprobeerd met margin enzo maar niets blijkt een oplossing te bieden voor zowel FF als IE

**3razor** · 9 januari 2006, 21:12

Ow die ziet er andere koek uit dan je vorige probleem ... en met als tegenslag dat ik hier niks fout zie kan ik er niet zo heel veel aan veranderen met zekerheid ... maar ik kijk zo snel mogelijk eens naar de css

(ik ga nog naar school you know

)

btw voor de rest wel nog mooie layout, iets totaal anders dan andere sites int algemeen

--EDIT

nu heb ik plots wel problemen in IE zoals op je screenshot hmz weird

zal ik wel eens op kijken

**3razor** · 9 januari 2006, 21:24

Code:

#navcontainer ul li{
	vertical-align:middle;
	text-align: center;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	border-left: 2px solid #444f64;
	}

het werkt nu in FF EN IE op die manier

Veel succes nog

**Bertold** · 9 januari 2006, 21:25

heh bedankt voor het compliment

+ bedankt voor de oplossing kga ze direct es testen

edit: het werkt

nogmaals zeer bedankt voor uw vlugge en correcte hulp
grtz

**Bertold** · 10 januari 2006, 18:37

en opnieuw een probleem :

De achtergrond wil niet meerwerken in firefox om de een of andere reden wordt de image die als background staat ingesteld in de main div verkeerd weergegeven in firefox

weet iemand raad?

http://users.telenet.be/betee/site/index.html

**3razor** · 11 januari 2006, 15:30

ik zal ff kijken en btw in IE gaat de achtergrond van je Iframe mee met je content

zal ik ook ff fixen

Geef me ff de tijd

ik edit deze post straks wel

**Bertold** · 11 januari 2006, 15:59

oké

strax hebt gij meer an mn site gewerkt dan ik zelf

wel dat van firefox had ik al gefixt maar dat ging niet zonder het in ie te doen mislopen

**3razor** · 11 januari 2006, 16:16

uhuh

die slechte uitlijning in FF ligt dus wel degelijk aan uw Border ...

ofwel los je het simpel op en maak je nog een Div rond je Center-container die langs alle kanten 2px groter is en zo de border vormt ofwel zoek je verder op je margin e.d. want ik zou niet direct weten hoe je het maakt

Discussie: CSS: Pagina layout met drie kolommen

LinkBack

Discussietools

Geef een waardering voor deze discussie

CSS: Pagina layout met drie kolommen

Discussie informatie

Users Browsing this Thread

Regels voor berichten