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> Link to comment https://forums.phpfreaks.com/topic/88767-reposition-text/ 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> Link to comment https://forums.phpfreaks.com/topic/88767-reposition-text/#findComment-455047 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.