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}
}
 

basti1012

Erfahrenes Mitglied
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}
 

basti1012

Erfahrenes Mitglied
so sieht es bei mir aus wenn ich deine Daten da oben so übernehme https://codepen.io/basti1012/pen/RJdzKx
Könnte aber vieleicht 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 .
 

jkallup

Erfahrenes Mitglied
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
}
 

basti1012

Erfahrenes Mitglied
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:

jkallup

Erfahrenes Mitglied
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.
 

basti1012

Erfahrenes Mitglied
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:

basti1012

Erfahrenes Mitglied
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
 

jkallup

Erfahrenes Mitglied
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.
 

basti1012

Erfahrenes Mitglied
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
 

jkallup

Erfahrenes Mitglied
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);"
 

basti1012

Erfahrenes Mitglied
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.
 

jkallup

Erfahrenes Mitglied
Danke für Deine Bemühungen!!!
kann man in "<li>" Tags eigentlich das gleiche unterbringen wie
im normalen Html-Text?
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Neue Beiträge