Kristine Posted April 24, 2012 Share Posted April 24, 2012 (edited) Hi I am just self-learning CSS and am practising in a new WordPress site. It is only hosted locally for now so sorry I can't provide a link. I'm sure this is easy for a CSS guru though I am having trouble center aligning the text (i.e page links) within my horizontal navigation menus. I tried using padding (which works) though discovered it is displayed differently in different browsers (I am still learning about using universal CSS for multiple browsers). I read a few tutorials regarding using "margin: auto" and "align:center" though I have no idea where to use it in my code. I have tried a few things though can't get anything to work so any guidance would be much appreciated. [/font][/color] #subnav {-khtml-border-radius: 0px;-moz-border-radius: 0px;-webkit-border-radius: 0px;border-radius: 0px;clear: both;color: #555;margin: 0 auto 10px;margin-top: -8px;overflow: hidden;text-transform: uppercase;width: 920px;background-image:url(/wp-content/themes/child/images/banner1.png);} #subnav ul {float: left;width: 100%;} #subnav li {float: left;list-style-type: none;text-align: center;} #subnav li a {color: #526b91;display: block;font-family: 'Courier New', 'Arial','Sans Serif';font-size: 12px;padding: 8px 18px 6px 18px;position: relative;text-decoration: none;//text-indent: -9999px;} #subnav li a:hover,#subnav li a:active,#subnav li:hover a,#subnav .current_page_item a,#subnav .current-cat a,#subnav .current-menu-item a {color: #526b91;} #subnav li a:hover {color: #222;} #subnav li li a,#subnav li li a:link,#subnav li li a:visited {background-color: #f5f5f5;border: 1px solid #ddd;border-top-width: 0;color: #555;font-size: 11px;padding: 5px 10px;position: relative;text-transform: none;width: 128px;} #subnav li li a:hover,#subnav li li a:active {color: #222;} #subnav li ul {height: auto;left: -9999px;margin: 0 0 0 -1px;position: absolute;width: 150px;z-index: 9999;} #subnav li ul a {width: 130px;} #subnav li ul ul {margin: -33px 0 0 149px;} #subnav li:hover>ul,#subnav li.sfHover ul {left: auto;} [color=#282828][font=helvetica, arial, sans-serif] Thanks so much. Edited April 24, 2012 by Kristine Link to comment Share on other sites More sharing options...
divinedesigns1 Posted April 24, 2012 Share Posted April 24, 2012 (edited) you do a display inline in the list items <li> i did it in the below code from what you provided #subnav li {float: left;list-style-type:none;text-align: center;display:inline; // this make them go in linepadding:5px; // just some padding to separate them you can add as much as you want to suit you} what i did here was play an display:inline; to make the links goes inline "which you didnt ask but yea its morning" by saying display inline all the text goes in an horizontal line blaaah did the wrong thing mannnnn, ok to make it links go to the center do this #subnav {-khtml-border-radius: 0px;-moz-border-radius: 0px;-webkit-border-radius: 0px;border-radius: 0px;clear: both;color: #555;margin: 0 auto 10px;margin-top: -8px;overflow: hidden;text-transform: uppercase;width: 920px;background-image:url(/wp-content/themes/child/images/banner1.png);text-align:center; //thats how i get them to go in the center by aligning the text in the main menu div} so what i did was add text-align:center; to the #subnav div and all the text should jump to the center, it does the same for left and right.hope that helps sorry about the first explain if i still havent answer your question just let me know thanks Edited April 24, 2012 by DDs1 Link to comment Share on other sites More sharing options...
Kristine Posted April 25, 2012 Author Share Posted April 25, 2012 (edited) Thanks so much for responding.I tried that though it didn't work. All the text is aligned left (and all bunched up) when I remove the padding and add the code as you suggested.Is there anything further down in my code which might be overriding it or do I need to use more code somewhere else? Edited April 25, 2012 by Kristine Link to comment Share on other sites More sharing options...
divinedesigns1 Posted April 25, 2012 Share Posted April 25, 2012 where you trying to comment out this piece of code with the double / ? #subnav li a {color: #526b91;display: block;font-family: 'Courier New', 'Arial','Sans Serif';font-size: 12px;padding: 8px 18px 6px 18px;position: relative;text-decoration: none;//text-indent: -9999px; if so you might want to do /* text-indent: -9999px; */that prolly the cause of it, let me know if that word and may i see your html for the menu Link to comment Share on other sites More sharing options...
divinedesigns1 Posted April 25, 2012 Share Posted April 25, 2012 just notice you have a left:-9999px; try changing that also Link to comment Share on other sites More sharing options...
Kristine Posted April 25, 2012 Author Share Posted April 25, 2012 (edited) Thanks again. So I commented out "text-indent: -9999px;" and "left:-9999px;" using /* and */ instead of // as you recommended, also commented out "padding:8px18px6px18px;" and added the "text-align: center;" back into the main menu div as you originally suggested though unfortunately it didn't work either. The text is still all aligned left and bunched up. Okay, this is probably a stupid question though where do I find the HTML? My menu is generated by WordPress. Edited April 25, 2012 by Kristine Link to comment Share on other sites More sharing options...
divinedesigns1 Posted April 26, 2012 Share Posted April 26, 2012 Thanks again. So I commented out "text-indent: -9999px;" and "left:-9999px;" using /* and */ instead of // as you recommended, also commented out "padding:8px18px6px18px;" and added the "text-align: center;" back into the main menu div as you originally suggested though unfortunately it didn't work either. The text is still all aligned left and bunched up. Okay, this is probably a stupid question though where do I find the HTML? My menu is generated by WordPress.link me to your website if its up and running and theres no stupid questions, the html code is normally the<html><doc...... ><head><title></title></head><body></body></html> so the html code is those, which can be found in your index.html or .php file Link to comment Share on other sites More sharing options...
dsonesuk Posted April 26, 2012 Share Posted April 26, 2012 The left:-9999px; is important to hide/show the submenu. the text-indent is puzzling as it is usually used for the same purpose, OR to hide anchor link text, when a image with text is used for the links, so seo can see the links but is hiding from the view of the user only, but this usually targets the text within a span element. display: inline; gives the same result as float: left; text-align: center; used for li elements, will only work for centring the submenus text, as the anchors have a fixed of width:130px;, whereas the top menu width is determined by content ie the text and padding of the anchor link, therefore no left right spacing the center. first thing i would suggest is zeroing padding, margin, and text-indent, this will help the menu to show identical in all browsers #subnav ul, #subnav li {margin:0; padding: 0; text-indent: 0; list-style-type: none;} you will have to reset the margin for parent ul #subnav ul {margin: 16px 0; /* reset margins for parent ul element*/float: left; /* float left, on its own will force the width to be determined by content */width: 100%; /* forces width to be that of the parent container element */} You can either give the top parent menu a fixed width that is wide enough to accommodate all link text and padding; #subnav li a {color: #526b91;display: block;font-family: 'Courier New', 'Arial','Sans Serif';font-size: 12px;padding: 8px 18px 6px 18px;position: relative;text-decoration: none;/*text-indent: -9999px;*/width: 120px;/*added by dsonesuk*/} OR just adjust padding #subnav li a {color: #526b91;display: block;font-family: 'Courier New', 'Arial','Sans Serif';font-size: 12px;padding: 8px 25px 6px 25px;position: relative;text-decoration: none;/*text-indent: -9999px;*/} Link to comment Share on other sites More sharing options...
princesohrab Posted April 26, 2012 Share Posted April 26, 2012 If you could show the HTML code from the #main nav to the end, I'll look at it and let you know.. Also don't use padding left or right if you aligned centre.. The text-align: centre should be in the #navigation ul li a Link to comment Share on other sites More sharing options...
princesohrab Posted April 26, 2012 Share Posted April 26, 2012 How did you end up with 2 ul? Link to comment Share on other sites More sharing options...
dsonesuk Posted April 26, 2012 Share Posted April 26, 2012 text-align: where it is now is perfectly valid as it will just filter down to the anchor element. Link to comment Share on other sites More sharing options...
divinedesigns1 Posted April 26, 2012 Share Posted April 26, 2012 i just learned something new there you go Kristine they figured out what we couldnt Link to comment Share on other sites More sharing options...
dsonesuk Posted April 26, 2012 Share Posted April 26, 2012 How did you end up with 2 ul? If you are talking about #subnav li ul ul {margin: -33px 0 0 149px;}below will target first sublevel ul and ul below it#subnav li ul {height: auto;left: -9999px;margin: 0 0 0 -1px;position: absolute;width: 150px;z-index: 9999;} below will target all sublevel ul ul (second sublevel) and ul below it, overwriting above margins #subnav li ul ul {margin: -33px 0 0 149px;} Link to comment Share on other sites More sharing options...
Kristine Posted April 26, 2012 Author Share Posted April 26, 2012 (edited) Thanks so much. Okay, so I must admit that whilst I didn't quite understand all that I did implement it exactly as instructed (at least, I hope I did)...and nothing changed!The menu is still the same. The page links didn't move one px and it is still perfect in Chrome though in IE is being thrown to a new line.Here is the CSS now: #subnav {-khtml-border-radius: 0px;-moz-border-radius: 0px;-webkit-border-radius: 0px;border-radius: 0px;clear: both;color: #555;margin: 0 auto 10px;margin-top: -8px;overflow: hidden;text-transform: uppercase;width: 920px;background-image:url(/wp-content/themes/child/images/banner1.png);} #subnav ul {margin: 16px 0;float: left;width: 100%;} #subnav li {float: left;list-style-type: none;text-align: center;} #subnav li a {color: #526b91;display: block;font-family: 'Courier New', 'Arial','Sans Serif';font-size: 12px;padding: 8px 18px 6px 18px;*/position: relative;text-decoration: none;/*text-indent: -9999px;*/} #subnav li a:hover,#subnav li a:active,#subnav li:hover a,#subnav .current_page_item a,#subnav .current-cat a,#subnav .current-menu-item a {color: #526b91;} #subnav li a:hover {color: #222;} #subnav li li a,#subnav li li a:link,#subnav li li a:visited {background-color: #f5f5f5;border: 1px solid #ddd;border-top-width: 0;color: #555;font-size: 11px;padding: 5px 10px;position: relative;text-transform: none;width: 128px;} #subnav li li a:hover,#subnav li li a:active {color: #222;} #subnav ul, #subnav li {margin:0; padding: 0; text-indent: 0; list-style-type: none;} #subnav li ul {height: auto;left: -9999px;margin: 0 0 0 -1px;position: absolute;width: 150px;z-index: 9999;} #subnav li ul a {width: 130px;} #subnav li ul ul {margin: -33px 0 0 149px;} #subnav li:hover>ul,#subnav li.sfHover ul {left: auto;} Help! Edited April 26, 2012 by Kristine Link to comment Share on other sites More sharing options...
dsonesuk Posted April 26, 2012 Share Posted April 26, 2012 The zeroing should be placed at top before anything else that relates to UL or LI, you also had a misplaced */ #subnav {-khtml-border-radius: 0px;-moz-border-radius: 0px;-webkit-border-radius: 0px;border-radius: 0px;clear: both;color: #555;margin: 0 auto 10px;margin-top: -8px;overflow: hidden;text-transform: uppercase;width: 920px;background-image:url(/wp-content/themes/child/images/banner1.png);}#subnav ul, #subnav li {margin:0; padding: 0; text-indent: 0; list-style-type: none;} #subnav ul {margin: 16px 0;float: left;width: 100%;} #subnav li {float: left;list-style-type: none;text-align: center;} #subnav li a {color: #526b91;display: block;font-family: 'Courier New', 'Arial','Sans Serif';font-size: 12px;padding: 8px 18px 6px 18px;position: relative;text-decoration: none;/*text-indent: -9999px;*/} #subnav li a:hover,#subnav li a:active,#subnav li:hover a,#subnav .current_page_item a,#subnav .current-cat a,#subnav .current-menu-item a {color: #526b91;} #subnav li a:hover {color: #222;} #subnav li li a,#subnav li li a:link,#subnav li li a:visited {background-color: #f5f5f5;border: 1px solid #ddd;border-top-width: 0;color: #555;font-size: 11px;padding: 5px 10px;position: relative;text-transform: none;width: 128px;} #subnav li li a:hover,#subnav li li a:active {color: #222;} #subnav li ul {height: auto;left: -9999px;margin: 0 0 0 -1px;position: absolute;width: 150px;z-index: 9999;} #subnav li ul a {width: 130px;} #subnav li ul ul {margin: -33px 0 0 149px;} #subnav li:hover>ul,#subnav li.sfHover ul {left: auto;} Just wondering, are you talking about centring the whole top menu, or individual menu links as the padding does not really centre it just adds a padding equally to each side of anchor links. could you just right click the page view source and copy paste the html that relates to the menu html. Link to comment Share on other sites More sharing options...
Kristine Posted April 27, 2012 Author Share Posted April 27, 2012 (edited) Firstly, I must say thank you for attempting to help me. I really appreciate the assistance. Okay, so I copy and pasted in the CSS exactly as you have provided and it didn't work. It changed some of the top and bottom margins though so it is doing something. I took some screen shots to show how it looks in Chrome and IE though can't work out how to upload images from my computer to attach to this message?I am simply trying to space my individual page links (7 of them) evenly (aligned center) over the whole width of my menu bar (give or take 10px either end) in line with my content (hard to explain without images) in a cross browser friendly manner. At the moment I have padding applied so they appear evenly spaced. I found this example:http://phdnet.org/Which looks fine in Chrome (her links are evenly spaced over the width of her menu and the first and last - i.e. the "h" of home and "y" of story - are in line with her content) though in IE it displays differently. Strangely, it appears she has the opposite of my problem. Where in IE the padding pushes my last link to a new line beneath the actual menu, for her the padding shrinks so her links no longer appear center aligned. Does this all make sense? It may seem finicky though I am happy to admit I'm fussy :-) Anyhoo, here is the HTML (I hope it is the right part): <div id="nav"><div class="wrap"><ul id="menu-header" class="menu menu-primary superfish"><li id="menu-item-48" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-48"><a href="http://127.0.0.1/">Home</a></li><li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="http://127.0.0.1/?page_id=21">About</a></li><li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a href="http://127.0.0.1/?page_id=24">My Hive</a><ul class="sub-menu"><li id="menu-item-80" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-80"><a href="http://127.0.0.1/?cat=4">Test</a></li><li id="menu-item-81" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-81"><a href="http://127.0.0.1/?cat=6">Tester</a></li><li id="menu-item-82" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-82"><a href="http://127.0.0.1/?cat=5">Trial</a></li><li id="menu-item-86" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-86"><a href="http://127.0.0.1/?page_id=24">All</a></li></ul></li><li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="http://127.0.0.1/?page_id=26">Project Gallery</a><ul class="sub-menu"><li id="menu-item-207" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-207"><a href="http://127.0.0.1/?page_id=26#furniture">Furniture</a></li><li id="menu-item-243" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-243"><a href="http://127.0.0.1/?page_id=26#crafts">Crafts</a></li><li id="menu-item-245" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-245"><a href="http://127.0.0.1/?page_id=26#rooms">Rooms</a></li><li id="menu-item-246" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-246"><a href="http://127.0.0.1/?page_id=26#decor">Decor</a><ul class="sub-menu"> <li id="menu-item-680" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-680"><a href="http://127.0.0.1/?page_id=26#lightsandlamps">Lights & Lamps</a></li> <li id="menu-item-705" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-705"><a href="http://127.0.0.1/?page_id=26#walldecor">Wall Decor</a></li> <li id="menu-item-687" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-687"><a href="http://127.0.0.1/?page_id=26#windowtreatments">Window Treatments</a></li> <li id="menu-item-702" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-702"><a href="http://127.0.0.1/?page_id=26#softfurnishings">Soft Furnishings</a></li> <li id="menu-item-1213" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1213"><a href="http://127.0.0.1/?page_id=26#accessories">Accessories</a></li></ul></li><li id="menu-item-102" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-102"><a href="http://127.0.0.1/?page_id=26">All</a></li></ul></li><li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="http://127.0.0.1/?page_id=53">Resource Directory</a></li><li id="menu-item-692" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-692"><a href="http://127.0.0.1/?page_id=690">Services</a></li><li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43"><a href="http://127.0.0.1/?page_id=30">Buzz</a></li><li id="menu-item-689" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-689"><a href="http://127.0.0.1/?page_id=32">Advertise</a></li><li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-72"><a href="http://127.0.0.1/?page_id=70">Contact</a></li><li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a href="" onclick="event.preventDefault()">Search</a><ul class="sub-menu" style="display: none; visibility: hidden; "> <li id="menu-item-50" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-50"><form method="get" id="searchform" action="http://127.0.0.1"><div><input type="text" value="" name="s" id="s" /><input type="submit" id="searchsubmit" value="Search" /> </div></form></li></ul></li></ul></div><!-- end .wrap --></div><div id="subnav"><div class="wrap"><ul id="menu-second-header" class="menu menu-secondary superfish"><li id="menu-item-707" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-707"><a href="http://google.com">Before And After</a></li><li id="menu-item-696" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-696"><a href="http://thepaintedhive.blogspot.com">How To</a></li><li id="menu-item-698" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-698"><a href="http://thepaintedhive.blogspot.com">Most Popular</a></li><li id="menu-item-693" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-693"><a href="http://thepaintedhive.blogspot.com">Furniture Rehab</a></li><li id="menu-item-694" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-694"><a href="http://thepaintedhive.blogspot.com">Room Makeovers</a></li><li id="menu-item-697" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-697"><a href="http://thepaintedhive.blogspot.com">Clever Craft</a></li><li id="menu-item-706" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-706"><a href="http://127.0.0.1/?page_id=925">Buy My Pantry Labels</a></li></ul></div><!-- end .wrap --> Thanks again. Edited April 27, 2012 by Kristine Link to comment Share on other sites More sharing options...
dsonesuk Posted April 27, 2012 Share Posted April 27, 2012 Right! the menu we are targeting is the one with 'Before And After' to 'Buy My Pantry Labels' Yes! to achieve what you want you just need to adjust padding, no margin: 0 auto; no text-align-center; in my browsers FF, IE 9, have stacking problem, Opera, chrome, safari do not, but by reducing padding by 2px each side fixed the problem. #subnav li a {color: #526b91;display: block;font-family: 'Courier New', 'Arial','Sans Serif';font-size: 12px;padding: 8px 16px 6px 16px; /* original padding: 8px 18px 6px 18px; */position: relative;text-decoration: none;/*text-indent: -9999px; usually used to hide text within span, when text on background images is used*/} Link to comment Share on other sites More sharing options...
Kristine Posted April 27, 2012 Author Share Posted April 27, 2012 Right. I have tried this before and it works to get all the links on the one line in IE though the spacing is now uneven (by spacing I mean the px at either end of the first and last links). I can adjust it though it still displays differently in different browsers. So at the moment with the px applied as you have suggested, in Chrome there is a gap of about 10px before the "before and after" link and a gap of about 30px after the "buy my labels" link, whereas in IE the gap after the "by my labels" link is more like 20px. So if I adjust the padding to display my links aligned in one browser they will still appear uneven in another. I want the spacing to be even (like the way it is displayed in the example link I provided above when viewed in Chrome) so is there a way to achieve this by changing the left float or something else as padding doesn't seem like the answer for cross-browser compatibility?I hope this makes sense. Thanks for your help so far. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 27, 2012 Share Posted April 27, 2012 The font is the problem, the font uses different amount of space per browser, therefore you have two option, live with different spacing but centre the whole menu so the space appears even on both side, but the space will be equal! but size will vary depending on browser used. 1) apply text-align: center; to to #subnav #subnav {-khtml-border-radius: 0px;-moz-border-radius: 0px;-webkit-border-radius: 0px;border-radius: 0px;clear: both;color: #555;margin: 0 auto 10px;margin-top: -8px;overflow: hidden;text-transform: uppercase;width: 920px;background-image:url(/wp-content/themes/child/images/banner1.png);background-color:#CC3333; text-align:center;} use the wrap container #subnav .wrap {display:inline-block;} 2) involves opera, chrome, safari hack but may not work in newer versions of targeted browsers, and css will not validate anymore because of these hacks #subnav li a {color: #526b91;display: block;font-family: 'Courier New', 'Arial','Sans Serif';font-size: 12px;padding: 8px 17px 6px 16px;position: relative;text-decoration: none;/*text-indent: -9999px; usually used to hide text within span, when text on background images is used*/} @media screen and (-webkit-min-device-pixel-ratio:0) { #subnav li a {padding: 8px 18px 6px 18px; }}@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){#subnav li a { padding: 8px 18px 6px 18px;}} Link to comment Share on other sites More sharing options...
Kristine Posted April 27, 2012 Author Share Posted April 27, 2012 (edited) Ahhh, the font is the problem, eh? I wouldn't have known that. Will give these a go and let you know. Funny there is not another option for centering menu links. Thanks so much. Edited April 27, 2012 by Kristine Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now