css überschreibt immer mein Bild (link)
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bild
button
code
container
farbe
festlegen
glauben
gleiche bilder
gleichen farben
grauen rand
hauptthema
hintergrundbild
hoch macht
http
kontrollieren
navigation
struktur
url
vordergrund
zauberhand
-
ich hab mal wieder ein problem. :(
und zwar habe ich ein bild folgendermaßen als link eingefügt
<a class="hauptthemen" href="?inc=themen"><img src="Buttons/themenn.gif" width="170" height="25" /></a>
und das ist die CSS:
a {font-size: 13px;} a {color: #000;} a:visited {color:#000;} a:hover {color: #fff;} a:active {color:#16558D;} a.hauptthemen {background: url('navigation_php/Buttons/themenn.gif') center no-repeat;} a.hauptthemen:hover {background: url('navigation_php/Buttons/themenh.gif') center no-repeat;} a.hauptthemen img {visibility: hidden;}
das bild wird jetzt nur ganz klein angezeigt und wenn ich über das bild drüber gehe, wird es statt schwarz, weiß. das bild ist eigentlich blau. irgendwas macht da css falsch oder bin ich zu blöd? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo Highborn
Versuche mal im CSS folgendes zu schreiben:
a.hauptthemen {background: url("navigation_php/Buttons/themenn.gif") center no-repeat;} a.hauptthemen:hover {background: url("navigation_php/Buttons/themenh.gif") center no-repeat;}
Ansonsten mal die a:hover kontrollieren ob die stimmt ich bin mir nicht sicher aber ich glaube da muss folgendes hin:
a:hover {color: #000000;}
Sind das alles gleiche Bilder welche jeweils eine andere Farbe haben? Wenn ja dann könntest du zur unterstützung mal die Bilder linken damit man sich mal einen Eindruck verschaffen kann. Würde vielleicht auch anderen bei der Problemsuche unterstützen.
Gruß S.Brosch
-
also die bilder sind ja 250px breit und 15px hoch und blau. diese werden aber nur so 10px hoch und 5 px breit angezeigt. dazu ist das bild noch schwarz und wenn ich mit der maus trüber gehe weiß.
es hat auf jedenfall was mit <a></a> zu tun, weil das bild wird ohne link richtig angezeigt.
also das bild hat irgendwie die gleichen eigenschaften wie der LINKTEXT. genau die gleichen farben beim hover usw.
Beitrag zuletzt geändert: 25.10.2010 16:58:23 von highborn -
ok
probier das mit dem Hover aus und auch bei a.hauptthemen:hover mal eine Farbe festlegen. Die Gänsefüsschen einsetzen und kucken ob es geht.
Die Größe könnstest du für die Links auch noch festlegen (width und height oder line-height). Es kann sein das er das Bild so hoch macht wie die Zeile und dadurch auch die Breite dementsprechend anpasst.
Gruß S.Brosch -
Wenn das Bild sichtbar sein/bleiben soll, warum versteckst Du es dann?
a.hauptthemen img {visibility: hidden;}
Oder hab ich deine Idee falsch verstanden?
FF -
ne also das hab ich alles falsch erklärt.
http://veritas-fluctuare.de/
hier unten links bei Navigation. Da ist der "Button" Themen.
Dieser wird zu klein Dargestellt, warum auch immer. Ich verstehe es nicht. -
nein das ist doch so gewollt, weil das ein hover werden soll.
das bild ist zu klein!! es wird einfach zu klein dargestellt, warum auch immer
http://veritas-fluctuare.de/
so ich habe jetzt mal das visibility raus um es zu testen.
jetzt ist das Bild groß
Also wird irgendwie das Hintergrundbild für "a.hauptthemen" zu klein angezeigt!
Aber wenn man jetzt auf meine Seite geht, sieht man, einen grauen rand um das Bild der dann weiß wird. genau in diesen Farben sind meine Textlinks auch. Irgendwas läuft da falsch
Beitrag zuletzt geändert: 25.10.2010 18:02:31 von highborn -
Sodele, dann mal gaaanz langsam.
Du weist dem a-Tag für den normalen und den Hover-Status unterschiedliche Hintergrundfarben zu.
Gleichzeitig nutzt Du für den Link ein Bild (themen.gif, das ist aber KEIN Hintergrundbild sondern liegt im Vordergrund.)
Wenn Du dem Bild eine Breite von 180 statt der bisherigen 175px und eine Höhe von 25px zuweist, ist der Rand weg.
Sofern Du einen Hovereffekt für den Link haben möchtest, mußt Du die Linkgestaltung komplett ändern.
Sinnvoll wäre, den Link als Textlink anlegen und für normal und hover jeweils ein eigenes Hintergrundbild definieren.
Bevor du dich darum kümmerst, solltest Du aber erst einmal die grundlegenden HTML-Probbleme lösen!
Du includest anscheinend die Navigation und hast in der Includedatei eine vollständige zweite HTML-Struktur mit erneuter Doctype-Definition. Das kann zu unvorhersehbaren Ergebnissen führen und entspricht nicht den HTML-Standards.
Außerdem würde ich empfehlen, statt mit verschachtelten Tabellen mit Div-Containern und Listen zu arbeiten.
FF
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
