Menu
The website I am making is x-plodesupplements.clanteam.com
The second button “Look at our T-shirts” won’t go where it should be which is next to the “Learn about us” button.
My styles.css is:
body: { font-family: Tahoma, Verdana, Arial; }
/*Navigation Bar
#navigationBg {
width: 100%;
background: #b5283f;
border-top: 1px solid #d58692;
border-bottom: 1px solid #dd8c8c;
overflow: hidden;
}
ul#navigation {
width: 930px;
margin: 0 auto;
}
ul#navigation li {
height:58px;
float: left;
line-height: 58px;
margin-right: 25px;
}
ul#navigation li a {
color: white;
font-size: 15px;
font-weight: bold;
text-decoration: none;
}
ul#navigation li a:hover { color: #dd8c8c; text-decoration: none; }
li.logo {
width: 290px;
height: 50px;
display: block;
padding-left: 35px;
background: url(/top_logo.png) no-repeat;
}
/* Nav Ends
*/
#bannerBg {
width: 100%;
height: 288px;
border-bottom: 1px solid #fb9b9b;
background: url(/red_bg.png) repeat-x;
}
#bannerWrapper { width: 930px; margin: 0 auto; }
#bannerContent {
width: 530px;
height: auto;
float: left;
padding: 15px;
color: white;
text-shadow: 1px 1px 0px #000000;
filter: dropshadow(color=#000000, offx=1, offy=1);
}
#bannerContent p { font-size: 17px; font-weight: normal; }
#bannerContent h1 { font-size: 28px; font-weight: bold; line-height: 60px; }
/*Buttons
ul#blueBtns { margin-top: 20px; }
.button { width: 268px; height: 49.75px; background: url(/red_btn.png) no-repeat; }
#leftBtn { float: left; background-position: 0 -50px; }
#rightBtn { float: right; background-position: 0 -150px; }
#leftBtn:hover { background-position: 0 -50px; }
#rightBtn:hover { background-position: 0 -150px; }
/*Red Banner Ends
((((((my index.html is?))))
<html large=”en”>
<head>
<meta charset=”utf-8″>
<link rel=”stylesheet” href=”styles.css” type=”text/css” media=”screen” title=”no title” charset=”utf-8″>
<link rel=”stylesheet” type=”text/css” href=”
<title>X-plode Supplements </title>
</head>
<body>
<div id=”navigationBg”>
<ul id=”navigation”>
<li class=”logo”><a href=”index.html” alt=”X-plode Supplements”></a></li>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Store</a></li>
<li><a href=”#”>Nutrition</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Our Story</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul> <!-#navigation UL ends->
</div> <!-#navigationBg ends->
<div id=”bannerBg”>
<div id=”bannerWrapper”>
<div id=”bannerContent”>
<h1>Sample Header</h1>
<p>
sample textsampletextsample textsample textsample textsample textsample textsample textsample textsample textsample textsample text
textsampletextsampletextsampletextsampletextsample textsample textsample textsample textsample
textsampletextsample textsample textsample textsample
</p>
<ul id=”blueBtns”>
<li><a id=”leftBtn” class=”button” href=”#”></a></li>
<li><a id=”rightBtn” class=”button” href=”#”></a></li>
</ul>
</div> <!-#bannerContent Ends->
<div id=”bannerImg”></div>
</div> <!-#bannerWrapper end->
</div> <!-bannerBg ends->
</body>
</html>
:::::::::::::::::::::::::
If anyone can help me it’d be great I’m really new at this and I’m trying to learn how to make a website… Thanks!