Navi mit Balken über Element

  • Navi mit Balken über Element

    Guten Nabend,

    ichhab ein kleines Problem und zwar ich wollte diese Navi (upload.webkost.de/images/83142navi.jpg) nicht per grafiken machen sondern per css..
    Nur leider bekomm ich des nicht hin, ich hab hier den versuch den ich machen wollte aber das haut irgendwie nicht hin... :(

    Quellcode

    1. #header_part3 {
    2. width:618px;
    3. height:19px;
    4. margin:auto;
    5. padding-left:8px;
    6. padding-top:120px;
    7. }
    9. #header_part3 ul{
    10. padding:0px;
    11. margin:0px;
    12. }
    14. #header_part3 ul li{
    15. list-style-type:none;
    16. display:inline;
    17. margin:0px;
    18. padding:0px;
    19. float:left;
    20. padding-left:2px;
    21. padding-right:2px;
    22. padding-top:4px;
    23. width:60px;
    24. height:15px;
    25. text-align:center;
    26. font-size:11px;
    27. }
    28. a.navi:link { text-decoration:none; color:#36291D; background-color:#cccccc; width:50px; margin:10px;}
    29. a.navi:visited { text-decoration:none; color:#36291D; background-color:#cccccc; width:50px; margin:20px;}
    30. a.navi:hover { text-decoration:none; color:#e00377; background-color:#e00377; width:50px; margin:20px;}
    31. a.navi:focus { text-decoration:none; color:#e00377; background-color:#e00377; width:50px; margin:10px;}
    Alles anzeigen


    und hier der html code..

    Quellcode

    1. <div id="header_part3">
    2. <ul>
    3. <li><a href="index.php?open=startseite" class="navi">Home</a></li>
    4. <li><a href="index.php?open=startseite" class="navi">D-Load</a></li>
    5. <li><a href="index.php?open=startseite" class="navi">Gallery</a></li>
    6. <li><a href="index.php?open=startseite" class="navi">Album</a></li>
    7. <li><a href="index.php?open=startseite" class="navi">Künstler</a></li>
    8. <li><a href="index.php?open=startseite" class="navi">G-Side</a></li>
    9. <li><a href="index.php?open=startseite" class="navi">Imprint</a></li>
    10. <li><a href="index.php?open=startseite" class="navi">DJ D-Style</a></li>
    11. </ul>
    12. </div>
    Alles anzeigen


    nur leider er mir den code wie folgt an:
    page.webkost.de/abdul90/

    *grml*
    ich hab jetzt seit 3 std rumprobiert und kA irgendwie komm ich da nicht weiter, könnt ihr mir helfen ?
    w#äre auf jedn fall supi...

    Gruß
    dehne
    Ich würd zu gern die Welt verändern, doch Gott rückt den Quellcode net raus.

  • hi,
    ich kann deinen ansatz noch nicht erkennen. Wie willst du denn versuchen es zu realisieren?
    Wenn du mit Rahmen arbeitest, bietet es sich an mit Blockelementen zu arbeiten.
    Ansonsten 2 DIVs ineinander. Das eine pink mit weißem Rahmen, das andere grau überdeckend und etwas kleiner.
    Wenn du erstmal den Stil hast, kannst du dich versuchen das zu hovern. Das ist aber Schritt 2.

  • hi,

    eigentlich wollte, ich das so machen das ich den Menüounkt habe z.b Home und rüber ein Blaken ist, grau... geht man mit der maus drüber ändert sich der Balken und die Schriftfarbe..
    So wie es jetzt is, ist es ja nur der Hintergrund der Schrift in diesem Effekt und genau das sollte ja nicht sein, sondern halt der Hintergrund der Scrhift frei und dann 10px weiter oben dieser Balken...
    Wie in der Grafik die oben bei ist, da siehste den Ausschnitt wie es eigenltich sein sollte.
    Ich würd zu gern die Welt verändern, doch Gott rückt den Quellcode net raus.