Dysan Posted January 31, 2008 Share Posted January 31, 2008 Hi, I have a unordered list containing 6 list items, each consisting of a different background image. How to I reposition the text so it is 5px from the left and 5px down? <!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"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> .names a { WIDTH: 61px; HEIGHT: 22px; DISPLAY: block; BACKGROUND: url(image.bmp) no-repeat; } </head> <body> <div id="container"> <ul id="people"> <li class="names"><a href="/">George</a></li> <li class="names"><a href="/">David</a></li> </ul> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted February 1, 2008 Share Posted February 1, 2008 Like this: <!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"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> ul { margin: 0; padding: 0; list-style-type: none; } /* Clear's any default margin, and sets the list-style. */ li { background: url(image.bmp) no-repeat; } li a { position: relative; top: 5px; left: 5px; display: block; width: 61px; height: 22px; } </style> </head> <body> <div id="container"> <ul id="people"> <li><a href="/">George</a></li> <li><a href="/">David</a></li> </ul> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.