PHP expert |
|
ben nu dus bezig met css en heb dit al:
http://ultimatum.ul.funpic.de/clansite/
maar zoals je ziet loopt de linker bar niet door omdat die navigatie shit in de weg staat.., mijn vraag dus, hoe zorg ik dat die bar doorloopt en die navigatie precies rechts van de bar staat..
trouwens mijn site is al Xhtml strict 1.0, dus het ligt niet aan mijn codering
dit is mijn index.php
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"en\" xml:lang=\"en\">
<head>
<title>Title</title>
<link rel=\"stylesheet\" href=\"styles.css\" type=\"text/css\" />
</head>
<body>
<div class=\"container\">
<div class=\"layout_top1\"></div>
<div class=\"layout_top2\"></div>
<div class=\"layout_top3\">Clan</div>
<div class=\"layout_top4\"></div>
<div class=\"banner_left\"></div>
<div class=\"banner\"></div>
<div class=\"banner_right\"></div>
<div class=\"nav_left\"></div>
<div class=\"nav_home\"></div>
<div class=\"nav_forums\"></div>
<div class=\"nav_downloads\"></div>
<div class=\"nav_links\"></div>
<div class=\"nav_rooster\"></div>
<div class=\"nav_contact\"></div>
<div class=\"nav_right\"></div>
<div class=\"bar_left\"></div>
<div class=\"content_header\"></div>
<div class=\"box\">
<div class=\"bar_left\"></div>
<div class=\"box_top\"></div>
<div class=\"box_left\"></div>
<div class=\"box_content\">Content</div>
<div class=\"box_right\"></div>
<div class=\"box_bottom\"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"> <html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"en\" xml:lang=\"en\"> <head> <title>Title</title> <link rel=\"stylesheet\" href=\"styles.css\" type=\"text/css\" /> </head> <body> <div class=\"container\"> <div class=\"layout_top1\"></div> <div class=\"layout_top2\"></div> <div class=\"layout_top3\">Clan</div> <div class=\"layout_top4\"></div> <div class=\"banner_left\"></div> <div class=\"banner\"></div> <div class=\"banner_right\"></div> <div class=\"nav_left\"></div> <div class=\"nav_home\"></div> <div class=\"nav_forums\"></div> <div class=\"nav_downloads\"></div> <div class=\"nav_links\"></div> <div class=\"nav_rooster\"></div> <div class=\"nav_contact\"></div> <div class=\"nav_right\"></div> <div class=\"bar_left\"></div> <div class=\"content_header\"></div> <div class=\"box\"> <div class=\"bar_left\"></div> <div class=\"box_top\"></div> <div class=\"box_left\"></div> <div class=\"box_content\">Content</div> <div class=\"box_right\"></div> <div class=\"box_bottom\"></div> </div> </div> </body> </html>
en dit is de css, styles.css
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color: #333333;
background-color: #272c2e;
text-align: center;
}
a:link {
color: #272c2e; text-decoration :none;
}
a:visited {
color: #272c2e; text-decoration :none;
}
a:hover {
color: #f7f7f7; text-decoration :underline;
}
a:active {
color: #272c2e; text-decoration :none;
}
.container {
width: 900px;
margin-right: auto;
margin-left: auto;
}
.layout_top1 {
background-image: url(\"images/M_top.jpg\");
width: 900px;
height: 12px;
float: left;
}
.layout_top2 {
background-image: url(\"images/Reunion_02.jpg\");
width: 70px;
height: 22px;
float: left;
}
.layout_top3 {
background-image: url(\"images/M_clan.jpg\");
width: 217px;
height: 22px;
float: left;
}
.layout_top4 {
background-image: url(\"images/M_m.jpg\");
width: 613px;
height: 22px;
float: left;
}
.banner_left {
background-image: url(\"images/M_bannerleft.jpg\");
width: 70px;
height: 197px;
float: left;
}
.banner {
background-image: url(\"images/M_banner.jpg\");
width: 759px;
height: 197px;
float: left;
}
.banner_right {
background-image: url(\"images/M_bannerright.jpg\");
width: 71px;
height: 197px;
float: left;
}
.nav_left {
background-image: url(\"images/M_navleft.jpg\");
width: 137px;
height: 31px;
float: left;
}
.nav_home {
background-image: url(\"images/M_navhome.jpg\");
width: 61px;
height: 31px;
float: left;
}
.nav_forums {
background-image: url(\"images/M_navforums.jpg\");
width: 75px;
height: 31px;
float: left;
}
.nav_downloads {
background-image: url(\"images/M_navdownloads.jpg\");
width: 105px;
height: 31px;
float: left;
}
.nav_links {
background-image: url(\"images/M_navlinks.jpg\");
width: 144px;
height: 31px;
float: left;
}
.nav_rooster {
background-image: url(\"images/M_navrooster.jpg\");
width: 106px;
height: 31px;
float: left;
}
.nav_contact {
background-image: url(\"images/M_navcontact.jpg\");
width: 85px;
height: 31px;
float: left;
}
.nav_right {
background-image: url(\"images/M_navright.jpg\");
width: 187px;
height: 31px;
float: left;
}
.content_header {
background-image: url(\"images/M_contentheader.jpg\");
width: 900px;
height: 43px;
float: left;
}
.bar_left {
background-image: url(\"images/M_left.jpg\");
width: 74px;
float: left;
}
.bar_right {
background-image: url(\"images/M_left.jpg\");
width: 74px;
float: left;
}
.box {
width: 184px;
float: left;
}
.box_top {
background-image: url(\"images/N_top.jpg\");
width: 184px;
height: 34px;
float: left;
}
.box_left {
background-image: url(\"images/N_left.jpg\");
width: 15px;
height: 185px;
float: left;
}
.box_content {
background-color: #437594;
width: 151px;
height: 185px;
float: left;
}
.box_right {
background-image: url(\"images/N_right.jpg\");
width: 18px;
height: 185px;
float: left;
}
.box_bottom {
background-image: url(\"images/N_base.jpg\");
width: 184px;
height: 19px;
float: left;
}
body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color: #333333; background-color: #272c2e; text-align: center; } color: #272c2e; text-decoration :none; } a:visited { color: #272c2e; text-decoration :none; } a:hover { color: #f7f7f7; text-decoration :underline; } a:active { color: #272c2e; text-decoration :none; } .container { width: 900px; margin-right: auto; margin-left: auto; } .layout_top1 { background-image: url(\"images/M_top.jpg\"); width: 900px; height: 12px; float: left; } .layout_top2 { background-image: url(\"images/Reunion_02.jpg\"); width: 70px; height: 22px; float: left; } .layout_top3 { background-image: url(\"images/M_clan.jpg\"); width: 217px; height: 22px; float: left; } .layout_top4 { background-image: url(\"images/M_m.jpg\"); width: 613px; height: 22px; float: left; } .banner_left { background-image: url(\"images/M_bannerleft.jpg\"); width: 70px; height: 197px; float: left; } .banner { background-image: url(\"images/M_banner.jpg\"); width: 759px; height: 197px; float: left; } .banner_right { background-image: url(\"images/M_bannerright.jpg\"); width: 71px; height: 197px; float: left; } .nav_left { background-image: url(\"images/M_navleft.jpg\"); width: 137px; height: 31px; float: left; } .nav_home { background-image: url(\"images/M_navhome.jpg\"); width: 61px; height: 31px; float: left; } .nav_forums { background-image: url(\"images/M_navforums.jpg\"); width: 75px; height: 31px; float: left; } .nav_downloads { background-image: url(\"images/M_navdownloads.jpg\"); width: 105px; height: 31px; float: left; } .nav_links { background-image: url(\"images/M_navlinks.jpg\"); width: 144px; height: 31px; float: left; } .nav_rooster { background-image: url(\"images/M_navrooster.jpg\"); width: 106px; height: 31px; float: left; } .nav_contact { background-image: url(\"images/M_navcontact.jpg\"); width: 85px; height: 31px; float: left; } .nav_right { background-image: url(\"images/M_navright.jpg\"); width: 187px; height: 31px; float: left; } .content_header { background-image: url(\"images/M_contentheader.jpg\"); width: 900px; height: 43px; float: left; } .bar_left { background-image: url(\"images/M_left.jpg\"); width: 74px; float: left; } .bar_right { background-image: url(\"images/M_left.jpg\"); width: 74px; float: left; } .box { width: 184px; float: left; } .box_top { background-image: url(\"images/N_top.jpg\"); width: 184px; height: 34px; float: left; } .box_left { background-image: url(\"images/N_left.jpg\"); width: 15px; height: 185px; float: left; } .box_content { background-color: #437594; width: 151px; height: 185px; float: left; } .box_right { background-image: url(\"images/N_right.jpg\"); width: 18px; height: 185px; float: left; } .box_bottom { background-image: url(\"images/N_base.jpg\"); width: 184px; height: 19px; float: left; }
|