Nieuw lid |
|
Ben pas sinds kort bezig met websites maken in html/css. En nu stuit ik tegen een probleem. Het ziet er nu zo uit: http://i34.tinypic.com/350nk0h.jpg
Het probleem is dus dat ik de tekst in het midden van me scherm wil hebben. Maar dat lukt me dus niet. Als ik margin 0px auto doe dan gaat me nav bar weg.
<html>
<head>
<link rel="stylesheet" href="sitestyle2.css">
<ul id="nav">
<li id="nav-home"><a href="#">Home</a></li>
<li id="nav-about"><a href="#">About</a></li>
<li id="nav-archive"><a href="#">Archive</a></li>
<li id="nav-lab"><a href="#">Lab</a></li>
<li id="nav-reviews"><a href="#">Reviews</a></li>
<li id="nav-contact"><a href="#">Contact</a></li>
</ul>
<title>WEB 2.0 en SEO VALID lay-out</title>
<style type="text/css">
body{
color: #000000;
font-family:Verdana, Times, serif;
font-size: 12px;
background-color:#000000;
}
.header{
background-image:url("http://i33.tinypic.com/wbytjq.jpg");
position:absolute;
top: 0px;
right: 0px;
left: 0px;
height:150px;
}
.content{
position:relative;
background-color: #006600;
padding:5px;
width: 770px;
margin: 200px auto;
}
</style>
</head>
<body>
<div class="header">
<IMG SRC="feyenoord.jpg" ALT="Foto van mij" WIDTH="148" HEIGHT="148"><!--Logo en navigation komt hier-->
</div>
<div class="content">
tekst
</div>
<div align="left"></div>
</body>
</html>
<link rel="stylesheet" href="sitestyle2.css"> <li id="nav-home"><a href="#">Home </a></li> <li id="nav-about"><a href="#">About </a></li> <li id="nav-archive"><a href="#">Archive </a></li> <li id="nav-lab"><a href="#">Lab </a></li> <li id="nav-reviews"><a href="#">Reviews </a></li> <li id="nav-contact"><a href="#">Contact </a></li> body{ color: #000000; font-family:Verdana, Times, serif; font-size: 12px; background-color:#000000; } .header{ background-image:url("http://i33.tinypic.com/wbytjq.jpg"); position:absolute; top: 0px; right: 0px; left: 0px; height:150px; } .content{ position:relative; background-color: #006600; padding:5px; width: 770px; margin: 200px auto; } <IMG SRC="feyenoord.jpg" ALT="Foto van mij" WIDTH="148" HEIGHT="148"><!--Logo en navigation komt hier--> tekst
.header{
background-image:url("http://i33.tinypic.com/wbytjq.jpg");
position:absolute;
top: 0px;
right: 0px;
left: 0px;
height:150px;
}
.content{
position:absolute;
background-color: #006600;
top: 200px;
left:100px;
right:100px;
padding:5px;
}
body{
color: #413f3f;
font-family:Verdana, Times, serif;
font-size: 12px;
background-color:#000000;
}
#nav {
margin:0;
padding:0;
float:left;
width:100%;
border:1px solid #42432d;
border-width:1px 0;
}
#nav li {
padding:0;
margin:0;
}
#nav a:link,
#nav a:visited {
color:#000;
background:#006600;
padding:20px 40px 4px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 2px 2px 2px #555;
}
#nav li:first-child a {
border-left:1px solid #42432d;
}
#nav a:hover {
color:#fff;
background:#727454;
}
.header{ background-image:url("http://i33.tinypic.com/wbytjq.jpg"); position:absolute; top: 0px; right: 0px; left: 0px; height:150px; } .content{ position:absolute; background-color: #006600; top: 200px; left:100px; right:100px; padding:5px; } body{ color: #413f3f; font-family:Verdana, Times, serif; font-size: 12px; background-color:#000000; } #nav { margin:0; padding:0; float:left; width:100%; border:1px solid #42432d; border-width:1px 0; } #nav li { padding:0; margin:0; } #nav a:link, #nav a:visited { color:#000; background:#006600; padding:20px 40px 4px 10px; float:left; width:auto; border-right:1px solid #42432d; text-decoration:none; font:bold 1em/1em Arial, Helvetica, sans-serif; text-transform:uppercase; text-shadow: 2px 2px 2px #555; } #nav li:first-child a { border-left:1px solid #42432d; } #nav a:hover { color:#fff; background:#727454; }
Iemand enig idee? Bedankt alvast.
|