CSS hulp

Door Hugo L op 19-12-2007 10:57

3.591 views

hoi hoi..

Ik prbeer mijn site in div te zetten maar wil echt niet lukken..
het lukt me niet om het in FF en IE goed te zetten

hopelijk kan iemand mij helpen..
mijn css:


*{
margin:0;
padding:0;
}

BODY { 
background-color:#fff;
font-size:16px;
}

a { 
color:#FFF;
text-decoration:none; 
}

a:hover { 
text-decoration:underline; 
}

#wrapper
{
width: 1000px;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
margin-left: auto;
margin-right: auto; 
}

#top
{
padding: 3em;
background-image:url(../image/header.jpg);
background-color:#BFAC60;
}


#left
{
float: left;
width: 190px;
margin: 0;
padding: 1em;
background-color:#A0BFFF; 
}

#center
{
margin-left: 210px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
z-index: -1;
background-color:#A0BFFF;
color:#FFFFFF;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color:#A0BFFF;
border-top: 1px solid gray;
}

#left, #center { 
padding-bottom: 32767px;
margin-bottom: -32767px; 
}


.box { 
border: solid 1px;
border-color:#010086;
width: 180px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
color:#FFFFFF;
}

.box-title {
text-align:center;
width: 100%;
border-color:#666777;
background-color:#000082;
color:#FFFFFF;
}

mijn pagina:


<html>
	<head>
    <TITLE> test </TITLE>
		<link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
<div id="wrapper">
	<div id="top"><br>
    </div>
		<div id="left">
			<div class="box">
    			<div class="box-title">
    			Login
   				</div>   
			shit vna de login  
			</div>
            
			<div class="box">
    			<div class="box-title">
    			Menu
   				</div> 
               <li>home</li>  
            </div>
		</div>
       
            
			<div id="center">
			center
    		</div>

	<div id="footer">
    Copyright Hugo Leijdekkers
    </div>
</div>
</body>
</html>

bednakt alvast

desertme(sander)

21-12-2007 16:06

zet nog een div om je #wrapper div heen een die van
<body>
tot
</body>
zit.

geef deze b.v. container mee

.container
{
margin-left:auto;
margin-right:auto;
height:100%;
width:100%;
}

deze zorgt er nu voor dat er een onzichtbare div onder alles ligt die altijd je gehele venster vult.
zodra je dit neer zet zal hij dan je eerste volgende div in het midden neergooien omdat je daar een vaste !!! breete aan geeft de maat die je pagina moet hebben

ik hoop dat je er wat aan hebt Greeting sander

Hugo L

21-12-2007 16:38

ik heb al een #container namelijk:


	position: relative; /* De container positioneer je relative omdat je de footer absoluut aan de container positioneert */
	width: 1000px;
	min-height: 100%; 
	height: auto !important; /* IE hack */
	height: 100%;
	voice-family: "\"}\""; /* IE hack */
	voice-family: inherit; /* deze hoort daar nog bij */
	margin: 0px auto; /*deze div centreren*/
	background-color: #A0BFFF;

maakt dat niet uit.

Reageren

Inloggen om te reageren