Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Best way to do <a> in css

Status
Not open for further replies.
OOzy

OOzy

Programmer
Jul 24, 2000
135
SA
Dears,

I have simple <div> block and I would like to add three <a> with rollovers, what is the best way to do so. I did the following and I am not sure if this is the right thing to do

HTML
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "">
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
  <head>
    <meta name="generator"
    content="HTML Tidy for Linux/x86 (vers 1st September 2002), see [URL unfurl="true"]www.w3.org"[/URL] />
    <meta http-equiv="content-type"
    content="text/html; charset=UTF-8" />
    <meta name="description" content="{!METAWORDS!}" />
    <title>{!TITLE!}</title>
    <link rel="stylesheet" href="/src/css/mz.css" type="text/css" />
  </head>
  <body>
    <div id="upr_mnu">
	<a id="a1" href="#"></a>
	<a id="a2" href="#"></a>
	<a id="a3" href="#"></a>
    </div>
	
  </body>
</html>

CSS
Code: 
body{
  margin:0px;
  padding:0px;
  font-size:medium;
  font-family: verdana, arial, helvetica, sans-serif;
  background: #F6F6F6;
  /*text-align:center;*/
}

div#upr_mnu {
  width:750px;
  height:22px;
  padding: 0 1px 0 0;
  margin: 0 auto 0 auto ;
  background: #235DA8;
  }

a#a1
{
background: url("/src/images/mainpage.png") no-repeat;
width:110px;
height:20px;
float:right;

}

a#a1:hover{
background: url("/src/images/mainpagew.png") no-repeat;

}

a#a2
{display:block;
background: url("/src/images/about.png") no-repeat;
width:70px;
height:20px;
float:right;

}

a#a2:hover{background: url("/src/images/aboutw.png") no-repeat;}

a#a3
{
display:block;
background: url("/src/images/contactus.png") no-repeat;
width:58px;
height:20px;
float:right;
}

a#a3:hover{background: url("/src/images/contactusw.png") no-repeat;}
 
Sort by date Sort by votes
Well, that should work. The only big problem I can see with it is that anyone surfing without images won't see your menu at all. Could you not use the background image for just the background and use real text in the foreground - like the row of buttons just below the thread title on this page?

Alternatively, you could try marking up your menu options like this:
Code: 
<a id="a1" href="#"><span>Main Page</span></a>
Then put this rule in your CSS
Code: 
div#upr_mnu a span {
   display:none;
}
Though I'm not sure it would help users of more advanced - CSS-reading - screen readers.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
I did it and it worked fine [thumbsup2].
How can someone serve without images?[ponder]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
759
bdwilcox
bdwilcox
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
815
pmonett
pmonett
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
818
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top