| Autor |
Nachricht |
Tapemaster
Threadersteller
Dabei seit: 11.06.2011
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Sa 07.01.2012 23:13
Titel Farbprobleme mit der Schrift (einfachstes HTML/CSS) |
  |
|
Hallo,
habe ein Problem bei meiner Webseite. Es handelt sich um eine ganz einfache Seite, im Prinzip ein schwarzer Hintergrund mit einem weißen Menü mit 4 Listenpunkten drauf. Habe nun versucht in CSS mit dem Menü rumzuspielen.
Wenn man über einen der vier Menüpunkte mit der Maus fährt, soll sich der Schrifthintergrund orange färben, und die Schrift schwarz. Dies habe ich mit:
| Code: | a:hover,
a:focus {
color: #000;
background-color: #F60;
} |
gemacht.
->
Dazu soll die aktuell angewählte Seite nicht mehr schwarz sein, sondern fett, größer und orange.
| Code: | | <li class="strong"><a href="welcome.html"><strong>welcome</strong></a></li> |
in HTML, und
| Code: | strong {
font-size: 22px;
color: #F60;
} |
->
Es funktioniert alles, aber leider gibts auch ein großes Problem. Wenn ich mit der Maus über den aktuell angewählten Menüpunkt gehe, ist sowohl Schrift als auch Hintergrund orange. Auf der einen Seite erscheint mir das logisch, weil ich ja oben befohlen habe, dass die Schrift orange werden soll. Aber mir fällt leider auch keine Lösung ein, dass die Schrift wieder schwarz gemacht wird!
->
Kann mir da jemand einen Tip geben?
Gruß!
Zuletzt bearbeitet von Tapemaster am Sa 07.01.2012 23:20, insgesamt 4-mal bearbeitet
|
|
| |
  |
 |
plusplus
Dabei seit: 03.01.2007
Ort: -
Alter: -
Geschlecht:
|
Verfasst Sa 07.01.2012 23:50
Titel
|
|
|
Nicht ganz einfach zu verstehen.
Ich habe das mal in der schnelle gemacht ohne zu prüfen und auch die Formatierung nicht optimiert.
Vielleicht hilft dir das weiter...
| Code: |
#deindiv ul {}
#deindiv li {}
#deindiv li a {}
#deindiv li a:visited {color: #000;}
#deindiv li a:hover {font-weight: bold; font-size: 22px; background-color: #F60; color: #000;}
#deindiv li a:active {color: #000;}
|
gruß
Zuletzt bearbeitet von plusplus am Sa 07.01.2012 23:58, insgesamt 2-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
ju._li
Dabei seit: 23.01.2007
Ort: Mönchengladbach
Alter: 42
Geschlecht: 
|
Verfasst So 08.01.2012 00:02
Titel
|
|
|
Der "Firebug" für den Firefox ist bei sowas ein ganz tolles Tool.
Einfach installieren und Du kannst jedes DIV im Browser überprüfen. Da solltest Du schnell sehen, an was es liegt.
VG
|
|
| |
 |
|
plusplus
Dabei seit: 03.01.2007
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 08.01.2012 00:09
Titel
|
|
|
Meine Antwort ist auch nicht wirklich korrekt wie ich gerade gemerkt habe. Aber ohne das Template und das css zu sehen ist das ein bisschen 
|
|
| |
|
|
Tapemaster
Threadersteller
Dabei seit: 11.06.2011
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 08.01.2012 00:21
Titel
|
|
|
Hmmm... es wird eh an meinen bescheidenen HTML/CSS Kenntnissen liegen. Bzgl. Firebug weiß ich ehrlich gesagt nicht, was ich damit überprüfen soll, weil das ja eigentlich kein Fehler ist, oder?
Also um das nochmal aus meiner Sicht zu beschreiben:
Die beiden Befehle scheinen sich irgendwie zu stören. Auf der einen Seite soll die aktuell angewählte Seite in der Navigation farbig und fett sein, auf der anderen Seite soll per Mouseover die farbige Schrift wieder schwarz gemacht werden, und farbig hinterlegt. Und das funktioniert nicht, die farbige Schrift bleibt erhalten, sodass man einfach garnichts mehr erkennt, wie auf meinem Screen.
Ich habe irgendwie das Gefühl, dass man dem Mouseovereffekt mehr Priorität geben müsste, sodass die Schriftfarbe auf jeden Fall dadurch definiert wird!
Man ist das kompliziert zu beschreiben... sorry, aber ich dreh mich hier echt nur noch im Kreis deswegen 
|
|
| |
|
|
monika_g
Dabei seit: 23.01.2006
Ort: Hamburg
Alter: -
Geschlecht:
|
Verfasst So 08.01.2012 00:40
Titel Re: Farbprobleme mit der Schrift (einfachstes HTML/CSS) |
|
|
| Tapemaster hat geschrieben: | | Code: | | <li class="strong"><a href="welcome.html"><strong>welcome</strong></a></li> |
|
mach da mal das innere strong raus. Und stell das mal als Seite auf Deinem Server zur Verfügung.
Und um en ausgewählten Menüpunkt zu stylen, musst Du entweder dessen Link entfernen - der ausgewählte Menüpunkt muss ja nicht mehr verlinkt sein oder:
li.strong a:link {}
etc. die ganze Chose nochmal machen.
Allerdings würde ich keinen Klassennamen .strong verwenden, weil das eine Elementbezeichnung ist.
Zuletzt bearbeitet von monika_g am So 08.01.2012 00:44, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Tapemaster
Threadersteller
Dabei seit: 11.06.2011
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 08.01.2012 01:22
Titel
|
|
|
Danke, dass mit dem Link rausnehmen ist wohl die einfachste Variante. Es stört meiner Meinung zwar irgendwie die Gesamtrundheit, aber das ist jetzt egal, werde es wohl so lassen! Wenn ich das innere strong herausnehme ändert sich leider nichts...
Wenn du Lust hast, kannst du mir das mit "li.strong a:link {} " nochmal genauer erklären, da kann ich dir gerade irgendwie nicht so richtig folgen!
Habe momentan noch keinen Server zur Verfügung.
|
|
| |
|
|
monika_g
Dabei seit: 23.01.2006
Ort: Hamburg
Alter: -
Geschlecht:
|
Verfasst So 08.01.2012 01:55
Titel
|
|
|
| Tapemaster hat geschrieben: |
Wenn du Lust hast, kannst du mir das mit "li.strong a:link {} " nochmal genauer erklären, da kann ich dir gerade irgendwie nicht so richtig folgen! |
damit formatierst Du nur <a>, die innerhalb von li.strong stehen
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Einfachstes Multiplizieren in PHP
Einfachstes Content-Management gesucht...
Farbprobleme im Browser... :(
Farbprobleme mit PS + GoLive
Photoshop - cmyk als rgb nach rgb - Farbprobleme
[Photoshop CS3] Farbprobleme (AdobeRGB-> sRGB)
|
|
Willkommen auf dem Portal für Mediengestalter
