CSS Problem mit Margin

    CSS Problem mit Margin

    Nabend,

    ich möchte auf meiner HP eine art Tab Pages bauen.
    Funktioniert soweit auch, jedoch solls jetzt noch ein schönen Effekt geben und die TapPage wo die Maus drüber ist sich "erheben".

    Ich habe nun eine einfache UL LI Liste gemacht. Die A-Tags haben 8px Abstand von oben, bei einem MouseOver soll dieser Margin abstand weggenommen werden, jedoch wird das nicht gemacht.

    HTML-Quellcode

    1. <div id="tabs">
    2. <ul>
    3. <li><a href="#">Party Board</a></li>
    4. <li><a href="#">Klatschecke</a></li>
    5. <li><a href="#">Urlaub</a></li>
    6. </ul>
    7. </div>


    Quellcode

    1. #tabs {
    2. padding-left: 20px;
    3. }
    5. #tabs ul {
    6. list-style-type: none;
    7. padding: 0;
    8. margin: 0;
    9. }
    11. #tabs ul li {
    12. display: inline-block;
    13. }
    15. #tabs ul li a {
    16. display: inline-block;
    17. //background-image: url('../images/tab_out.png');
    18. border: 1px solid #c4c4c4;
    19. width: 116px;
    20. height: 20px;
    21. padding: 5px 0 0 5px;
    22. margin-top: 8px; // <-- hier wird der Top Margin gesetzt das die A-Blöcke 8px tiefer sitzen
    23. }
    25. #tabs ul li a:hover {
    26. //background-image: url('../images/tab_hover.png');
    27. height: 28px;
    28. margin-top: 0; // <-- beim Mouseover soll dieser Margin weggenommen werden was jedoch keinen Einfluss hat.
    29. }


    Aussehen sollte es dann so

    Quellcode

    1. _______
    2. _______ | Tab 2 | _______
    3. | Tab 1 | | | | Tab 3 |


    das der Tab 2 beim Mouseover eben so hervorsticht.

    Edit: Hat sich erledigt, durchte nicht display:inlie-block nehmen sondern musste mit float die LI Objekte horizontal anordnen, der Code falls jemand was ähnliches hat

    Quellcode

    1. #tabs ul {
    2. list-style-type: none;
    3. padding: 0;
    4. margin: 0;
    5. }
    7. #tabs ul li {
    8. float: left;
    9. height: 33px;
    10. margin: 0 2px;
    11. padding-top: 8px;
    12. }
    14. #tabs ul li:hover {
    15. padding-top: 0;
    16. }
    18. #tabs ul li a {
    19. display: inline-block;
    20. border: 1px solid #c4c4c4;
    21. width: 116px;
    22. height: 20px;
    23. padding: 5px 0 0 5px;
    24. }
    26. #tabs ul li a:hover {
    27. height: 28px;
    28. }

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „Dodo“ ()

Facebook