Hallo,
ich hab mir dreist von meinem Bruder der Seite eine Bildergalerie geklaut.
HTML Code:
CSS Code:
Jetzt hab ich jedoch das Problem, das ich die Thumbnail Bilder nicht einfügen kann. Das Feld bleibt da einfach leer. Und irgendwie hab ich da nen weißen Hintergrund, wo ich auch nicht weis wie ich ihn wegbekomme..
ich hab mir dreist von meinem Bruder der Seite eine Bildergalerie geklaut.
HTML Code:
Code:
<div id="container"> <ul>
<li>
<a class="gallery slidea" href="#nogo">
<span>
<img src="images/dreamhack.jpg" alt="Dreamhack" title="Dreamhack">
<br />
Dreamhack, europäisches Tunier
<br />
Fotografiert von Foxy
</span>
</a>
</li>
<li>
<a class="gallery slideb" href="#nogo">
<span>
<img src="images/mlg.jpg" alt="MLG" title="MLG">
<br />
MLG, amerikanisches Tunier
<br />
Fotografiert von Majorleaguegaming.com
</span>
</a>
</li>
<li>
<a class="gallery slidec" href="#nogo">
<span>
<img src="images/nasl_nestea.jpg">
<br />
Sicht eines Spielers auf Zuschauer
<br />
Fotografiert von NASL
</span>
</a>
</li>
<li>
<a class="gallery slided" href="#nogo">
<span>
<img src="images/osl.jpg" alt="OSL" title="OSL">
<br />
OSL Korea Finals
<br />
</span>
</a>
</li>
<li>
<a class="gallery slidee" href="#nogo">
<span>
<img src="images/proleague.jpg" alt="ProLeague" title="ProLeague">
<br />
ProLeague Finals Korea
<br />
</span>
</a>
</li>
<li>
<a class="gallery slidef" href="#nogo">
<span>
<img src="images/wcgfinals.jpg" alt="WCG" title="WCG">
<br />
Finale der World Cyber Games in Busan
<br />
</span>
</a>
</li>
</ul>
</div>CSS Code:
Code:
/* The containing box for the gallery. */
#container {
position:relative;
width:770px;
height:350px;
margin:20px auto 0 auto;
border:1px solid #aaa;
}
/* Removing the list bullets and indentation */
#container ul {
padding:0;
margin:0;
list-style-type:none;
}
/* Remove the images and text from sight */
#container a.gallery span {
position:absolute;
width:1px;
height:1px;
top:5px;
left:5px;
overflow:hidden;
background:#fff;
}
/* Adding the thumbnail images */
#container a.gallery, #container a.gallery:visited {
display:block;
color:#000;
text-decoration:none;
border:1px solid #000;
margin:1px 2px 1px 2px;
text-align:left;
cursor:default;
}
#container a.slidea {
background:url(../images/dreamhackth.jpg);
height:60px;
width:93px;
}
#container a.slideb {
background:url(../images/mlgth.jpg);
height:60px;
width:93px;
}
#container a.slidec {
background:url(../images/nasl_nesteath.jpg);
height:60px;
width:93px;
}
#container a.slided {
background:url(../images/oslth.jpg);
height:60px;
width:93px;
}
* html #container a.slided {
height:60px;
width:93px;
}
#container a.slidee {
background:url(../images/proleagueth.jpg);
height:60px;
width:93px;
}
#container a.slidef {
background:url(../images/wcgfinalsth.jpg);
height:60px;
width:93px;
}
* html #container a.slidef {
width:91px;
width:93px;
}
/* set the size of the unordered list to neatly house the thumbnails */
#container ul {
width:198px;
height:386px;
}
#container li {
float:left;
}
/* move the thumbnails into the correct position */
#container ul {
margin:5px;
float:right;
}
/* change the thumbnail border color */
#container a.gallery:hover {
border:1px solid #fff;
}
/* styling the :hover span */
#container a.gallery:hover span {
position:absolute;
width:372px;
height:372px;
top:10px;
left:75px;
color:#000;
background:#fff;
}
#container a.gallery:hover img {
border:1px solid #fff;
float:left;
margin-right:5px;
}Jetzt hab ich jedoch das Problem, das ich die Thumbnail Bilder nicht einfügen kann. Das Feld bleibt da einfach leer. Und irgendwie hab ich da nen weißen Hintergrund, wo ich auch nicht weis wie ich ihn wegbekomme..
