zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden mysteriöser Hovereffekt bei Bildern

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.02.2010, 11:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.02.2010
Ort: Bayern
Beiträge: 7
smile! befindet sich auf einem aufstrebenden Ast
Pfeil 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;
}
Und hier mein Html-Code für 2 a) also 5 Bilder:

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" />
Beim Html-Code für 6 Bilder wäre noch das hier zwischen letztem <img> und <a> eingefügt:

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>
Sagt bitte nicht ich solls halt mit 5 Bildern machen...ich wollte so gern eine kleine Bildleiste...
Na dann viel Spaß beim Knobeln Leute
Ich bin froh über jede Antwort

Eure smile!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.02.2010, 11:13
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 25.07.2009
Ort: Wanne-Eickel
Beiträge: 223
TanjaP. befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.02.2010, 12:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.02.2010
Ort: Bayern
Beiträge: 7
smile! befindet sich auf einem aufstrebenden Ast
Standard

nein, das hab ich noch nicht gemacht...aber ich wollte ja auch nicht runterscrollen. Die Bilder sollten nur angezeigt werden...
Mit Zitat antworten
  #4 (permalink)  
Alt 17.02.2010, 12:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Denn wenn ich das a:hover lösche, ist meine ganze Formatierung für meine Navigation kaputt...
Dann lösch es halt nicht, sondern verwende einen Selektor, der nur die Links der Navigation anspricht. Den Nachfahrenselektor kennst du doch bereits.

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 17.02.2010, 12:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.02.2010
Ort: Bayern
Beiträge: 7
smile! befindet sich auf einem aufstrebenden Ast
Standard ups

ähhh jaaa okay...dann mach ich das mal...muss nur kurz schauen was noch mal ein nachfahrenselektor ist...danke...
Mit Zitat antworten
  #6 (permalink)  
Alt 18.02.2010, 13:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.02.2010
Ort: Bayern
Beiträge: 7
smile! befindet sich auf einem aufstrebenden Ast
Unglücklich 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" />
Verändert hab ich immer nur mein CSS:

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;
}
Ergebnis:
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 13:30 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 18.02.2010, 13:42
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
was mache ich falsch?
Du verstehst nicht, was das Plus in einem Selektor bedeutet.
Du brauchst im Moment nur den Nachfahrenselektor, keine anderen Verwandschaften.

Zitat:
Zitat von smile! Beitrag anzeigen
Selbst WENN ich meinen Bildlinks a eine Klasse gebe, bekomme ich immer noch den verdammten gold-padding von meinen Links der Navigation. Warum?!
Weil du das verdammte gold-padding für ALLE Links angegeben hast! Daran ändert auch eine Klasse für die "Bildlinks" nichts. Sie gehören trotzdem zu ALLEN Links.

Zitat:
Aber immerhin, das einzige was funktioniert ist, wenn ich meinen Links aus der Navigation Klassen vergebe,
Quatsch.
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.
Mit Zitat antworten
  #8 (permalink)  
Alt 18.02.2010, 17:28
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.135
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Zitat:
Zitat von smile! Beitrag anzeigen
nein, das hab ich noch nicht gemacht...aber ich wollte ja auch nicht runterscrollen. Die Bilder sollten nur angezeigt werden...
Tanja meinte nicht vertikal, sondern horizontal --> damit ist die Breite gemeint
HTML-Code:
../../bilder/punto logo.gif"..
Dateinamen mit Leerzeichen kann ins Auge (Leere) gehen...

Gruß Manfred
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hovereffekt und Mehr Vaderfone CSS 5 02.04.2011 04:40
Abstand zwischen zwei Bildern im Internet Explorer waltecp3 CSS 4 30.09.2010 19:15
Abstand zwischen Bildern Sodie (X)HTML 2 06.11.2006 21:19
Variabler Zwischenraum von Bildern... kick CSS 13 02.02.2006 12:54
template mit bildern cssmichl CSS 5 10.05.2005 10:28


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:09 Uhr.