HTML Code in Seite einbinden

[quidnovi]

Hi Typo 3ler

ich bitte um eine Erklärung für folgendes Problem:

Habe eine Fotogalerie mittels CSS erstellt, deren Darstellung lokal auf dem Apachen im Firefox und IE gleich aussieht.

Wenn ich aber nun diesen Code (Seiteninhalt anlegen/HTML Code)auf den Typo3 Server stelle, unterscheiden sich beide Darstellungen sehr. Da stimmt sogar die Darstellung im Firefox nicht mehr ganz, die im IE haut überhaupt nicht mehr hin.

Könnte mir denken, dass ich "Css Styled Content" überschreiben muß, wüßte aber nicht wirklich wie.

Zum besseren Verständnis habe ich zwei Bilder angefügt.

Hier der Code den ich eingefügt habe:

<style type="text/css">

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

/* Thumbnails */
a.gallery, a.gallery:visited {
display:block;
display:inline-block;
color:#000;
text-decoration:none;
border:1px solid #000;
width:71px;
height:69px;
float:left;
margin:4px;
z-index:50;
}
a.slidea {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-01.jpg);}
a.slideb {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-02.jpg);}
a.slidec {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-03.jpg);}
a.slided {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-04.jpg);}
a.slidee {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-05.jpg);}
a.slidef {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-06.jpg);}
a.slideg {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-07.jpg);}
a.slideh {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-08.jpg);}
a.slidei {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-09.jpg);}
a.slidej {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-10.jpg);}
a.slidek {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-11.jpg);}
a.slidel {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-12.jpg);}
a.slidem {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-13.jpg);}
a.sliden {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-14.jpg);}

a.gallery em, a.gallery span {
display:none;
}
a.gallery:hover {
border:1px solid #fff;
}


/* Gallery all */
#container_top {
position:relative;
width:600px;
height:500px;
background:white;
border:0px solid #a49188;
margin:1em auto;
}

#container_top img {
border:0; bottom: 0px;
}
#container_top .thumbs {
position:absolute;
left:0;
top:0;
}

/*
#container_top a.gallery:hover span {
display:block;
position:absolute;
width:600px;
height:50px;
top:110px;
left:5px;
padding:5px;
font-style:italic;
color:#fff;
z-index:100;
border:0px solid #a49188;
}
*/

#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:1px solid #000;
}

#container_top a.gallery:active em, #container_top a.gallery:focus em {
display:block;
position:absolute;
width:480px;
height:300px;
top:196px;
left:50px;
color:#000;
border:0px solid red;
z-index:50;
background-color: #ffffff;
text-align: center;
bottom: 0px;
}
#container_top a.gallery:active em img, #container_top a.gallery:focus em img {
position: absolute;
bottom: 0;
left: 40px;
}

#container_top h1 {
clear:both;
margin:0;
padding-top:400px;
text-align:center;
font-family: georgia, "times new roman", serif;
font-size:3em;
font-weight:normal;
color:#fff;
}

#container_top h1 em {
font-size:0.6em;
color:#000;
}


</style>



<div id="container_top">
<div class="thumbs">
<a class="gallery slidea" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-01.jpg" /></em></a>
<a class="gallery slideb" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-02.jpg" /></em></a>
<a class="gallery slidec" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-03.jpg" /></em></a>

<a class="gallery slided" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-04.jpg" /></em></a>
<a class="gallery slidee" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-06.jpg" /></em></a>
<a class="gallery slidef" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-07.jpg" /></em></a>
<a class="gallery slideg" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-08.jpg" /></em></a>
<a class="gallery slideh" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-09.jpg" /></em></a>
<a class="gallery slidei" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-10.jpg" /></em></a>

<a class="gallery slidej" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-11.jpg" /></em></a>
<a class="gallery slidek" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-12.jpg" /></em></a>
<a class="gallery slidel" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-13.jpg" /></em></a>
<a class="gallery slidem" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-14.jpg" /></em></a>
<a class="gallery sliden" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-15.jpg" /></em></a>

</div>
<table width="600" height="500" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="47" valign="bottom">
<img src="http://stot.linux3.webhome.at/fotos/texte-website.jpg">
<td align="center" valign="bottom" height="300">
<img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-01.jpg" width="367" />
</td>
</tr>
</table>
</div>

Da mein TS Wissen sehr bescheiden ist, bitte ich Euch um Eure Hilfe.

Danke im voraus

[Elli]

Tipp: wenn du mit T3 arbeitest, würde ich auch die dafür vorgesehenen
Gallery-Extensions verwenden. Die bieten inzwischen eine Menge Möglichkeiten
und zudem funktioniert das ganze dynamisch. Schließlich ist das ja einer der
großen Vorteile von CMS. Andernfalls ist man besser beraten, eine einfache
statische Seite zu erstellen.
Auch hier gilt wieder: erst mal den Workshop hier machen, um ein besseres
Verständnis für T3 zu bekommen. Denn andernfalls hängt man ständig an
irgendwelchen Problemen und man verliert schnell die Lust an der Sache

Sehr empfehlenswert: sk_simplegallery

[Nele]

Für mich sieht es so aus, als wäre der obere Kasten absolut positioniert oder als würde ein clear:both o.ä. unter dem Kasten fehlen.
Hast du einen Link zur Seite? So wird man das wohl kaum beurteilen können.

Hast du denn schon mal die Quelltexte verglichen?