Autor |
Nachricht |
Mark-Korb
Threadersteller
Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht:
|
Verfasst Do 17.01.2008 10:00
Titel CSS Bilder Gallery und der ie6 |
|
|
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>
|
|
|
|
|
|
Mac
Dabei seit: 26.08.2005
Ort: Köln
Alter: 62
Geschlecht:
|
Verfasst Do 17.01.2008 10:38
Titel
|
|
|
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?
|
|
|
|
|
Anzeige
|
|
|
Mark-Korb
Threadersteller
Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht:
|
Verfasst Do 17.01.2008 11:17
Titel
|
|
|
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.
|
|
|
|
|
choise
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Do 17.01.2008 11:57
Titel
|
|
|
also funktioniert bei:
IE 7
FF 2
MOZ 1.7
NETSC 7.1
nicht bei:
IE 6
|
|
|
|
|
sousterrainian
Dabei seit: 12.12.2007
Ort: Bremen
Alter: 42
Geschlecht:
|
Verfasst Do 17.01.2008 11:57
Titel
|
|
|
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
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
|
|
|
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 17.01.2008 11:57
Titel
|
|
|
gibt dem mal (obwohls eigentlich keinen sinn macht):
a.gallery:hover {border:1px;}
dann geht das im ie6 - zumindest auf meiner kiste.
|
|
|
|
|
sousterrainian
Dabei seit: 12.12.2007
Ort: Bremen
Alter: 42
Geschlecht:
|
Verfasst Do 17.01.2008 12:01
Titel
|
|
|
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. |
Tatsache?!? Man lernt nie aus. Da würd mich mal interessieren, welche Einflüsse das auf die Eigenschaften des Elements hat.
|
|
|
|
|
Mark-Korb
Threadersteller
Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht:
|
Verfasst Do 17.01.2008 12:12
Titel
|
|
|
@Raumwurm
DANKE 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
|
|
|
|
|
|
|
|
Ä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
|
|