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}
}
 
könntest Du bitte über den source schauen - danke!!!
ich wollte gerne den layer, den ich über die Luppe - links auf dem Suche-Bild
nutzen, um die Mauszeiger zu ändern.
Ggf. auch eine Submit Funktion draus machen.
Geht das?
weil ich hab das im script mit JQuery probiert - aber da ändert sich nix.
 

Anhänge

Ich verstehe ehrlich gesagt gerade gar nix. Ich sehe keine Lupe? Ich sehe auh kein Suchbild ,zumindest weiß ich nicht was du als Suchbild siehst. Ich sehe eine Menge Scripte die bis jetzt keine Funktionen haben und 2 Datein . Einmal deine Index ,die nur zu helfe richtig angezeigt wird weil die Css nicht eingebunden sind . Dann noch mal dein Menü wo die Css nicht richtig ist und in der 3 Sehe ich 5 rechteckige Kästen wo mal Menüs entstehen sollen oder was du da vor hast.
Ich komme so leider gar nicht weiter weil ich nicht weiß was du da genau vor hast.

Deine Frage mit den Mauszeiger ändern verstehe ich so auch nicht . Ändern kann man den aufjedenfall ,dazu gibt es ja CSS cursor:pointer und so .Auch die positionen der Maus lassen sich auslesen,auch mit Jquery.Eine submit Funtion? Du kannst dir ein Submit Button basteln ,bzw wenn du Funktion meinst das auch ohne Button machen.Du mußt aber wissen das ein Submit Button in der Regel die Seite neu läd und die Daten dann nach PHP sendet (MUß ABERNICHT). Versuch mal das genauer zu erklären und welche von deinen ganzen Datein da du überhaupt nutzen willst und wo für.

EDIT dein Suchbild habe ich gefunden,aber der wurde auch nirgenswo eingebunden. Naja ich mal was wie ich ich es mir denke
 
Zuletzt bearbeitet:
Soll das so aussehen mit dein Suchfeld
**Link entfernt, weile Seite nicht mehr erreichbar **
 
Zuletzt bearbeitet:
Lösung
so schaut das momentan bei mir aus:
http://i.imgur.com/aDrRXqA.png

auf dem Suchbild links von der Site - ist eine Lupe (mehr rechts)
dadrauf kannst Du einen Layer erkennen.
Diesen Layer wollte ich nutzen, um eine Submit Anweisung zu setzen.
Der Code ist im Anhang.
 

Anhänge

ah, ich sehs, per css - ich habe da komplizierter gedacht - das dies mit jquery zu Lösen.
aber das geht so einfach per css -meine jüte.
Vielen Vielen Dank!!!
 
in den Fall habe ich erstmal ein input text feld genommen das in den Bild angepasst.Direkt hinter den Input ein leeres div Element genommen und darauf den click event gesetzt. Der Div muß natürlich so groß sein wie die Lupe damit es so aussieht als wenn man die Lupe klickt. Man könnte auch das ganze image anklickbar machen ,aber das wäre dann ja nicht so effekt voll wie jetzt. Achso und der div hat backgroundcolor None,damit die Lupe auch sehen kann.
Man kann das auch ganz anders Lösen https://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/verweissensitive_Grafiken
Aber auf der Idee bin ich erst jetzt gekommen ,ich idiot
 
hallo basti1012,

es gibt Neues: hab zwar immer noch eine beduchte Internetverbindung,
aber ich konnte erstmal den Stand von Heute morgen uppen.
schaut zwar noch alles sehr Prototypenmäßig aus, aber mir geht es ja erstmal
dadrum, was man mit html5 und Co, so schönes machen kann.

woran ich nun arbeite, ist die Anbindung an Datenbanken, damit die Daten
gespeichert werden können.
Aber es werden natürlich auch Komponenten (PushButton ... ) benötigt.
Aber immer Schritt für Schritt.

Die im Zeichenfeld befindlichen 2 Rechteecke, kann man nun auch separat voneinander
in der Canvas-Box verschieben.
Auf der linken Seite kannst Du ja mal auf Events klicken.
Das schaut auch nicht sehr hübsch aus, aber ich hoffe. daß man den Sinn dahinter
verstehen kann.

hier noch der Link: http://kallup.freecluster.eu
 
Ich muß da etwas passen. Wen ich auf events klicke kommt eine auswahl mit click open close und einer select auswahl.Aber da kann ich klicken wie ich will da passiert dann nix. Auch in der Canvas Box tut sich nix. Ich kann zwar die Kästen hin und her schieben aber das meinst du ja bestimmt nicht. Aber was soll den passieren?

Mal was anderes,soll die Seite so Bunt sein ? Weil ich durfte mir schon öfters was anhöhren weil bei mir immer alles bunt und blinki blink ist. Nicht jeder mag es so bunt ( Ich schon ). Vieleicht solltest du dich da mal rumhöhren was deine Besucher lieber haben ?
 
naja, das ist doch erstmal ein Prototyp.
Du kennst doch das bestimmt auch, dass man erstmal die funktionalität programmiert.
Wenn diese da ist, dann gehts ans "hübsch" machen.
Man schreibt ja auch kein Buch mit M$-Word, wenn man dann nach 20 Seiten feststellen muss,
das dieser Texteditor durch seine hin und her schmükkerlei in die knie geht.
Immer erst den Text, dann die Formatierungen.

Aber Du hast recht, ziemlich bunt ist das schon, aber wie gesagt
- Prototyp
- Funktionalität ...

Ich habe ja auch geschrieben, das da nicht viel passiert - oder?
Egal, sollte ja nur Preview sein.
Das mit den Theme's ist ja so eine Sache, man kann es nicht jeden recht machen.
Da will ich mich auch erstmal nicht verzetteln...

Falls Du Interesse an diesen Projekt hast, kannst Du ja mal überlegen, wie man ein sicheres Login
per MySQL Datenbank hinbekommt.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück