Okay, so basically. I'm a newbie to this.
My problems is, that i followed one of the link on this forum about centering my website horizontaly. I did it, and now i met some problems.
1. I can't change the white background around my website.
2. My right nav is a bit misplaced, and i can't fix it.
html code:
Code:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>SA-MP Roleplay Guide >> Index</title>
</head>
<body>
<div id="body1">
<div id="container">
<div id="header">
</div>
<div id="horizontalnav">
<div class="navlinks">
<ul>
<li><a href="http://www.website.com">Sleeping</a></li>
<li><a href="http://www.website.com">Job</a></li>
<li><a href="http://www.website.com">Friends</a></li>
<li><a href="http://www.website.com">Toilet</a></li>
</div>
</div>
<div id="leftnav">Exempel av stock.</div>
<div id="rightnav">Exempel av stock.</div>
<div id="body"><div class="box"><div id="img"><img src="http://www.webmaster-talk.com/images/avatar.jpg" alt="" /></div><h2></h2>
</div>.</div>
<div id="footer">Copyright Neverwind 2010</div>
</div>
</div>
</body>
</html>
CSS Code
Code:
#container {
margin-left: auto;
margin-right: auto;
width: 56em;
background-color:#000000;
}
#header {
width: 900px;
height: 100px;
position: relative;
background-image:url("http://www.webmaster-talk.com/images/adback.png");
background-image: url(images/headerBG.jpg);
border-bottom: 2px solid #000000;
}
#header a {
color: #ffffff;
text-decoration: underline;
font-weight: bold;
font-family: Verdana;
font-size: 14px;
}
#header a:visited {
color: #000000;
text-decoration: underline;
font-weight: bold;
}
#header a:hover {
color: #cc0000;
text-decoration: none;
font-weight: bold;
}
.HorizLinks {
position: absolute; top: 77px; left: 180px;
}
.HorizLinks ul {
margin: 0px;
}
.HorizLinks li {
margin: 0px 15px 0px 0px;
list-style-type: none;
display: inline;
}
#horizontalnav {
width: 900px;
height: 30px;
position: relative;
background-color: #000000;
border-bottom: 2px solid #000000;
}
.navlinks {
position: absolute; top: 4px; left: 140px;
}
.navlinks ul {
margin: auto;
}
.navlinks li {
margin: 0px 18px 0px 0px;
list-style-type: none;
display: inline;
}
.navlinks li a {
color: #ffffff;
padding: 5px 12px 7px;
text-decoration: none;
font-size: 16px;
font-family: Verdana;
}
.navlinks li a:hover{
color: #ffffff;
background-color: #c0c0c0;
/*If you want to use a color for the background instead replace above line with background-color: [insert color here with # sign in front];*/
text-decoration: underline;
}
#header p {
color: #000000;
font-family: Arial;
font-weight: bold;
}
.smalltext {
font-size: 9px;
font-family: Arial;
}
#leftnav {
float: left;
width: 140px;
height: 506px;
background-image:url("http://www.webmaster-talk.com/images/navbar.jpg");
border-right: 1px #694717;
}
#rightnav {
float: right;
width: 140px;
height: 506px;
background-image:url("http://www.webmaster-talk.com/images/navbar.jpg");
border-left: 1px #694717;
}
#body {
margin: auto;
width: 600px;
padding: 10px 0px 0px 10px;
background-color:#000000;
}
#footer {
clear: both;
background-image:url("http://www.webmaster-talk.com/images/footer.jpg");
}
.box {
margin-top: 10px;
padding: 5px 5px 5px 5px;
background-color: #dddddd;
border: 2px solid #d22929;
width: 350px;
color: #000000;
}
h2 {
font-size: 20px;
color: #cc0000;
padding: 10px;
font-family: Verdana;
}
Pic of my site:
Last edited by Moritz; 08-22-2010 at 05:55 AM..
|
