Antworten auf deine Fragen:
Neues Thema erstellen

WIP - Webshowroom simonpicos

cebito

undefined

AW: WIP - Webshowroom simonpicos

(bei der letzten Farbvariante tritt das Problem nicht auf.. :uhm:)
Das tritt immer nur bei der letzten nicht auf, tausch mal die Reihenfolge der Navis...

Da bräucht ich dann auch mal eure Hilfe.
Die brauchst du hier ganz sicher. Du schreibst bedeutend zu viel CSS-Code. Überleg mal, was alle gemeinsam haben, und notier das immer nur einmal, das macht den Code deutlich leser- und übersichtlicher.
Werd mal versuchen dir das zu vereinfachen, kann aber ein Stückl dauern... ;)
 

simonpicos

Mod | Forum

AW: WIP - Webshowroom simonpicos

Du schreibst bedeutend zu viel CSS-Code. Überleg mal, was alle gemeinsam haben, und notier das immer nur einmal, das macht den Code deutlich leser- und übersichtlicher.
Werd mal versuchen dir das zu vereinfachen, kann aber ein Stückl dauern... ;)

Nene, das ist schon bewusst so. Damit die Leute, die das Ding kaufen, nur noch einen Codeblock kopieren müssen, anstatt sich einzelne Schnipsel zusammensuchen zu müssen ;)
Mach dir die Arbeit nicht, wäre rausgeschmissene Zeit :D

Aber irgendwo da wird das Problem liegen, weil wenn die Navis einzeln sind, funzt alles. Werd mich mal auf die Suche begeben...
 
Zuletzt bearbeitet:

cebito

undefined

AW: WIP - Webshowroom simonpicos

Mach dir die Arbeit nicht, wäre rausgeschmissene Zeit :D
Schon passiert...
Code:
/************** nav allgemein **************/

.nav{
    width: 546px;
    height: 50px;
    margin:350px auto;
}
.nav ul{
    list-style: none;
}
.nav li>ul{
    opacity: 0;
    visibility: hidden;
    position: absolute;
    transition: opacity .6s;
    box-shadow: 0 3px 3px rgba(0,0,0,.6);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
.nav li a{
    display: inline-block;
    text-decoration: none;
    font-family: 'Droid Sans', sans-serif;
    font-size: 14px;
    width: 120px;
    padding: 8px 26px;
    color: #fff;
    transition: all .2s;
}

/***************** Level 1 *****************/

.dropdown-level-1{
    border-radius: 6px;
    width: 546px;
    height: 50px;
    box-shadow: 0 2px 3px rgba(0,0,0,.6);
}
.dropdown-level-1>li{
    position: relative;
    display: inline-block;
    float: left;
    overflow: visible;
}
.dropdown-level-1>li:first-of-type>a{
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.dropdown-level-1>li:last-of-type>a{
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.dropdown-level-1>li>a{
    line-height: 50px;
    padding: 0px 26px;
    height: 50px;
    width:auto;
}

/***************** Level 2 *****************/

.dropdown-level-2>li:last-of-type>a{
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.dropdown-level-2>li:first-of-type>a{
    box-shadow: 0 6px 3px -4px rgba(0,0,0,.4) inset;
}

/***************** Level 3 *****************/

.dropdown-level-3{
    position: absolute;
    left: 172px;
    margin-top: -32px;
    z-index: -2;
    border-top-right-radius: 6px;
}
.dropdown-level-3>li:last-of-type>a{
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
.dropdown-level-3>li:first-of-type>a{
    border-top-right-radius: 6px;
}

/****************** Hover ******************/

.nav li:hover>ul{
    opacity: 1;
    visibility: visible;
}

/***************** Farben ******************/

.blue .dropdown-level-1>li>a,.blue .dropdown-level-2>li>a:hover,.blue .dropdown-level-3>li>a:hover{
    background: #2977d1;
}
.blue .dropdown-level-1>li>a:hover,.blue .dropdown-level-2>li>a,.blue .dropdown-level-3>li>a{
    background: #5393dd;
}
/* ****** */
.red .dropdown-level-1>li>a,.red .dropdown-level-2>li>a:hover,.red .dropdown-level-3>li>a:hover{
    background: #d1294b;
}
.red .dropdown-level-1>li>a:hover,.red .dropdown-level-2>li>a,.red .dropdown-level-3>li>a{
    background: #dd536f;
}
/* ***** */
.orange .dropdown-level-1>li>a,.orange .dropdown-level-2>li>a:hover,.orange .dropdown-level-3>li>a:hover{
    background: #e48416;
}
.orange .dropdown-level-1>li>a:hover,.orange .dropdown-level-2>li>a,.orange .dropdown-level-3>li>a{
    background: #ec9a3c;
}
/* ***** */
.violet .dropdown-level-1>li>a,.violet .dropdown-level-2>li>a:hover,.violet .dropdown-level-3>li>a:hover{
    background: #8f53dd;
}
.violet .dropdown-level-1>li>a:hover,.violet .dropdown-level-2>li>a,.violet .dropdown-level-3>li>a{
    background: #7229d1;
}
... und wie man sieht, muss man hier auch nur einen Codeschnipsel kopieren und Farben ändern ist auch gleich viel einfacher ;)

Dein Flackerprob hab ich jetzt noch nicht gemacht, muss ich mir dann mal in Ruhe anschauen.
 
Zuletzt bearbeitet:

simonpicos

Mod | Forum

AW: WIP - Webshowroom simonpicos

Danke erstmal für deine Mühe... Ist so auf jeden Fall viel schlanker und praktischer für Leute die sich mit CSS auskennen. ;)
 

simonpicos

Mod | Forum

AW: WIP - Webshowroom simonpicos

Doofe Frage, aber sind die Tuts schon fertig, denn der Slider würd mich schon interessieren

Jops! Animationen Grundlagentutorial ist geschrieben und auch hier schon veröffentlicht, einfach mal auf meinem Profil schauen. (Teil 2 wartet noch auf Freischaltung)

Außerdem gibts hier eine neue Version vom Slider inkl. Download, Demo und Tutorial:


Schaut euch ruhig mal um ;)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
118.614
Beiträge
1.538.349
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben