mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 05:46 Benutzername: Passwort: Auto-Login

Thema: CSS Bilder Gallery und der ie6 vom 17.01.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS Bilder Gallery und der ie6
Seite: 1, 2  Weiter
Autor Nachricht
Mark-Korb
Threadersteller

Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Do 17.01.2008 10:00
Titel

CSS Bilder Gallery und der ie6

Antworten mit Zitat Zum Seitenanfang

Moin Leude,

folgende Problematik, ich hab nen CSS Gallery von cssplay.co.uk rausgesucht und bin mit der am rumbasteln.
http://www.cssplay.co.uk/menu/gallery_click2.html

Ich hab ansich nur die Größen geändert und ein wenig bei den Positionierungen gedreht sowie die Bild anzahl auf 26 erhöt.
Im Safari, FF, Opera und iE7 läuft alles wie ich es erwartet habe und wie es soll. Nur macht der iE6 zicken.
Er Will einfach nicht Hovern, es werden weder Text Noch Bilder angezeigt...
Abstruser weise macht er es aber beim Original. Ich blick da langsam nicht mehr durch.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<style type="text/css">

/* needed for IE to make :active state work first time */
a, a:visited {color:#000;}

/* common styling for all galleries */
a.gallery, a.gallery:visited {
      display:block;
      display:inline-block;
      color:#000; text-decoration:none;
      border: 0px;
      width:72px;
      height:72px;
      float:left;
      margin:0;
      z-index:50;
 }
 
a.slidea {background:url(pic/thumb2.jpg);}
a.slideb {background:url(pic/thumb3.jpg)}
a.slidec {background:url(pic/thumb4.jpg);}
a.slided {background:url(pic/thumb5.jpg);}
a.slidee {background:url(pic/thumb6.jpg);}
a.slidef {background:url(pic/thumb7.jpg);}
a.slideg {background:url(pic/thumb8.jpg);}
a.slideh {background:url(pic/thumb9.jpg);}
a.slidei {background:url(pic/thumb10.jpg);}
a.slidej {background:url(Pic/thumb11.jpg);}
a.slidek {background:url(pic/thumb12.jpg);}
a.slidel {background:url(pic/thumb13.jpg);}
a.slidem {background:url(pic/thumb14.jpg);}
a.sliden {background:url(pic/thumb15.jpg);}
a.slideo {background:url(pic/thumb16.jpg);}
a.slidep {background:url(pic/thumb17.jpg);}
a.slideq {background:url(pic/thumb18.jpg);}
a.slider {background:url(pic/thumb19.jpg);}
a.slides {background:url(pic/thumb20.jpg);}
a.slidet {background:url(pic/thumb21.jpg);}
a.slideu {background:url(pic/thumb22.jpg);}
a.slidev {background:url(pic/thumb23.jpg);}
a.slidew {background:url(pic/thumb24.jpg);}
a.slidex {background:url(pic/thumb25.jpg);}
a.slidey {background:url(pic/thumb26.jpg);}
a.slidez {background:url(pic/thumb27.jpg);}

a.gallery em, a.gallery span {
      display:none;
}

a.gallery:hover {border:0px;}

a.slidea em {background:url(pic/pic2.jpg)  no-repeat;}
a.slideb em {background:url(pic/pic3.jpg)  no-repeat;}
a.slidec em {background:url(pic/pic4.jpg)  no-repeat;}
a.slided em {background:url(pic/pic5.jpg)  no-repeat;}
a.slidee em {background:url(pic/pic6.jpg)  no-repeat;}
a.slidef em {background:url(pic/pic7.jpg)  no-repeat;}
a.slideg em {background:url(pic/pic8.jpg)  no-repeat;}
a.slideh em {background:url(pic/pic9.jpg)  no-repeat;}
a.slidei em {background:url(pic/pic10.jpg)  no-repeat;}
a.slidej em {background:url(pic/pic11.jpg)  no-repeat;}
a.slidek em {background:url(pic/pic12.jpg)  no-repeat;}
a.slidel em {background:url(pic/pic13.jpg)  no-repeat;}
a.slidem em {background:url(pic/pic14.jpg)  no-repeat;}
a.sliden em {background:url(pic/pic15.jpg)  no-repeat;}
a.slideo em {background:url(pic/pic16.jpg)  no-repeat;}
a.slidep em {background:url(pic/pic17.jpg)  no-repeat;}
a.slideq em {background:url(pic/pic18.jpg)  no-repeat;}
a.slider em {background:url(pic/pic19.jpg)  no-repeat;}
a.slides em {background:url(pic/pic20.jpg)  no-repeat;}
a.slidet em {background:url(pic/pic21.jpg)  no-repeat;}
a.slideu em {background:url(pic/pic22.jpg)  no-repeat;}
a.slidev em {background:url(pic/pic23.jpg)  no-repeat;}
a.slidew em {background:url(pic/pic24.jpg)  no-repeat;}
a.slidex em {background:url(pic/pic25.jpg)  no-repeat;}
a.slidey em {background:url(pic/pic26.jpg)  no-repeat;}
a.slidez em {background:url(pic/pic26.jpg)  no-repeat;}



/* styling for TOP gallery */
#container_top {
      position:relative;
      width:936px;
      height:525px;
      background:#d1c8c3;
      border:1px
      solid #a49188;
      margin:1em auto;
}

#container_top img {
      border:0;
   }


#container_top .thumbs {
      position:absolute;
      left:0;
      top:0;
   }

#container_top a.gallery:hover span {
      display:block;
       position:absolute;
       width:402px;
        height:50px;
         top:184px;
          padding:5px;
      left: 40px;
       font-style:italic; color:#fff;
         z-index:100;
   }
   
#container_top a.gallery:hover span:first-line {
      font-style:normal;
      font-weight:bold;
       font-size:1.1em;
        color:#000;
     }
#container_top a.gallery:active, #container_top a.gallery:focus {
      border:0;
   }
 
 
#container_top a.gallery:active em, #container_top a.gallery:focus em {
      display:block;
       position:absolute;
        width:936px;
         height:381px;
          top:144px;
      color:#000;
      border:0px;
      background-color: red;
      z-index:50;
   }
#container_top h1 {
      clear:both;
      margin:0;
      padding-top:200px;
      text-align:center;
      font-size:3em;
      font-weight:normal; color:#fff;
   }
#container_top h1 em {
      font-size:0.6em;
      color:#000;
   }

</style>


</head>

<body id="www-cssplay-co-uk">
   
<div id="info">

<div id="container_top">
<div class="thumbs">
<a class="gallery slidea" href="#nogo"><em></em><span>LSE Square<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slideb" href="#nogo"><em></em><span>Buckingham Palace<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidec" href="#nogo"><em></em><span>Tower Bridge<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slided" href="#nogo"><em></em><span>Tower of London<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidee" href="#nogo"><em></em><span>Houses of Parliament<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidef" href="#nogo"><em></em><span>St. Paul's Cathedral<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slideg" href="#nogo"><em></em><span>The London Eye<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slideh" href="#nogo"><em></em><span>Albert Hall<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidei" href="#nogo"><em></em><span>Wandsworth Common<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidej" href="#nogo"><em></em><span>London Taxi Cab<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidek" href="#nogo"><em></em><span>London Taxi Cab<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidel" href="#nogo"><em></em><span>London Taxi Cab<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidem" href="#nogo"><em></em><span>London Taxi Cab<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery sliden" href="#nogo"><em></em><span>London Taxi Cab<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slideo" href="#nogo"><em></em><span>London Taxi Cab<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidep" href="#nogo"><em></em><span>London Taxi Cab<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slideq" href="#nogo"><em></em><span>London Taxi Cab<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slider" href="#nogo"><em></em><span>London Taxi Cab<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slides" href="#nogo"><em></em><span>London Taxi Cab<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidet" href="#nogo"><em></em><span>London Taxi Cab<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slideu" href="#nogo"><em></em><span>London Taxi Cab<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidev" href="#nogo"><em></em><span>London Taxi Cab<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidew" href="#nogo"><em></em><span>London Taxi Cab<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidex" href="#nogo"><em></em><span>London Taxi Cab<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidey" href="#nogo"><em></em><span>London Taxi Cab<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidez" href="#nogo"><em></em><span>London Taxi Cab<br />Photographs courtesy of stock.xchng</span></a>

</div>
<h1>Views<br /><em>of</em><br />London</h1>
</div>

</div>

</body>
</html>
  View user's profile Private Nachricht senden
Mac

Dabei seit: 26.08.2005
Ort: Köln
Alter: 62
Geschlecht: Männlich
Verfasst Do 17.01.2008 10:38
Titel

Antworten mit Zitat Zum Seitenanfang

Zitat:

a.slidea {background:url(pic/thumb2.jpg);}
a.slideb {background:url(pic/thumb3.jpg)}
a.slidec {background:url(pic/thumb4.jpg);}


zweite Zeile ein Tippfehler - fehlendes Semikolon?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Mark-Korb
Threadersteller

Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Do 17.01.2008 11:17
Titel

Antworten mit Zitat Zum Seitenanfang

Ne, am Semikolon lag es leider nicht.

Befürchte fas das mein ie6 spinnt, könnte jemand den Code für mich mal lokal bei sich testen?
Fänd ich voll Nett.
  View user's profile Private Nachricht senden
choise

Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht: Männlich
Verfasst Do 17.01.2008 11:57
Titel

Antworten mit Zitat Zum Seitenanfang

also funktioniert bei:

IE 7
FF 2
MOZ 1.7
NETSC 7.1


nicht bei:

IE 6
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sousterrainian

Dabei seit: 12.12.2007
Ort: Bremen
Alter: 42
Geschlecht: Männlich
Verfasst Do 17.01.2008 11:57
Titel

Antworten mit Zitat Zum Seitenanfang

Mark-Korb hat geschrieben:
Ne, am Semikolon lag es leider nicht.

Befürchte fas das mein ie6 spinnt, könnte jemand den Code für mich mal lokal bei sich testen?
Fänd ich voll Nett.


Klar, vor allem, da ich lokal so viele Bilder liegen habe, die denen in deinem CSS-Pfad entsprechen. Sehr effektiv eine Bildergallerie so zu testen...

Da allerdings ein hover triggert, würd ich tippen, dass die Anzeige ausserhalb des sichtbaren Bereichs stattfindet *ha ha*

Bau mal eine Browserweiche ein und modifizier Schritt für Schritt das Original nur für den IE6, um zu verstehen, wo er sich anders verhält.

Code:
<!--[if lt IE 7]>
    <style type="text/css">@import url(styles/styles_ie.css);</style>
  <![endif]-->


Gruß
Unterweltler
  View user's profile Private Nachricht senden
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 17.01.2008 11:57
Titel

Antworten mit Zitat Zum Seitenanfang

gibt dem mal (obwohls eigentlich keinen sinn macht):
a.gallery:hover {border:1px;}
dann geht das im ie6 - zumindest auf meiner kiste.
  View user's profile Private Nachricht senden
sousterrainian

Dabei seit: 12.12.2007
Ort: Bremen
Alter: 42
Geschlecht: Männlich
Verfasst Do 17.01.2008 12:01
Titel

Antworten mit Zitat Zum Seitenanfang

Raumwurm hat geschrieben:
gibt dem mal (obwohls eigentlich keinen sinn macht):
a.gallery:hover {border:1px;}
dann geht das im ie6 - zumindest auf meiner kiste.


*ha ha* Tatsache?!? Man lernt nie aus. Da würd mich mal interessieren, welche Einflüsse das auf die Eigenschaften des Elements hat.
  View user's profile Private Nachricht senden
Mark-Korb
Threadersteller

Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Do 17.01.2008 12:12
Titel

Antworten mit Zitat Zum Seitenanfang

@Raumwurm
DANKE * Ich bin unwürdig * * Ich bin unwürdig * * Ich bin unwürdig * * Ich bin unwürdig * * Ich bin unwürdig * * Ich bin unwürdig * mit order geht es.

wen du mir jetzt noch sagst warum der da nen order befehl braucht wär das echt super.

sousterrainian hat geschrieben:

Klar, vor allem, da ich lokal so viele Bilder liegen habe, die denen in deinem CSS-Pfad entsprechen. Sehr effektiv eine Bildergallerie so zu testen...


Liegen Ja Farbflächen hinter, sehen ob da was Hoverd tut man ja trotzdem :p
  View user's profile Private Nachricht senden
 
Ähnliche Themen bilder aus bilder gallery in neuem Fenster anzeigen
Bilder-Gallery
gallery: Bilder verlinken
Dynamische Bilder Gallery
alle bilder vorladen - gallery
brauche verwaltbare bilder-gallery
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.