3 Spalten DIV-Layout wird nicht korrekt angezeigt

[stickerer16]

Hallo zusammen,
Ich bin gerade daran eine Verlinkungsseite zu 3 verschiedenen Homepages zu kreieren,
um eben nur eine Domain zahlen zu müssen.

Nur bin ich da auf ein Problem gestoßen:

Mein 3 Spalten Div Layout wird nicht korrekt angezeigt,
außer im IE (zu mindestens bei mir).

Zuerst habe ich einfach die 3 Bild-Links mit "float:left,float right und width:auto" zentriert, hat auch einwandfrei funktioniert.

Dann habe ich die Bild-Links mit einem Mouseover Effect (CSS) "verbessert".
Und daraufhin ist der mittlere Bild-Link komplett verschwunden.
Der Code selbst beinhaltet keine Fehler, habe ihn mit dem Validator sowohl HTML, als auch CSS überprüft.

Schaut euch einfach mal den Link im IE
und im Firefox/Opera an und ihr versteht was ich meine.

Die zugehörige CSS Datei ist übrigens hier.

PS: Kritik und Verbesserungsvorschläge zur Seite sind natürlich auch gerne gesehen.
(Das Logo und die Fotos sind nebenbei gesagt nur temporär, die werden noch ausgetauscht, wenn die Homepages fertig sind).

[Der-Dennis]

Hallo,

also bei mir wird's im IE, Opera und Firefox gleich angezeigt!?

Gruß, Dennis

[stickerer16]

Hallo,

also bei mir wird's im IE, Opera und Firefox gleich angezeigt!?

Gruß, Dennis

Aha.. merkwürdig.

Wird es so oder so»»  angezeigt bei dir?

lg

[apsel]

Om nah hoo pez nyeetz, stickerer16!

Und daraufhin ist der mittlere Bild-Link komplett verschwunden. Der Code selbst beinhaltet keine Fehler, habe ihn mit dem Validator sowohl HTML, als auch CSS überprüft.

Nicht verschwunden, er ist unter den linken gerutscht. Dieses Div sollte ein margin bekommen und falls du die Grafiken in der Mitte haben möchtest, margin: 0 auto;.

Dabei fällt auf, dass du sehr viele sinnlose divs verwendest. Alle divs, in denen nur ein Element drin ist, ebenso das all-umspannende. Dafür bietet sich das Element body an.

Für die hover-Effekte möchtest du CSS-Sprites verwenden

Matthias

[apsel]

Om nah hoo pez nyeetz, apsel!

Nicht verschwunden, er ist unter den linken gerutscht. Dieses Div sollte ein margin bekommen und falls du die Grafiken in der Mitte haben möchtest, margin: 0 auto;.

also das div sigi: z.B. margin: 0 210; und der Link margin: 0 auto;, wobei wie gesagt, dieses div überflüssig ist.

Matthias

[stickerer16]

Om nah hoo pez nyeetz, apsel!

Nicht verschwunden, er ist unter den linken gerutscht. Dieses Div sollte ein margin bekommen und falls du die Grafiken in der Mitte haben möchtest, margin: 0 auto;.

also das div sigi: z.B. margin: 0 210; und der Link margin: 0 auto;, wobei wie gesagt, dieses div überflüssig ist.

Matthias

Wow, das ging ja schnell, Danke, es funktioniert.
Zentrieren geht nicht so einfach, da das Bild ja größer ist, als es das Auge erfasst (Durch den schwarzen Hintergrund nicht wahrnehmbar, logisch).
Aber da werde ich mich dann mit dem padding -ttribut herumspielen, bis es passt.

Eine Sache wäre aber noch:
Ist es möglich das kurze "blitzen/blinken" des Bild-Links beim ersten überfahren dieses zu unterbinden?

lg, Sigi

[apsel]

Om nah hoo pez nyeetz, stickerer16!

Eine Sache wäre aber noch: Ist es möglich das kurze "blitzen/blinken" des Bild-Links beim ersten überfahren dieses zu unterbinden?

Dies entsteht durch die Ladezeit des Hover-Bildes. Du möchtest CSS-Sprites verwenden, wie ich schon schrieb.

Matthias

[stickerer16]

Du möchtest CSS-Sprites verwenden, wie ich schon schrieb.

Matthias

Okay, dann möchte ich das wohl^^, Danke!

[stickerer16]

Du möchtest CSS-Sprites verwenden, wie ich schon schrieb.

Matthias

Okay, dann möchte ich das wohl^^, Danke!

Die CSS-Sprite Methode hat bei dem linken und bei dem rechten Bild funktioniert, aber beim mittleren Bild habe ich DIESE Probleme.
Wenn man über den mittleren Bild-Link drüberfährt, verschiebt es sich sichtbar, was es nicht soll (siehe andere beiden Bild-Links)

Der Quellcode zum mittleren Bild-Link:

#sigi {  
           width: auto;  
           height: 175px;  
           margin: 0;  
           padding: 0px;  
           padding-left: 0px;  
           padding-right: 0px;  
            }  
  
a#sigia {  
       display: block;  
       width: 130px;  
       height: 175px;  
       margin:0 auto;  
       background: transparent url(9.jpg) 0px 0px no-repeat;  
       }  
  
a:hover#sigia, a:active#sigia  
       {  
  
       width: 210px;  
       height: 175px;  
       background: transparent url(9.jpg) 0px 0px no-repeat;  
       }

lg,
Sigi

[Take]

Der Quellcode zum mittleren Bild-Link:

wäre z.B.:

  
#sigi {  
           width:210px;  
           height: 175px;  
           margin: auto;  
           }  
  
a#sigia {  
       display: block;  
       width: 130px;  
       height: 175px;  
       margin:0 auto;  
       background: transparent url(9.jpg) 0px 0px no-repeat;  
       }  
  
a:hover#sigia, a:active#sigia  
       {  
       margin-left:40px;  
       width:210px;  
       }  

Die Zentrierung des Divs geht jetzt über margin: auto;, und die breite ist dauerhaft auf 210px gesetzt. wenn man jetzt mit der maus über den link fährt, wird das bild mit dem margin-left: 40px; wieder in die mitte gerückt!

gruß,

take

[stickerer16]

Der Quellcode zum mittleren Bild-Link:

wäre z.B.:

...

>   
> Die Zentrierung des Divs geht jetzt über margin: auto;, und die breite ist dauerhaft auf 210px gesetzt. wenn man jetzt mit der maus über den link fährt, wird das bild mit dem margin-left: 40px; wieder in die mitte gerückt!  
>   
> gruß,  
>   
> take  
  
So einfach und doch so schwer^^.  
  
Danke!

[Take]

Danke!

np (kennt man das hier? :) = no problem :)

gruß take