Code Cleanup - Webmaster Forum - Web Design, Programming and SEO forums

12-11-2004, 07:49 PM

ULTiMATE

Status: Member
Join date: Aug 2004
Location: Bristol, United Kingdom
Expertise:
Software:

Posts: 241

iTrader: 0 / 0%

ULTiMATE is on a distinguished road

Code Cleanup

I've been away from the whole website scene for a while, and every time I stop working on websites, I lose valuable information. Anyway, I've started work on my page, but even though my code is nested well enough for my liking, the CSS and XHTML still feel a tad cluttered. Would any of you be able to help me out with my page, and CSS style sheet? The link to my page is http://www.michaelbull.net/home.php. I have some major annoyances with my page as well. One of them being the fact that there is no space underneath my footer like there is with the header in IE (if you're confused with what I mean, check both pages in Firefox and IE and you'll see what I mean). The major problem I have is that I want to put in a horizontal list navbar underneath my banner area, and it's proving to be pretty difficult. Thanks to everyone who helps out.

12-11-2004, 09:03 PM

karl472001

Status: Member
Join date: Jul 2004
Location:
Expertise:
Software:

Posts: 226

iTrader: 0 / 0%

karl472001 is on a distinguished road

I have an example of a horizontal menu.

It contains an example of a fixed width and elastic version of a horizontal menu.

I am posting the code since I cannot upload it:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menu Example</title>

<style type="text/css">
body {
	margin: 20px;
}
#container {
	margin: 0 auto;
}
#navcontainer_stretch {
	margin: 0 auto;
	width: 90%;
	height: 25px;
	background: #E9E9E9;
	border-width: 1px;
	border-style: solid;
	border-color: #555555;
}
#navcontainer_fixed {
	margin: 0 auto;
	width: 700px;
	height: 25px;
	background: #E9E9E9;
	border-width: 1px;
	border-style: solid;
	border-color: #555555;
}
#nav {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
#nav li {
	margin: 0px 10px 0px 10px;
	padding: 0px;
	display: inline;
	line-height: 24px;
}
.links {
	font-family: Verdana, Arial;
	font-weight: bold;
	font-size: 12px;
	color: #666666;
}
.links a {
	font-family: Verdana, Arial;
	font-weight: bold;
	font-size: 12px;
	color: #666666;
	text-decoration: none;
}
.links a:hover {
	font-family: Verdana, Arial;
	font-weight: bold;
	font-size: 12px;
	color: #790000;
	text-decoration: none;
}
p {
	width: 500px;
	border-style: dashed;
	border-color: #999999;
	border-width: 1px;
	margin: 0px;
	padding: 3px;
	background: #DBEAEF;
	font-family: Verdana;
	font-size: 11px;
	color: #333333;
	line-height: 20px;
	margin: 0 auto;
	margin-bottom: 15px;
}
</style>

</head>

<body>

<div id="container">

	<div><br /><br /><br /></div>

	<p>This is an example of a horizontal menu that stretches a width of 80%:</p>


	<div id="navcontainer_stretch" class="links">
		<ul id="nav">
			<li><a href="http://www.talkfreelance.com">Talkfreelance</a></li>
			<li><a href="http://forum.yaxay.com">YaXaY</a></li>
			<li><a href="http://www.webhostingtalk.com">WebHostingTalk</a></li>
		</ul>
	</div>

	<div><br /><br /><br /></div>

	<p>This is an example of a horizontal menu with a fixed width:</p>

	<div id="navcontainer_fixed" class="links">
		<ul id="nav">
			<li><a href="http://www.talkfreelance.com">Talkfreelance</a></li>
			<li><a href="http://forum.yaxay.com">YaXaY</a></li>
			<li><a href="http://www.webhostingtalk.com">WebHostingTalk</a></li>
		</ul>
	</div>

</div>

</body>
</html>

12-11-2004, 11:47 PM

ULTiMATE

Status: Member
Join date: Aug 2004
Location: Bristol, United Kingdom
Expertise:
Software:

Posts: 241

iTrader: 0 / 0%

ULTiMATE is on a distinguished road

I'll be able to add a horizontal menu pretty easily. It's just implementing it into my current design i find to be the troublesome part. If you try and add that code, the list always goes to the side and i can't see why.

12-12-2004, 04:27 AM

Legendary

Status: Member
Join date: Nov 2004
Location:
Expertise:
Software:

Posts: 115

iTrader: 0 / 0%

Legendary is on a distinguished road

if you want to display your list horizontal, then add this to your css

Code:

#name ul li	{
	display: inline;
	list-style: none;
	}

12-12-2004, 09:10 AM

ULTiMATE

Status: Member
Join date: Aug 2004
Location: Bristol, United Kingdom
Expertise:
Software:

Posts: 241

iTrader: 0 / 0%

ULTiMATE is on a distinguished road

Originally Posted by Legendary

if you want to display your list horizontal, then add this to your css

Code:

#name ul li	{
	display: inline;
	list-style: none;
	}

I've already said that i can do that. That stuff is childs play. What i want is to edit my current code so that code will slip in perfectly.

12-13-2004, 03:26 AM

Legendary

Status: Member
Join date: Nov 2004
Location:
Expertise:
Software:

Posts: 115

iTrader: 0 / 0%

Legendary is on a distinguished road

its childs play, then what's wrong with just slip it in?

html

Code:

		<!-- BEGIN TOPNAV -->
		<div id="menu">
			<ul>
				<li>whatever</li>
				<li>whatever</li>
				<li>whatever</li>
				<li>whatever</li>
				<li>whatever</li>
				<li>whatever</li>
			</ul>
		</div>

css

Code:

#menu	{
	width: 700px;
	height: 25px;
	background: #000;
	text-align: center;
	}
	
#menu ul	{
	margin: 0;
	padding: 0;
	}
	
#menu ul li	{
	display: inline;
	list-style: none;
	padding: 2px 15px;
	}

12-13-2004, 10:55 AM

ULTiMATE

Status: Member
Join date: Aug 2004
Location: Bristol, United Kingdom
Expertise:
Software:

Posts: 241

iTrader: 0 / 0%

ULTiMATE is on a distinguished road

Originally Posted by Legendary

its childs play, then what's wrong with just slip it in?

html

Code:

		<!-- BEGIN TOPNAV -->
		<div id="menu">
			<ul>
				<li>whatever</li>
				<li>whatever</li>
				<li>whatever</li>
				<li>whatever</li>
				<li>whatever</li>
				<li>whatever</li>
			</ul>
		</div>

css

Code:

#menu	{
	width: 700px;
	height: 25px;
	background: #000;
	text-align: center;
	}
	
#menu ul	{
	margin: 0;
	padding: 0;
	}
	
#menu ul li	{
	display: inline;
	list-style: none;
	padding: 2px 15px;
	}

Check my webpage again. I've just added the code, and it seems that none of the formatting shows up. This is why i wanted someone to check my code and tell me if they see any problems, and a solution to why this keeps happening.

12-16-2004, 09:53 PM

ULTiMATE

Status: Member
Join date: Aug 2004
Location: Bristol, United Kingdom
Expertise:
Software:

Posts: 241

iTrader: 0 / 0%

ULTiMATE is on a distinguished road

Sorry for the double post but is there any chance of someone being able to help me?

12-17-2004, 12:30 AM

Legendary

Status: Member
Join date: Nov 2004
Location:
Expertise:
Software:

Posts: 115

iTrader: 0 / 0%

Legendary is on a distinguished road

Code:

#menu	{
	clear: both;
	width: 700px;
	height: 25px;
	background: #000;
	text-align: center;
	}

ehh..try that!!

12-17-2004, 10:38 AM

#10

ULTiMATE

Status: Member
Join date: Aug 2004
Location: Bristol, United Kingdom
Expertise:
Software:

Posts: 241

iTrader: 0 / 0%

ULTiMATE is on a distinguished road

Originally Posted by Legendary

Code:

#menu	{
	clear: both;
	width: 700px;
	height: 25px;
	background: #000;
	text-align: center;
	}

ehh..try that!!

Tried that, and now in Firefox it doesn't vertically align properly.