Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Navigation bar makes my border disappear?

    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.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    kassarole (11-16-2012)

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you so much! I've honestly never really validated before, but I see now how it's important.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •