Jump to content

Help Dropping, Centering, and Styling a NavMenu

psionicsin

By psionicsin
in CSS

Recommended Posts

psionicsin Newbie

psionicsin

Posted
Posted

Hey guys. I'm following some online tutorials, and was trying to combine pieces of each that I needed, but came across a problem.

  1. I don't know how to drop my navigation menu to sit below the dividing line under the logo.
  2. For some reason, my styling keeps messing up with the navigation menu. A bit of the white keeps showing, and I'm not sure how to make it stop.
  3. How do I center this menu?
  4. Is there a better way than what I've done to separate the header element from the navigation menu element?

Seeing as how it's probably something to do with the html, css, and scripting, I've zipped all of the contents and uploaded them HERE.Although here's the html and css for people who might be at work and can't download anything right now.HTML:

<!DOCTYPE HTML><!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]--><!--[if IE 7 ]>	<html lang="en" class="no-js ie7"> <![endif]--><!--[if IE 8 ]>	<html lang="en" class="no-js ie8"> <![endif]--><!--[if IE 9 ]>	<html lang="en" class="no-js ie9"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]--><html><head>	<meta charset="utf-8">	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">		<title>Ruth Olson Photography</title>		<meta name="viewport" content="width=device-width, initial-scale=1.0">		<link rel="stylesheet" type="text/css" href="css/style.css"/>	<script src="js/modernizr-1.6.min.js"></script></head><body>		<div id="header-container">		<header>			<div id="menu-container">				<ul id="navMenu">					<li><a href="#" class="normalMenu">Home</a></li>					<li><a href="#" class="normalMenu">At A Glance</a></li>					<li><a href="#" class="normalMenu">About</a></li>					<li><a href="#" class="normalMenu">Gallery</a></li>					<li><a href="#" class="normalMenu">Senior Challenge</a></li>					<li><a href="#" class="normalMenu">Prices</a></li>					<li><a href="#" class="normalMenu">Contact Us</a></li>					<li><a href="#" class="normalMenu">Log-In</a></li>				</ul>			</div>		</header>	</div>		<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>	<script type="text/javascript" src="js/js_script.js"></script></body></html>

CSS:

@charset "utf-8";/* CSS Document */* {	margin: 0;	padding: 0;}body { /* Styling the body */	font-size: 100%;	font-family: Arial, Helvetica, sans-serif;	background: url(images/body_bg.png) repeat-x top #c4c0bf;}/* Navigation menu styles */ul#navMenu { /* Styling Unorder List */	height: 397px; width: 884px;	font-family:Arial, Helvetica, sans-serif;	margin: 0 auto;	background: url(images/header_bg.jpg) no-repeat;}ul li{	border:1px solid #282828;	display:inline-block;	/* changing the display property */	float:left;	/* floating the list items to the left */	height:25px;	list-style-type:none;	/* disabling the list icon */	overflow:hidden;	/* hiding the overflowing content */}ul li a, ul li a:hover,ul li a:visited{	text-decoration:none;	/* removing the underline text-decoration */}/* styling the links */.normalMenu, .normalMenu:visited,.hoverMenu, .hoverMenu:visited,.selectedMenu,.selectedMenu:visited {/* these properties are shared between the classes */	outline:none;	padding:5px 10px;	display:block;}/* styles that are assigned individually */.hoverMenu,.hoverMenu:visited,.selectedMenu,.selectedMenu:visited {	margin-top:-30px;	background:url(images/grey_bg.gif) repeat-x #eeeeee;	color:#282828;}.selectedMenu,.selectedMenu:visited {	margin:0;}.normalMenu, .normalMenu:visited{	color:white;	background:url(images/dark_bg.gif) repeat-x #444444;}

Link to comment
Share on other sites
psionicsin Newbie

psionicsin

Posted
  • Author
Posted

To have my navigation menu on top of the background gradient image, do I need to have separate div id's, or nested divs?

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...