Frage stellen
Bin neu hier und restlos verwirrt
Ich quäle mich seit Tagen mit einer Fotogalerie, die ich in eine bestehende Seite integrieren möchte. Die Seite ist in mehrere Container aufgeteilt, aber sobald ich das Script für die Galerie einfüge, werden zwar die Fotos angezeigt, aber die Container geraten wüst durcheinander *arrghhh* Inzwischen schwirren mir die divs nur mehr vor den Augen herum und ich hab mich total verrannt.....kann mir irgendjemand Ordnung ins Chaos bringen?
Hier der Code
- Code: Alles auswählen
<head>
<title>U15 Team</title>
<link rel="stylesheet" href="http://members.chello.at/essling_1997/sheet.css" type="text/css" />
</head>
<body>
<div id="mainContainer">
<div id="header">
<ul id="navlist">
<li id="active"><a href="default.htm" id="current">START</a></li>
<a target="_blank" href="http://www.wfv.at/">WFV</a></li>
<li><a href="kontakt.htm">KONTAKT</a></li>
</ul>
</div>
<div class="outer">
<div class="inner">
<div class="float-wrap">
<div id="content">
<div class="contentWrap">
<p style="margin-top:3.4em" />
<!--Beginn Galerie-->
<style type="text/css">
/*für IE um :active erstmalig zu aktivieren */
a, a:visited {color:#000;}
a.gallery,
a.gallery:visited {text-align: center;
display:block;
display:inline-block;
color:#000;
text-decoration:none;
border:1px solid #000;
width:35px;
height:47px;
float:left;
margin:4px;
z-index:50;
}
a.slide-1 {
background: url('a_mustermann_th.jpg');
}
a.slide-2 {
background: url('b_mustermann_th.jpg');
}
a.slide-3 {
background:url('c_mustermann_th.jpg');
}
a.slide-4 {
background:url('d_mustermann_th.jpg');
}
a.slide-5 {
background:url('e_mustermann_th.jpg');
}
a.gallery em,
a.gallery span {
display:none;
}
a.gallery:hover {
border:1px solid #a00;
}
#container {
position:relative;
width:450px;
height:580px;
background:#eee;
border:1px solid #a49188;
margin:1em auto;
}
#container img {
border:0px none;}
#container .thumbs {
position:absolute;
left:0; top:0;}
#container a.gallery:hover span {
display:block;
position:absolute;
width:402px;
height:50px;
top:110px;
left:5px;
padding:5px;
font-style:italic;
color:#a49188;
z-index:100;
}
#container a.gallery:hover span:first-line {
font-style:normal;
font-weight:normal;
font-size:1.1em;
color:blue;
}
#container a.gallery:active,
#container a.gallery:focus {
border:1px solid #000;
}
#container a.gallery:active em,
#container a.gallery:focus em {
display:block;
position:absolute;
width:402px;
height:400px;
top: 160px;
left:18px;
padding:5px;
color:#000;
border:1px solid #3d330f;
z-index:50;
}
h1 {
margin:0;
padding-top:50px;
text-align:center;
font: normal 3em "Verdana", serif;
color:#a49188;
}
#container h1 {
clear:both;
margin:0;
padding-top:200px;
text-align:center;
font: normal 3em "Verdana", serif;
color:#a49188;
}
#container h1 em {
font-size:0.6em;
color:#777;
}
</style>
<div style="text-align: center; margin: auto;">
<h3><font size="3">Unser Team</font></h3>
<p style="font-size: 0.8em; color: #777;"><br><br>zum Vergrößern bitte anklicken!</p>
</div><!--text-->
<div id="container">
<div class="thumbs">
<a class="gallery slide-1" href="#nogo"><em>
<img src="a_mustermann.jpg" width=300" height"400""></em><span>A_Mustermann</span></a>
<a class="gallery slide-2" href="#nogo"><em><img src="a_mustermann.jpg" width="300" height="400"></em><span>B_Mustermann</span></a>
<a class="gallery slide-3" href="#nogo"><em><img src="c_mustermann.jpg" width="300" height="400"></em><span>C. Mustermann</span></a>
<a class="gallery slide-4" href="#nogo"><em><img src="d_mustermann.jpg" width="300" height="400"></em><span>D. Mustermann</span></a>
<a class="gallery slide-5" href="#nogo"><em><img src="e_mustermann.jpg" width="300" height="400"></em><span>E. Mustermann</span></a>
</div> <!---thumbs--->
</div><!--container-->
<!--Galerie aus-->
</div><!--maincontainer-->
<div id="left" style="width: 120; height: 188">
<p style="margin-top:3.4em" />
<ul id="navi">
<li><a href="team.htm">TEAM</a></li>
<li><a href="training.htm">TRAINING</a></li>
<li><a href="spiele.htm">SPIELE</a></li>
<li><a href="galerie.htm">GALERIE</a></li>
<li><a href="links.htm">LINKS</a></li>
<li><a href="http://gb.webmart.de/gb.cfm
id=1073690">GÄSTEBUCH</a></li>
</ul>
</div>
<!-- end left div -->
<div class="clear"></div>
</div>
<div id="right">
</div>
<!-- end right div -->
<div class="clear"></div>
</div>
</div>
</div>
<div id="footer"><p><font color="#FFFFFF"><em>2007</em></font></p>
</div>
</body>
</html>
Jetzt paßt es! Ich danke dir fürs Mitsuchen!