|
|||
mysteriöser Hovereffekt bei Bildern
Hey, Leute
Irgendwie scheine ich ja ein Meister im Anziehen von Problemen und Fehlern zu sein Folgende zwei Probleme: 1) Irgendwie Stimmt mein IE-Testbrowser nicht mit dem echten Browser über ein... 2) Irgendwie hat mein IE ein Problem damit 6 Bilder anzuzeigen statt fünf... zu 2 a) Klickt doch mal zuerst diese Seite: http://scratdesign.homepage.t-online.de/html/executiveseiten/inde2x.html?foo=0.871696805303842 Hier sind unten fünf Bilder mit weißem Rahmen, wenn ich mit der Maus darüber fahre wird der Rahmen orange und ein Span-Tag öffnet sich mit dem kleinen Bild. Genau SO will ich es haben! Nur mit eben sechs Bildern! zu 1 a) In meinem Testserver wird beim Hover rechts oben noch ein goldener rechteckiger Kasten angezeigt, ein Überbleibsel meines a:hover der Links aus der Navigation, im IE sieht man aber nix davon...ist das nun gut oder schlecht? Wenn schlecht: Wie krieg ich dieses Rechteck weg? Denn wenn ich das a:hover lösche, ist meine ganze Formatierung für meine Navigation kaputt... zu 2 b) Nun klickt mal auf: http://scratdesign.homepage.t-online.de/html/executiveseiten/index.html?foo=0.1976867296209463 Hier sind es sechs Bilder zu sehen. Fahrt ihr mit der Maus über die ersten beiden färbt sich der Rahmen von weiß nach oragne, allerdings bleibt das Span, was eigentlich eingeblendet werden soll aus. Ab dem zweiten Bild verschwinden die restlichen vier Bilder spurlos, oder flimmern hin und her. Was zur Hölle?! zu 1 b) In meinem IE-Testbrowser dagegen bleibt alles (fast!) in Ordnung, nur das letzte Bild wird beim Hovereffekt etwas nach unten verschoben und das goldene Rechteck bleibt noch oben. Hier der Css- Code von 2a) und 2b) also mit 5 und 6 Bildern: Code:
-->CSS <Navigation> #navicontainer { text-align:center; line-height: 50px; font-family: "RotisSansSerif Light"; margin-top: 90px; } .naviparalink { background-color:#0d0705; } a { text-decoration:none; font-weight:bold; font-size:20px; color:#F30; } a:hover { background-color:#C19A4F; --> gold color:#FFF; padding: 20px; } <Bildergallerie> #gallery { margin:0px; padding:0px; background-color:none; border:0px; width:1040px; height:600px; } #gallery a.thumb img{ /*mini bild normal*/ text-decoration:none; border: #FFF solid 2px; position:relative; top: 500px; float:left; margin-right:4px; width: 165; left: 95; } #big { /*großes bild*/ position:absolute; width:500px; height:300px; left:120px; top:100px; } #gallery a.thumb span{ /*ausgeblendet*/ display:none; } #gallery a.thumb:hover span{ /*eingeblendet*/ display:block; position:absolute; left:120px; top:-200px; z-index:5; } #gallery a.thumb:hover img.thumbmini{ /*hover für mini bild*/ padding: 0px; margin-right:4px; border: solid 2px #FF2904; } #gallery a.thumb:hover span .thumbspan{ /*span bild*/ border: solid 1px #FFF; padding: 10px; } Code:
--> HTML <div id="gallery"> <a class="thumb" href="../../bilder/executivebilder/cx/01.jpg" target="_blank"> <img class="thumbmini" src="../../bilder/executivebilder/cx/p1.jpg"/> <span><img class="thumbspan" src="../../bilder/executivebilder/cx/p1.jpg"/></span> </a> <a class="thumb" href="../../bilder/executivebilder/cx/02.jpg" target="_blank"> <img class="thumbmini" src="../../bilder/executivebilder/cx/p2.jpg"/> <span><img class="thumbspan" src="../../bilder/executivebilder/cx/p2.jpg"/></span> </a> <a class="thumb" href="../../bilder/executivebilder/cx/04.jpg" target="_blank"> <img class="thumbmini" src="../../bilder/executivebilder/cx/p4.jpg"/> <span><img class="thumbspan" src="../../bilder/executivebilder/cx/p4.jpg"/></span> </a> <a class="thumb" href="../../bilder/executivebilder/cx/07.jpg" target="_blank"> <img class="thumbmini" src="../../bilder/executivebilder/cx/p7.jpg"/> <span><img class="thumbspan" src="../../bilder/executivebilder/cx/p7.jpg"/></span> </a> <a class="thumb" href="../../bilder/executivebilder/cx/12.jpg" target="_blank"> <img src="../../bilder/executivebilder/cx/p12.jpg" width="165" height="95" class="thumbmini" /> <span><img class="thumbspan" src="../../bilder/executivebilder/cx/p12.jpg"/></span> </a> <img id="big" src="../../bilder/executivebilder/cx/01.jpg" /> Code:
<a class="thumb" href="../../bilder/executivebilder/cx/13.jpg" target="_blank"> <img class="thumbmini" src="../../bilder/executivebilder/cx/p13.jpg" /> <span><img class="thumbspan" src="../../bilder/executivebilder/cx/p13.jpg"/></span> </a> Na dann viel Spaß beim Knobeln Leute Ich bin froh über jede Antwort Eure smile! |
Sponsored Links |
|
|||
Bei dem Problem selber kann ich nicht helfen, aber hast Du dir die Seite schon mal bei einer 1024-Auflösung angeschaut? Da müsste dann horizontal gescrollt werden ....
Tanja |
Sponsored Links |
|
|||
Zitat:
Was in deinem letzten Thread besprochen wurde hast du noch immer nicht gelöst. Noch immer fliegt dieses riesige Padding für alle Links rum.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Argh!
Also ich hab jetzt mal alles durchgeschaut.
Gefunden habe ich: Folgeelement-Selektor, Kind-Selektor, kombinierte oder nachfahren- Selektoren (die bereits im css habe z.B. #gallery a span - ist das doch, oder???) Und da dachte ich mir: Okay, dann sprich deine Bildlinks a über diese genannten Selektoren an. Daher brauche ich ja keine Klassen mehr (jedenfalls bei dem a-Tag nicht) Mein HTML-Code bleibt immer gleich: Code:
<div id="gallery"> <a href="../../bilder/executivebilder/cx/01.jpg" target="_blank"> <img class="thumbmini" src="../../bilder/executivebilder/cx/p1.jpg"/> <span><img class="thumbspan" src="../../bilder/executivebilder/cx/p1.jpg"/></span> </a> <a href="../../bilder/executivebilder/cx/02.jpg" target="_blank"> <img class="thumbmini" src="../../bilder/executivebilder/cx/p2.jpg"/> <span><img class="thumbspan" src="../../bilder/executivebilder/cx/p2.jpg"/></span> </a> <a href="../../bilder/executivebilder/cx/04.jpg" target="_blank"> <img class="thumbmini" src="../../bilder/executivebilder/cx/p4.jpg"/> <span><img class="thumbspan" src="../../bilder/executivebilder/cx/p4.jpg"/></span> </a> <a href="../../bilder/executivebilder/cx/07.jpg" target="_blank"> <img class="thumbmini" src="../../bilder/executivebilder/cx/p7.jpg"/> <span><img class="thumbspan" src="../../bilder/executivebilder/cx/p7.jpg"/></span> </a> <a href="../../bilder/executivebilder/cx/12.jpg" target="_blank"> <img src="../../bilder/executivebilder/cx/p12.jpg" width="165" height="95" class="thumbmini" /> <span><img class="thumbspan" src="../../bilder/executivebilder/cx/p12.jpg"/></span> </a> <a href="../../bilder/executivebilder/cx/12.jpg" target="_blank"> <img src="../../bilder/executivebilder/cx/p12.jpg" width="165" height="95" class="thumbmini" /> <span><img class="thumbspan" src="../../bilder/executivebilder/cx/p12.jpg"/></span> </a> <img id="big" src="../../bilder/executivebilder/cx/01.jpg" /> 1) Folgeelement-Selektor auch Nachbar-Selektor Das heißt ich gebe mein übergeordnetes Element an #gallery plus mein darauffolgendes Element a. Code Code:
#gallery { margin:0px; padding:0px; background-color:none; border:0px; width:1040px; height:600px; } #gallery + a img{ /*mini bild normal*/ text-decoration:none; border: #FFF solid 2px; position:relative; top: 500px; float:left; margin-right:4px; width: 165; left: 95; } #big { /*großes bild*/ position:absolute; width:500px; height:300px; left:120px; top:100px; } #gallery + a span{ /*ausgeblendet*/ display:none; } #gallery + a:hover span{ /*eingeblendet*/ display:block; position:absolute; left:120px; top:-200px; z-index:5; } #gallery + a:hover img.thumbmini{ /*hover für mini bild*/ padding: 0px; margin-right:4px; border: solid 2px #FF2904; } #gallery + a:hover span .thumbspan{ /*span bild*/ border: solid 1px #FFF; padding: 10px; } nöp, hat nicht gefunzt...was mache ich falsch? Ich habs in allen Browsern getestet. 2) Kind-Selektor Hier kann ich alle Kinder angeben und zwar: #gallery >a Code Code:
#gallery { margin:0px; padding:0px; background-color:none; border:0px; width:1040px; height:600px; } #gallery > a img{ /*mini bild normal*/ text-decoration:none; border: #FFF solid 2px; position:relative; top: 500px; float:left; margin-right:4px; width: 165; left: 95; } #big { /*großes bild*/ position:absolute; width:500px; height:300px; left:120px; top:100px; } #gallery > a span{ /*ausgeblendet*/ display:none; } #gallery > a:hover span{ /*eingeblendet*/ display:block; position:absolute; left:120px; top:-200px; z-index:5; } #gallery > a:hover img.thumbmini{ /*hover für mini bild*/ padding: 0px; margin-right:4px; border: solid 2px #FF2904; } #gallery > a:hover span .thumbspan{ /*span bild*/ border: solid 1px #FFF; padding: 10px; } Ergrebnis: funzt auch nicht...wiesoooo? Und was ich immer noch nicht verstehe: Selbst WENN ich meinen Bildlinks a eine Klasse gebe, bekomme ich immer noch den verdammten gold-padding von meinen Links der Navigation. Warum?! Außerdem müsste ich doch nicht einmal Klassen vergeben, wenn ich schon die Formatierung mit: #gallery a span zum Beispiel einschränke? Aber immerhin, das einzige was funktioniert ist, wenn ich meinen Links aus der Navigation Klassen vergebe, dann ist das ganze Problem weg...gut...aber ich will ja wissen warum es andersrum nicht geht... Smile! Geändert von smile! (18.02.2010 um 14:30 Uhr) |
|
|||
Zitat:
Du brauchst im Moment nur den Nachfahrenselektor, keine anderen Verwandschaften. Zitat:
Zitat:
Du musst lernen wie Selektoren funktionieren. Kauf dir ein CSS-Buch. Wenn du nur die Links in der Galerie ansprechen willst verwendest du #gallery a. Und jetzt denk nach, wie du wohl die Links der Navigation ansprechen könntest.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hovereffekt und Mehr | Vaderfone | CSS | 5 | 02.04.2011 05:40 |
Abstand zwischen zwei Bildern im Internet Explorer | waltecp3 | CSS | 4 | 30.09.2010 20:15 |
Abstand zwischen Bildern | Sodie | (X)HTML | 2 | 06.11.2006 22:19 |
Variabler Zwischenraum von Bildern... | kick | CSS | 13 | 02.02.2006 13:54 |
template mit bildern | cssmichl | CSS | 5 | 10.05.2005 11:28 |