rollover button with HTML text question

**Captainkewl** · 02-05-2009, 09:53 PM

Hey guys. If you go here: Welcome to Brultech Research , you will see that for the left side navigation that I have started, there are 2 rollover buttons. Is it better to place HTML text over the images for better SEO, rather than using image text and the alt? If this is true, what is the best way to overlay the HTML text onto the rollover buttons? Would it be to create a new ul id and add the text as it's own ul li? I just want to know the most proficient way to achieve this. CSS URL is: http://kmkwebdevelopment.com/brultech/brultech.css

Thanks,
Kris.

**Harry** · 02-05-2009, 10:02 PM

It's not really SEO, more accessibility. Apply the images as a background on the element, simple.

**Captainkewl** · 02-05-2009, 10:11 PM

Thanks for the reply. That makes sense.

Cheers,
Kris.

**Captainkewl** · 02-05-2009, 10:14 PM

Hey Harry. Would you be kind enough to give me an example of how you would do this? I know your pretty good at this stuff, so I just wanted to see your way of doing it. Thanks.

**Harry** · 02-05-2009, 10:27 PM

One moment.

**Harry** · 02-05-2009, 10:38 PM

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="verify-v1" content="njtWP1pzyaNKdUSSqNz1Im4zsK5SgfesFiWvOscOUxE=" /> <meta name="robots" content="ALL" />
	<meta name="description" content="Semantic web development, web standards, CSS Wizardry and other stuff." />
	<meta name="keywords" content="web standards, semantics, accessibility, typography, web developer, CSS, xHTML, Harry Roberts" />
	<meta name="author" content="Harry Roberts" />
	<title>This is just a test</title>
	<style type="text/css">
		/*YAHOO! RESET*/
		body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {  
			margin:0; 
			padding:0; 
		} 
		table { 
			border-collapse:collapse; 
			border-spacing:0; 
		} 
		fieldset,img {  
			border:0; 
		} 
		address,caption,cite,code,em,strong,dfn,th,var { 
			font-style:normal; 
			font-weight:normal; 
		} 
		ol,ul { 
			list-style:none; 
		} 
		caption,th { 
			text-align:left; 
		} 
		h1,h2,h3,h4,h5,h6 { 
			font-size:100%; 
			font-weight:normal; 
		} 
		q:before,q:after { 
			content:''; 
		} 
		abbr,acronym {
			border:0; 
		}
		/*---------- END RESET ----------*/
		/*
		MAIN
		---------------------------------------------------------------------------------------------------------------- */
		html{
			font-size:100%;
		}
		body{
			font-size:62.5%;
			font-family:Arial, Verdana, Tahoma, sans-serif;
			color:#333;
			background:#fff;
		}
		#wrapper{
			width:940px;
			padding:1em;
			margin:0 auto;
			overflow:hidden;
		}
		ul#nav li a{
			text-align:center;
			display:block;
			color:#000;
			font-weight:bold;
			font-size:1.2em;
			background:url(images/nav.gif) top left no-repeat;
			width:175px;
			height:25px;
			padding-top:10px;
		}
		ul#nav li a:hover{
			color:#333;
			background:url(images/nav.gif) bottom left no-repeat;
			text-decoration:none;
		}
	</style>
</head>
<body id="home">

	<div id="wrapper">
		<ul id="nav">
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>

</body>
</html>

As seen here: This is just a test

**Captainkewl** · 02-05-2009, 10:43 PM

That's awesome man. Thanks for the clarification!! Much appreciated!

Cheers,
Kris.

**Harry** · 02-05-2009, 10:44 PM

No worries.

Thread: rollover button with HTML text question

LinkBack

Thread Tools

Display