Durchgezogene Linie: Moderne Umsetzung in HTML & CSS

Matrixstyle

Intermediate

Posts: 122

Wednesday, November 3rd 2010, 10:09pm

Durchgezogene Linie: Moderne Umsetzung in HTML & CSS

Hallo zusammen,

ich bin grade dabei eine Grafikvorlage in HTML & CSS umzusetzen. Nur bin ich grade etwas, mit meine Latein am ende.

Folgende Grafikvorlage geht es:

[img]http://www.easy-coding.de/index.php?page=Attachment&attachmentID=825&h=d6440b12cc58de75128d2ef8659ffd0fdc90917a[/img]

Dabei ist XHTML , CSS usw Links. Ich möchte gerne das ohne den altmodischen Kram wie Tabellen lösen. Nur das mit den Line oben drüber bekomme ich nicht hin.

So sieht es momentan aus:

[img]index.php?page=Attachment&attachmentID=826&h=3fa98c14d40d8927942e465d94a2e38fd21a28bf[/img]

Cascading Style Sheets

#menu {
width:800px;
height:85px;
font-family: arial, sans-serif;
width: 800px;
 
}
#bla {
margin:0;
list-style:none;
background-repeat: no-repeat;
float: left;
 
}
#hauptnavi {
padding:24px 0 0 10px;
background-image: url(bilder/footer_line.jpg);
background-repeat: no-repeat;
margin:0;
list-style:none;
 
float: left;
 
clear: right;
}
#hauptnavi li {
 
float:left;
position:relative;
width:90px;
height:20px;
text-align: center;
}
 
#hauptnavi li a {display:block; width:100%; height:50px; font:bold 14px arial, sans-serif; color:#000; text-decoration:none;}
#hauptnavi li a:hover {color:#0080c0;}

HTML Code

<div id="menu" >
	<ul id="hauptnavi">
	  <li ><a href="#url1">XHTML</a></li>
	  <li ><a href="#url2">CSS</a></li>
  </ul>
	<img src="bilder/logo_footer.gif" alt="" width="62" height="64" id="bla"/>
<ul id="hauptnavi">
  	  <li><a href="#url1">Facebook</a></li>
	  <li><a href="#url2">StudiVZ</a></li>
  </ul>
</div>