ilch Forum » Allgemein » HTML, PHP, SQL,... » Ecken abrunden

Geschlossen
  1. #1
    User Pic
    CaptainJack Mitglied
    Registriert seit
    11.02.2010
    Beiträge
    519
    Beitragswertungen
    2 Beitragspunkte
    Hall zusammen,

    ich wollte mir mein dropdown Menü etwas anpassen indem die unteren Ecken links und rechts abgerundet sind und unter jedem Link ein Strich ist.

    Also insgesamt wollte ich das es so aussieht wie hier: okularrulz.de/

    Nur das das dropdown Menü dabei etwas transparent ist wie mein jetziges auch

    Ich habe schon einige css3 Seiten durchforstet und auch ausprobiert nur irgendwie mache ich da was falsch.

    Kann mir da jemand helfen wie ich meine dropdown.css so anpassen kann?

    Hier einfach mal meine dropdown.css Datei:

    /* Drop and Down Naigation
    ------------------------------------
    
            Reaslisert durch Benjamin Breit
    
            Design durch Tibor
    
            Copyright by Storm
    
    -------------------------------------
    */
    
    a img                        {border: none;}
    
    #dropmenudiv {
            position: absolute;
            z-index: 100;}
    
    #dropmenudiv a {
      background-color: #222222;
      opacity: 0.8;
      width:95px;
            height: 20px;
            display: block;
            padding: 2px 0 0 10px;
            text-decoration: none;
            color: #666;
            font-family: Verdana, Arial, Helvetica, sans-serif;
              font-size: 11px; }
    
    
    
    #dropmenudiv a:hover { /*hover background color*/
            color: #ccc;
            font-family: Verdana, Arial, Helvetica, sans-serif;
              font-size: 11px; }
    
    .hervorheben {
      color: #236377;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-weight:bold;
      font-size: 11px;
      text-decoration: none; }
    
    .hervorheben:hover {
      color: #ccc;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-weight:bold;
      font-size: 11px;
      text-decoration: none; }


    betroffene Homepage: soldier-force.com
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.675
    Beitragswertungen
    1212 Beitragspunkte
    Stichwort: border-radius
    Hier mal ein Link: klick mich
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    CaptainJack Mitglied
    Registriert seit
    11.02.2010
    Beiträge
    519
    Beitragswertungen
    2 Beitragspunkte
    Das habe ich auch schon gefunden und mal an jeder Stelle im css versucht ohne den gewünschten Erfolg.

    ZitatZitat geschrieben von Lord|Schirmer

    Stichwort: border-radius
    Hier mal ein Link: klick mich
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    Robert0506 Mitglied
    Registriert seit
    24.05.2009
    Beiträge
    204
    Beitragswertungen
    5 Beitragspunkte
    Ich persönlich würde die Navigation komplett neu machen! Dann die Styles aber über eine unsortierte Liste ( <ul> ) mit Listeneinträgen ( <li> ) definieren! Im Endeffekt ist dies wesentlich leichter umzusetzen und besser für die Übersichtlichkeit des Quellcodes... Du könntest dann die abgerundeten Ecken des letzten Dropdownpunktes mit der Klasse

    #navigation ul li:last-child {
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    }

    definieren!

    Wäre mein Vorschlag!

    BTW... Die Dropdownliste wird bei Chrome eh nicht richtig angezeigt! Ist so halb in der Navileiste! Bei mir zumindest!


    Zuletzt modifiziert von Robert0506 am 27.05.2012 - 13:36:01
    pixelphysics.de // Günstige Webdesigns und Anpassungen an Ilch
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    CaptainJack Mitglied
    Registriert seit
    11.02.2010
    Beiträge
    519
    Beitragswertungen
    2 Beitragspunkte
    Wie meinst du das das du es neu machen würdest?

    Bei mir wurde das Menü so erstellt da ich davon selber keine Ahnung habe.


    ZitatZitat geschrieben von Robert0506

    Ich persönlich würde die Navigation komplett neu machen! Dann die Styles aber über eine unsortierte Liste ( <ul> ) mit Listeneinträgen ( <li> ) definieren! Im Endeffekt ist dies wesentlich leichter umzusetzen und besser für die Übersichtlichkeit des Quellcodes... Du könntest dann die abgerundeten Ecken des letzten Dropdownpunktes mit der Klasse

    #navigation ul li:last-child {
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    }

    definieren!

    Wäre mein Vorschlag!

    BTW... Die Dropdownliste wird bei Chrome eh nicht richtig angezeigt! Ist so halb in der Navileiste! Bei mir zumindest!


    Zuletzt modifiziert von Robert0506 am 27.05.2012 - 13:36:01
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    orsnipe Mitglied
    Registriert seit
    19.06.2008
    Beiträge
    425
    Beitragswertungen
    11 Beitragspunkte
    @ Robert0506
    So kann man es auch machen, nur ist mein Dropdown komplett über den Admin regelbar (wie es Ilch vorgibt) und da ist es so wie es ist am einfachsten (für mich ^^)

    @ CaptainJack
    So wie Lord|Schirmer schon sagte und dir Robert0506 schon den Style vorgibt kann ich es dir auch nur sagen ...
    Die Runden "Ecken" erhällst du nur wenn du es in dem äusersten DIV einfügst, in den inneren siehst du es nicht da diese keinen BG haben und den des äusersten nutzen.

    Zu sagen bleibt dann nur noch: geht nicht gibts nicht denn bei uns geht es, bei DD geht es und vielen anderen auch (es werden Täglich mehr die es nutzen)

    Also nochmal testen.

    -webkit-border-bottom-right-radius: 5px; 
    -webkit-border-bottom-left-radius: 5px; 
    -moz-border-radius-bottomright: 5px; 
    -moz-border-radius-bottomleft: 5px; 
    border-bottom-right-radius: 5px; 
    border-bottom-left-radius: 5px;


    Und es kommt auf den Browser an:
    webkit = Google Chrome (und ähnliche)
    moz = Mozilla Firefox
    ohne name = soll für IE sein, sieht man auch in fast allen (wenige ausnahmen)
    Schau mich nicht in diesem Ton an, ich hab nen Tinnitus im Auge, ich seh nur Pfeifen.
    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    CaptainJack Mitglied
    Registriert seit
    11.02.2010
    Beiträge
    519
    Beitragswertungen
    2 Beitragspunkte
    Hi Orsnipe,

    ich habs mal probiert und eingesetzt. Sieht ziemlich komisch aus.

    Schaus dir mal pls an. www.soldier-force.com

    Ich habe testweise auch mal mit den Werten rumgespielt ohne sichtlichen Erfolg.

    Hier mal meine dropdown.css mit deinem eingefügten Code.

    /* Drop and Down Naigation
    ------------------------------------
    
            Reaslisert durch Benjamin Breit
    
            Design durch Tibor
    
            Copyright by Storm
    
    -------------------------------------
    */
    
    a img                        {border: none;}
    
    #dropmenudiv {
            position: absolute;
            z-index: 100;}
    
    
    #dropmenudiv a {
      background-color: #222222;
      opacity: 0.8;
      width:95px;
            height: 20px;
            display: block;
            padding: 2px 0 0 10px;
            text-decoration: none;
            color: #666;
            font-family: Verdana, Arial, Helvetica, sans-serif;
              font-size: 11px; 
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;}
    
    
    
    #dropmenudiv a:hover { /*hover background color*/
            color: #ccc;
            font-family: Verdana, Arial, Helvetica, sans-serif;
              font-size: 11px; }
    
    .hervorheben {
      color: #236377;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-weight:bold;
      font-size: 11px;
      text-decoration: none; }
    
    .hervorheben:hover {
      color: #ccc;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-weight:bold;
      font-size: 11px;
      text-decoration: none; }



    Zuletzt modifiziert von CaptainJack am 28.05.2012 - 19:32:27
    0 Mitglieder finden den Beitrag gut.
  8. #8
    User Pic
    Mikro Mitglied
    Registriert seit
    05.10.2011
    Beiträge
    237
    Beitragswertungen
    21 Beitragspunkte
    Denke mal so soll es aussehen oder???

    
    
    a img {border: none; }
    
    #dropmenudiv {
            position: absolute;
            z-index: 100;
            top:34px !important;
            width:99px !important;
            -webkit-border-bottom-right-radius: 8px;
            -webkit-border-bottom-left-radius: 8px;
            -moz-border-radius-bottomright: 8px;
            -moz-border-radius-bottomleft: 8px;
            border-bottom-right-radius: 8px;
            border-bottom-left-radius: 8px;
            border:1px #555 solid; /* border menü */
            background-color: #222222;
            opacity: 0.9; /*durchsichtigkeit */
    }
    
    
    #dropmenudiv a {
             height: 20px;
             display: block;
             padding: 2px 0 0 10px;
             text-decoration: none;
             color: #AAA;
             font-family: Verdana, Arial, Helvetica, sans-serif;
             font-size: 11px; 
    }
    
    #dropmenudiv a:hover { 
              color: #EEE; 
    }

    Mehr brauchst du nicht für dein Menü.

    Mal ein kleiner Tipp an alle, im Chrome kann man die CSS Dateien On-Fly bearbeiten(vielleicht auch in anderen Browsern weis ich nicht) und ohne hochladen speichern und so weiter gleich sehen was passiert.
    Wenn es dann passt den Code Copy und Paste auf dem Server fertig.

    1. Chrome öffnen
    2. F12 drücken
    3. Rechtsklick auf das was man ändern will
    4. Klick Element untersuchen
    5. In dem Fenster unten rechts schauen welsche css dafür zuständig ist
    6. Klick auf die Datei
    7. Datei bearbeiten bis es passt, dann Copy und Paste
    8. Fertig zwinker


    Zuletzt modifiziert von Mikro am 29.05.2012 - 09:24:47
    Wer Rechtschreibfehler findet darf sie behalten!
    0 Mitglieder finden den Beitrag gut.
  9. #9
    User Pic
    google.de Mitglied
    Registriert seit
    26.01.2012
    Beiträge
    352
    Beitragswertungen
    33 Beitragspunkte
    im firefox gibst Firebug dafür und im IE das Entwicklertool
    Kein Support per PN!
    Wenn ich zitiere ist dies KEIN Angriff auf die Person!
    0 Mitglieder finden den Beitrag gut.
  10. #10
    User Pic
    CaptainJack Mitglied
    Registriert seit
    11.02.2010
    Beiträge
    519
    Beitragswertungen
    2 Beitragspunkte
    TOP Mikro :-) Jetzt habe ich die Ecken sowie ich sie gerne hätte.

    Bin am überlegen ob man nach jedem Link ein Break sprich einen Strich rinfügrn kann und sollte. Was einst du dazu?

    [/u]
    ZitatZitat geschrieben von Mikro

    Denke mal so soll es aussehen oder???

    
    
    a img {border: none; }
    
    #dropmenudiv {
            position: absolute;
            z-index: 100;
            top:34px !important;
            width:99px !important;
            -webkit-border-bottom-right-radius: 8px;
            -webkit-border-bottom-left-radius: 8px;
            -moz-border-radius-bottomright: 8px;
            -moz-border-radius-bottomleft: 8px;
            border-bottom-right-radius: 8px;
            border-bottom-left-radius: 8px;
            border:1px #555 solid; /* border menü */
            background-color: #222222;
            opacity: 0.9; /*durchsichtigkeit */
    }
    
    
    #dropmenudiv a {
             height: 20px;
             display: block;
             padding: 2px 0 0 10px;
             text-decoration: none;
             color: #AAA;
             font-family: Verdana, Arial, Helvetica, sans-serif;
             font-size: 11px; 
    }
    
    #dropmenudiv a:hover { 
              color: #EEE; 
    }

    Mehr brauchst du nicht für dein Menü.

    Mal ein kleiner Tipp an alle, im Chrome kann man die CSS Dateien On-Fly bearbeiten(vielleicht auch in anderen Browsern weis ich nicht) und ohne hochladen speichern und so weiter gleich sehen was passiert.
    Wenn es dann passt den Code Copy und Paste auf dem Server fertig.

    1. Chrome öffnen
    2. F12 drücken
    3. Rechtsklick auf das was man ändern will
    4. Klick Element untersuchen
    5. In dem Fenster unten rechts schauen welsche css dafür zuständig ist
    6. Klick auf die Datei
    7. Datei bearbeiten bis es passt, dann Copy und Paste
    8. Fertig zwinker


    Zuletzt modifiziert von Mikro am 29.05.2012 - 09:24:47
    0 Mitglieder finden den Beitrag gut.
  11. #11
    User Pic
    Mikro Mitglied
    Registriert seit
    05.10.2011
    Beiträge
    237
    Beitragswertungen
    21 Beitragspunkte
    Die kenne Ich auch alle und wo wir schon mal dabei sind im Opera gibt es Dragonfly und beim Safari das gleiche Tool wie im Chrome nur das man es erst aktiveren muss, aber am besten gefällt mir persönlich der Chrome.

    Und cool finde ich die 3D Ansicht im Firefox schockiert schockiert schockiert


    EDIT:Ich denke mal passt schon so, aber wenn du einen Strich haben willst,dann kannst du das so machen.


    #dropmenudiv a {
             height: 20px;
             display: block;
             padding: 2px 0 0 10px;
             text-decoration: none;
             color: #AAA;
             font-family: Verdana, Arial, Helvetica, sans-serif;
             font-size: 11px;
             border-bottom:1px solid #666; /* hier der Strich darunter */
    }



    Zuletzt modifiziert von Mikro am 29.05.2012 - 10:45:15
    Wer Rechtschreibfehler findet darf sie behalten!
    0 Mitglieder finden den Beitrag gut.
  12. #12
    User Pic
    Mikro Mitglied
    Registriert seit
    05.10.2011
    Beiträge
    237
    Beitragswertungen
    21 Beitragspunkte
    Und für alle die es Interessiert:

    EIN HAMMER TOOL FÜR GRADIENTEN: ZUM TOOL
    Wer Rechtschreibfehler findet darf sie behalten!
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten