I'm running into a few problems with this website I am building for a client. Here are the problems:
1. Content background color not showing up - In the content div, the white background is not showing up. I have a wrapper around the whole layout, and I made sure to clear every float, but it still is not showing.
2. Banner navigation not aligning - I'm trying to get the links on the banner to align with the image separator I placed, but it keeps pushing both.
3. Navigation background image not showing correctly - I usually know how to resolve this, but I am stuck. When you hover over the navigation, an image will appear in the background. Now when I set the paddings to all of them, they go to the bottom of the content because it is too big. I am trying to class them separately, but I have had no luck.
Live Version:
http://serenedestiny.com/clientwork/Ventursol/
HTML:
Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ventursol</title>
<!-- css -->
<link href="master.css" rel="stylesheet" type="text/css" />
<!-- javascript -->
<script src="js/beep.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="logo">
Logo Here
</div>
<div id="nav">
<a href="index.html" onmouseover="playSound('beep.wav');" class="home">Home</a>
<a href="services.html" onmouseover="playSound('beep.wav');">Services</a>
<a href="industries-served.html" onmouseover="playSound('beep.wav');">Industries Served</a>
<a href="why-us.html" onmouseover="playSound('beep.wav');">Why Us?</a>
<a href="about-us.html" onmouseover="playSound('beep.wav');">About Us</a>
<a href="careers.html" onmouseover="playSound('beep.wav');">Careers</a>
<a href="contact.html" onmouseover="playSound('beep.wav');">Contact</a>
<a href="employee.html" onmouseover="playSound('beep.wav');">Employment Login</a>
</div>
<div id="banner">
<div id="banner-nav">
<a href="#">Capture Key Service and Industries Served</a>
<img src="i/nav-sep.png" alt="" class="sep" />
<a href="#">Sales Copy</a>
</div>
</div>
<div id="contentbg">
<div id="content">
<div id="left">
<h2>Lorem Ipsum</h2>
<img src="i/c-pic.jpg" alt="Lorem Ipsum" class="image" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus a arcu aliquam semper at sit amet nunc. Curabitur condimentum vestibulum neque sit amet varius. Quisque sodales cursus eleifend. Aenean sagittis ultricies quam eget dapibus. Quisque eget nisl a purus porta facilisis. Curabitur porta luctus dolor, in pretium dui faucibus vel. Morbi ut felis sapien, sit amet interdum risus. Maecenas vehicula egestas orci vitae pharetra. Morbi dictum ligula et mi tincidunt elementum. Mauris tincidunt aliquam erat, feugiat vulputate turpis imperdiet sed. Curabitur vestibulum justo nec turpis ullamcorper nec imperdiet lorem eleifend. Ut placerat porta dictum. Maecenas dapibus feugiat ante non placerat. Curabitur auctor leo dictum elit cursus in vulputate elit hendrerit.<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus a arcu aliquam semper at sit amet nunc. Curabitur condimentum vestibulum neque sit amet varius. Quisque sodales cursus eleifend. Aenean sagittis ultricies quam eget dapibus. Quisque eget nisl a purus porta facilisis. Curabitur porta luctus dolor, in pretium dui faucibus vel. Morbi ut felis sapien, sit amet interdum risus. Maecenas vehicula egestas orci vitae pharetra. Morbi dictum ligula et mi tincidunt elementum. Mauris tincidunt aliquam erat, feugiat vulputate turpis imperdiet sed. Curabitur vestibulum justo nec turpis ullamcorper nec imperdiet lorem eleifend. Ut placerat porta dictum. Maecenas dapibus feugiat ante non placerat. Curabitur auctor leo dictum elit cursus in vulputate elit hendrerit.</p>
</div>
<div id="right">
<h2>Lorem Ipsum</h2>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus a arcu aliquam semper at sit amet nunc. Curabitur condimentum vestibulum neque sit amet varius. Quisque sodales cursus eleifend.</p>
</div>
</div><!-- end content -->
</div><!-- end contentbg -->
<div id="footer"></div>
<div id="links">
<a href="index.html">Home</a>
|
<a href="services.html">Services</a>
|
<a href="industries-served.html">Industries Served</a>
|
<a href="why-us.html">Why Us?</a>
|
<a href="about-us.html">About Us</a>
|
<a href="careers.html">Careers</a>
|
<a href="contact.html">Contact</a>
|
<a href="employee.html">Employment Login</a>
<br />
Copyright © 2009. All Rights Reserved.
</div>
</div><!-- end container -->
<span id="dummy"></span>
</body>
</html>
CSS:
Code:
@charset "utf-8";
/* CSS Document */
/* imports */
@import url('css/reset.css');
/* layout elements */
body {
background: #c1e9fd url(i/bg.png) repeat-x;
color: #121212;
font-family: arial,sans-serif;
font-size: 12px;
word-spacing: 0.2pt;
line-height: 1.2;
}
/* container */
#container {
margin: 0 auto;
width: 875px;
}
/* logo */
#logo {
float: left;
margin: 29px 0 30px 0;
font-size: 18px;
}
/* nav */
#nav {
float: right;
margin: 29px 0 0 0;
}
#nav a {
color: #0b6797;
text-decoration: none;
padding: 0 5px;
}
#nav a:hover {
background: url(i/nav-hov.png) no-repeat center;
}
.home {
padding: 20px 30px;
}
/* banner */
#banner {
background-image: url(i/banner-nav.png);
height: 388px;
clear: both;
}
#banner-nav {
padding-top: 300px;
}
#banner-nav a {
color: #fff;
font-size: 18px;
text-decoration: none;
padding: 0 10px 0 10px;
}
#banner-nav a:hover {
color: #bae8ff;
}
.sep {
padding-top: 32px;
position: absolute;
}
/* content */
#content {
background: white;
width: 875px;
}
h2 {
color: #2a87b5;
font-family: helvetica,sans-serif;
font-size: 22px;
letter-spacing: -0.4pt;
margin-bottom: 10px;
}
/* left */
#left {
float: left;
margin: 3px 0 0 5px;
width: 550px;
}
.image {
float: left;
margin-right: 5px;
}
/* right */
#right {
float: right;
border-left: 1px dotted #d6d7d7;
width: 300px;
padding: 0 0 0 11px;
margin: 3px 0 0 0;
}
li {
list-style-image: url(i/li.png);
list-style-position: inside;
margin-left: 5px;
font-weight: bold;
padding-bottom: 6px;
}
/* footer */
#footer {
clear: both;
background: url(i/footer.png) no-repeat;
height: 14px;
}
#links {
color: #2a86b4;
margin: 5px 0 5px 0;
font-size: 11px;
text-align: center;
}
#links a {
text-decoration: none;
color: #2a86b4;
}
#links a:hover {
text-decoration: underline;
color: #2778a1;
}
Please ignore the beep when you hover over the navigation. It is there by request of the client.
