1 Replies - 2565 Views - Last Post: 30 November 2012 - 03:14 AM

#1 Rabastan  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 60
  • Joined: 27-August 12

CSS menu list causing cell to drop

Posted 29 November 2012 - 09:24 AM

Will explain this as best as I can.

I am including a horizontal CSS menu in a website I am making for a friend, when I simply use text everything is fine, as in picture below. This is a cropped screenshot btw.
Posted Image

However when I add the list I get this.
Posted Image

see how the entire cell has moved down?

here is my code.

the CSS is:
body,
html {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	margin:0;
	padding:0;
	color:#000;
	background-image:url(../images/site_bg.png);
	background-repeat:repeat-x;
}

#container {
	width:950px;
	margin:0 auto;
	text-align:center;
}
/*End Global Styles Here*/

/*Begin Head Styles Here*/
#head {
	height:192px;
	background:#ebebeb;
}

/*Begin Nav Styles Here*/
#nav {
	height:47px;
	background:#ef4036;
}

#nav li {
    display:inline;
}

#nav li a {   
	color:#FFF;
	font-size:16px;
	font-weight:bold;
	text-decoration: none;
}
/*End Nav Styles Here*/



The Menu using list:
<div id="nav">
	<ul>
    	<li><a href="#">Home</a></li>
    	<li><a href="#">About</a></li>
    	<li><a href="#">Services</a></li>
    	<li><a href="#">Products</a></li>
    	<li><a href="#">Contact Us</a></li>
	</ul>
</div>



And Without:
<div id="nav">
	Main Navigation Here
</div>



nav.php is loaded into a cell head.php as a php include.

Thank You in advance
Rab

Is This A Good Question/Topic? 0
  • +

Replies To: CSS menu list causing cell to drop

#2 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: CSS menu list causing cell to drop

Posted 30 November 2012 - 03:14 AM

Hello there,

Firstly, your screenshots are not showing up for me, could you please link to a live example, correct the screenshots or explain what the issue is in a little more depth?

Bonus round: Make better use of shorthand CSS properties, it will reduce the amount of things in your CSS files and make it easier to read.

Example, on your html CSS declarations you could..

Replace font-family and font-size with just
font: 12px Arial, Helvetica, sans-serif

Replace background-image and background-repeat with
background: url(../images/site_bg.png) repeat-x;

This post has been edited by Kruithne: 30 November 2012 - 03:14 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1