Member Avatar for zobadof

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

  • 1 Contributor
  • 1 Reply
  • 101 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by zobadof

Dani AI

Generated

Good catch, — positioning the nav absolutely is a fast way to get it next to the logo, but it is brittle. Absolute positioning removes the menu from normal flow, so the nav will not adapt if the header height changes, the logo size changes, or the viewport narrows. That can lead to overlap or broken layouts on different screen sizes.

A more robust, modern approach is to make the header a horizontal flex container and let the nav items flow naturally. Flexbox centers vertically, keeps the logo and menu aligned, and makes spacing between items predictable and easy to adjust. Example CSS (replace class names to match your markup):

.site-header {
  display: flex;
  align-items: center;
  gap: 1rem;         /* space between logo and nav */
  padding: 0.5rem;
}
.main-nav ul {
  display: flex;
  gap: 0.5rem;      /* space between links */
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-nav a {
  display: inline-block;
  padding: 0.35rem 0.6rem;
  text-decoration: none;
}

Practical tips: reset the UL default margin/padding to zero so browser defaults don't add unexpected gaps; avoid using <br> tags for layout spacing; add an alt attribute to the logo; use a semantic <nav> wrapper for accessibility; and add a simple media query to stack the nav under the logo on small screens. If you must support very old browsers that lack flexbox, a float/inline-block fallback with vertical-align: middle will work, but test across viewports. For reference on the recommended approach, see MDN on Flexbox and the HTML nav element: Flexbox guide and nav element.

Member Avatar for zobadof

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

#button {

				padding: 0;
				position: absolute;
				right: 100px;
				top: 25px;
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.