css - wer kanns entwusseln ?

J

jkallup

Erfahrenes Mitglied
Hallo, ich würde gerne den grauen Hintergrund des nav menus auf dunkel grau haben.
wo muss ich das ändern?

von hier: https://codepen.io/emredenx/pen/ojcxl

hier meine index.html:
Code: 
<html>
<head><title>TestPage</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link href="/styles/menu.css" rel="stylesheet">
  <script type="text/javascript" src="/scripts/jquery.min.js"></script>
</head>
<body onload="init();" background-color="gray;">
<div id="container">
  <header>
  <nav id='cssmenu'>
    <div class="logo"><a href="index.html">Responsive</a></div>
    <div id="head-mobile"></div>
    <div class="button"></div>
    <ul>
      <li class='active'><a href='#'>HOME</a></li>
      <li><a href='#'>ABOUT</a></li>
      <li><a href='#'>PRODUCTS</a>
        <ul>
          <li><a href='#'>Product 1</a>
            <ul>
              <li><a href='#'>Sub Product</a></li>
              <li><a href='#'>Sub Product</a></li>
            </ul>
          </li>
          <li><a href='#'>Product 2</a>
            <ul>
              <li><a href='#'>Sub Product</a></li>
              <li><a href='#'>Sub Product</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href='#'>BIO</a></li>
      <li><a href='#'>VIDEO</a></li>
      <li><a href='#'>GALLERY</a></li>
      <li><a href='#'>CONTACT</a></li>
    </ul>
  </nav>
</div>
  </header>


main.cc:

Code: 
*{margin:0;padding:0;text-decoration:none}
body{background:#555;}
header{position:relative;width:100%;background:#333;background-color:rgb(85, 85, 85);}
.logo{position:relative;z-index:123;padding:10px;font:18px verdana;color:#6DDB07;float:left;width:15%}
.logo a{color:#6DDB07;}
nav{position:relative;width:980px;margin:0 auto;background-color:rgb(85, 85, 85);}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #head-mobile{border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;background-color:rgb(85, 85, 85);}
#cssmenu:after,
#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
#cssmenu #head-mobile{display:none}
#cssmenu{font-family:sans-serif;background:#0}
#cssmenu > ul > li{float:left}
#cssmenu > ul > li > a{padding:17px;font-size:12px;letter-spacing:1px;text-decoration:none;color:##3ab2d2;;font-weight:700;}
#cssmenu > ul > li:hover > a,#cssmenu ul li.active a{color:yellow;background-color:rgb(85, 85, 85);}
#cssmenu > ul > li:hover,
#cssmenu ul li.active:hover,
#cssmenu ul li.active,
#cssmenu ul li.has-sub.active:hover{background:#22 !important;-webkit-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease;}
#cssmenu > ul > li.has-sub > a{padding-right:30px}
#cssmenu > ul > li.has-sub > a:after{position:absolute;top:22px;right:11px;width:8px;height:2px;display:block;background:#d;content:''}
#cssmenu > ul > li.has-sub > a:before{position:absolute;top:19px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu > ul > li.has-sub:hover > a:before{top:23px;height:0}
#cssmenu ul ul{position:absolute;left:-2999px}
#cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#12;transition:all .25s ease}
#cssmenu ul ul li:hover{background-color:rgb(85, 85, 85);}
#cssmenu li:hover > ul{left:auto}
#cssmenu li:hover > ul > li{height:35px}
#cssmenu ul ul ul{margin-left:100%;top:0}
#cssmenu ul ul li a{border-bottom:1px solid rgba(50,150,150,0.15);padding:11px 15px;width:170px;font-size:12px;text-decoration:none;color:#ddd;font-weight:400;}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#0}
#cssmenu ul ul li.has-sub > a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu ul ul li.has-sub > a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu ul ul > li.has-sub:hover > a:before{top:17px;height:0}
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{background:#36;}
#cssmenu ul ul ul li.active a{border-left:1px solid #333}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #333}

@media screen and (max-width:900px){
.logo{position:absolute;top:0;left: 0;width:100%;height:46px;text-align:center;padding:10px 0 0 0 ;float:none}
.logo2{display:none}
nav{width:100%;background-color:rgb(85, 85, 85);}
#cssmenu{width:100%;background-color:rgb(85, 85, 85);}
#cssmenu ul{width:100%;background-color:rgb(85, 85, 85);}
#cssmenu ul li{width:100%;border-top:1px solid #444}
#cssmenu ul li:hover{background-color:rgb(85, 85, 85);}
#cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}
#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0}
#cssmenu > ul > li{float:none}
#cssmenu ul ul li a{padding-left:25px}
#cssmenu ul ul li{background:#333!important;}
#cssmenu ul ul li:hover{background:#363636!important}
#cssmenu ul ul ul li a{padding-left:35px}
#cssmenu ul ul li a{color:#ddd;background:none}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#fff}
#cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}
#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none}
#cssmenu #head-mobile{display:block;padding:23px;color:#ddd;font-size:12px;font-weight:700}
.button{width:55px;height:46px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;}
.button:after{position:absolute;top:22px;right:20px;display:block;height:4px;width:20px;border-top:2px solid #dddddd;border-bottom:2px solid #dd;content:''}
.button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:16px;right:20px;display:block;height:2px;width:20px;background:#ddd;content:''}
.button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:19px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.button.menu-opened:before{top:23px;background:#fff;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
#cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid #4;height:46px;width:46px;cursor:pointer}
#cssmenu .submenu-button.submenu-opened{background:#262626}
#cssmenu ul ul .submenu-button{height:34px;width:34px}
#cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu ul ul .submenu-button:after{top:15px;right:13px}
#cssmenu .submenu-button.submenu-opened:after{background:#fff}
#cssmenu .submenu-button:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#ddd;content:''}
#cssmenu ul ul .submenu-button:before{top:12px;right:16px}
#cssmenu .submenu-button.submenu-opened:before{display:none}
#cssmenu ul ul ul li.active a{border-left:none}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}
}
 
Jetzt verstehe ich auch warum alles anders aussah bei dir,du hattest in den anderen Css Datein die auf das gleiche Element zugegriffen haben,die ich natürlich nicht hatte. Aber gut wenn du es jetzt hinbekommen hast und nix mehr geändert werden muß dann ist das ja schon mal gut.

Was meinst du den für ein Bild mit roten Hintergrund ? Ein NEW kannst du eigentlich überall hinschreiben nur was du jetzt meiinst kann ich icht ganz entziffern
 
also, wenn man auf den ersten Menüeintrag "Project" hovert/zeigt, dann würde ich gerne
ein kleines Icon auf der linken Seite der SubMenus platzieren.
allerdings erhalte ich im Moment einen roten Hintergrund, an Stelle eines grauen Hintergrund.
Ich weiss auch nicht, wie man mit css und den vorliegenden Daten ein Icon skaliert - also
zum Beispiel "white:32px;" das hat irgendwie keine Auswirkungen.
 
Ja habe ich mir gedacht. Ich mache das jetzt mal alles neu. Weil einige Werte haben da doppelt und dreifach was zugewiesen bekommen ,da jetzt dran rum zu fuschen habe ich keine lust. Ich werde es mal so machen wie ich es denke aber deinen Style so beibehalten. Da sind auch einige sachen bei die man garnicht brauch
 
Ich weiß nicht so genau .Guck mal erst, ob das mit dem Bild überhaupt so richtig ist ,wie du es haben willst
**Link entfernt, weile Seite nicht mehr erreichbar **
 
Zuletzt bearbeitet:
Danke für Arbeit, leider unbrauchbar :( da jetzt die Menu-Einträge fast über den gesamten Bildschirm gehen.
Der Original-Design-Stiel sollte beibehalten werden.
Ich weiss jetzt nicht, was Dich dazu bewegt, das zu änfern?
woillte halt nur Nachfragen, wegen der Boxen, aber das Bild der Site schaut schonmal nicht
schlecht aus.
Einzig, dass da die Items nicht richtigerweise angezeigt werden, und der Hintergrund des ersten Eiintrags
rot ist und nicht wie angenommen "rgb(86.85.85);"
 
Welche Menü Einträge über den ganzen Bildschirm? Bei mir sieht es fast so aus wie vorher nur leichte Farb änderungen,aber größe und co ist alles gleich geblieben und 300 Zeilen wenniger Css und ohne Js.Aber vieleicht spinnt bei mir der Browser auch wieder und zeigt wieder den Mist aus der Cache an. Aber auch egal jetzt ,geht ja auch nur ums Bild. Wenn das Bild ja jetzt richtig ist dann brauchst du ja nur den Teil in dein Navi ändern.
 
Danke für Deine Bemühungen!!!
kann man in "<li>" Tags eigentlich das gleiche unterbringen wie
im normalen Html-Text?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück