• Locked
No replies
Thu, 2010-04-15 10:03
CaptainChainsaw
Offline
newbie
Last seen: 12 years 41 weeks ago
Timezone: GMT+1
Joined: 2010-04-15
Posts: 4
Points: 7

Hi all,

The last couple of day's has been my first real experience in CSS and using the

tag.

I've created a page, the good news is that its layed out correctly, the bad news is the menu items have a gap in them.

I followed this tutorial to keep the footer at the bottom of the page:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

The type of menu I'm trying to create is this one:

http://be.twixt.us/jquery/suckerFish.php

This is what the page currently looks like (there should be no gap between "Portfolio" and "Item 3.1"):

site_screenshot.jpg

Something is clearly wrong with the CSS but I've no idea what, any ideas?

Main html page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<?php echo html::stylesheet(
    array
    (
        'media/css/style',
    ),
    array
    (
        'screen',
    )
);
?>
<script type="text/javascript" src="/clarecoulter/media/js/jquery.js"></script>
<script type="text/javascript" src="/clarecoulter/media/js/slider.js"></script>
 
</head>
 
<body>
<div id="container">
 
 
<!-- start of header -->
<div id="header">
<h2>Name here</h2>
	<h4>Caption here</h4>
</div>
<!-- end of header -->	
 
 <!-- start of body -->
 <div id="body">
		<ul id="nav-one" class="nav">
			<li>
 
				<a href="home">home</a>
				<!--
				<ul>
					<li><a href="#item1.1">item 1.1</a></li>
					<li><a href="#item1.2">item 1.2</a></li>
					<li><a href="#item1.3">item 1.3</a></li>
					<li><a href="#item1.4">item 1.4</a></li>
 
				</ul>
				-->
			</li>
			<li>
				<a href="info">Info</a>
				<ul>
					<li><a href="#item2.1">item 2.1</a></li>
					<li><a href="#item2.2">item 2.2</a></li>
 
				</ul>
			</li>
			<li>
				<a href="#item3">Portfolio</a>
				<ul>
					<li><a href="#item3.1">item 3.1</a></li>
					<li><a href="#item3.2">item 3.2</a></li>
 
				</ul>
			</li>
			<li>
				<a href="#item4">Testimonials</a>
				<ul>
					<li><a href="#item4.1">item 4.1</a></li>
					<li><a href="#item4.2">item 4.2</a></li>
 
					<li><a href="#item4.3">item 4.3</a></li>
				</ul>
			</li>
			<li>
				<a href="#item4">Links</a>
				<ul>
					<li><a href="#item4.1">item 4.1</a></li>
					<li><a href="#item4.2">item 4.2</a></li>
 
					<li><a href="#item4.3">item 4.3</a></li>
				</ul>
			</li>
			<li>
				<a href="#item4">Blogs</a>
				<ul>
					<li><a href="#item4.1">item 4.1</a></li>
					<li><a href="#item4.2">item 4.2</a></li>
 
					<li><a href="#item4.3">item 4.3</a></li>
				</ul>
			</li>
			<li>
				<a href="#item4">Contact Us</a>
				<ul>
					<li><a href="#item4.1">item 4.1</a></li>
					<li><a href="#item4.2">item 4.2</a></li>
 
					<li><a href="#item4.3">item 4.3</a></li>
				</ul>
			</li>
		</ul>
 
 
 
	<br clear="all" />
	</div>
<!-- end of body -->
 
<!-- start of footer -->
   <div id="footer">
    <p>&copy;2010 <a href="http://www.domainname.com">domainname.com</a> | Developed by <a href="me.com">Me</a></p>
   </div>
<!-- end of footer -->
 
 
</div>
</body>
</html>

CSS:

html, body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	background-color: #000000;
	margin:0;
    padding:0;
    height:100%;
}
 
#body {
   padding:50px 1 60px;
   padding-bottom:60px;   /* Height of the footer */
}
 
 
#container {
   min-height:100%;
   position:relative;
	margin: auto;
	width: 850px;
}
 
#header {
	#background-image: url(images/header.png);
	#background-repeat: no-repeat;
	#height: 12px;
	#width: 490px;
	#margin-bottom: 20px;
	background:#000000;
    padding:0px;
 
}
 
 
/*
ul, li {
	margin:0; 
	padding:0; 
	list-style:none;
}
*/
 
 
/* Navigation */
.nav, .nav ul { 
	list-style: none;
	margin: 0;
	padding: 0;
}
 
.nav {
  font-family: Arial, Helvetica, sans-serif;
  z-index: 100;
  position: relative;
}
.nav li {
  border-left: 1px solid #000;
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {
  font: bold 1.22em/25px Arial, Helvetica, sans-serif;
  background: #565656;
  color: #959595;
  display: block;
  padding: 0 9px;
  text-transform: lowercase;
  text-decoration: none;
}
 
.nav li a:hover {
  background: #ccc;
  color: #000;	
 
}
#nav-one li:hover a, 
#nav-one li.sfHover a {
  background: #ccc;
  color: #000;
}
#nav-one li:hover ul a, 
#nav-one li.sfHover ul a {
  background: #565656;
  color: #959595;	
}
#nav-one li:hover ul a:hover, 
#nav-one li.sfHover ul a:hover {
  background: #ccc;
  color: #000;	
}
 
.nav ul {
  background: #565656;
  border-bottom: 1px solid #000;
  list-style: none;
  margin: 0;
  width: 100px;
  position: relative;
  top: -999em;
  left: -1px;
}
.nav li:hover ul,
.nav li.sfHover ul {
  top: 25px;
}
.nav ul li {
  border: 0;
  float: none;
}
.nav ul a {
  border: 1px solid #000;
  border-bottom: 0;
  padding-right: 20px;
  width: 80px;
  white-space: nowrap;
}
.nav ul a:hover {
  background: #ccc;
  color: #000;
}
 
h2, h4 {
	color: #959595;
}
#footer p {
   font:0.79em arial,san-serif;
   color: #959595;
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#000000;
 
}

Any help would be sincerely appreciated. Its probably something fairly simply.

Thank you in advance.

CaptainChainsaw

Top
Tags: