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!

Centering with Position: Fixed Problem 2

Status
Not open for further replies.
k4ghg

k4ghg

Technical User
Dec 25, 2001
191
US
Hi - I have been testing a navigation bar that I found online (please see code below), that will not center (i.e., margin: auto;)in the fixed position and was wondering if there is away around this problem. Thank you... Ronnie

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html xmlns=" xml:lang="en" lang="en">

<head>
<title></title>

<style type="text/css">
#navlist{
padding: 0 1px 1px;
margin: auto;
font: bold 12px Verdana, sans-serif;
width: 50%;
font-family: arial, sans-serif;
height:100px;
/* position:fixed; - Does not center */
font-size:14px;
z-index:100;
color: #336699;
}

#navlist li{
list-style: none;
margin: 0;
border-top: 1px solid gray;
display: inline;
}

#navlist li a{
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}

#navlist li a:link {
color: #448;
}

#navlist li a:visited {
color: #667;
}

#navlist li a:hover{
border-color: #FE3;
color: #FFF;
background: #332;
}
</style>

</head>

<body>

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

</body>
</html>
 
Sort by date Sort by votes


position: fixed; removes an element from the normal flow so it is not affected by other elements, therefore the marging: 0 auto; will not have any effect.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Upvote 0 Downvote
ignore the extra 'g' in margin, my keyboard is playing up yet again!!

(well that's my excuse and I'm sticking with it!!)

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Upvote 0 Downvote
Thanks Chris, if the "margin: 0 auto;," has no effect, how would I center the navigation bar? Ronnie
 
Upvote 0 Downvote
The better question is why you need it to be fixed at all?
If you want it centered, that goes against what having it fixed would accomplish.

If you really do need it to be centered and fixed as well, use the container div.

Set that to have the fixed position and a width of 100% so it covers the browser window, and set your navlist to have the margin auto so its centered within the navcontainer div.

CSS: 
#navcontainer{
  width:100%;
 [red] position:fixed;[/red]
}
#navlist{
    padding: 0 1px 1px;
    margin: auto;
    font: bold 12px Verdana, sans-serif;
    width: 50%;
    font-family: arial, sans-serif;
    height:100px;
  [s] /* position:fixed;    - Does not center   */[/s]
    font-size:14px;
    z-index:100;
    color: #336699;
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
As a second alternative you could always give the navlist a width of 100% rather than 50%, and then simply add a text-align set to center.

Since your list items are set to inline, they are susceptible to the text-align:center;

CSS: 
#navlist{

    padding: 0 1px 1px;
    margin: auto auto;
    font: bold 12px Verdana, sans-serif;
    [red]width: 100%; [/red]
    font-family: arial, sans-serif;
    height:100px;
    position:fixed;   /* - Does center   */
    font-size:14px;
    z-index:100;
    color: #336699;
    [red]text-align:center;[/red]

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
If you truly want the element fixed and centred, You could set it as an inline element (span)in a position: relative; parent with text-align: center; and a top: property value of where you want the element to be positioned vertically with respect to the browser viewport top edge.



Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Upvote 0 Downvote
Phil, Chris - Thanks for your help and suggestions. It's interesting that you both appeared to question the idea of having a fixed element centered. My intent is to have a "fixed" navigation bar/menu at the top of the page that will remain in place as a user scrolls down the page. I am beginning to wonder if there might be a different way to approach this layout. Thanks again... Ronnie
 
Upvote 0 Downvote
Phil's solutions is the most straightforward and the one i would take.

Have your container div FIXED with a 100% width.

then set your left and right margins to auto for the first child element and that will center that item. If its a UL then apply the margin attribute to that, etc.

Darryn Cooke
| Marketing and Creative Services
 
Upvote 0 Downvote
I am beginning to wonder if there might be a different way to approach this layout
Click to expand...

The fixed option is correct for what you want. Just understand that being fixed means it will receive a specific position given to it by its top, and left properties. Its set specifically where it needs to go.

Centering is not specific, as it depends on the browser dimensions.

That's why you need an additional element to do it. You fix your container and make it as wide as it can go, and center a secondary element inside it accomplish the task.

Basically its like setting a box in a specific location. Moving other things around it will not affect its position if it is fixed.
However if you want it centered then it relies on the position of other elements to determine what the center should be so it can no longer be fixed.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Phil, Ok, I think I understand and thanks for all you help. Ronnie
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
528
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
996
spamjim
spamjim
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
475
PeDa
PeDa
Krus1972
  • Locked
  • Question
Centering Content Within a Fixed Navigation Menu
Replies
10
Views
196
ChrisHirst
ChrisHirst
CoolBreeze007
  • Locked
  • Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
97
CoolBreeze007
CoolBreeze007

Part and Inventory Search

Sponsor

Back
Top