css - wer kanns entwusseln ?

Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

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}
}
 
Das ist doch schon dunkelgrau noch grauer und es wäre Schwarz.

Ansonsten wo hier ( jetzt ) red steht kannst du deine eigene Farbe reinschreiben.

Code:
#cssmenu #head-mobile{display:none}
#cssmenu{font-family:sans-serif;background:red}
 
So sieht es bei mir aus wen ich deine Daten da oben so übernehme
**Link entfernt, weile Seite nicht mehr erreichbar **
Könnte aber vielleicht auch wieder Browser abhängig sein. Das kannst du doch aber auch selber testen. Überall wo Background steht, schreibst du eine andere Farbe rein bis du den richtigen gefunden hast .
 
Zuletzt bearbeitet:
Hallo basti1012,

so weit habe ich alles eingerichtet.
Allerdings sind jetzt die boxen mit einen weisen Rand umgeben - kann man den an den Hintergrund anpassen?
Ich habe mal alles was nicht relevant ist soweit es geht rausgenommen und umgeschrieben.
Aber da steckt irgendwo noch der Wurm drinn.
Hier der CSS Quellcode:
Code:
* {
  margin:0;
  padding:0;
  text-decoration:none;
  background-color:red;
}
body{
  background-color:red;
}
header {
  position:relative;
  width:100%;
  background-color:rgb(86,85,85);
}
.logo {
  position:relative;
  background-color:rgb(86,85,85);
  z-index:123;
  padding:10px;
  font:18px verdana;
  float:left;
  width:15%
}
.logo a {
  color:red;
}
nav {
  position:relative;
  width:1000px;
  margin:0 auto;
  background-color:rgb(86,85,85);
}

#cssmenu {
  background-color:rgb(85, 85, 85);
}

#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  border:0;
  list-style:none;
  line-height:0;
  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;
  background-color:rgb(85, 85, 85);
}

#cssmenu {
  font-family:sans-serif;
  background-color:red;
}
#cssmenu > ul > li {
  float:left;
  background-color:red;
}
#cssmenu > ul > li > a {
  padding:17px;
  font-size:12px;
  letter-spacing:1px;
  text-decoration:none;
  color:lime;
  font-weight:700;
  background: yellow;
  background-color:rgb(85,85,85);
}

#cssmenu > ul > li:hover > a,
#cssmenu ul li.active a {
  border:0px;
  border-color:red;
  color:white;
  background:blue;
  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 {
  border:0px;
  background-color:black;
  -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-color:red;
  content:''
}
#cssmenu > ul > li.has-sub > a:before {
  position:absolute;
  top:19px;
  right:14px;
  display:block;
  width:2px;
  height:8px;
  background-color:red;
  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:-9999px
}
#cssmenu ul ul li {
  height:0;
  -webkit-transition:all .25s ease;
  -ms-transition:all .25s ease;
  background-color:red;
  transition:all .25s ease
}
#cssmenu ul ul li:hover {
  background-color:red;
}
#cssmenu li:hover > ul {
  left:auto;
  background-color:red;
}
#cssmenu li:hover > ul > li {
  height:30px;
  background-color:red; //rgb(85, 85, 85);
}
#cssmenu ul ul ul {
  margin-left:100%;
  top:0
  background-color:red;
}
#cssmenu ul ul li a {
  border-bottom:0px;
  padding:11px 15px;
  width:170px;
  font-size:12px;
  text-decoration:none;
  color:black;
  background:yellow;
  background-color:yellow;
  font-weight:400;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
  border-bottom:0;
  background:yellow;
  background-color:yellow;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
  color:black;
  background-color: lime;
}

#cssmenu ul ul li.has-sub > a:after {
  position:absolute;
  top:16px;
  right:11px;
  width:8px;
  height:2px;
  display:block;
  background-color:red;
  content:''
}

#cssmenu ul ul li.has-sub > a:before {
  position:absolute;
  top:13px;
  right:14px;
  display:block;
  width:2px;
  height:8px;
  background-color:red;
  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:16px;
  height:0;
}
#cssmenu ul ul li.has-sub:hover,
#cssmenu ul li.has-sub ul li.has-sub ul li:hover {
  background-color:red;
}
#cssmenu ul ul ul li.active a {
  border-left:0px solid #0
}
#cssmenu > ul > li.has-sub > ul > li.active > a,
#cssmenu > ul ul > li.has-sub > ul > li.active > a {
  border-top:0px solid #0
}
 
Finde das alles irgendwie komisch.Ich habe keinen weißen Rand .Beim hovern sind die Hintergrunde jetzt Gelb und die Schrift wird Grün. Also ganz anders wie bei dir auf den Foto oder der erklärungen.Welchen Browser benutzt du ? IE ? Weil das verstehe ich sonst irgendwie nicht warum die Unterschiede so groß sind.

Warum du einen Border hast kann ich im Code gerade nicht sehen,aber ich könnte mir Vorstelen das es an diesen sachen liegt
Code:
border:0px;  // KANN WEG
  border-top:0px solid #0   //WEG
border-left:0px solid #0   //WEG
border-bottom:0;   //WEG

  top:0 // Hier fehlt ;

  background:yellow;            //Du has öffters doppel nennungen drinne wie hier
  background-color:yellow;  //       ''''''''

Kann sein das der Browser die Border werte Falsch ansieht und deswegen da ein Border hin produziert. Sonst habe ich keine erklärung weil das bei dir anders aussieht als wie bei mir. Wäre schön wenn mal einer was sagen könnte wie es bei ihn ist .
 
Zuletzt bearbeitet:
sodele, jetzt schaut das so aus: http://i.imgur.com/RZqDWU9.png

ich habe, wie Du geschrieben hast alles rausgenommen.
Brachte aber keinen Erfolg.

Habe dann in jeder Sektion "border-color:transparent;" sowie "border-color:#000000;"
probiert - ergab auch keinen Erfolg :( .

Irgendwas ist da faul.
 
kannst du mal deinen jetztigen Code posten? Mit html.
Kann das sein das du auf der Seite noch andere Css stehen hast?Oder eingebunden?
 
Zuletzt bearbeitet:
so schaut das schonmal für den Anfang recht gut aus:
http://i.imgur.com/EggmFQS.png

der Source dafür -> siehe Anhang

Achja, da am Anfang - bei Project - das Bild mit rotem Hintergrund
das sollte eigentlich vor "NEW" stehen - geht das irgendwie?
 

Anhänge

  • src.tar.gz
    42,3 KB · Aufrufe: 1
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…
Zurück