Menu
Hi there, I am working on my new site and I think I am getting a little bit confused with background colors and images.
Here’s the code of my CSS;
[CODE]@charset “utf-8”;
* /* overall settings*/
{
margin:0;
padding:0;
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
color:white;
}
.wrapper /* main container */
{
width:100%;
background-color:black; /*this is a test color, wrapper will be black*/
/*background-color:black; */
border:6px solid #770038;
}
#page_body /* color of the body tag*/
{
background-color:black;
}
.wrap_content
{
width:1015px;
margin:0 auto;
border:2px solid yellow;
}
.navigation_menu ul
{
list-style:none;
}
.navigation_menu li
{
float: left;
margin: 0 1.5em;
}
li.button1
{
display:block;
width:203px;
height:50px;
text-align:center;
background: #000000 url(images/buttons.jpg) no-repeat;
line-height:50px;
}
li.button2
{
display:block;
width:203px;
height:50px;
text-align:center;
background: #000000 url(images/buttons.jpg) no-repeat;
line-height:50px;
}
li.button3
{
display:block;
width:203px;
height:50px;
text-align:center;
background: #000000 url(images/buttons.jpg) no-repeat;
line-height:50px;
}
li.button4
{
display:block;
width:203px;
height:50px;
text-align:center;
background: #000000 url(images/buttons.jpg) no-repeat;
line-height:50px;
}
and here’s the page:
[CODE]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-type” content=”text/html;charset=UTF-8″>
<meta http-equiv=”Content-Type” content=”text/html;charset=ISO-8859-1″>
<title>Photography Home</title>
<link rel=”stylesheet” type=”text/css” href=”stylesheets/containers.css”>
</head>
<body id=”page_body”>
<div class=”wrapper”> <!– MAIN CONTAINER –>
<p>hey</p>
<div class=”wrap_content”> <!– BOX FOR CONTENT–>
<p>Hey hey</p>
<div class=”navigation_menu”> <!– TOP NAVIGATION BOX–>
<ul>
<li class=”button1″>Test1</li>
<li class=”button2″>Test2</li>
<li class=”button3″>Test3</li>
<li class=”button4″>Test4</li>
</ul>
</div><!– END OF TOP NAVIGATION BOX–>
<h2>Boia</h2>
</div> <!– END OF BOX FOR CONTENT–>
</div><!– END OF MAIN CONTAINER “WRAPPER”–>
</body>
</html>
So what I am trying to do is to display some buttons (test1, test2, test3 and test4 are the text for these buttons). The image for the button is attached but it doesn’t display on the page. I am pretty sure I messed up with the various background colors and images (sorry still trying to get to grips with things here) and I suppose the buttons are hidden by the black background or something like that. Does anybody know what I should do to get them shown on the page please?
thanks
[upl-file uuid=47ddfa92-a88f-41fe-beda-044e84e0dd14 size=2kB]buttons.jpg