html bildergalerie

[shajan92]

Einen schönen Montagmorgen euch allen :),

Ich habe vor mir eine bildergalerie in meine eBay auktionen einzufügen. habe auch schon erfolgreich einen code mit hilfe dieser website generiert:

CSS - Galerie - Generator | MachHTML - Webdesign - Tool

das problem ist jetzt nur das die kleineren bilder rechts vom großen hauptbild angeordnet sind.
ich würde gerne wissen wie ich diese "kleinen bilder" unter das "große bild" bekomme.

mfg. shajan92

 

[Trüffelkrieger]

Kannst du mal den Code posten? Auch das CSS.

 

[shajan92]

Kannst du mal den Code posten? Auch das CSS.

Also hab jetzt 3 mal das selbe bild eingefügt einfach mal um den code generieren zu können:

<!-- Erstellt mit MachHTML - (C) machhtml.de -->
<style type="text/css">
<!--
a.ThumbLink { position:absolute; top:0px; left:0px; text-decoration:none; }
a:link.ThumbLink { text-decoration:none; }
a:active.ThumbLink { text-decoration:none; }
a:visited.ThumbLink { text-decoration:none; }
a:hover.ThumbLink { text-decoration:none; cursorointer; }
span.spanthumb { width:70px; height:70px; border:1px outset #000000; text-align:center; }
span.spanthumb:hover { border:1px solid red; }
a#ThumbLink1:hover div.divbild1 { display:block; }
#divthumb1 { position:absolute; top:0px; left:647px; }
div.divbild1 { display:block; width:640px; height:480px; text-align:center; }
a#ThumbLink2:hover div.divbild2 { display:block; }
#divthumb2 { position:absolute; top:0px; left:721px; }
div.divbild2 { display:none; width:640px; height:480px; background-color:#FFFFFF; text-align:center; }
a#ThumbLink3:hover div.divbild3 { display:block; }
#divthumb3 { position:absolute; top:73px; left:647px; }
div.divbild3 { display:none; width:640px; height:480px; background-color:#FFFFFF; text-align:center; }

-->
</style>
<div style="clear:both;position:relative;display:block;width:795px;height:480px;background-color:#FFFFFF;margin:5px;margin-left:auto;margin-right:auto;margin-top:10px;">

<!-- Bild Nr. 1 -->
<a href="http://klickkomplizen.de/blog/wp-content/uploads/google_logo.jpg" target="_blank" id="ThumbLink1" class="ThumbLink">
<span id="divthumb1" class="spanthumb">
<img src="http://klickkomplizen.de/blog/wp-content/uploads/google_logo.jpg" width="70" height="29" alt="" border="0">
</span>
<div id="divbild1" class="divbild1">
<img src="http://klickkomplizen.de/blog/wp-content/uploads/google_logo.jpg" width="640" height="267" alt="" border="0">
</div>
</a>
<!-- Bild Nr. 2 -->
<a href="http://klickkomplizen.de/blog/wp-content/uploads/google_logo.jpg" target="_blank" id="ThumbLink2" class="ThumbLink">
<span id="divthumb2" class="spanthumb">
<img src="http://klickkomplizen.de/blog/wp-content/uploads/google_logo.jpg" width="70" height="29" alt="" border="0">
</span>
<div id="divbild2" class="divbild2">
<img src="http://klickkomplizen.de/blog/wp-content/uploads/google_logo.jpg" width="640" height="267" alt="" border="0">
</div>
</a>
<!-- Bild Nr. 3 -->
<a href="http://klickkomplizen.de/blog/wp-content/uploads/google_logo.jpg" target="_blank" id="ThumbLink3" class="ThumbLink">
<span id="divthumb3" class="spanthumb">
<img src="http://klickkomplizen.de/blog/wp-content/uploads/google_logo.jpg" width="70" height="29" alt="" border="0">
</span>
<div id="divbild3" class="divbild3">
<img src="http://klickkomplizen.de/blog/wp-content/uploads/google_logo.jpg" width="640" height="267" alt="" border="0">
</div>
</a>
</div>

 

[Trüffelkrieger]

Also hab jetzt 3 mal das selbe bild eingefügt einfach mal um den code generieren zu können:

<!-- Erstellt mit MachHTML - (C) machhtml.de -->
<style type="text/css">
<!--
a.ThumbLink { position:absolute; top:0px; left:0px; text-decoration:none; }
a:link.ThumbLink { text-decoration:none; }
a:active.ThumbLink { text-decoration:none; }
a:visited.ThumbLink { text-decoration:none; }
a:hover.ThumbLink { text-decoration:none; cursor:pointer; }
span.spanthumb { width:70px; height:70px; border:1px outset #000000; text-align:center;  }
span.spanthumb:hover { border:1px solid red; }
a#ThumbLink1:hover div.divbild1 { display:block; }
#divthumb1 { position:absolute; top:0px; left:647px; }
div.divbild1 { display:block; width:640px; height:480px; text-align:center; }
a#ThumbLink2:hover div.divbild2 { display:block; }
#divthumb2 { position:absolute; top:0px; left:721px; }
div.divbild2 { display:none; width:640px; height:480px; background-color:#FFFFFF; text-align:center; }
a#ThumbLink3:hover div.divbild3 { display:block; }
#divthumb3 { position:absolute; top:73px; left:647px; }
div.divbild3 { display:none; width:640px; height:480px; background-color:#FFFFFF; text-align:center; }

-->
</style>
<div style="clear:both;position:relative;display:block;width:795px;height:480px;background-color:#FFFFFF;margin:5px;margin-left:auto;margin-right:auto;margin-top:10px;">

<!-- Bild Nr. 1 -->
<a rel="nofollow" href="http://klickkomplizen.de/blog/wp-content/uploads/google_logo.jpg" target="_blank" id="ThumbLink1" class="ThumbLink">
    <span id="divthumb1" class="spanthumb">
        <img src="http://klickkomplizen.de/blog/wp-content/uploads/google_logo.jpg" width="70" height="29" alt="" border="0">
    </span>
    <div id="divbild1" class="divbild1">
        <img src="http://klickkomplizen.de/blog/wp-content/uploads/google_logo.jpg" width="640" height="267" alt="" border="0">
    </div>
</a>
<!-- Bild Nr. 2 -->
<a rel="nofollow" href="http://klickkomplizen.de/blog/wp-content/uploads/google_logo.jpg" target="_blank" id="ThumbLink2" class="ThumbLink">
    <span id="divthumb2" class="spanthumb">
        <img src="http://klickkomplizen.de/blog/wp-content/uploads/google_logo.jpg" width="70" height="29" alt="" border="0">
    </span>
    <div id="divbild2" class="divbild2">
        <img src="http://klickkomplizen.de/blog/wp-content/uploads/google_logo.jpg" width="640" height="267" alt="" border="0">
    </div>
</a>
<!-- Bild Nr. 3 -->
<a rel="nofollow" href="http://klickkomplizen.de/blog/wp-content/uploads/google_logo.jpg" target="_blank" id="ThumbLink3" class="ThumbLink">
    <span id="divthumb3" class="spanthumb">
        <img src="http://klickkomplizen.de/blog/wp-content/uploads/google_logo.jpg" width="70" height="29" alt="" border="0">
    </span>
    <div id="divbild3" class="divbild3">
        <img src="http://klickkomplizen.de/blog/wp-content/uploads/google_logo.jpg" width="640" height="267" alt="" border="0">
    </div>
</a>
</div>

Was du ändern musst ist die absolute Positionierung in dem CSS Teil. Gib dort füt top nicht 0 an, sondern eine Zahl größer als die Höhe des großen Bildes. Dann verkleinerst du noch den left-Wert von jedem Thumb, ziehst meinetwegen den ersten Wert von allen ab (also 647), damit die Thumbs ganz links beginnen, und rechnest auf den Thumb, der noch in einer zweiten Zeile steht, die Differenz zwischen Thumb 1&2 drauf.