so, ich habe die drei erarbeiteten lösungen online gestellt:
+ es ist eine lösung von 'arrgghh'
+ die lösung von coding und
+ meine tabellenlösung
hier findet man sie:
http://www.hydrotip.de/friends/test2.html
seht euch den quelltext an. dort sind sämtliche formatierungen und css-answeisungen enthalten. die 3 lösungen biten jetzt alles was wir brauchen. einen container der sich dynamisch der bildgrösse anpaßt und einen container der einen umbruch erzeugt.
hier nochmal die 3 lösungen im quelltext.
Code:
<!-- Tabellenlösung von dirk -->
<style type="text/css">
<!--
/* Dirks Lösung */
table.rechts, table.links, table.umbruch
{
background: #e5e5e5;
float: right;
border: 1px #CCCCCC solid;
margin: 3px;
}
table.links
{
float: left;
}
table.umbruch
{
float: none;
}
td.grey
{
padding: 2px;
text-align: center;
font-size: 0.8em
}
-->
</style>
<p>Tabellenlösung von Dirk:</p> <br />
<table class="links">
<tr><td class="grey"><img src="../images/blumenlogo.jpg" /></td></tr>
</table>
<table class="links">
<tr><td class="grey"><img src="../images/blumenlogo.jpg" /></td></tr>
</table>
<table class="umbruch">
<tr><td class="grey"><img src="../images/blumenlogo.jpg" /></td></tr>
</table>
das soll erreicht werden. negativ is hierbei nur, das diese lösung nicht mit container erzeugt wurde, sondern mit tabellen die nur per css gesteuert werden. wenn man sich den quelltext ansieht sieht man das ich hier keinen break brauche der text fließt unter dem letzten bild weiter.
<br /><br /><br />
<!-- ########################################################################### -->
<!-- Lösung von argh -->
<style type="text/css">
<!--
/* ========================================== */
/* Lösung von argh */
.bildboxlinks, .bildboxrechts
{
width: auto;
display: block;
float: left;
height: auto;
border: 2px solid #123456;
background-color: #456789;
color: #FFFFFF;
text-align: center;
padding: 10px;
margin: 3px;
}
.bildboxrechts
{
float: right;
}
.break
{
clear:both;
}
-->
</style>
<p>Lösung von argh mit umbruch:</p> <br />
<div class="bildboxlinks"><img src="../images/blumenlogo.jpg" /></div>
<div class="bildboxlinks"><img src="../images/blumenlogo.jpg" /></div>
<div class="bildboxlinks"><img src="../images/blumenlogo.jpg" /></div>
<div class="break"> </div>
Das hilft aber wirklich.
Und wenn man einen Offenen Kamin mit Glasscheiben hat, bekommt man die am Besten sauber, wenn man Zeitungspapier nass macht, in die Asche tupft und dann die Scheiben abreibt...nach 8 Jahren und zig professionellen Mitteln hat mir meine Oma den Tipp gegeben als sie mal gesehen hat, wie ich mich abrackere um die Scheibe sauber zu kriegen - und es funktioniert....
<br /><br /><br />
<!-- ########################################################################### -->
<style type="text/css">
<!--
/* ========================================== */
/* Codings Lösung */
<style type="text/css">
<!--
#rowframe{
padding:10px;
background-color : #456789;
}
.picframe{
float:left;
background-color : #cccccc;
border : medium dotted Fuchsia;
}
.bildbox{
background-color : #c6c3c6;
padding:10px;
}
-->
</style>
<!-- Lösungsansatz von Coding -->
<p>Lösung von Coding mit umbruch</p>
<div style="width: 100%;">
<div class="picframe">
Übertitel Bild 1 <br>
<img class="bildbox" src="../images/blumenlogo.jpg" alt=""><br>
Untertitel Bild 1
</div>
<div class="picframe">
Übertitel Bild 2 <br>
<img class="bildbox" src="../images/blumenlogo.jpg" alt=""><br>
Untertitel Bild 2
</div>
<div class="picframe">
Übertitel Bild 3 <br>
<img class="bildbox" src="../images/blumenlogo.jpg" alt=""><br>
Untertitel Bild 3
</div>
</div>
<div style="width: 100%; clear: left;">
Lösung mit Umbruch. Siehe HTML-Quellcode. Getestet im
IE, Firefox, Opera, Netscape und Mozilla. bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla
</div>