Welcome to the Graphic and Web Design Forum


your forum for all things Design


  •  » Graphic Design
  •  » Web Design
  •  » Logos and Branding
  •  » Illustration
  •  » Photography
  •  » Design Tutorials
  •  » Plenty of Off Topic Chat

Register now to remove this ad box


YES! I want to register an account for free right now!


-->
Page 1 of 2 12 Last
  1. #1
    Captainkewl's Avatar
    Join Date
    Mar 2009
    Location
    Niagara Falls, Canada
    Posts
    146

    rollover button with HTML text question


    REGISTER TO REMOVE ADS


    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.

  2. #2
    Harry's Avatar
    Join Date
    May 2007
    Location
    Leeds, England
    Posts
    11,428
    It's not really SEO, more accessibility. Apply the images as a background on the element, simple.

  3. #3
    Captainkewl's Avatar
    Join Date
    Mar 2009
    Location
    Niagara Falls, Canada
    Posts
    146
    Thanks for the reply. That makes sense.

    Cheers,
    Kris.

  4. #4
    Captainkewl's Avatar
    Join Date
    Mar 2009
    Location
    Niagara Falls, Canada
    Posts
    146
    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.

  5. #5

  6. #6
    Harry's Avatar
    Join Date
    May 2007
    Location
    Leeds, England
    Posts
    11,428
    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

  7. #7
    Captainkewl's Avatar
    Join Date
    Mar 2009
    Location
    Niagara Falls, Canada
    Posts
    146
    That's awesome man. Thanks for the clarification!! Much appreciated!

    Cheers,
    Kris.

  8. #8
    Harry's Avatar
    Join Date
    May 2007
    Location
    Leeds, England
    Posts
    11,428

    REGISTER TO REMOVE ADS


    No worries.

Page 1 of 2 12 Last

Similar Threads

  1. Rollover text
    By nuksies in forum CSS Forum
    Replies: 9
    Last Post: 05-09-2008, 06:24 AM
  2. css rollover text change
    By philjohns in forum CSS Forum
    Replies: 17
    Last Post: 08-02-2008, 09:34 AM
  3. Replies: 5
    Last Post: 09-09-2007, 08:59 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in