1,105,585 Community Members

Navigation Bar Issues

Member Avatar
zobadof
Posting Whiz in Training
220 posts since Dec 2009
Reputation Points: -7 [?]
Q&As Helped to Solve: 8 [?]
Skill Endorsements: 0 [?]
 
0
 

Hello,

I'm coding a website for my mum but I'm having some issues with getting the nav bar where I want it and how I want it to look. As right now it is underneath the logo and appearing spaced out.

I was just wondering if someone could help me to fix this issue, everything else has gone to plan apart from this. As you can see I've got the logo where I want, but I want the nav bar to go next to it. Not right next to it, some sensible spacing obviously but so it looks nice. Also for the nav bar to be less apart. The image is not the best as it's a little fuzzy but here is the coding (I'm doing it via Notepad++ so I'm afraid no live site).

The HTML as Follows:

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//ENS"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>CommuniCare :: Home</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
                <link rel="stylesheet" href="style.css" type="text/css" />
                <style type="text/css">
                <!--
                img { border: none; }
                -->
                </style>
	</head>
	<body> 
		<div id="main">
	<div id="header"> 
	    <img src="images/CC.png" width="250" height="100" >
		  
		  
	<ul id="button">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">F.A.Q</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
	    </div>

  

  <Br >
  <Br >
			<div id="marquee">
				<marquee onmouseout="this.start();" onmouseover="this.stop();" direction="left" behaviour="scroll">this website is under construction</marquee>
			</div>
			
			
			
			<br >
			<br >
			
			<div id="footer">				
				<p><font face="Comic Sans MS" >CommuniCare - <font color="229E1E" >Information, Advice, Support </font>| &copy; Copyright CommuniCare - All Rights Reserved</p>
				<p>233 Kings Road, Reading, RG1 4LS</p>
				<p>Registered Charity Number, 1078694</p></font>
			</div>
	</body>
</html>

The CSS as Follows:

body {
				background: #5FC6FA;
			}
			#main {
				background-color: #1165BA;
			    border: 5px solid #FFFBFA;
			    border-radius: 6px;
			    color: #BBBBBB;
			    font-family: sans-serif;
			    margin: 20px auto 0;
			    position: relative;
			    width: 1000px;
			}
			#header {
				background-color: #BBBBBB;
			    border-bottom: 6px solid #BBBBBB;
			    border-radius: 5px;
			    margin: 5px;
			}
			
			#button {

				padding: 3;
			}
			#button li {
				display: inline;
			}
			#button li a {
				font-family: Arial;
				font-size:11px;
				text-decoration: none;
				padding: 10px;
				background-color: #2175bc;
				color: #fff;
			}
			#button li a:hover {
				background-color: #2586d7;
				margin-top:-2px;
				padding-bottom:12px;
			}
			
			#logo {
				height: 95px;
				width: 220px;
			}
			#marquee {
				background-color: #E65A2C;
			    border: 1px solid #000000;
			    border-bottom-left-radius: 5px;
			    border-top-left-radius: 5px;
			    border-bottom-right-radius: 5px;
			    border-top-right-radius: 5px;
			    color: #F0F0F0;
			    font-size: 14px;
			    font-weight: 700;
			    height: 18px;
			    margin: 0;
			    margin-left: 8px;
			    padding: 2px 5px;
			    text-transform: uppercase;
			    width: 975px;
                           }
			#content {
				margin-top: 100px;
				padding-bottom: 80px;
			}
			#welcome {
				background-color: #E65A2C;
			    border: 2px solid #000000;
			    border-radius: 5px 5px 5px 5px;
			    color: #F0F0F0;
			    float: left;
			    font-size: 14px;
			    font-weight: 700;
			    height: 250px;	
			    margin-right: 8px;		    
			    margin-left: 8px;
			    padding: 2px 5px;
			    text-transform: uppercase;
			    width: 300px;
			}
			#footer {
			    background-color: #C9C1C1;
			    border-top: 2px solid #FFFFFF;
			    color: #000000;
			    font-size: 12px;
			    padding: 5px;
			    text-align: center;	
			}
 
			/* special classes */
			.clear { clear: both; }

Thank you and I look forward to the help you can bring :)

Member Avatar
zobadof
Posting Whiz in Training
220 posts since Dec 2009
Reputation Points: -7 [?]
Q&As Helped to Solve: 8 [?]
Skill Endorsements: 0 [?]
 
0
 

I managed to solve this. Sorry for any inconvenience. If you want to know how:

#button {

				padding: 0;
				position: absolute;
				right: 100px;
				top: 25px;
Question Self-Answered as of 2 Years Ago
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article