shauntaylor88
28th September 06, 06:53 PM
I have followed online tutorials scattered throughout the mess of the internet, and according to the sites which I have followed, my menu should have an image but its not displaying.
redcsslayout.css
<!--
/* Main */
*{
margin:0;
padding:0;
}
body {
background-color: #fff;
font-family: arial,sans-serif;
color: #b11616;
margin-top: 0px;
margin-left: 0px;
}
#container {
width: 792px;
margin: auto;
}
a:link,a:visited,a:active {
font-size: 14px;
color: #ff0000;
background-color: inherit;
text-decoration: none;
margin-left: 5px;
}
a:hover {
color: #b11616;
background-color: inherit;
margin-left: 5px;
}
/* Header */
#header_left {
height: 250px;
width: 20px;
background-image: url(header_left.jpg);
}
#header_right {
height: 250px;
width: 20px;
background-image: url(header_right.jpg);
}
#header {
height: 250px;
width: 750px;
background-image: url(header.jpg);
}
/* Navigation */
#navigation_left {
float: left;
width: 199px;
margin-left: 0px;
}
#navigation_left ul {
list-style: none;
margin-left: 0px;
}
#navigation_left ul li {
width: 199px;
height: 20px;
background-image: url(nav_middle.jpg);
margin-left: 0px;
}
.nav_top {
height: 29px;
width: 199px;
background-image: url(nav_top.jpg);
}
#nav_middle {
height: 20px;
width: 199px;
background-image: url(nav_middle.jpg);
}
#nav_bottom {
height: 29px;
width: 199px;
background-image: url(nav_bottom.jpg);
}
#nav_splitter {
height: 20px;
width: 199px;
background-image: url(nav_splitter.jpg);
}
/* Content */
#content_top {
height: 29px;
width: 571px;
background-image: url(content_top.jpg);
}
#content_bottom {
height: 29px;
width: 571px;
background-image: url(content_bottom.jpg);
}
/* Footer */
#footer_left {
height: 29px;
width: 20px;
background-image: url(footer_left.jpg);
}
#footer {
height: 29px;
width: 750px;
background-image: url(footer.jpg);
}
#footer_right {
height: 29px;
width: 20px;
background-image: url(footer_right.jpg);
}
-->
navlayout.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>The Matrix Online | Viper Gaming | homepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="redcsslayout.css">
</head>
<body>
<div id="navigation_left">
<div class="nav_top"><b><span style="font-size: 14px;"> Main Navigation</span></b></div>
<ul>
<li><a href="">Home</a></li>
<li><a href="">News</a></li>
<li><a href="">Community</a></li>
<li><a href="">IRC Chat</a></li>
<li><a href="">Official Clan</a></li>
</ul>
<div id="nav_bottom"></div>
</body>
</html>
whats displayed is just the image for 'nav_top' and the image for 'nav_bottom', but 'nav_middle', where the image is supposed to show for the menu list just doesn't show, and I have no idea where I am going wrong.
Im just wondering if anyone could give me an helping hand?
Regards,
Shaun
redcsslayout.css
<!--
/* Main */
*{
margin:0;
padding:0;
}
body {
background-color: #fff;
font-family: arial,sans-serif;
color: #b11616;
margin-top: 0px;
margin-left: 0px;
}
#container {
width: 792px;
margin: auto;
}
a:link,a:visited,a:active {
font-size: 14px;
color: #ff0000;
background-color: inherit;
text-decoration: none;
margin-left: 5px;
}
a:hover {
color: #b11616;
background-color: inherit;
margin-left: 5px;
}
/* Header */
#header_left {
height: 250px;
width: 20px;
background-image: url(header_left.jpg);
}
#header_right {
height: 250px;
width: 20px;
background-image: url(header_right.jpg);
}
#header {
height: 250px;
width: 750px;
background-image: url(header.jpg);
}
/* Navigation */
#navigation_left {
float: left;
width: 199px;
margin-left: 0px;
}
#navigation_left ul {
list-style: none;
margin-left: 0px;
}
#navigation_left ul li {
width: 199px;
height: 20px;
background-image: url(nav_middle.jpg);
margin-left: 0px;
}
.nav_top {
height: 29px;
width: 199px;
background-image: url(nav_top.jpg);
}
#nav_middle {
height: 20px;
width: 199px;
background-image: url(nav_middle.jpg);
}
#nav_bottom {
height: 29px;
width: 199px;
background-image: url(nav_bottom.jpg);
}
#nav_splitter {
height: 20px;
width: 199px;
background-image: url(nav_splitter.jpg);
}
/* Content */
#content_top {
height: 29px;
width: 571px;
background-image: url(content_top.jpg);
}
#content_bottom {
height: 29px;
width: 571px;
background-image: url(content_bottom.jpg);
}
/* Footer */
#footer_left {
height: 29px;
width: 20px;
background-image: url(footer_left.jpg);
}
#footer {
height: 29px;
width: 750px;
background-image: url(footer.jpg);
}
#footer_right {
height: 29px;
width: 20px;
background-image: url(footer_right.jpg);
}
-->
navlayout.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>The Matrix Online | Viper Gaming | homepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="redcsslayout.css">
</head>
<body>
<div id="navigation_left">
<div class="nav_top"><b><span style="font-size: 14px;"> Main Navigation</span></b></div>
<ul>
<li><a href="">Home</a></li>
<li><a href="">News</a></li>
<li><a href="">Community</a></li>
<li><a href="">IRC Chat</a></li>
<li><a href="">Official Clan</a></li>
</ul>
<div id="nav_bottom"></div>
</body>
</html>
whats displayed is just the image for 'nav_top' and the image for 'nav_bottom', but 'nav_middle', where the image is supposed to show for the menu list just doesn't show, and I have no idea where I am going wrong.
Im just wondering if anyone could give me an helping hand?
Regards,
Shaun