Schriftfarbe ändern
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
alpha
ausprobieren
beispiel
bild
code
display
filter
http
image
internet
list
liste
opus
position
problem
rahmen
schrift
teddy
text
url
-
Hallo.. Ich hab eine Liste erstellt für ein Menü, darin will ich die Schriftfarbe ändern, da ich einen Transparenten Hover gemacht habe.. Nur irgendwie bin ich zu doof...
Hier ist meine komplette stylesheet datei...
body { margin: 0; padding: 0; background: url(images/image01.jpg) no-repeat left top; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } #menu { list-style: none; padding: 0; margin: 0; width: 774px; height: 210px; position: relative; } #menu a { display: block; text-indent: -900%; position: absolute; outline: none; } #menu a:hover { background-image: url(images/overlay.jpg) no-repeat left top; background-color: #fff; color: #000; filter:alpha(opacity=30); /* IE */ opacity:0.3; /* allgemein */ -moz-opacity:0.3; /* Mozilla */ -khtml-opacity:0.3; /* KTHML */ -opera-opacity:0.3; /* Opera */ font-family: Verdana, sans-serif; padding: 5px; width: 20%; text-align: center; margin: 20px 10px; font-size: 0.8em; } #menu .home{ color: #00FFFF; font-family: Verdana, sans-serif; padding: 5px; width: 20%; text-align: center; margin: 20px 10px; font-size: 0.8em; }
Und das hier meine Index, wo ich die schriftfarbe ändern will....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Mach ich später</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <ul id="menu"> <li><a href="#" class="home">Home</a></li> <li><a href="#" class="about">About</a></li> </ul>
Mein Problem ist, dass die Schrift irgendwie gar nicht existiert.. Denn ich hab nen Hintergrund mit einem Muster, wo man sogar eine Schwarze Schrift sehen müsste.. Aber ich seh: GAR NIX!
So sieht das ganze aus:
Ohne Hover
Mit Hover -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Sind bei deinem Originalcode die Endtags dabei?
</body> und </html> fehlen nämlich hier. -
schnookerippsche schrieb:
Sind bei deinem Originalcode die Endtags dabei?
</body> und </html> fehlen nämlich hier.
Nein, das hab ich nachgeholt, aber es kam keine Veränderung.. Immernoch so wie im Bild 1 (Ohne Hover)
//Edit:
Hab grad auch nochmal getestet, ob es an meinem Farbcode liegen könnte und es mit weiß probiert, #FFFFFF aber das funktioniert genau so wenig, also liegt's wohl nicht am Farbcode...
//EDIT:
Am Hover-Bild liegt's auch nicht, es verdeckt keinen Text, weil wenn ich das rausnehmen immernoch keine Veränderung..
Beitrag zuletzt geändert: 22.6.2011 18:53:21 von kill-a-teddy -
Was hovert denn da eigentlich für ein Bild? Nur diese weiße Fläche?
Edit: Schon mit anderen Browsern probiert als den Internet Explorer?
Beitrag zuletzt geändert: 22.6.2011 19:10:49 von schnookerippsche -
schnookerippsche schrieb:
Was hovert denn da eigentlich für ein Bild? Nur diese weiße Fläche?
an der weißen Fläche sollte ja ein Link sein, wo natürlich auch was drinne steht.. z.B. Startseite oder sooo...
Nur das eben Startseite net zu sehen ist...
Nun hab ich das ganze einfach mit Bildern gemacht (sieht sogar schicker aus) aber... Jetzt ist mein Hover schrott und die Bilder sind nicht anklickbar, also geben keinen Link ab .___.
<ul id="menu"> <li><img src="images/home.png"><a href="#" class="home"></a></img></li> <li><img src="images/bilder.png"><a href="#" class="pictures"></a></img></li> <li><img src="images/blog.png"><a href="#" class="blog"></a></img></li> <li><img src="images/links.png"><a href="#" class="links"></a></img></li> <li><img src="images/kontakt.png"><a href="#" class="links"></a></img></li> </ul>
//EDIT:
Chrome macht det selbe...
//EDIT 2:
Okay das Link problem mit den Bildern ist gelöst, nur schnell die Schönheitsfehler anpassen...
Beitrag zuletzt geändert: 22.6.2011 19:18:50 von kill-a-teddy -
Diesmal haben die Links aber auch keine Bezeichnung: d.h. es ist nichts zwischen den <a></a> Tags
Edit: Wenn du es jetzt anders hinbekommen hast kannst du uns ja die Seite zeigen ich konnte mir nämlich nicht vorstellen wie das auszusehen hatte.
Beitrag zuletzt geändert: 22.6.2011 19:20:56 von schnookerippsche -
schnookerippsche schrieb:
Diesmal haben die Links aber auch keine Bezeichnung: d.h. es ist nichts zwischen den <a></a> Tags
Edit: Wenn du es jetzt anders hinbekommen hast kannst du uns ja die Seite zeigen ich konnte mir nämlich nicht vorstellen wie das auszusehen hatte.
Joa das mit den Links hab ich dann selbst gemerkt... Und jetzt macht er mir nen Rahmen um den Link obwohl ich das nirgends definiert habe, ich kotz ab !!! >.<
Warte bilder folgen...
Ohne Hover
Mit Hover ... Muss noch angepasst werden
//EDIT:
Ich kapiere einfach net, wieso er mir da nen blauen Rahmen drumm macht jetzt -.-
Beitrag zuletzt geändert: 22.6.2011 19:31:40 von kill-a-teddy -
probiers mal mit div anstatt ner Liste.
-
schnookerippsche schrieb:
probiers mal mit div anstatt ner Liste.
Was denne Probieren?
Achsoo sorry... Ich hab's ja so weit schon recht schön mich nervt nur dieser Blaue Rand da.. <.<
Ick glaub, ich krieg Schuppen aufm Kop :( Ohne witz jetzt :(
Beitrag zuletzt geändert: 22.6.2011 19:51:40 von kill-a-teddy -
Bilder sind wohl nicht des Problemes Lösung.
html
<div id="beispiel"> <a href="#" class="blabla">Home</a><br /> <a href="#" class="blabla">Bilder</a><br /> </div>
css
#beispiel {width: 100px; ... etc.} a.blabla {padding: ...} a.blabla:hover {background-image: url(beispiel.png);
So würde ich das insgesamt lösen.
Beitrag zuletzt geändert: 22.6.2011 19:58:23 von schnookerippsche -
schnookerippsche schrieb:
Bilder sind wohl nicht des Problemes Lösung.
html
<div id="beispiel"> <a href="#" class="blabla">Home</a><br /> <a href="#" class="blabla">Bilder</a><br /> </div>
css
#beispiel {width: 100px; ... etc.} a.blabla {padding: ...} a.blabla:hover {background-image: url(beispiel.png);
So würde ich das insgesamt lösen.
Toll was soll ick damit anfangen? Sorry aber genau das hatte ich vorher schon und es hat nichts gebracht, siehe 1. Beitrag...
<ul id="menu"> <li><a href="#" class="home">Home</a></li> <li><a href="#" class="about">About</a></li> </ul>
Das war meine Liste...
Und das hier mein Css:
#menu { list-style: none; padding: 0; margin: 0; width: 774px; height: 210px; position: relative; } #menu a { display: block; text-indent: -900%; position: absolute; outline: none; } #menu a:hover { background-image: url(images/overlay.jpg) no-repeat left top; background-color: #fff; color: #000; filter:alpha(opacity=30); /* IE */ opacity:0.3; /* allgemein */ -moz-opacity:0.3; /* Mozilla */ -khtml-opacity:0.3; /* KTHML */ -opera-opacity:0.3; /* Opera */ font-family: Verdana, sans-serif; padding: 5px; width: 20%; text-align: center; margin: 20px 10px; font-size: 0.8em; } #menu .home{ color: #00FFFF; font-family: Verdana, sans-serif; padding: 5px; width: 20%; text-align: center; margin: 20px 10px; font-size: 0.8em; }
Wobei mir der Text dann dennoch nicht angezeigt wurde... Und da es jetzt mit Bildern schöner aussieht und ich für's andere keine Lösung finde, lass ich das so, nur nun hab ich das Prob, das ich auf einmal Rahmen um meine Bilder habe, obwohl ich die net angegeben habe :(
Was übrigends definitiv am Link liegt, weil:
Wenn ich das Bild "home.png" ohne nen Link einfüge habe ich keinen hässligen Rahmen.. Sobald ich nen Link drum mache hab ich einen hässligen Rahmen...
Beitrag zuletzt geändert: 22.6.2011 20:04:38 von kill-a-teddy -
Ja ich habe gemeint dass du es ohne Liste machst.
Ich versuche deine Seite mal mit keiner Liste zu emulieren.
-
schnookerippsche schrieb:
Ja ich habe gemeint dass du es ohne Liste machst.
Ich versuche deine Seite mal mit keiner Liste zu emulieren.
Und wie mach ich dann den Hover, wenn ich keine Liste habe? :o
Bemerkung: Bei google Chrome funktioniert alles wunderbar -.- nur ie zickt! -
Ich benutze den Internet Explorer nie.
Probiers mal hiermit:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Mach ich später</title> <link href="style1.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="menu"> <a href="#" class="home">Home</a><br><br> <a href="#" class="home">About</a> </div> </body> </html>
#menu {position: ...; } a.home {padding: 10px;} a.home:hover {padding-left: 20px; background-image: url(beispiel.jpg);}
Beitrag zuletzt geändert: 22.6.2011 20:36:30 von schnookerippsche -
schnookerippsche schrieb:
Ich benutze den Internet Explorer nie.
Probiers mal hiermit:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Mach ich später</title> <link href="style1.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="menu"> <a href="#" class="home">Home</a><br><br> <a href="#" class="home">About</a> </div> </body> </html>
#menu {position: ...; } a.home {padding: 10px;} a.home:hover {padding-left: 20px; background-image: url(beispiel.jpg);}
Hmm also der Text wird wenigstens angezeigt... Aber den Rahmen hab ich trz. dem .___. -
Wenns in den anderen Browsern geht dann schiebe ich das mal ganz dreist auf den Internet Explorer. Welche Version verwendest du denn zum ausprobieren?
-
schnookerippsche schrieb:
Wenns in den anderen Browsern geht dann schiebe ich das mal ganz dreist auf den Internet Explorer. Welche Version verwendest du denn zum ausprobieren?
Funktioniert bei allen anderen... Hab IE09 -
2 Ideen zur einfachen Lösung, aber könnte funktionieren:
Wenn du die links mit <a> erstellst schreib ins css:
a {color:#000000;}
a:link {color:#000000}
usw...
Ohne <a>:
<body text="#000000">
mfg
the Yo -
Beim IE muss man die Border von Bildern die verlinkt sind explizit abstellen per css:
a img{ border: none; } -
kill-a-teddy schrieb:
ja ja! du kannst mit selectoren nicht umgehen. im html heißt es:
... Mein Problem ist, dass die Schrift irgendwie gar nicht existiert...
also dann im css:<ul id="menu"> <li><a href="#" class="home">Home</a></li> <li><a href="#" class="about">About</a></li> </ul>
und so weiter. und dann siehst du das menu.ul#menu li a.home { ... } ul#menu li a:hover.home { ... } ul#menu li a:hoover.about{ ... } und so weiter ...
lg
Beitrag zuletzt geändert: 26.6.2011 2:51:06 von hemiolos -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
