www.webdeveloper.com
Results 1 to 2 of 2

Thread: HTML & CSS Navigation Bar Problem

  1. #1
    Join Date
    Jun 2013
    Posts
    2

    Question HTML & CSS Navigation Bar Problem

    Hello everyone,

    I've a problem. My navigation bar is in the middle of the page in section Store, but when I go to Contact the navigation bar moves a little bit to the right. The code is the same voor the 2 pages. Can you help me? http://webshopproduct.net23.net/

    Store page:
    HTML Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<link rel="stylesheet" type="text/css" href="mystyle.css">
    		<title>Store</title>
    	</head>
    	<body>
    		<ul id="list-nav" style="font-family: Verdana">
    			<li><a href="index.html" title="Go to Store">Store</a></li>
    			<li><a href="news.asp" title="Go to Home">News</a></li>
    			<li><a href="contact.html" title="Go to Contact">Contact</a></li>
    			<li><a href="about.asp" title="Go to Home">About</a></li>
    			<img align="right" src="trusted2.png" width="100" height="61">
    		</ul>
    		
    		<br></br>
    		
    		<iframe src="http://astore.amazon.com/webshopproduc-20" width="100%" height="4000" frameborder="0" scrolling="no"></iframe>
    	</body>
    </html>
    Contact page:
    HTML Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<link rel="stylesheet" type="text/css" href="mystyle.css">
    		<title>Contact</title>
    	</head>
    	<body>
    		<ul id="list-nav" style="font-family: Verdana">
    			<li><a href="index.html" title="Go to Store">Store</a></li>
    			<li><a href="news.asp" title="Go to Home">News</a></li>
    			<li><a href="contact.html" title="Go to Contact">Contact</a></li>
    			<li><a href="about.asp" title="Go to Home">About</a></li>
    			<img align="right" src="logo.png" width="100" height="61">
    		</ul>
    		
    		<br></br>
    		
    		<p>You can contact me by sending an e-mail to: xxijkxx@hotmail.com</p>
    	</body>
    </html>
    CSS:
    HTML Code:
    ul#list-nav {
    	list-style:none;
    	margin:0 auto;
    	padding:0;
    	width:525px;
    }
    
    ul#list-nav li {
    	display:inline;
    }
    
    ul#list-nav li a {
    	text-decoration:none;
    	padding:5px 0;
    	width:100px;
    	background:#206BA2;
    	color:#FFFFFF;
    	float:left;
    	text-align:center;
    	border-left:1px solid #ffffff;
    }
    
    ul#list-nav li a:hover {
    	background:#6397BE;
    	color:#000000;
    }

  2. #2
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    your not setting you css correctly. you should have the content under the nav bar in a <div> the content is being displayed different cause its just taking the content on the page and smashing it on there with out any order being set to where its to be displayed.

    you need to also set a div for your nav so it knows where to stay.

    so it would be

    div for nav

    div for stuff under nav

    and so on. and if you want to get real creative you can make as many divs for as much stuff as you want. this is a very simple exlenation but to make a long story short you need to look at some css tutorials.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles