Design 1

Design1: Finely
(Der Inhalt ist nur BEISPIELINHALT!! Der Code unten ist OHNE diesen Inhalt!)

Dieses Design ist ein fertiges css-design.






Text über dem Design: <img src="header_bild.jpg" _fcksavedurl="header_bild.jpg"></a> <Coolmenü> <style type="text/css" media="screen"> <!-- body { font-family: Verdana, sans-serif; font-size: 10px; overflow: auto; padding: 10px; margin: 0px; } ul, li { list-style-type: none; padding: 0px; margin: 0px; } li a { padding-right: 20px;padding-top: 5px; } div.menu { position: absolute; z-index: 3; top: 99px; left: 30%; margin-left:-330px; width:895px; } .menu li { width: 150px; float: left; } .menu a { border: 1px solid #ffffff; background-color: #c1c1c1 ; background-image: url(https://img.webme.com/pic/t/twibiss/button-nav.jpg); text-decoration: none; text-align: center; font-weight: normal; cursor: pointer; margin: 0px; display: block; height: 25px; color: #ffffff; font-size: x-small; } .menu a:hover { background-color: #ffffff ; background-image: url(https://img.webme.com/pic/t/twibiss/button-nav-hover.jpg); } #smenu1, #smenu2, #smenu3, #smenu4, #smenu5 { font-size: 14px; display: none; width: 158px; float: left; } #smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a { font-weight: bold; padding-top: 10px; border-top: 0px; cursor: pointer; color: #FFFFFF ; } //--> </style> <script type="text/javascript"> <!-- function montre(id) { with (document) { if (getElementById) getElementById(id).style.display = 'block'; else if (all) all[id].style.display = 'block'; else layers[id].display = 'block'; } } function cache(id) { with (document) { if (getElementById) getElementById(id).style.display = 'none'; else if (all) all[id].style.display = 'none'; else layers[id].display = 'none'; } } //--> </script> <div class="menu"> <li><a href="javascript:void(0);" _fcksavedurl="javascript:void(0);" onmouseover_fckprotectedatt=" onmouseover="montre('smenu1');"" onmouseout_fckprotectedatt=" onmouseout="cache('smenu1');"">Navigation</a> <ul id="smenu1" onmouseover_fckprotectedatt=" onmouseover="montre('smenu1');"" onmouseout_fckprotectedatt=" onmouseout="cache('smenu1');""> <li><a href="http://ihrlink.de.tl" _fcksavedurl="http://ihrlink.de.tl" title="css menus" class="current"><span>Link 1</span></a></li> <li><a href="http://ihrlink.de.tl" _fcksavedurl="http://ihrlink.de.tl" title="css menus"><span>Link 2</span></a></li> <li><a href="http://ihrlink.de.tl" _fcksavedurl="http://ihrlink.de.tl" title="css menus"><span>Link 3</span></a></li> <li><a href="http://ihrlink.de.tl" _fcksavedurl="http://ihrlink.de.tl" title="css menus"><span>Link 4</span></a></li> <li><a href="http://ihrlink.de.tl" _fcksavedurl="http://ihrlink.de.tl" title="css menus"><span>Link 5</span></a></li> <li><a href="http://ihrlink.de.tl" _fcksavedurl="http://ihrlink.de.tl" title="css menus"><span>Link 6</span></a></li> </div> Css-code(ohne style-tags): #nav_container{ display:none; } body { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-family: verdana, arial, helvetica, sans-serif; color: #ffffff; background-color: #000000; background-image: url(hintergrund.jpg); text-align: center; /* part 1 of 2 centering hack */ background-attachment: fixed; } #content { width: 400px; padding: 10px; margin-top: 20px; margin-bottom: 20px; margin-right: auto; margin-left: auto; /* opera does not like 'margin:20px auto' */ background: #000000; background-image: url(hintergrund.jpg); border: 5px solid #ffffff; text-align:left; /* part 2 of 2 centering hack */ width: 700px; /* ie5win fudge begins */ voice-family: ""}""; voice-family:inherit; width: 370px; } html>body #content { width: 900px; /* ie5win fudge ends */ } a { color: #ffffff; }