July 3, 200818 yr If anyone can clarify a couple of things for me it would be great. I am trying to create a simple horizontal navigation bar but for design continuity do not want a series of 'styled' text links. What I want is a good old-fashioned image based rollover nav bar without the javascript. Here is what I have so far. ///////////////////////////////////////////////////////// HTML ///////////////////////////////////////////////////////// <!--nav opens--> <div id="nav"> <div id="nav-web"> <a href="#">WEB</a> </div> <div id="nav-print"> <a href="#">PRINT</a> </div> <div id="nav-tech"> <a href="#">TECH</a> </div> <div id="nav-tips"> <a href="#">TIPS</a> </div> <div id="nav-about"> <a href="#">ABOUT</a> </div> <div id="nav-contact"> <a href="#">CONTACT</a> </div> <!--nav ends --> </div> ///////////////////////////////////////////////////////// ///////////////////////////////////////////////////////// CSS ///////////////////////////////////////////////////////// #nav { float:right; width: 221px; height: 13px; margin: 0px; padding: 0px; } #nav-web, #nav-print, #nav-tech, #nav-tips, #nav-about, #nav-contact { text-indent: 0px; outline:none; height: 13px; margin: 0px; padding: 0px; //**border: 1px solid red;**// //**display: block;**// text-decoration: none; } #nav-web { width: 29px; } #nav-print { width: 37px; } #nav-tech { width: 32px; } #nav-tips { width: 27px; } #nav-about { width: 42px; } #nav-contact { width: 53px; } #nav-web a:link, a:visited { background: url(nav_web.png) no-repeat; } #nav-print a:link, a:visited { background: url(nav_print.png) no-repeat; } #nav-tech a:link, a:visited { background: url(nav_tech.png) no-repeat; } #nav-tips a:link, a:visited { background: url(nav_tips.png) no-repeat; } #nav.about a:link, a:visited { background: url(nav_about.png) no-repeat; } #nav-contact a:link, a:visited { background: url(nav_contact.png) no-repeat; } #nav-web a:hover, a:active { background: url(nav_web_o.png) no-repeat; } #nav-print a:hover, a:active { background: url(nav_print_o.png) no-repeat; } #nav-tech a:hover, a:active { background: url(nav_tech_o.png) no-repeat; } #nav-tips a:hover, a:active { background: url(nav_tips_o.png) no-repeat; } #nav-about a:hover, a:active { background: url(nav_about_o.png) no-repeat; } #navcontact a:hover, a:active { background: url(nav_contact_o.png) no-repeat; } ///////////////////////////////////////////////////////// Now I realise it is quite convoluted and bulky (I am just starting out...). The real problem is the text over the images, every method I have tried to hide the text also results in the images disappearing also. I am not too bothered about accessibility (boo!!!!) for those browsing with images switched off. I just need to get it working, proper accessibility can be implemented later. Another thing I am currently changing is using one image for both rollover states. Using positioning to prevent flickering. Again though I need to sort the text issue more urgently. Finally can I simply attach a link to the image with CSS - therefore needing no hiding of the text link? Probably too much to hope for but worth asking right? Thanks in advance.
July 3, 200818 yr The most common way to hide text in such instances is to add a rule 'text-indent: -1000px;' (or similar, just need a big distance!) to the element that contains the text (the anchors in this instance). You'll also need to make your anchors 'display: block' so you can then give them a width and height. The best way to do navs are using a list of links BTW, e.g. <ul> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> </ul> But that's another issue! James
July 3, 200818 yr http://www.webdesignerforum.co.uk/index.ph...ost&p=21844 Have a look at that thread or... http://www.webdesignerforum.co.uk/index.php?showtopic=270 that one, they should help you out for cleaning up that css code
July 3, 200818 yr Author Nobody got a suggestion? Damn. Well if anyones wondering I havent sorted it yet.
July 3, 200818 yr James has given you the best answer you should be getting. What you have is bad for SEO.
July 3, 200818 yr Author I thought I had refreshed the page when I left that previous message. My apologies. re. the suggestion to use text indent I have tried it to no avail. With display block on and the height and width manually set the images just disappear. Will keep trying.
July 3, 200818 yr Author Also jamest do you mind telling me why what I have done is bad for SEO? Thanks
July 3, 200818 yr When Google indexes your site all it will see is: WEBPRINTTECHTIPSABOUTCONTACT By doing what James said, Google will see this: * WEB * PRINT * TECH * TIPS * ABOUT * CONTACT
July 3, 200818 yr Author Well the text-indent was the way to go. I was stupidly applying it to the div rather than the link. Sorted now although the code is rather ridiculous. Here it is for anyone interested. Next thing is to reduce the number of images. Also I know I really shouldn't be using all these div's but am unsure how to use a list of links instead and get the same styling/images etc... ??? anyhow. /////////////////////////////////////////////// CSS /////////////////////////////////////////////// #nav { float:right; width:300px; height:13px; margin:0px; padding:0px; } #nav-web, #nav-print, #nav-tech, #nav-tips, #nav-about, #nav-contact { float:left; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:3px; padding:0px; } #nav-web a, #nav-print a, #nav-tech a, #nav-tips a, #nav-about a, #nav-contact a { height:13px; display:block; text-indent:-7000px; outline:none; } #nav-web a { width:29px; } #nav-print a { width: 37px; } #nav-tech a { width: 32px; } #nav-tips a { width: 27px; } #nav-about a { width: 42px; } #nav-contact a { width: 53px; } #nav-web a:link, a:visited { background: url(nav_web.png) no-repeat; } #nav-print a:link, a:visited { background: url(nav_print.png) no-repeat; } #nav-tech a:link, a:visited { background: url(nav_tech.png) no-repeat; } #nav-tips a:link, a:visited { background: url(nav_tips.png) no-repeat; } #nav-about a:link, a:visited { background: url(nav_about.png) no-repeat; } #nav-contact a:link, a:visited { background: url(nav_contact.png) no-repeat; } #nav-web a:hover, a:active { background: url(nav_web_o.png) no-repeat; } #nav-print a:hover, a:active { background: url(nav_print_o.png) no-repeat; } #nav-tech a:hover, a:active { background: url(nav_tech_o.png) no-repeat; } #nav-tips a:hover, a:active { background: url(nav_tips_o.png) no-repeat; } #nav-about a:hover, a:active { background: url(nav_about_o.png) no-repeat; } #nav-contact a:hover, a:active { background: url(nav_contact_o.png) no-repeat; } /////////////////////////////////////////////// ^^ BULKY RIGHT?
July 4, 200818 yr Just thinking.... the example I gave was only -1000px. In these days of big widescreens, you'd better make it more like -5000px or 5000em or something! Incidentally, if you apply this technique to links you can get a (sort of) bug in Firefox; you'll see a very long focus box when you click a link. To get rid of this, just apply 'overflow: hidden' to the anchors in the css. When you want to change a link list to a horizontal list, the major css things to do are: 1. get rid of the browser default paddings and margins on the 'ul' ul { margin: 0; padding: 0; } 2. get rid of the padding, margins, and bullet on the 'li's. Also float them so they go horizontal. li { margin: 0; padding: 0; list-style: none; float: left; } Make the anchors as 'display: block' as before. Obviously, you may want to set the margins and padding to your own spec. It's usually best to add padding to the anchors rather than the 'li's if you need to... er... pad things out. (for this sort of horizontal list). James
Create an account or sign in to comment