• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Schatten von Link bei Mausberührung

Status
Für weitere Antworten geschlossen.
jgk

jgk

Neues Mitglied
Guten Tag,

ich habe ein Problem mit der Schattierung einer Navigation.

Auf Index.html ist folgender Link

<nav id="navigation">
<ul>


<li><a href="index.html">Home</a></li>

</ul>
</nav>

Der über die CSS schattiert wird, sobald die Maus drüber geht.


nav li a:hover, nav li a:focus {
background: #6D273F;

}

Der Schatten ist allerdings nicht zentriert, sondern nach rechts versetzt.

Ich möchte Ihn in die Mitte bekommen, aber komme alleine nicht weiter.

Es würde mich freuen an dieser Stelle Hilfe zu bekommen.

Kann ich hier eine Zeile hinzufügen? Haben die Funktionen hover und focus automatisch einen versetzten Schatten?

MfG

Jan

P.S. Hier die gesamte Seite, ggf. muss anderswo definiert werden. Habe mich durch die Vorlage gearbeitet, bin kein Profi.

https://www.dropbox.com/sh/z891c9cy7ahcxtu/AAB6llNORFfm7KUISAN6Ts8Ua?dl=0
 
Werbung:
jgk schrieb:
Der Schatten ist allerdings nicht zentriert, sondern nach rechts versetzt.
Zum Vergrößern anklicken....
Der "Schatten" ist schlichtweg eine Hintergrundfarbe ;)

Die Ursache findet sich hier:
CSS: 
nav ul li a         {
    float: left;
    padding: 16px 0 16px 16px; /* Innenabstand oben rechts unten links */
    color: #FFFFFF;
    text-decoration: none;
}
Daraus wird:
CSS: 
nav ul li a         {
    float: left;
    padding: 16px 16px 16px 16px; /* Innenabstand oben rechts unten links */
    color: #FFFFFF;
    text-decoration: none;
}
bzw. zusammengefasst, weil gleicher Wert für alle 4 Seiten gilt:
CSS: 
nav ul li a         {
    float: left;
    padding: 16px; /* Innenabstand gilt umlaufend */
    color: #FFFFFF;
    text-decoration: none;
}
style.css schrieb:
nav li a:hover, nav li a:focus {
...
float: center;
}
Zum Vergrößern anklicken....
Übrigens gibt es keinen gültigen Wert namens center für die float-Eigenschaft - zur Auswahl stehen left, right, none, und inherit.

Und bitte zukünftig den Quellcode direkt hier posten, und uns nicht dazu "nötigen", RAR-/ZIP-Archive des kompletten Projekts herunterladen zu müssen.
 
Hallo

Die a-Elemente bekommen von dir folgendes padding:

Code: 
padding: 16px 0 16px 16px;

Durch die 0 (Null) fehlt rechts vom Text der innere Abstand. Ersetze das mal durch

Code: 
padding: 16px 16px 16px 16px;

Zusätzlicher Hinweis: Verwende bei neuen Seiten besser Flexbox statt float. Dadurch sind im Endeffekt viele Probleme leichter zu lösen.

float ist eigentlich nur dafür gedacht, das Text andere Elemente, in der Regel Bilder, umfließen soll. Da es keine besseren Möglichkeiten gab wurde float auch für andere Gestaltungswünsche mißbraucht. Und zwar so häufig, dass vielen Anwendern der Mißbrauch überhaupt nicht mehr bewußt war. Ähnlich wie davor bei den Tabellenlayouts.

Das war bis etwa vor zwei Jahren auch in Ordnung. Jetzt ist jedoch Flexbox entwickelt worden und wird von den Browsern hinreichend unterstützt.

Gruss

MrMurphy
 
Werbung:
Guten Tag,

das mit dem float Center war ein Versuch der nicht geklappt hat und gelöscht werden sollte. Er ist wieder draussen.

Mit
  1. nav ul li a {
  2. float: left;
  3. padding: 16px; /* Innenabstand gilt umlaufend */
  4. color: #FFFFFF;
  5. text-decoration: none;
  6. }
Wird lediglich die Spalte in der sich die Navigation befindet verändert. Nicht aber die Markierung des Textes bei Mausberührung.

Die hat sich nicht geändert.

Ich habe schon alle CSS Definitionen mit px etc. geändert um herauszufinden welcher für die Schattierung verantwortlich ist.

Lediglich bei dem beschriebenen Stück der CSS Datei:

  1. nav li a:hover, nav li a:focus {
  2. background: #6D273F;
  3. }

Ist die Schattierung betroffen, wie mir scheint. Aber hier ist nur die Farbe zu ändern nicht die Position vom Schatten.

Gibt es neue Ideen?

MfG
Jan
 
jgk schrieb:
Mit
  1. nav ul li a {
  2. float: left;
  3. padding: 16px; /* Innenabstand gilt umlaufend */
  4. color: #FFFFFF;
  5. text-decoration: none;
  6. }
Wird lediglich die Spalte in der sich die Navigation befindet verändert. Nicht aber die Markierung des Textes bei Mausberührung.

Die hat sich nicht geändert.

Ich habe schon alle CSS Definitionen mit px etc. geändert um herauszufinden welcher für die Schattierung verantwortlich ist.

Lediglich bei dem beschriebenen Stück der CSS Datei:

  1. nav li a:hover, nav li a:focus {
  2. background: #6D273F;
  3. }

Ist die Schattierung betroffen, wie mir scheint. Aber hier ist nur die Farbe zu ändern nicht die Position vom Schatten.
Zum Vergrößern anklicken....
Ausser der aktuellen linkslastigen Hintergrundfarbe sehe ich bei dem Link (mit oder ohne Mausberührung) sonst nichts, was auch nur ansatzweise an einen Schatten erinnert.

Lediglich <nav> besitzt im CSS eine Schattenformatierung, die hier aber nicht das Thema ist:
CSS: 
nav        {
       ...
        box-shadow: 0 10px 5px 0 rgba(0,0,0,0.75);
      ...
}
Ergo wäre diese erstmal für die Links einzurichten.
 
Werbung:
Es geht um die Hintergrundfarbe bei Berührung. Es ist kein Schatten, da habe ich mich vertan.

Aber die Hintergrundfarbe ist hier definiert und auch dass es überhaupt einen anderen Hintergrund bei Berührung gibt:

  1. nav li a:hover, nav li a:focus {
  2. background: #6D273F;
  3. }
Alle anderen Definitionen habe ich durch. Es ändert sich am Schatten nichts, am Hintergrund.

Der muss also anscheinend nur hiermit definiert sein.

Nur warum ist er nicht mittig sondern nach links versetzt?

Ich versuche mich mal mit den anderen Funktionen wie Schadow.

Und poste dann die Lösung. Wäre halt gut auch herauszufinden ob in dem hier geschriebenen Text nicht nur Farbe anpassbar ist, sondern auch die Position.

MfG

Also wenn
  1. nav li a:hover, nav li a:focus {
  2. background: #6D273F;
  3. }

  1. zu

  1. nav li a {
  2. nav li a:hover, nav li a:focus {
  3. background: #6D273F;
  4. }
Geändert wird, hat man anstatt einer Hintergrundfarbe in Kastenform einen Schatten.

Die Lösung ist akzeptabel.

Danke
 
Zuletzt bearbeitet von einem Moderator:
jgk schrieb:
Aber die Hintergrundfarbe ist hier definiert und auch dass es überhaupt einen anderen Hintergrund bei Berührung gibt:

  1. nav li a:hover, nav li a:focus {
  2. background: #6D273F;
  3. }
Alle anderen Definitionen habe ich durch. Es ändert sich am Schatten nichts, am Hintergrund.

Der muss also anscheinend nur hiermit definiert sein.

Nur warum ist er nicht mittig sondern nach links versetzt?
Zum Vergrößern anklicken....
Das haben wir Dir bereits heute morgen im Duett geantwortet.

Alles, was hier notiert ist:
CSS: 
nav ul li a {
  float: left;
  padding: 16px 0 16px 16px; /* Innenabstand oben rechts unten links */
  color: #FFFFFF;
  text-decoration: none;
}
gilt solange automatisch für die Pseudoklassen a:hover, a:focus, bis die angewandten CSS-Eigenschaften andere Werte erhalten - siehe:
CSS: 
a:hover, a:focus {
  color: #8F8F90;
}
Würden die Links von Beginn an eine Hintergrundfarbe besitzen, hättest Du auch das Zusammenspiel von padding und background erkannt, respektive unsere ersten beiden Antworten direkt verstanden.
 
Werbung:
Das Problem ist, ich kann bei padding am Hintergründ bei Berührung nichts ändern.

Es ändert sich nur der farbige Bereich in dem sich die Navigationsbuttons befinden.

Aber es ist mit der shadow-funktion machbar.

Hat halt keinen Kasten mehr Drumherum sondern "nur" einen Schatten.

EDIT #1
Alternativ zur shadow Funktion müsste ich also die Definition für hover und focus tätigen.

Sie scheint nirgendwo definiert zu sein bisher, denn mit den px werten, egal welchem, ist die Hintergrundmarkierung des Buttons nicht zu verschieben.

EDIT #2
hover und Focus sollen im übrigen für mobile Nutzung nicht optimiert sein.

Von daher und auch sonst. Die shadow-funktion erfüllt hier den Zweck.
 
Zuletzt bearbeitet von einem Moderator:
jgk schrieb:
Das Problem ist, ich kann bei padding am Hintergründ bei Berührung nichts ändern.

Es ändert sich nur der farbige Bereich in dem sich die Navigationsbuttons befinden.
Zum Vergrößern anklicken....
Selbstverständlich kannst Du das:
CSS: 
nav ul li a:hover, nav ul li a:focus {
  background: #6D273F;
  padding: ...; /* was immer Dir vorschwebt */
}
Siehe hierzu auch mein gestriger Hinweis:
Spicelab schrieb:
Alles, was hier notiert ist:
CSS: 
nav ul li a {
  float: left;
  padding: 16px 0 16px 16px; /* Innenabstand oben rechts unten links */
  color: #FFFFFF;
  text-decoration: none;
}
gilt solange automatisch für die Pseudoklassen a:hover, a:focus, bis die angewandten CSS-Eigenschaften andere Werte erhalten - siehe:
CSS: 
a:hover, a:focus {
  color: #8F8F90;
}
Zum Vergrößern anklicken....
jgk schrieb:
EDIT #1
Alternativ zur shadow Funktion müsste ich also die Definition für hover und focus tätigen.

Sie scheint nirgendwo definiert zu sein bisher, denn mit den px werten, egal welchem, ist die Hintergrundmarkierung des Buttons nicht zu verschieben.
Zum Vergrößern anklicken....
Es gibt bislang überhaupt keine Schattenformatierung für die Links - siehe https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Textformatierung/text-shadow !!!

Allmählich drängt sich die Frage auf, ob Du unsere Antworten ignorierst, oder sie mangels CSS-Kenntnissen nicht verstehst, denn seither treten wir hier auf der Stelle, und drehen uns fleißig im Kreis.
 
Werbung:
Ich habe nicht verstanden, dass dieser padding Zusatz als Inhalt der Hover und Focus Funktion zu verwenden ist.

Einerseits wohl auch wegen meinen Kenntnissen, andererseits auch wegen nicht ganz offensichtlicher Erklärung.

Die Schattenformatierung ist installiert und funktioniert.

Das Problem ist also auf anderer WEise gelöst - es ging ja nur darum die Berührung zu erkennen und zwar nicht mit verschobenem Schatten oder Hintergrund.

MFG
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben