1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

Frage Dropdown-Menü Schönheitsproblem

Dieses Thema im Forum "CSS" wurde erstellt von Throkir, 29 Dezember 2016.

  1. Throkir

    Throkir Neues Mitglied

    Registriert seit:
    29 Dezember 2016
    Beiträge:
    2
    Punkte für Erfolge:
    1
    Liebe Community,
    Ich bin neu hier und auch recht unerfahren was html und css angeht.
    Ich habe etwas rumprobiert und aus dem Internet von Tutorials ein paar Codes gefunden. letztlich habe ich es dann geschafft ein funktionierendes Dropdown-Menü auf meinem Blog einzubauen, doch es gibt da einen kleinen Schönheitsfehler, den ich irgendwie nicht beheben kann:

    Der Blog: https://jus-jo.blogspot.de/
    Das Problem:
    Unbenannt.JPG


    Und zwar erscheint unter den Kategorien, die ich als Dropdown erstellt habe, eine Subkategorie in einem Kästchen. Das ist links an den Ecken abgerundet, aber rechts einfach abgesäbelt und das stört mich.
    Vielleicht kann sich das mal jemand angucken, ich kopiere hier unten mal die html und css Codes rein:

    HTML:
    Code (html5):
    1. <!--Start Navigation -->
    2. <div id="navigationbar">
    3. <ul id='navigationcss'>
    4. <li><a href='[URL]http://jus-jo.blogspot.de/[/URL]'>Home</a></li>
    5. <li><a href='[URL]https://jus-jo.blogspot.de/p/arbeit.html[/URL]'>Arbeit</a>
    6. <ul>
    7. <li><a href='[URL]https://jus-jo.blogspot.de/p/ria-die-lichtklan-chroniken.html[/URL]'>Ria - Die Lichtklan Chroniken (Comicreihe)</a></li>
    8. </ul>
    9. </li>
    10. <li><a href='[URL]https://jus-jo.blogspot.de/p/fan.html[/URL]'>Fanfictions</a>
    11. <ul>
    12. <li><a href='[URL]https://jus-jo.blogspot.de/p/blog-page_6.html[/URL]'>Die Geschichten von Tolliks, dem Uralten</a></li>
    13. </ul>
    14. </li>
    15. <li><a href='[URL]https://jus-jo.blogspot.de/p/kurzgeschichten.html[/URL]'>Kurzgeschichten</a>
    16. </li>
    17. <li><a href='[URL]https://jus-jo.blogspot.de/p/blog-page_21.html[/URL]'>Über Mich</a>
    18. </li>
    19. <li><a href='[URL]https://jus-jo.blogspot.de/p/copyright.html[/URL]'>Impressum</a>
    20. </li>
    21. </ul>
    22. </div>
    23. <!--End Navigation -->

    CSS:

    Code (css):
    1. /* ----- CSS Nav Menu Styling ----- */
    2. #navigationbar {
    3. width: 100%; /* change the width of the navigation bar */
    4. height: 35px; /* change the height of the navigation bar */
    5. }
    6.  
    7. #navigationcss {
    8. margin: 0 auto;
    9. padding: 0;
    10. }
    11.  
    12. #navigationcss ul {
    13. float: none;
    14. list-style: none;
    15. margin: 0;
    16. padding: 0;
    17. overflow: visible;
    18. }
    19.  
    20. #navigationcss li a, #navigationcss li a:link, #navigationcss li a:visited {
    21. color: #664a16; /* change color of the main links */
    22. display: block;
    23. margin: 0;
    24. padding: 10px 30px;  /* change the first number for the top/bottom spacing, and the second number for left/right spacing */
    25. }
    26.  
    27. #navigationcss li a:hover, #navigationcss li a:active {
    28. color: #000000 ; /* change the color of the links when hovered over */
    29. margin: 0;
    30. padding: 10px 30px; /* make sure these are the same as the section above! */
    31. }
    32.  
    33. #navigationcss li li a, #navigationcss li li a:link, #navigationcss li li a:visited {
    34. background: #ffffff;  /* change the background color of the drop down box */
    35. width: 150px;
    36. color: #000000; /* change the color of the drop down links */
    37. float: none;
    38. margin: 0;
    39. padding: 7px 10px; /* similar to above, change for the spacing around the links */
    40. }
    41.  
    42. #navigationcss li li a:hover, #navigationcss li li a:active {
    43. background: #d4d4d4 ; /* change the background color of drop down items on hover */
    44. color: #664a16; /* change the color of drop down links on hover */
    45. padding: 7px 10px;  /* keep these the same as the above section */
    46. }
    47.  
    48. #navigationcss li {
    49. float: none;
    50. display: inline-block;
    51. list-style: none;
    52. margin: 0;
    53. padding: 0;
    54. }
    55.  
    56. #navigationcss li ul {
    57. z-index: 9999;
    58. position: absolute;
    59. left: -999em;
    60. height: auto;
    61. width: 150px;
    62. margin: 0;
    63. padding: 0;
    64. }
    65.  
    66. #navigationcss li:hover ul, #navigationcss li li:hover ul, #navigationcss li li li:hover ul, #navigationcss li.sfhover ul, #navigationcss li li.sfhover ul, #navigationcss li li li.sfhover ul {
    67. left: auto;
    68. }


    Danke schonmal im Vorraus.
    LG
    Throkir
     
    Zuletzt von einem Moderator bearbeitet: 29 Dezember 2016
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.577
    Punkte für Erfolge:
    83
    In diesem Ausschnitt des CSS (Zeile 467-525 im HTML-Code) kannst Du lange nach der Ursache suchen.

    Glücklicherweise hast Du vorbildhaft zusätzlich die Seite verlinkt, denn die Definition der linkslastig abgerundeten Ecken findet schon früher statt:
    Code (CSS):
    1. /* Zeile 239 im HTML-Code */ .tabs-inner .widget li:first-child a {
    2. padding-left: 1.25em;
    3. -moz-border-radius-topleft: 10px;
    4. -moz-border-radius-bottomleft: 10px;
    5. -webkit-border-top-left-radius: 10px;
    6. -webkit-border-bottom-left-radius: 10px;
    7. -goog-ms-border-top-left-radius: 10px;
    8. -goog-ms-border-bottom-left-radius: 10px;
    9. border-top-left-radius: 10px;
    10. border-bottom-left-radius: 10px;
    11. }
    Pro Tipp: Mit der rechten Maustaste das betroffene Element anklicken, im Kontextmenü je nach Browser "Untersuchen" oder "Element untersuchen" wählen, um mit seinem integrierten Entwicklerwerkzeug den Ursprung der Formatierung(en) in Erfahrung zu bringen, die sich mitunter über ein ganzes Stylesheet verteilen können, wie hier im vorliegenden Fall.
     
  3. Throkir

    Throkir Neues Mitglied

    Registriert seit:
    29 Dezember 2016
    Beiträge:
    2
    Punkte für Erfolge:
    1
    Heißt das ich müsste quasi im html der Seite einfach diesen Code nur nochmal mit rechts einfügen?

    Also quasi alles an left gegen right austauschen und darunter kopieren?
     
  4. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.577
    Punkte für Erfolge:
    83
    Die Korrektur kann definitiv kürzer abgewickelt werden: border-top|-bottom-left-radius:10px entfällt, und gilt damit für alle vier Ecken :cool:

    Desweiteren könnten die Zeilen 3-8 entfernt werden, die einst den Browsern (Firefox, Chrome, Opera, IE) gewidmet waren, als sie border-radius ohne den individuellen Präfix noch nicht unterstützt hatten. Im Jahre 2016/17 dürften sie einem aber nur noch in wenigen Ausnahmefällen begegnen, die in meinen Augen eine zu vernachlässigende Minderheit repräsentieren.

    Grundsätzlich eine gute Quelle zur Überprüfung des aktuellen Browsersupports ist http://caniuse.com -> http://caniuse.com/#search=border-radius

    Das aktualisierte CSS würde nun so aussehen:
    Code (CSS):
    1. /* Zeile 239 im HTML-Code */ .tabs-inner .widget li:first-child a {
    2. padding-left: 1.25em;
    3. border-radius: 10px;
    4. }
    Kein Problem - haben schließlich alle mal klein angefangen :)

    Und damit's nicht dabei bleibt, gibt's von mir auch gratis was oben d'rauf :D

    https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/äußere_Gestaltung/Rahmen/border-radius