Uli: DIV oder SPAN nebeneinander in einem DIV

Beitrag lesen

  • Die im obigen Posting erwähnten drei Angebote  werden nur zu zweit angezeigt,

Alos: Mit dem obigen Posting ist dies gemeint:
Es sollen sowohl ein Logo als auch ein Mini-Bild in jedem Angebots-DIV oben links und oben rechts plaziert werden:

|-------------|  |-------------|  |-------------|
||----|   |--||  ||----|   |--||  ||----|   |--||
||    |   |  ||  ||    |   |  ||  ||    |   |  ||
||----|   |--||  ||----|   |--||  ||----|   |--||
|Text         |  |             |  |             |
|-------------|  |Text         |  |Text         |
                 |             |  |             |
|-------------|  |-------------|  |-------------|
||----|   |--||
||    |   |  ||  |-------------|  |-------------|
||----|   |--||  ||----|   |--||  ||----|   |--||
|             |  ||    |   |  ||  ||    |   |  ||
|Text         |  ||----|   |--||  ||----|   |--||
|             |  |             |  |             |
|             |  |Text         |  |Text         |
|             |  |-------------|  |             |
|-------------|                   |-------------|
                 |-------------|
|-------------|  ||----|   |--||  |-------------|
||----|   |--||  ||    |   |  ||  ||----|   |--||
||    |   |  ||  ||----|   |--||  ||    |   |  ||
||----|   |--||  |             |  ||----|   |--||
|             |  |Text         |  |             |
|Text         |  |-------------|  |Text         |
|             |                   |             |
|-------------|                   |-------------|

Hübsch, nicht wahr?
Dies ist also der Mittelteil (Top, Left und Right fehlen in der Ansicht), wobei die Angebote senkrecht, also spaltenweise verteilt werden, so dass sie unterschiedliche Höhen haben können.

Insgesamt sind im left und right Teil die Navigationen in Blöcken (Conten-Management), jene wieder in DIVs sind.
Stand der Dinge heute: (Fast) alles klappt, so wie es soll.

Bis auf: Die Spalten der Angebote erstrecken sich nicht fest die volle Breite. Die Spalten skallieren zwar etwas mit, aber wenn der Browser kleiner wird, lappt irgendwann die rechte Navigation darüber und wird er größer, vergrößert sich auch der Abstand immer mehr.

Die Breite der Spalte wird in PHP berechnet und ausgegeben:

$maxcol=3;
$width=floor(100/$maxcol)-10;
[...]
echo "<div class="spalte" style="width:$width%">".$spaltentext."</div>\n";

Dies ist das CSS:

.plakat {border:1px dotted #A0A0A0; padding:5; margin-bottom:4px; width:100%; float:left; }
.spalte {float:left;margin-right:6px;padding:0;}
.footer {clear:both;margin-top:80px;}
.blockleft {padding:5; margin-bottom:4px;}
.blockright {padding:5; margin-bottom:4px;}

BODY {
 padding:0px; background:url('back.gif'); font-family:Verdana, Arial, Helvetica, Sans-Serif;
 margin: 0px;

}

#top {
 margin: 0px 0px 0px 0px;
 padding: 0px;
 background: #336799;
 height: 100px; /* ie5win fudge begins */
 voice-family: ""}"";
 voice-family:inherit;
 height: 80px;
 }
html>body #top {
 height: 80px; /* ie5win fudge ends */
 }
#left {
 position: absolute;
 top: 80px;
 left: 0px;
 padding: 0px;
 background: #336799;
 width: 150px; /* ie5win fudge begins */
 voice-family: ""}"";
 voice-family:inherit;
 width: 120px;
 height: 100%;
 }
html>body #left {
 width: 120px; /* ie5win fudge ends */
 }
#middle {
 margin: 0px 140px 0px 130px;
 padding: 0px;
 }
#right {
 position: absolute;
 top: 80px;
 right: 0px; /* Opera5.02 will show a space
 at right when there is no scroll bar */
 margin: 0px;
 padding: 0px;
 border: 1px solid #ccc;
 background: #d3e2ea;
 width: 150px; /* ie5win fudge begins */
 voice-family: ""}"";
 voice-family:inherit;
 width: 120px;
 }
html>body #right {
 width: 120px; /* ie5win fudge ends */
 }

Ob Du oder jemand anders mit alle dem was anfangen kann?

Ok - noch ne Frage:
Mach ich das posten hier richtig über das Web? Ich finde meine eigene Frage hier kaum weider, geschweige denn, dass andere diese Diskussion überhaupt entdecken.

Uli