Frage Hover.css paar fragen

[jdownloader2]

Hi,
Ich arbeite gerade mit der Hover.css und möchte da paar sachen anpassen. Habe die Originale Hover.CSS eingebunden in mein HTML. Mein Ziel ist es die Hover.css möglichst wenig zu verändern!

1. Frage
Ist es möglich eine Zeile beim aufruf der Klasse zu ignorieren. z.b möchte ich immer das "display: inline-block;" ignoriert wird ? Oder muss ich diese Zeile jedes mal in der Hover.css löschen ?

2. Frage
Ist es möglich die Farben zu ändern die bei den Hover(n) erscheint ? ( Standardmässig Blau )
Habe es schon mit "color:#FFFFFF;" versucht, passiert nix.

3. Frage

jedes mal muss ich nach <li> die hover Class einfügen. Kann ich die Hover-Class in der id #"content_nav" aufrufen ?
Im CSS Code Unten habe ich ja bereits ein #content_nav li {} Block, ist es möglich da einen CSS einzubinden?
Somit das jedes <list> Item zusätzlich mit der "hrv-over...."-Class angezeigt wird.

Als beispiel möchte ich dieses Menü erstellen :

    <div id="nav">
            <div id="content_nav">
                <ul>
                    <li    class="hvr-overline-from-right">Startseite</li>
                    <li    class="hvr-overline-from-right">Gallery</li>
                    <li    class="hvr-overline-from-right">Links</li>
                    <li    class="hvr-overline-from-right">Kontakt</li>
                </ul>
            </div>
     </div>

CSS:

#nav {
        width: 240px;
        height: 1400px;
        border-top: 1px solid black;
        border-right: 1px solid black;
        border-bottom: 1px solid black;
        -webkit-box-shadow: 10px 0px 5px 0px rgba(50, 50, 50, 0.5);
        -moz-box-shadow:    10px 0px 5px 0px rgba(50, 50, 50, 0.5);
        box-shadow:         10px 0px 5px 0px rgba(50, 50, 50, 0.5);
        margin-right: 20px;
        float:left;
        border-radius: 20px;
        }
   
        #content_nav {
            margin-top: 20px;
            }
       
            #content_nav li {
                width: 200px;
                line-height: 40px;
                margin-top: 10px;
                list-style-type: none;
                text-align: center;
                background-image:url(../img/buttons/nav_button.jpg);
                background-repeat: no-repeat;
                background-position: center;
                text-height: 40px;
                font-size: 26px;
                font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
                font-weight: bold;
                color: #FFFFFF;
                margin-left: auto;
                margin-right: auto;

                }

Ich hoffe dieser Thread ist nicht so kompliziert geschrieben wie mein letzter....

Mfg Jdownloader2

 

[MrMurphy]

Hallo

Ich arbeite gerade mit der Hover.css

Ich kenne keine Hover.css. Setze bitte keine Bezeichnungen als bekannt voraus, die du dir selbst ausgedacht hast oder die nur einzelne Anwender verwenden.

Mein Ziel ist es die Hover.css möglichst wenig zu verändern!

Das dürfte schwierig werden. Dein bisheriges CSS ist zwar "kreativ", aber für die Praxis keine empfehlenswerte Grundlage.

Ist es möglich eine Zeile beim aufruf der Klasse zu ignorieren. z.b möchte ich immer das "display: inline-block;" ignoriert wird ? Oder muss ich diese Zeile jedes mal in der Hover.css löschen ?

Nicht das ich wüßte. Entweder löschen oder per CSS überschreiben.

Ist es möglich die Farben zu ändern die bei den Hover(n) erscheint ? ( Standardmässig Blau )

Ja. Aber da du uns deinen bisherigen hover-Quelltext nicht zeigst...

jedes mal muss ich nach <li> die hover Class einfügen

Nö.

Als beispiel möchte ich dieses Menü erstellen

Ein Menü ohne a-Elemente? Seltsam. Auf die Liste kannst du hingegen verzichten, auch wenn die Altertumsforscher das bestreiten.

height: 1400px;

Warum?

-webkit-box-shadow: 10px 0px 5px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow:    10px 0px 5px 0px rgba(50, 50, 50, 0.5);

Für box-shadow sind keine Prefixe mehr erforderlich.

border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;

Warum drei mal die gleiche Angabe? Besser nur einmal und den linken Rand zurücksetzen.

#content_nav

Das div ist komplett überflüssig.

background-image:url(../img/buttons/nav_button.jpg);

Auf dein background-image haben wir keinen Zugriff und sehen deshalb weiße Schrift auf weißem Hintergrund - also nichts. Bedenke so etwas bitte wenn du uns Quelltext vorsetzt. Deshalb ist es sinnvoller die Seite online zu stellen und uns den Link dazu mitzuteilen.

text-height: 40px;

text-height gibt es meiner Kenntnis nach überhaupt nicht.

u.s.w.

Gruss

MrMurphy

 

[Tronjer]

Auf die Liste kannst du hingegen verzichten, auch wenn die Altertumsforscher das bestreiten.

Quellen?

 

[jdownloader2]

Danke für die Antwort MrMurphy.

jedes mal muss ich nach <li> die hover Class einfügen:
Damit meine ich ca. Folgendes:

.class1, .class2 li {
margin : 20px;
}

also einfach gesagt möchte ich mit der .class1, .class2 nur das <li> -Element bearbeiten. Das beide Klassen auf das <li> Element angewendet werden. ( Die class2 ist eine zweite CSS datei, die im Header auch eingebunden ist )

Dein bisheriges CSS ist zwar "kreativ", aber für die Praxis keine empfehlenswerte Grundlage.

Was ist eine gute Grundlage, bzw wo finde ich eine, bei der z.b auch erkärt wird warum man dies "so Aufbaut".

Warum drei mal die gleiche Angabe? Besser nur einmal und den linken Rand zurücksetzen.

Wie mache ich das, etwas zurücksetzen ?

height: 1400px;

Könnte ich auf Auto stellen nur habe ich so einen besseren Überblick wie meine Seite aussieht.

Ein Menü ohne a-Elemente?

Was meinst du mit einem a-Element ? Habe schon viele beispiele gesehen die z.b auch ein p-Element hatten warum wird dies so gemacht... das "a" hat ja keine aussagekraft und somit weis man schlussendlich nicht mehr was das "a" Element bewirkt.

Hover.css

http://ianlunn.github.io/Hover/

Damit lassen sich vordefinierte Menü-effekte einbinden.

 

[djheke]

Warum lernst du denn nicht erst die Grundlagen in HTML/CSS. Somit ersparst du uns solche simplen Fragen. Wie mache ich das?

 

[jdownloader2]

http://de.html.net/
Ich habe hier den HTML und den CSS teil durch. Nur leider bringt es mir nichts dies durchzulesen nach 2h habe ich vergessen was ich gelesen habe. Sobald ich damit anfange zu Arbeiten bleibt mir dies auch im Gedächnis.

 

[djheke]

Lies mal hier weiter, ist übersichtlicher und meiner Meinung nach besser beschrieben.
http://fwpf-webdesign.de/xhtml/elemente-und-attribute

 

[jakestyler]

Wie mache ich das, etwas zurücksetzen ?

Ich denke, er meint anstatt diesem hier:

border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;

das hier:

border: 1px solid black;
border-left: was auch immer der linke besonderes hat;

Könnte ich auf Auto stellen nur habe ich so einen besseren Überblick wie meine Seite aussieht.

Könntest du auch direkt weglassen - Und inwiefern hast du nur einen guten Überblick, wenn das gesetzt ist? Wenn dem so ist, dann läuft was schief, denn so sollte es nicht sein :/

Was meinst du mit einem a-Element ? Habe schon viele beispiele gesehen die z.b auch ein p-Element hatten warum wird dies so gemacht... das "a" hat ja keine aussagekraft und somit weis man schlussendlich nicht mehr was das "a" Element bewirkt.

Naja, unter einem Menü stellt man sich meist Links vor und die macht man eben mit a-Tags..

http://ianlunn.github.io/Hover/

Damit lassen sich vordefinierte Menü-effekte einbinden.

Jap, aber das kennt man ja eigentlich..

2. Frage
Ist es möglich die Farben zu ändern die bei den Hover(n) erscheint ? ( Standardmässig Blau )
Habe es schon mit "color:#FFFFFF;" versucht, passiert nix.

color ist da falsch - Das ist in CSS aber definitiv etwas verwirrend, um den Hintergrund zu ändern (denke mal das willst du machen), brauchst du Background bzw background-color..

 

[jakestyler]

Was ist eine gute Grundlage, bzw wo finde ich eine, bei der z.b auch erkärt wird warum man dies "so Aufbaut".

Im Endeffekt musst du ein weiteres Stylesheet erstellen, z.B. hover-custom.css und dort die Änderungen reinschreiben. Dann solltest du zum Beispiel margin-left, margin-right, border-left, border-right, border-bottom, padding-left,.. vermeiden und stattdessen nur margin; border:, padding:; schreiben. Verstanden? :)