Topic: Centering a horizontal menu. Pages that link to <a href="https://ozoneasylum.com/backlink?for=11058" title="Pages that link to Topic: Centering a horizontal menu." rel="nofollow" >Topic: Centering a horizontal menu.\
 
Author Thread
SPyX
Bipolar (III) Inmate

From: College Station, TX
Insane since: Aug 2002

 IP logged posted posted 09-26-2003 23:32 Edit Quote

I may not be able to explain this right, but the code should be good enough for most of you. I have a menu that is a list. I want this menu to be horizontal and centered. By resorting to float: right/left I have managed to fullfill all criteria except centering. Is there a way to do this in CSS? Have I gone about it in all the wrong ways?

Here's the code.

CSS first:

code:
#menu{

	position: absolute;

	top: 190px;

}



#menu a:link, #menu a:visited, #menu a:active{

	color: #a5a5a5;

	display: list-item;

	list-style-type: none;

	width: 100px;

	height: 14px;

	margin: 3px;

	padding: 2px;

	border-style: solid;

	border-width: 3px;

	border-color: #7b7b7b;

	text-decoration: none;

	text-align: center;

	font-weight: bold;

	background-color: #851D30;

	float: right;

}



#menu a:hover{

	background-color: #FBD76F;

	color: #a5a5a5;

}



And html:

code:
<!--Menu-->

<div id="menu">

		

	<a href="1.html">Main</a>

	<a href="1.html">News Archive</a>

	<a href="1.html">Members</a>

	<a href="1.html">Heritage</a>

	<a href="1.html">FAQ</a>

	<a href="1.html">Contact</a>

	

</div>



[Edit: I should also say that I don't have a total grasp of CSS. I don't understand exactly why I have to add float to get the list to appear horizontally or if there is any other way to do it. Some dummied down explanations would be nice if you've got the time. Cheers!]

[Edit2: I should also say that I have to be able to preserve the block-only formatting things.]


It's pronounced "Spikes!"

[This message has been edited by SPyX (edited 09-26-2003).]

[This message has been edited by SPyX (edited 09-26-2003).]
Veneficuz
Paranoid (IV) Inmate

From: A graveyard of dreams
Insane since: Mar 2001

 IP logged posted posted 09-27-2003 01:25 Edit Quote

The best place to learn about creating menus using list (which is what I think you're trying to do) is this ALA article. Nice examples and everything is explained so you understand what is happening.

So my advice is to read that article. Rewrite your CSS using the new knowledge and see what happens

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio -
Steve
Maniac (V) Inmate

From: Boston, MA, USA
Insane since: Apr 2000

 IP logged posted posted 09-27-2003 04:25 Edit Quote

listutorial should get you going in the right direction.
SPyX
Bipolar (III) Inmate

From: College Station, TX
Insane since: Aug 2002

 IP logged posted posted 09-27-2003 08:20 Edit Quote

Well, both good tutorials. And I've got a working centered menu now. But I still can't standardize the size of the box around each link, and I cannot put a four sided border around each individual box.

I'm also getting a weird bug when I do some formatting to the #menu div. It is forcing a div above it that is aligned to the right to come off of the right side of the page a few pixels and adding a horizontal scroll bar no matter what size the window is.

I'll post the code, and if someone can host an image for me I'll take a screen shot. [Edit: Send me an email at adamray@tamu.edu or hit me on AIM with StngNeleh for the screeny.]

code:
body{

	font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif;

	margin: 0px;

       	background-image: url(images/header_tile.jpg);

	background-repeat: repeat-x;

       	background-color: #FFFFFF;

	color: #000000;

}



#header{

	position: absolute;

	top: 50px;

	width: 100%;

}

		



#headerleft{

	position: absolute;

	left: 0px;

	top: 0px;

	z-index: -1;

}



#headertitle{

	text-align: center;

	z-index: 1;

}



#headerright{

	position: absolute;

	right: 0px;

	top: 0px;

	z-index: -1;

}



#menu {

	position: absolute;

	top: 192px;

	font-size: 15px;

	line-height: 22px;

	font-weight: bold;

	background-color: #a5a5a5;

	border-top: 3px solid #851d30;

	border-bottom: 3px solid #851d30;	

}



#menu ul{

	list-style: none;

	margin: 0px;

	padding: 0px;

	text-align: center;

	width: 100%;

	margin: 2px;

}



#menu ul li{

	display: inline;

}



#menu ul li a{

	text-decoration: none;

	padding: 1em;

	margin: 10px;

	background-color: #851D30;

	color: #a5a5a5;

}



#menu ul li a:hover {

	background-color: #FBD76F;

	color: #a5a5a5;

}



and html:

code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



<html>

<head>



<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">

<meta name="Author" content="Robert Adam Ray">

<meta name="Keywords" content="Aggie Bonfire, Bonfire, Texas A and M, Bonfire Coalition, 

Students, BCS, BC, ">

<meta name="Description" content="Bonfire Coalition for Students">



<title>Bonfire Coalition for Students - Main</title>



<!--Style-->

<link rel="stylesheet" type="text/css" href="stylestuff.css">



</head>

<body id="body">



<!--Header-->

<div id="header">

	<div id="headerleft">



		<img src="images/header_left1.jpg" alt="" />



	</div>

	<div id="headertitle">



		<img src="images/header_title.jpg" alt="" />



	</div>

	<div id="headerright">



		<img src="images/header_right1.jpg" alt="" />



	</div>

</div>



<!--Menu-->

<div id="menu">

	

	<ul>

		<li><a href="1.html">Main</a></li>

		<li><a href="1.html">News Archive</a></li>

		<li><a href="1.html">Members</a></li>

		<li><a href="1.html">Heritage</a></li>

		<li><a href="1.html">FAQ</a></li>

		<li><a href="1.html">Contact</a></li>

	</ul>

</div>



</body>

</html>









[This message has been edited by SPyX (edited 09-27-2003).]


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu