How to center top nav?
-
http://hendersonbromsteadart.wordpress.com/
Can anyone tell me what to change here to get the navigation across the top to center over the header?
– – – – – – – – – – –
#nav {
width:100%;
border-top:4px solid #222;
border-bottom:2px solid #222;
float:left;
}#nav ul {
list-style:none;
}#nav li {
float:float;
}#nav li a,#nav li a:visited {
display:block;
height:3em;
line-height:3em;
color:#222;
text-decoration:none;
font-size:1.4em;
text-transform:uppercase;
letter-spacing:.3em;
float:left;
cursor:pointer;
padding:0 1.3em;
}#nav li a:hover {
color:#fff;
background:#222;
text-decoration:none;
}#nav li.current_page_item a:link,#nav li.current_page_item a:visited {
background:#222;
color:#fff;
cursor:default;
}The blog I need help with is: (visible only to logged in users)
-
I had done this for someone at one point I think with the theme you are using, but I can’t figure out how I did it. Probably the only one who could do it is Devblog, and he only pops in here infrequently, so it might be a while before you get an answer.
And please do not post the same question multiple times. It causes volunteers to run in circles and then they get cranky.
-
in regular HTML > CSS you use {margin: 0 auto 0 auto;} to center the content of the container with that bit of code applied to it. You need to set a width to the container or else it wont center.
I hope this is helpful.
-
you use {margin: 0 auto 0 auto;} to center the content of the container
Or like this
{margin: 0 auto;}which does the same thing but with less code.
-
-
I’ve tried plugging this code in at several spots, and haven’t hit upon the right one yet. Can anyone help?
-
Do not duplicate code by pasting the entire CSS in the CSS editor. The CSS Editor should have only your additions/modifications. Read this for more info:
http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/
Also, centering your navigation bar is a bit tricky because those are floating elements.
Once the CSS Editor has your changes only, let me know and I’ll post some code for you to try.
-
I read that link about only posting in your changes… and my plan is to go back when I’m done and get rid of the code I haven’t changed. I just don’t feel like I know enough about this yet, so it’s easier to just tweak values that are there to see what they do. As opposed to jumping back and forth between 2 diff. files.
-
Oh, and looking around on the web… I found this, which seems to offer a solution. I’m just not sure how to interpret it yet:
http://www.pmob.co.uk/pob/centred-float.htm
– – – – – – – – – – – – – – – – – – – –It is normally stated that you cannot centre floated elements but this is not quite true. It’s true that usually you can only float left or float right but if you have a group of buttons for a menu and you want them to be fluid in width then it would be nice to have them all float in the centre of the page. There is no problem if the floats have a width because you can then ascertain the main parents width and use margin:auto to center the whole block. However that means that the floats cannot be a fluid width (i.e. shrinkwrap their content) or you would have to class each individual element and apply a different width to each which is a little unsatisfactory.
So how can this be achieved more simply then?
The premise is simple and basically just involves a widthless float that is placed 50% from the left using position:relative. The nested inner element is then reversed and a negative relative position of 50% (-50%) is applied. This has the effect of placing the element in the center. Relative positioning maintains the flow and allows other content to flow underneath.
Code:
#buttons{
float:left;
position:relative;
left:50%;
text-align:left;
}
#buttons ul{
list-style:none;
position:relative;
left:-50%;
}#buttons li{float:left;position:relative;}/* ie needs position:relative here*/
#buttons a{
text-decoration:none;
margin:10px;
background:red;
float:left;
border:2px outset blue;
color:#fff;
padding:2px 5px;
text-align:center;
white-space:nowrap;}
#buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
#content{overflow:hidden}/* hide horizontal scrollbar*/The above demo should work in most modern browsers and will work in ie5 – 7. (It doesn’t work in ie5 mac but you can achieve a similar effect using display:inline-block instead of floats so view source for the full details .)
Here is another example using the same technique
Drawbacks
The drawbacks are mainly that when the floats wrap at shorter screen-widths then the element that has wrapped will not align to the center. That doesn’t seem to be much of a problem to me but you may think differently. In a fixed width scenario there will of course be no need to wrap and will work fine.There is also a horizontal scrollbar problem where the width of the centred floats are more than half the width of the the container that they are centered in and a horizontal scrollbar will apear on the window at smaller screensizes. This can be cured by applying overflow:hidden to a parent containner and should really not be much bother.
The same techniques could most likely be applied to absolute elements as their behaviour of shrink-wrapping contents is the same as floats. However absolute elements would be removed from the flow so its not so useful.
-
I’m also not sure how that applies to the Pressrow theme. It gets confusing when diff. examples use diff phrases for whar seems like the same elements.
-
Why would “float:left” be preferable to using “display:inline” and adding “text-align:center” to center up that nav bar?
-
GOT IT!!!!!!!
– – – – – – – – – – – – – – – – – – – – –
#nav ul {
list-style:none;
display:table;
margin:0 auto;
}#nav li {
display:inline;
}#nav li a,#nav li a:visited {
display:block;
height:2.5em;
line-height:2.5em;
color:#999;
text-decoration:none;
font-size:1.2em;
text-transform:uppercase;
letter-spacing:.3em;
cursor:pointer;
padding:0 em;
}
– – – – – – – – – – – – – – – – – – – – – -
- The topic ‘How to center top nav?’ is closed to new replies.
WordPress.com Forums 