Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Move a menu to the middle 3

Status
Not open for further replies.
timgerr

timgerr

IS-IT--Management
Jan 22, 2004
364
US
Ok I want to say that I am soooo bad at CSS that it is not funny. I like it but for some reason CSS is hard for me to learn. I know many languages but this one is hard for me. Bearing that I have a question. I was looking at a webpage for making a CSS bases menu and I was going to use this code. SO I have made my CSS bases menu and it shows up in the top left hand conor of my screen. Now I want to move this meny to the middle of my screen, both horizontely and verticly. How can I do this. I might be asking much but seeing this will help me out. Here is the code
Code: 
<style>
#navigation a
{
color: #000;
background: #fb0 url("left-tab.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}

#navigation a span
{
background: url("right-tab.gif") right top no-repeat;
padding-right: 10px
}

#navigation a, #navigation a span
{
display: block;
float: left
}

/* Commented backslash hack hides rule from IE5-Mac \*/
#navigation a, #navigation a span
{
float: none
}
/* End IE5-Mac hack */

#navigation a:hover
{
color: #fff;
background: #26a url("left-tab-hover.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}

#navigation a:hover span
{
background: url("right-tab-hover.gif") right top no-repeat;
padding-right: 10px
}

#navigation
{
list-style: none;
padding: 0;
margin: 0
}

#navigation li
{
float: left;
display: block;
margin: 0;
padding: 0
}
</style>

<ul id="navigation">
<li><a href="/"><span>Home</span></a></li>
<li><a href="/"><span>Back</span></a></li>
<li><a href="/"><span>Front</span></a></li>
</ul>

Any help would be welcomed.

Thanks -T

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!
 
Sort by date Sort by votes
If it's the only thing on the screen and you want it centered no matter what size the window is first wrap your <ul> in a <div> like such:

Code: 
<div id="ulistDiv">
   <ul id="navigation">
     <li><a href="/"><span>Home</span></a></li>
     <li><a href="/"><span>Back</span></a></li>
     <li><a href="/"><span>Front</span></a></li>
   </ul>
</div>

I'd do this just to put your list in a container, then the CSS would be like so (in this case you will need to specify a width and height value):
Code: 
div#ulistDiv {
   width:300px
   height:180px
   position:absolute;
   top:50%;
   left:50%;
   margin-left:-150px;
   margin-top:-90px;
}

Though I don't like negative margins, you set the margins equal to half the corresponding size of your div. Example: if I made the width 700px, I'd make the margin-left = -350px. This should center your list.
 
Upvote 0 Downvote
Thanks so much, this was a great learning expereance.

-T

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

 
Upvote 0 Downvote
You don't need to use absolute positioning or negative margins and, if possible, these should be avoided. Instead, you could use "margin:0px auto;" as in this example:



____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.
 
Upvote 0 Downvote
That centers the div horizontally, but not vertically. I agree that position:absolute and negative margins should be avoided, but through much trial and error that is the best I can come up with for horizontal AND vertical centering.
 
Upvote 0 Downvote
Sorry, I missed the OP's request for it to be centered vertically as well. This is atill quite hard to do in CSS2 but can be achieved without absolute positioning (although negative margins are still used) if you wanted to.

One of the examples I've seen to to do this was:
Code: 
<!DOCTYPE html public '-//W3C//DTD HTML 4.01//EN'
  '[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd'>[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Vertical and Horizontal Centering</title>
<style type="text/css">

	* {
		margin:0;
		padding:0;
		}

	html, body {
		height:100%;
		}

	body {
		text-align:center; /* horizontal centering for IE Win quirks */
		}

	#distance { 
		width:1px;
		height:50%;
		margin-bottom:-100px; /* half of container's height */
		float:left;
		}

	#container {
		margin:0 auto;
		position:relative; /* puts container in front of distance */
		text-align:left;
		height:200px;
		width:400px;
		clear:left;
		border: 1px dashed #000;
		}

	#container div {
		font-size:80%;
		float:right;
		width:17em;
		margin-left:2em;
		}

</style>
</head>
<body>

	<div id="distance"></div>
	<div id="container">

		Hello, I'm a centered box!

	</div>

</body>
</html>


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.
 
Upvote 0 Downvote
There is a good method to center a container both vertically and horizontally. It is shown here. The example does not have a complete and valid doctype but I have tested it to work with one as well. This is by far the only method I would use to put element in the dead center.
 
Upvote 0 Downvote
The example I posted just seems to be a cut down of that article Vragabond posted although I can't remember where I got my example from. Maybe it was the same site?


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
755
pmonett
pmonett
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
713
bdwilcox
bdwilcox
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
711
3esolar
3
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
204
lmcate
lmcate
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
604
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top