✔ float funktioniert nicht

[sight011]

http://adrianl.bplaced.net/bilder.html


Das 5 Bild soll rechts von den anderen an oberster Stelle stehen - was amch ich falsch?

Ich hab es mit float left probiert und den div-container "bildercontainer" auf height="400" gesetzt, weil jedes Bild 100px hoch ist. Warum ist das Bild aber darunter und ignorriert die Einstellung des "bildercontainer"?


mfg.

 

[Maik]

Hi,

erstens greift das HTML-Attribut height="400px" in einem DIV-Element nicht, da es hierfür überhaupt nicht vorgesehen ist, siehe http://de.selfhtml.org/html/referenz/attribute.htm#div (aber selbst die entsprechende CSS-Formatierung würde hier nicht weiterhelfen), denn zweitens muß das umfliessende Element im HTML-Code nach dem zu umfliessenden Element genannt, und im Stylesheet mit einem entsprechenden Außenabstand versehen werden.

<div class="bildercontainer">

<!-- Ajax Bilder - Gallerie -->

<div class="thumbnail"><a href="http://adrianl.bplaced.net/images/becksimage.jpg" rel="lightbox[roadtrip]">
<img src="http://adrianl.bplaced.net/images/becksthumb.jpg" width="200" height="100" border=" 0" alt="" />
</a></div>

<div class="thumbnailc"><a href="http://adrianl.bplaced.net/images/messeimage.jpg" rel="lightbox[roadtrip]">
<img src="http://adrianl.bplaced.net/images/messethumb.jpg" width="200" height="100" border=" 0" alt="" />
</a></div>

<div class="thumbnaila"><a href="http://adrianl.bplaced.net/images/drummerimage.jpg" rel="lightbox[roadtrip]">
<img src="http://adrianl.bplaced.net/images/drummerthumb.jpg" width="200" height="100" border=" 0" alt="" />
</a></div>

<div class="thumbnailb"><a href="http://adrianl.bplaced.net/images/fluegelimage.jpg" rel="lightbox[roadtrip]">
<img src="http://adrianl.bplaced.net/images/fluegelthumb.jpg" width="200" height="100" border=" 0" alt="" />
</a></div>

<div class="thumbnailb"><a href="http://adrianl.bplaced.net/images/violineimage.jpg" rel="lightbox[roadtrip]">
<img src="http://adrianl.bplaced.net/images/violinethumb.jpg" width="200" height="100" border=" 0" alt="" />
</a></div>

<!-- Ajax Bilder - Gallerie Ende-->

</div>

.thumbnail{
width: 200px;
display: block;
border: 0px;
float: left;
}

.thumbnaila{
width: 200px;
float: left;
display: block;
border: 0px;
clear: left;
}

.thumbnailb{
width: 200px;
display: block;
border: 0px;
clear: left;
}

.thumbnailc{
width: 200px;
margin-left: 200px;
border: 0px;
}

mfg Maik

 

[sight011]

Super hat bestens geklappt!

http://adrianl.bplaced.net/bilder.html

clear ist zum umfließen richtig - mfg

//edit:

Schade mir ist jetzt gerade aufgefallen, das die Reihenfolge der Bilder, wenn ich eins anklicke, von link nach rechts läuft und nicht von oben nach unten

... kann man daran auch noch was drehen?

 

[Maik]

Die Bilder werden in der Lightbox in der Reihenfolge präsentiert, wie sie im HTML-Code notiert sind.

Eine Möglichkeit, dem entgegenzuwirken, wäre die Grafiken bzw. DIV-Boxen mit einer absoluten Positionierung aus dem normalen Textfluß zu nehmen, da somit ihre Reihenfolge im Markup unabhängig von ihrer Ausrichtung / Position in der Seitendarstellung ist.

<div class="bildercontainer">

<!-- Ajax Bilder - Gallerie -->

<div class="thumbnail" id="a"><a href="http://adrianl.bplaced.net/images/becksimage.jpg" rel="lightbox[roadtrip]">
<img src="http://adrianl.bplaced.net/images/becksthumb.jpg" width="200" height="100" border=" 0" alt="" />
</a></div>

<div class="thumbnail" id="b"><a href="http://adrianl.bplaced.net/images/drummerimage.jpg" rel="lightbox[roadtrip]">
<img src="http://adrianl.bplaced.net/images/drummerthumb.jpg" width="200" height="100" border=" 0" alt="" />
</a></div>

<div class="thumbnail" id="c"><a href="http://adrianl.bplaced.net/images/fluegelimage.jpg" rel="lightbox[roadtrip]">
<img src="http://adrianl.bplaced.net/images/fluegelthumb.jpg" width="200" height="100" border=" 0" alt="" />
</a></div>

<div class="thumbnail" id="d"><a href="http://adrianl.bplaced.net/images/violineimage.jpg" rel="lightbox[roadtrip]">
<img src="http://adrianl.bplaced.net/images/violinethumb.jpg" width="200" height="100" border=" 0" alt="" />
</a></div>

<div class="thumbnail" id="e"><a href="http://adrianl.bplaced.net/images/messeimage.jpg" rel="lightbox[roadtrip]">
<img src="http://adrianl.bplaced.net/images/messethumb.jpg" width="200" height="100" border=" 0" alt="" />
</a></div>

<div class="thumbnail" id="f"><a href="http://adrianl.bplaced.net/images/techniqueimage.jpg" rel="lightbox[roadtrip]">
<img src="http://adrianl.bplaced.net/images/techniquethumb.jpg" width="200" height="100" border=" 0" alt="" />
</a></div>

<!-- Ajax Bilder - Gallerie Ende-->

</div>

.thumbnail { 
position:absolute;
width:200px;
height:100px;
}
#a {
top:0;
left:0;
}
#b {
top:100px;
left:0;
}
#c {
top:200px;
left:0;
}
#d {
top:300px;
left:0;
}
#e {
top:0;
left:200px;
}
#f {
top:100px;
left:200px;
}

mfg Maik

 

[sight011]

Das ist ja der Hamme,super Support - dafür gab es auch schon eine Renomée

P.S.: ICh probier das gleich morgen mal aus - klingt sehr logsich was du schreibst