Nav bar issues

HTML & CSS
1

hi
im trying to get a picture .png to line up with my inline nav menu
not having much luck

trying to do it in css but all my attempts break on browser resize :frowning:

<div class=“navcontain”>
<a href=“Index.html”> <img src=“Images/nav.png” width=“250px” height=“” alt=“logo” /></a>

   &lt;ul class="navigation"&gt;
				

        		&lt;li&gt;&lt;a href="Services.html" alt="Popular services"&gt; Services&lt;/a&gt;&lt;/li&gt;
       		&lt;li&gt;&lt;a href="Portfolio.html"alt="Popular services"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
        		&lt;li&gt;&lt;a href="About.html"alt="Popular services"&gt;About us&lt;/a&gt;&lt;/li&gt;	
      		&lt;li&gt;&lt;a href="Contact-us.html" alt="Popular services"&gt; Contact &lt;/a&gt; &lt;/li&gt;	 		   			    				 				
			&lt;/ul&gt;
 &lt;/div&gt;

.navigation
{
width: 980px;
margin:0px auto 30px;
}

.navigation li
{
display:inline;
list-style-type:none;
width:800px;
}

.navigation a
{
padding: 0 15px;
text-decoration:none;
font-size:26px ;
color:#FFF;
}

.navigation a:hover
{
color:#F90;
}

2

got it just got to centre it now --see new post

3

I would have to see the complete HTML and CSS to give a 100% certain answer… but let’s start by fixing what is glaring wrong in your code, maybe that will solve the immediate issue.

  1. <img src=“Images/nav.png” width= 250 alt=“logo” />, there is also some dispute about this but many coders believe you shouldn’t put an inline element as a sibling to a block element, just saying.

  2. This wont work: .navigation li{width:800px;} You cant set explicit dimensions on INLINE elements ( neither height nor width!!), also… 800px PER EACH LI??? SRSLY??? I am going to guess that you meant .navigation to be 800px;

  3. .navigation a{font-size:26px ;} is not wrong, but it’s generally a bad idea… just a heads up

  4. Again, not wrong but I am wondering since I cant see you page in action… why center .navigation and not navcontain?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<style type="text/css">
  .navcontain{width: 980px; margin:0px auto 30px auto;  }
.navcontain a img{border:none;  }
.navcontain ul, .navcontain ul li, .logo, .logo img    {list-style:none; display:inline; vertical-align:middle;}
.navcontain li a{ padding: 0 1em; text-decoration:none; font-size:1.67em ;color:#FFF;}
.navcontain li a:hover{color:#F90;}
		</style>
	</head>
	<body>

<div class="navcontain">
 <a href="Index.html" class="logo"> <img src="Images/nav.png" width= 250   height=50 alt="logo" /></a>
<ul>
<li><a href="Services.html" alt="Popular services"> Services</a></li>
<li><a href="Portfolio.html"alt="Popular services">Portfolio</a></li>
<li><a href="About.html"alt="Popular services">About us</a></li>
<li><a href="Contact-us.html" alt="Popular services"> Contact </a> </li>
</ul>
</div> 	</body>
</html>

hope that helps