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>| © 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 :)