Lay out verspringt (css)

Door Onbekende gebruiker op 02-01-2010 16:31

2.817 views

Hallo mensen,

Ik heb zojuist een (basis) lay-out gemaakt.
maar op een of andere manier verspringt deze telkens. Ik neem aan dat ik wat verkeerd doe in mijn css maar ik kan niet echt zien wat het probleem is.

hier mijn css:


/* Containers */

#container {
	width: 100%;
	margin: auto;
}

#cont_logo {
	width: 100%;
	margin: auto;
}

#cont_menu {
	width: 147px;
	float: left;
}

#cont_content {
	width: 76%;
	margin: auto;
}

#cont_right {
	width: 147px;
	float: right;
}

#cont_footer {
	width: 100%;
	margin: auto;
}



/* Logo */

#logo {
	text-align: center;
	padding-top: 10px;
}

#logo h1 a {
	font-size: 30px;
	color: #A80000;
	text-decoration: none;
}

#logo h1 a:visited {
	font-size: 30px;
	color: #A80000;
	text-decoration: none;
}

#logo h1 a:hover {
	font-size: 30px;
	color: #A80000;
	text-decoration: none;
}

#logo h2 {
	font-size: 15px;
}



/* Menu */

#menu {
	text-align: left;
	font: bold 14px arial, helvetica, sans-serif;
	border-width: 1px;
	border-style: solid;
	border-color: #000;
	margin-left: 5px;
}

#menu ul {
	list-style: none;
}

#menu li {
	background-color: #A80000;
}

#menu li a {
	color: #fff;
	text-decoration: none;
	display: block;
	text-transform: uppercase;
	padding-left: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
}

#menu li a:visited {
	color: #fff;
	text-decoration: none;

}

#menu li a:hover {
	color: #000;
	text-decoration: none;
	background-color: #D00000;
}



/* Content */

#content {
	text-align: left;
	font-size: 12px;
	padding-left: 60px;
}

#content h1 {
	color: #A80000;
	font-size: 25px;
	text-align: left;
	border-bottom: 2px solid #A80000;
}

#content h2 {
	font-size: 16px;
	color: #000000;
}

#content h3 {
	font-size: 14px;
	color: #000000;
}

#content p {
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
}



/* Right */

#right {
	font: bold 14px arial, helvetica, sans-serif;
	color: #FFFFFF;
	border-width: 1px;
	border-color: #000;
	border-style: solid;
	margin-right: 5px;
	padding-right: 2px;
	padding-top: 2px;
	padding-bottom: 2px;
	background-color: #A80000;
	text-align: center;
}

#right a {
	color: #ffffff;
	text-decoration: none;
}

#right a:visited {
	color: #ffffff;
	text-decoration: none;
}

#right a:hover {
	color: #000000;
	text-decoration: none;
}

#right h2 {
	font: bold 11px arial, helvetica, sans-serif;
	color: #FFFFFF;
	text-align: center;
}

#right h3 {
	font: bold 12px arial, helvetica, sans-serif;
	color: #FFFFFF;
	text-align: center;
}



/* Footer */

#footer {
	text-align: center;
}

#footer a {
	color: #B80000;
	font-size: 13px;
	font-style: italic;
	text-decoration: none;
}

#footer a:visited {
	color: #B80000;
	font-size: 13px;
	font-style: italic;
	text-decoration: none;
}

#footer a:hover {
	color: #680000;
	font-size: 13px;
	font-style: italic;
	text-decoration: underline;
}

hier mijn html


<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
	<head>
			<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">	
	
		<title> | Home</title>

			<link href="reset.css" rel="stylesheet" type="text/css">
			<link href="style.css" rel="stylesheet" type="text/css">
	</head>

	<body>
		<div id="container">

			<div id="cont_logo">
				<div id="logo">
					<?php
						include("logo.php");
					?>
				</div>
			</div>		
			

			<div id="cont_menu">
				<div id="menu">
					<?php
						include("menu.php");
					?>
				</div>
			</div>


			<div id="cont_content">
				<div id="content">
					<?php
						include("home.php");
					?>
				</div>
			</div>


			<div id="cont_right">
				<div id="right">
					<?php
						include("right.php");
					?>					
				</div>
			</div>


			<div id="cont_footer">
				<div id="footer">
					<?php
						include("footer.php");
					?>					
				</div>
			</div>

		</div>
	</body>
</html>

Zoals je kunt zien include ik alles dit omdat ik WEL verschillende pagina's wil (en dus niet alleen mijn content wil veranderen) maar geen zin heb om steeds mijn menu oid te moeten kopiëren.

Als mensen meer code nodig hebben (bijv die van mijn footer oid) dan hoor ik dat wel

hier een plaatje wat goed de indicatie geeft wat er fout is.
wegens privacy heb ik bepaalde stukken zwart moeten maken excuses hiervoor.
http://img697.imageshack.us/img697/7369/screenshotkd.jpg
Zoals je kunt zien springt mijn "right" naar beneden zodra er meer tekst komt in mijn "content" en schiet mijn footer daardoor naar links :S
best irritant.

Groeten,
White

repelsteeltje

02-01-2010 17:03

Ik weet niet zeker of het met div's ook werkt omdat dit geen inline elementen zijn, maar misschien als je dat rechter menu de volgende eigenschap geeft:

vertical-align:top;

?

Onbekende gebruiker

02-01-2010 17:09

Nope had ik al geprobeerd.
Ik denk dat ik mijn content en footer moet laten floaten. Op die manier kunnen ze niet beïnvloed worden noch andere div's beïnvloeden. maar dat kan alleen als right,left, none en inherit dus daar kom ik ook niet veel verder mee.

Iemand nog een geweldig idee ?? Ik probeer ondertussen ook van alles maar nog niet zoveel succes.
Ik weet dat als ik in mijn html de content en right omwisselt dat een gedeelte van het probleem oplost maar dat is een beetje omslachtig lijkt mij.

Groeten,
White

Edit:

Footer heb ik float: left; gegeven dit werkt aangezien de footer margin:auto en width:100% heeft hij blijft dus altijd in het midden wat je ook doet (zelfs al laat je hem links floaten). Het is een workaround voor nu maar als iemand wat beters weet.
Ik heb dit ook op mijn content geprobeerd het werkt. (zoals verwacht) alleen zodra mijn pagina kleiner als 76% word (de groote van de content) gebeurt hetzelfde weer omdat de content al die ruimte in neemt en nu niet meer scaled.

Dus betere ideeën dan dat hoor ik graag.

repelsteeltje

03-01-2010 05:58

Als je niet alergies bent voor tabellen dan kan je het misschien beter alsvolgd doen


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html style="height:100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">    
    
<title> | Home</title>
				
<style type="text/css">
<!--
#container {
    width: 100%;
    margin: auto;
		background-color:#f88;
}

#cont_logo {
    width: 100%;
    margin: auto;
		background-color:#fff;
}

#menu {
    width: 147px;
    background-color: #A80000;

}

#cont_content {
    width: 100%;
    margin: auto;
}

#cont_right {

}

#cont_footer {
    width: 100%;
    margin: auto;
		background-color:#fff;
}

#logo {
    text-align: center;
    padding-top: 10px;
}

#content {
    text-align: left;
    font-size: 12px;
    padding-left: 60px;
}

#right {
    font: bold 14px arial, helvetica, sans-serif;
    color: #FFFFFF;
    border-width: 1px;
    border-color: #000;
    border-style: solid;
    margin-right: 5px;
    padding-right: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #A80000;
    text-align: center;
   width: 147px;
}

-->
</style>
					
</head>

<body style="100%">
		
	
<table id="container">

<tr>
<td id="cont_logo" colspan="3">
    <div id="logo">     <?php  include("logo.php");  ?></div>
</td>
</tr>

<tr valign="top">
<td id="cont_menu">
    <div id="menu">     <?php  include("menu.php"); ?> </div>
</td>
<td id="cont_content">
    <div id="content">  <?php include("home.php"); ?> </div>
</td>
<td id="cont_right">
    <div id="right">    <?php include("right.php");?> </div>
</td>
</tr>

<tr>
<td id="cont_footer" colspan="3">
    <div id="footer">   <?php include("footer.php");?></div>
</td>
</tr>

</table>	
            
</body>
</html>

Pepijn

03-01-2010 09:49

Tabellen zijn helemaal niet bedoeld voor opmaak.

CSS is niet de makkelijkste maar wel de enige juiste.

repelsteeltje

03-01-2010 11:04

Pepijn schreef op 03.01.2010 09:49
Tabellen zijn helemaal niet bedoeld voor opmaak.

CSS is niet de makkelijkste maar wel de enige juiste.

laat maar komen dan die css code van jou

Onbekende gebruiker

03-01-2010 12:13

Tabellen zijn NIET bedoelt voor lay-outs maar om gegevens netjes weer te geven. Dat is dus een oplossing die wel zou werken maar compleet verkeerd is.
Probeer dan nog maar eens je site scalable te maken.

Maar ik heb ondertussen het probleem al opgelost.
In de html heb ik de right met de content omgewisseld (omdat de right een float heeft blijft hij toch wel rechts zitten en maakt dit dus niet uit.)
Ook heb ik in de css de footer een float left gegeven. (ook dit maakt niet uit hij zit onder de rest van de pagina en mag dus overal floaten waar hij wil, margin: auto; zorgt er toch voor dat dit het midden is.)

Dus fixed.

Justin S

03-01-2010 12:14

Probeer eens de div die verspringt, right geloof ik? een clear: left; mee te geven.

Onbekende gebruiker

03-01-2010 12:51

Justin schreef op 03.01.2010 12:14
Probeer eens de div die verspringt, right geloof ik? een clear: left; mee te geven.

Gaat niet werken

repelsteeltje

03-01-2010 14:10

White Blizzard schreef op 03.01.2010 12:13
Tabellen zijn NIET bedoelt voor lay-outs maar om gegevens netjes weer te geven. Dat is dus een oplossing die wel zou werken maar compleet verkeerd is.
Probeer dan nog maar eens je site scalable te maken.

Nee, je indeling laten floaten dat is de bedoeling!

Onbekende gebruiker

03-01-2010 14:40

Tabellen zijn NIET gemaakt om een lay out te maken.

Mijn oplossing is een niet een geweldige manier maar gewoon een workaround in css tot ik een betere/goeie manier heb.

Trouwens indeling laten floaten is prima hoor. Hierdoor is je website makkelijk scalable natuurlijk is het niet de bedoeling bij mijn footer maar zoals ik al zei dit is slechts een tijdelijke workaround.

Terwijl jij gewoon komt met de oplossing maak een lay-out met tables wat geen workaround is en ook geen oplossing maar gewoon een verkeerde manier van iets doen.

Groeten,
White

Reageren

Inloggen om te reageren