Jump to content

Newbie question: aligning text links in horizontal menus


Recommended Posts

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 by Kristine
Link to post
Share on other sites

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 by DDs1
Link to post
Share on other sites

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 by Kristine
Link to post
Share on other sites

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 post
Share on other sites

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 by Kristine
Link to post
Share on other sites
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 post
Share on other sites

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 post
Share on other sites
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 post
Share on other sites

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 by Kristine
Link to post
Share on other sites

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 post
Share on other sites

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 by Kristine
Link to post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...