Border um Bilder als Link verschwunden
richie2609
- css
0 Cheatah0
Der Martin
Hallo liebes Forum,
rein durch lesen von Seiten wie dieser habe ich versucht meine erste Seite aufd die Beine zu stellen - was mir auch gelungen ist.
Ich benutze unter anderem die Funktion position:fixed.
Die wirft ja beim IE 6.0 Probleme auf und so habe ich rumgebastelt, bis die Seite in diesem wenigstens annehmbar dargestellt wurde.
Und jetzt taucht ein Problem auf: Ich benutze Bilder als Link. Diese hatten einen Rahmen mit Hoover Effekt. Das ganze hat auch funktioniert. Bis zu der Anpassung für IE 6. Seither sind die RAhmen weg.
Anmerkung: Die Bilder befinden sich in einem Bereich mit
<div id=inhalt">
bla bla BILD bla bla
</div>
Hier mal der TEil aus der .css
HTML > BODY #navigation {
POSITION: fixed
}
HTML > BODY #banner {
POSITION: fixed
}
HTML > BODY #inhalt {
MARGIN-TOP: 10%; MARGIN-LEFT: 20%; OVERFLOW: hidden; WIDTH: 75%; COLOR: #ffffff; MARGIN-RIGHT: 0%; POSITION: absolute; BACKGROUND-COLOR: #000000; TEXT-ALIGN: justify; whitespace: pre; Z-INDEX: 3;
}
HTML > BODY #inhalt IMG {BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid;
BORDER-LEFT-COLOR: #666666; BORDER-BOTTOM-COLOR: #666666; BORDER-TOP-COLOR: #666666; BORDER-RIGHT-COLOR: #666666; MARGIN: 50px;
}
HTML > BODY #inhalt IMG:hover {
BORDER-LEFT-COLOR: #ffffff; BORDER-BOTTOM-COLOR: #ffffff; BORDER-TOP-STYLE: solid; BORDER-TOP-COLOR: #ffffff; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-RIGHT-COLOR: #ffffff; BORDER-BOTTOM-STYLE: solid
}
BODY {
PADDING-RIGHT: 0%; PADDING-LEFT: 0%; PADDING-BOTTOM: 0%; MARGIN: 0%; PADDING-TOP: 0%; HEIGHT: 100%; FONT: 100.01% arial; COLOR: #ffffff; BACKGROUND-COLOR: #000000
}
#navigation {
MARGIN-TOP: 0%; WIDTH: 12%; POSITION: fixed; HEIGHT: 100%; whitespace: pre; background:url(background.png);
}
Wer kann mir helfen wo der Fehler liegt?
Viele Grüße
Hi,
Die wirft ja beim IE 6.0 Probleme auf
*vieles* wirft im IE 6 Probleme auf. Beispielsweise der Versuch, :hover auf etwas anderes als Links anzuwenden.
Diese hatten einen Rahmen mit Hoover Effekt.
Hoover? Meinst Du den Präsidenten, den Staudamm, die Staubsauger ...?
HTML > BODY #navigation {
Wenn der Dokumenttype kein <HTML>-Element kennt, sondern beispielsweise nur ein <html>-Element, greift der CSS-Selektor "HTML" übrigens ins Leere.
POSITION: fixed
Selbst dort, wo die Großschrift erlaubt ist, ist sie nicht unbedingt sinnvoll. Hier beispielsweise führt sie zur Unlesbarkeit des Codes. Was mich zum Ende meines Postings führt.
Cheatah
Selbst dort, wo die Großschrift erlaubt ist, ist sie nicht unbedingt sinnvoll. Hier beispielsweise führt sie zur Unlesbarkeit des Codes. Was mich zum Ende meines Postings führt.
Was vielleicht aus besser ist, da du Fragesteller nur niedermachen willst und ihnen nicht helfen. Oder warum sonst hängst du dich am REchtschreibfehler "Hoover" auf. Den restlichen herablassenden Ton den du hier imemr wieder an den Tag legst, den will ich gar nicht thematisieren. Wieso unterlässt du es nicht einfach zu antworten, wenn du den Fragenden nicht helfen willst? Ist es so wichtig für dich den Ego auf diesem Wege aufzubauen?
Hallo,
das mit der Großschreibung war ein Fehler und das werde ich auch noch bereinigen. Mein Fehler scheint aber nicht an der Großschreibung zu liegen.
"Dir ist aber klar, dass der IE6 auch diese Regeln alle ignoriert, weil er den Kindselektor ">" nicht kennt?"
Ja das ist mir klar und genau deshalb habe ich das gemacht. Denn diese ZEilen soll (wegen position:fixed ) genau der IE 6 eben nicht lesen, sondern die anderen Browser. Für den IE 6 kommt das ganze ja nochmals mit Position absolute.
"Das hat aber noch nichts mit verlinkten Bildern zu tun. Du versuchst hier anhand von img:hover zu unterscheiden, das ist sehr ungewöhnlich. Sonst konzentriert man sich eher auf a:hover (dann muss man den IE auch nicht ausschließen)."
GEnau das geht eben nicht! Dann macht er nämlich die RAhmen unter die Bilder und nicht UM die Bilder.
Viele Grüße
Richie
Um es nochmals klar zu stellen.
Es sind keine Bilder verlinkt! Die Bilder SIND der LINK.
Stichwort: Auf das Bild klicken um zu der nächsten Seite zu gelangen.
Um es nochmals klar zu stellen.
Es sind keine Bilder verlinkt! Die Bilder SIND der LINK.
Stichwort: Auf das Bild klicken um zu der nächsten Seite zu gelangen.
OK Problem ist gelöst. Habe bei der Bereinigungsaktion die Border nicht mehr einzeln aufgezählt, sondern wie empfohlen: border: solid #666. Und jetzt sind die wieder da. Ich verstehe zwar nicht warum sie bei der Einzelaufzählung weg sind, denn das dürfte doch in der Funktion nichts ändern, das einzige dürfte doch sein, dass die Einzelaufzähllung den Code unnötig aufbläht oder?
Hallo,
rein durch lesen von Seiten wie dieser
welcher? Du hast keine angegeben.
Ich benutze unter anderem die Funktion position:fixed.
Eigenschaft, nicht Funktion.
Die wirft ja beim IE 6.0 Probleme auf
So kann man es auch sagen. ;-)
Ganz einfach ausgedrückt: Er versteht's nicht und ignoriert die Angabe daher.
Und jetzt taucht ein Problem auf: Ich benutze Bilder als Link. Diese hatten einen Rahmen mit Hoover Effekt. Das ganze hat auch funktioniert. Bis zu der Anpassung für IE 6. Seither sind die RAhmen weg.
Hier mal der TEil aus der .css
HTML > BODY #navigation
HTML > BODY #banner
HTML > BODY #inhalt
HTML > BODY #inhalt IMG
HTML > BODY #inhalt IMG:hover
Dir ist aber klar, dass der IE6 auch diese Regeln alle ignoriert, weil er den Kindselektor ">" nicht kennt?
Alle anderen sehen:
HTML > BODY #inhalt IMG { BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid; BORDER-LEFT-COLOR: #666666; BORDER-BOTTOM-COLOR: #666666; BORDER-TOP-COLOR: #666666; BORDER-RIGHT-COLOR: #666666; MARGIN: 50px;
}
HTML > BODY #inhalt IMG:hover { BORDER-LEFT-COLOR: #ffffff; BORDER-BOTTOM-COLOR: #ffffff; BORDER-TOP-STYLE: solid; BORDER-TOP-COLOR: #ffffff; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-RIGHT-COLOR: #ffffff; BORDER-BOTTOM-STYLE: solid
}
Das hat aber noch nichts mit verlinkten Bildern zu tun. Du versuchst hier anhand von img:hover zu unterscheiden, das ist sehr ungewöhnlich. Sonst konzentriert man sich eher auf a:hover (dann muss man den IE auch nicht ausschließen).
Nebenbei: Warum schreibst du jede einzelne Eigenschaft separat aus, anstatt sie übersichtlich zusammenzufassen, z.B. border: solid #666;
Und warum schreibst du die Elementselektoren und die CSS-Eigenschaften alle groß? Das ist schlecht zu lesen und widerspricht den allgemeinen Gepflogenheiten. Wenn man ein HTML-Dokument mit dem IE wieder als komplette HTML-Seite speichert, sieht der HTML- und CSS-Quellcode auch so verstümmelt aus. Außerdem tut man sich einen großen Gefallen, wenn man den Code etwas übersichtlich formatiert. Eine Eigenschaft pro Zeile hat sich bei CSS-Code bewährt.
So long,
Martin
Nebenbei: Warum schreibst du jede einzelne Eigenschaft separat aus, anstatt sie übersichtlich zusammenzufassen, z.B. border: solid #666;
Meine Fresse, weil er Anfänger ist? Weil es für jene leichter ist. Darum.
Herr Oberlehrer. Du hast erfolgreich kundgetan dass du besser HTML und CSS kannst als der Fragesteller. Ganz toll. Helfen wolltest du nicht.
'ǝɯɐu$ ıɥ
Herr Oberlehrer. Du hast erfolgreich kundgetan dass du besser HTML und CSS kannst als der Fragesteller. Ganz toll. Helfen wolltest du nicht.
Du aber auch nicht, du hackst auf den anderen rum, weil sie deiner Meinung nach auf dem OP rumhacken, wer im Glashaussitzt...
ssnɹƃ
ʍopɐɥs