Durchgezogene Linie: Moderne Umsetzung in HTML & CSS

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • 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:



    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:




    Quellcode

    1. #menu {
    2. width:800px;
    3. height:85px;
    4. font-family: arial, sans-serif;
    5. width: 800px;
    7. }
    8. #bla {
    9. margin:0;
    10. list-style:none;
    11. background-repeat: no-repeat;
    12. float: left;
    14. }
    15. #hauptnavi {
    16. padding:24px 0 0 10px;
    17. background-image: url(bilder/footer_line.jpg);
    18. background-repeat: no-repeat;
    19. margin:0;
    20. list-style:none;
    22. float: left;
    24. clear: right;
    25. }
    26. #hauptnavi li {
    28. float:left;
    29. position:relative;
    30. width:90px;
    31. height:20px;
    32. text-align: center;
    33. }
    35. #hauptnavi li a {display:block; width:100%; height:50px; font:bold 14px arial, sans-serif; color:#000; text-decoration:none;}
    36. #hauptnavi li a:hover {color:#0080c0;}
    Alles anzeigen


    Quellcode

    1. <div id="menu" >
    2. <ul id="hauptnavi">
    3. <li ><a href="#url1">XHTML</a></li>
    4. <li ><a href="#url2">CSS</a></li>
    5. </ul>
    6. <img src="bilder/logo_footer.gif" alt="" width="62" height="64" id="bla"/>
    7. <ul id="hauptnavi">
    8. <li><a href="#url1">Facebook</a></li>
    9. <li><a href="#url2">StudiVZ</a></li>
    10. </ul>
    11. </div>
    Alles anzeigen


    Für Idee und Lösungansätze wäre ich sehr dankbar :)

    Gruß
    Stephan
    Bilder

    • footer.gif

      24,26 kB, 585×75, 436 mal angesehen

    • Unbenannt-2.jpg

      13,48 kB, 454×73, 362 mal angesehen