Seite mit vielen Bildern

[Darter]

hmm wenn ich die position in relative verändere zeigt es das große Bild auch immer an der selben position an nur mit der Veränderung, dass die anderen kleinen Bilder nach unten rutschen und das sollte ja überhaut nicht sein. Die kleinen BIlder sollen alle immer an der Position bleiben an der ich das will.

EDit: ah sorry hab was falsch gemacht so geht es jetzt thx


EDIT2: Aber wie bekomme ich es nun hin auch Bilder darunter zu setzen. wie gesagt die Seie soll einfach voll mit Bildern werden Bukd an Bild.

 

[Maik]

Bei mir verutscht hier nichts nach unten, wenn eines der großen Bilder angezeigt wird.

Es sei denn, das <span> ist relativ positioniert

mfg Maik

 

[Maik]

EDIT2: Aber wie bekomme ich es nun hin auch Bilder darunter zu setzen. wie gesagt die Seie soll einfach voll mit Bildern werden Bukd an Bild.

Dann stock mal die Galerie etwas auf, damit du auch in den vollen Genuß kommst

<ul class="gallery">
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li>
</ul>

mfg Maik

 

[Darter]

ah klasse . Aber eins passt ja noch nicht. Die vergrößerten Bilder werden im Hintergrund also unter den kleien Bildern angezeigt, dass soll ja nicht so ein ;-)

 

[Maik]

Nachlesen und selbständiges Umsetzen steigert bekanntermaßen den Lerneffekt

z-index (Schichtposition bei Überlappung)

mfg Maik

 

[Darter]

hmm tut mir leid aber ich bekomms nicht hin. Habs probiert aber funtz einfach nicht.

 

[Maik]

Wie sieht denn dein Versuch konkret aus?

mfg Maik

 

[Darter]

so hab ichs versucht

<!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" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-02-11" />

<title>tutorials.de | Demo Darter</title>

<!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" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-02-11" />

<title>tutorials.de | Demo Darter</title>

<style type="text/css">
/* <![CDATA[ */
.gallery {
    margin:0;
    padding:0;
    list-style:none;
    float:left;
}
.gallery li {
    display:inline;
    position: relative;
}
.gallery li span {
    display:none;
}
.gallery li:hover span {
    z-index:1;
    display:block;
    position:absolute;
    top:2em;
    left:2em;
}
/* ]]> */
</style>

<!-- Für IE6 -->
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"></script>
<![endif]-->
<!-- Ende für IE6 -->

</head>
<body>



<ul class="gallery">
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>
    <li><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" width="100" height="100" alt="" /> <div style="z-index:1"><span><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif" alt="" /></span></li></div>


</ul>

</body>
</html>

 

[Maik]

so hab ichs versucht

.gallery li:hover span {
    z-index:1;
    display:block;
    position:absolute;
    top:2em;
    left:2em;
}

1 ist k1 ;-)

Spoiler

Eins ist keins - darf's denn auch ein bisschen mehr sein?

mfg Maik

 

[Darter]

wie was wo was 1 ist k1