Jump to content

Kristine

Members
  • Posts

    13
  • Joined

  • Last visited

Kristine's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. So, I have finally worked out how to center my navigation menu horizontally in a cross-browser compatible way. The problem I now have though is with my dropdowns. They have inherited some of the attributes I used to center the nav and now, when the menu parent is hovered over, the dropdown pops up over it, rather than under and to the side a bit. I've tried a few fixes though am not sure the best way to go about resolving the issue in the most browser friendly way.I'm sorry, though my site is not yet live. #nav {-khtml-border-radius: 0px;-moz-border-radius: 0px;-webkit-border-radius: 0px;background-image:url(/wp-content/themes/child/images/banner.png);border-radius: 0px;clear: both;color: #555;margin: 0 auto 0px;overflow: hidden;text-align: center;text-transform: uppercase;height: 35px;width: 920px;}#nav ul {width: 100%;margin: 0 auto;display: inline-block;list-style: none;}#nav li {display: inline-block;list-style: none;}#nav li a {color: #90877C;display: block;font-size: 12px;float: left;margin: 0px 0px 0px 0px;padding: 8px 15px 0px 15px;text-decoration: none;}#nav li a:hover,#nav li a:active,#nav li:hover a,#nav .current_page_item a,#nav .current-cat a,#nav .current-menu-item a {color: #90877C;}#nav li a:hover {color: #222;}#nav li li a,#nav li li a:link,#nav li li a:visited {background: #fbf7eb;border-top-width: 0px;color: #555;font-size: 11px;position: relative;margin: 0px px 0px 5px;text-transform: none;text-align: left;width: 100px;}#nav li li a:hover,#nav li li a:active {color: #222;}#nav li ul {height: auto;left: -9999px;margin: 0 0 0 -1px;position: absolute;width: 150px;z-index: 9999;}#nav li ul a {width: 130px;}#nav li ul ul {margin: -33px 0 0 122px;}#nav li:hover>ul,#nav li.sfHover ul {left: auto;} I should probably mention I'm just learning CSS so any clear suggestions would be great. Thanks so much.
  2. 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.
  3. 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.
  4. 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.
  5. 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!
  6. 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.
  7. 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?
  8. 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.
  9. Thanks so much. Sounds like a bit of fiddling though fortunately I'm patient.
  10. Oh, sorry. Okay, so there is a background image of a house floor plan. Certain rooms within the floor plan have another image over them (in this case a photograph of the actual room). The images (photographs) are links which also become translucent when rolled over. Does this make sense?
  11. The 'house tour' with the clickable links.
  12. Hi I'm just learning CSS/HTML (self-taught) and am curious about the process required to achieve something like the image that can be seen on this blog page: http://theletteredcottage.net/our-house/ Any advice/info, and in particular some example code, would be fantastic. As stated, I'm only a newbie so simple explanations with limited jargon much appreciated :-) Thanks so much!
×
×
  • Create New...