I'm trying to make a page where there's one border around the content and navigation bar. So I put it all in a wrapper. However, the border disappears when I include the navigation bar in the wrapper and everything else below it moves around. I'm trying to make it where the text is on the right side of the image as well.
Here's my code:
Code:
<style>
#body {
margin : 0;
font : 100.1% 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
}
#wrapper {
width : 770px;
margin : auto;
border : 1px solid #6c5160;
}
#navbar {
margin: auto;
padding: 0;
height: 1.9em;
width : 770px;
background-color: #6c5160;
}
#navbar li {
list-style: none;
float: left;
}
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #6c5160;
color: #fff;
text-decoration: none;
font-family:Arial,Helvetica,sans-serif;}
#navbar li ul {
display: none;
width: 10em;
background-color: #6c5160;}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: #6c5160;
border-bottom: 1px solid #fff;
color: #ffffff; }
#navbar li li a:hover {
background-color: #c0b3a3; }
#left {
float : left;
display : inline;
width : 300px;
padding: 10px;
}
h1 {
text-align : center;}
#right {
padding: 30px;
float : right;
width : 390px;
text-align : left;
margin: auto;
font-family:Arial,Helvetica,sans-serif;
}
#footer {
clear : both;
padding : 10px;
text-align : center;
font-size : 0.9em;
width : 740px;
height : auto;
font-family : serif;
}
</style>
<body>
<h1>Logo</h1>
<div id="wrap">
<ul id="navbar">
<li><a href="#">Home</a><ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">threeee</a></li></ul>
</li>
<ul id="navbar">
<li><a href="#">About</a></li>
<ul id="navbar">
<li><a href="#">FAQ</a>
</li>
<ul id="navbar">
<li><a href="#">Training</a>
</li>
<ul id="navbar">
<li><a href="#">Shop</a><ul>
<li><a href="#">Log in</a></li>
</ul>
</li>
<ul id="navbar">
<li><a href="#">Contact</a><ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">Numero Tres</a></li></ul>
</li></br>
<div id="left"><img src="http://i43.photobucket.com/albums/e365/A---PerfectDisaster/Eyelash.jpg"></div>
<div id="right"><p>Welcome to Lash Essence</p>
<p>Donec vel massa. Ut nibh. Donec placerat ultrices dui. Morbi eu dui eget mauris cursus pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras ante neque, tempor eu, semper sit amet, hendrerit vitae, quam. Nullam ante. Pellentesque arcu sapien, suscipit in, elementum vitae, vulputate quis, metus. Quisque sollicitudin leo a diam. Quisque in risus sit amet mi faucibus feugiat. Ut ullamcorper pede a libero. Donec nisl.</p>
</div>
<div id="footer">| About | Privacy Statement | Contact | Link Us |</div></div>
</body>
Last edited by kassarole; 11-16-2012 at 12:43 PM..
Hello kassarole,
But you didn't put it all in #wrapper, you put it all in #wrap.
There are quite a few other errors as well. See the links about validation in my signature line for help finding little mistakes like these.
Make your markup look like this for starters -
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#body {
margin : 0;
font : 100.1% 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
}
#wrap {
width : 770px;
margin : auto;
border : 1px solid #6c5160;
}
#navbar {
margin: auto;
padding: 0;
height: 1.9em;
width : 770px;
background-color: #6c5160;
}
#navbar li {
list-style: none;
float: left;
}
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #6c5160;
color: #fff;
text-decoration: none;
font-family:Arial,Helvetica,sans-serif;}
#navbar li ul {
display: none;
width: 10em;
background-color: #6c5160;}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: #6c5160;
border-bottom: 1px solid #fff;
color: #ffffff; }
#navbar li li a:hover {
background-color: #c0b3a3; }
#left {
float : left;
display : inline;
width : 300px;
padding: 10px;
}
h1 {
text-align : center;}
#right {
padding: 30px;
float : right;
width : 390px;
text-align : left;
margin: auto;
font-family:Arial,Helvetica,sans-serif;
}
#footer {
clear : both;
padding : 10px;
text-align : center;
font-size : 0.9em;
width : 740px;
height : auto;
font-family : serif;
}
</style>
</head>
<body>
<h1>Logo</h1>
<div id="wrap">
<ul id="navbar">
<li><a href="#">Home</a>
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">threeee</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Shop</a>
<ul>
<li><a href="#">Log in</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">Numero Tres</a></li>
</ul>
</li>
</ul>
<div id="left"><img src="http://i43.photobucket.com/albums/e365/A---PerfectDisaster/Eyelash.jpg"></div>
<div id="right">
<p>Welcome to Lash Essence</p>
<p>
Donec vel massa. Ut nibh. Donec placerat ultrices dui. Morbi eu dui eget mauris cursus pellentesque.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras ante
neque, tempor eu, semper sit amet, hendrerit vitae, quam. Nullam ante. Pellentesque arcu sapien,
suscipit in, elementum vitae, vulputate quis, metus. Quisque sollicitudin leo a diam. Quisque in
risus sit amet mi faucibus feugiat. Ut ullamcorper pede a libero. Donec nisl.
</p>
</div>
<div id="footer">| About | Privacy Statement | Contact | Link Us |</div>
<!--end wrap--></div>
</body>
</html>
Before you post, read our: 
