Also das ausdehnen ist kein Problem, aber wie bekomme ich es jetzt hin, dass ein Roll-over erzeugt wird?
Verwendung von Listen nutze ich, da diese auch bei ausgeschaltetem CSS lesbar bleiben und eine Sinneinheit bilden.
<?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Pixelogo.de</title> <style type="text/css"> <!-- @import url(style.css); //--> </style> </head> <body> <div id='haupt'> </div> <div id='menu'> <a href='www.pixelogo.de'><img src='trans.png' width='200px' height='150px' alt='Pixelogo.de' /></a> <ul> <li class='li'><p id='gr_bottom'><a href='test.htm'>Testlink 1</a></p></li> <li class='li'><p id='gr_bottom'><a href='test.htm'>Testlink 2</a></p></li> <li class='li'><p id='gr_bottom'><a href='test.htm'>Testlink 3</a></p></li> </ul> </div> </body> </html>
body { background: white url(bg_real.jpg); } img { border: 0px; } ul { margin: 0px; padding: 0px; list-style: none; text-align: center; } .li { background: url(link_no_1.jpg); } #gr_bottom { margin: 0px; margin-top: 4px; padding: 0px; background: url(link_no_2.jpg) no-repeat bottom; } #menu { position: absolute; top: 0px; left: 475px; height: 500px; width: 200px; background: url(menu_l.jpg) no-repeat top; }