Menu Element Question

**Moshambi** · 11-29-2007, 12:47 PM

so i am having a problem with a menu on the site im working on. whats happening is when i resize the window the items in the menu are being pushed down the page, kinda like they are stacking on top of eachother. i was wondering if it could possibly because i use the <UL>, <LI> tags to make my menu, and then style it in CSS. the same thing also happens to my content area of the site.

Here is a look at the HTML to better understand:

Code:

<html>
<title> Allen's Home Repair -> Home </title>
<head>  
<link rel="stylesheet" type="text/css" href="skin.css" />
<div id="banner">
<center><img src="images/banner.gif" alt="Allen's Home Repair"/></center>
</div>
</head>
<body>



<center>
<div id="menu">
<ul>
	<li><a href="index.html"> Home </a></li>
	<li><a href="pictures.html"> Pictures </a></li>
	<li><a href="jobrequest.html"> Job Request </a></li>
	<li><a href="contact.html"> Contact </a></li>
</ul>
</div>
</center>

<center>
<div id="content">
<p> Welcome to the Allen's Home Repair website!  </p>
</div>
</center>

</body>
</html>

And the CSS for styling:

Code:

#menu
{
	margin-left: -19px;
}

#menu ul li
{
	display: inline;
	height: 20px;
	width: 63px;
}

#menu ul li a
{
	text-decoration: none;
	color: black;
	padding: 10px;
	margin: 0px;
	border: 1px solid black;
	background-color: #d19347;
}

#menu a:link, a:visited
{
	
}

#menu a:hover, a:active
{
	background-color: #c17518;
}

#content
{
	text-align: left;

	padding: 5px;
	margin-top: -6px;
	margin-left: 185px;
	margin-right: 194px;
	border: 1px solid black;
	background-color: #d19347;
	height: 75%;
	
}

#content a:link, a:visited
{
	color: black;
}

#content a:hover, a:active
{
	color: black;
	background-color: #d19347;
}

body
{
	background-image: url("images/background.gif");
}

i hope you can help and thanks!

**boogyman** · 11-29-2007, 01:39 PM

Originally Posted by Moshambi

so i am having a problem with a menu on the site im working on. whats happening is when i resize the window the items in the menu are being pushed down the page, kinda like they are stacking on top of eachother. i was wondering if it could possibly because i use the <UL>, <LI> tags to make my menu, and then style it in CSS. the same thing also happens to my content area of the site.

yes you should be using an unordered list for you menu, however you do not need the extra <center> nor <div> tags.

Code:

<ul id="menu">
	<li><a href="index.html"> Home </a></li>
	<li><a href="pictures.html"> Pictures </a></li>
	<li><a href="jobrequest.html"> Job Request </a></li>
	<li><a href="contact.html"> Contact </a></li>
</ul>

Code:

ul#menu
{
	margin-left: -19px;
}

ul#menu li
{
	list-style-type: none;
	display: inline;
	height: 20px;
	width: 63px;
}

that will make your menu appear horizontally, and without the bullets.
by declaring the height / width of the menu however that is why you are getting it to display vertically... get rid of the height and width and let the menu render.

now you will see that I toldyou to get rid of the <center> tag as well correct? we can still get everything in the center by using some margins and width properties.... so go a head and delete all of those tags. the body tag should be the very top of your css styles, and all of your generic styling like margin / padding / font (family, size, type, variant, color...) will go there.

Code:

body {
     margin: 0 auto;
     width: 80%; /* 80% of the available screen width */
     min-width: 760px;  /* 800x600 resolution friendly */
     background-color: #hexadecimal;
     background-image: url("images/background.gif");
     color: #000000;
     font-family: "Times New Roman" Arial sans-serif;
     font-size: 12pt;
}

hexadecimal - html color code name you can use values 0-15 or 0-9 A-F (10-15)

the first 3 styles creates some whitespace on the left and right of the whole page. you should use percentages as much as possible because different browsers render pixels differently so we try to keep it as clean and browser friendly as possible.

notice that I used the hexadecimal code on the color style? to Again different browsers render differently, so using the HTML Hexadecimal will give you the most precision and accuracy of rendering properly among all browsers

**Moshambi** · 11-30-2007, 05:03 AM

thank you very much boogyman. i noticed in the code example you put:

margin: 0 auto;

what exactly does auto do?

thanks again

**boogyman** · 11-30-2007, 02:14 PM

auto = let the browser determine the margins. it's used with the width property to center the element. you can also use it to center verically by doing something like

Code:

element {
     margin: auto 0;
     hieght: Npx;
}

however vertically aligning like that isn't suggested because it is explicitly declaring how tall the element is which is "taboo" coding practice

Thread: Menu Element Question

Thread Tools

Search Thread

Menu Element Question

Bookmarks

Bookmarks

Posting Permissions