DIV oder SPAN nebeneinander in einem DIV

[uli]

Hallo,

ich habe ein dreispaltiges Layout (Tabelle), die Breite ändert sich je nach Fenstergröße.
In jeder Spalte werden diverse Angebote dargestellt, jedes in einem DIV. Je nach Breite verändern sich auch die Breiten der DIVs. Soweit alles klar und ok.

Nun sollen sowohl ein Logo als auch ein Mini-Bild in jedem Angebots-DIV oben links und oben rechts plaziert werden:

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

Per <tabelle> kein problem, aber ich suche eine CSS-Lösung.
Irgendwie finde ich nur Tuts mit absoluten Angaben, bei mir funktioniert das nicht, weil jede Position der inneren DIVs von der Breite des äußeren DIVs abhängt.

Wer kann helfen?

Uli

[Axel Richter]

Hallo,

Nun sollen sowohl ein Logo als auch ein Mini-Bild in jedem Angebots-DIV oben links und oben rechts plaziert werden:

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

Per <tabelle> kein problem, aber ich suche eine CSS-Lösung.

Solange nur zwei Bilder innerhalb eines Bereichs links und rechts stehen sollen und darunter Text, ist das auch mit CSS kein Problem ;-)

<div style="width:200px; border:1px solid black; float:left; margin:5px;">
  <img src="logo.gif" style="width:100px; height:100px; float:left;" alt="logo">
  <img src="bild.gif" style="width:50px; height:50px; float:right;" alt="bild">
<p style="clear:both;">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>

Problematisch wird die unterschiedliche Auslegung des Floatens von Blocklevel-Elementen. Da gibt es zwischen MSIE und den standardkonformen Browsern große Unterschiede.

viele Grüße

Axel

[Uli]

Hallo Axel,

wäre ich nie drauf gekommen, aber es klappt!

Danke
Uli

[HarryS]

Hallo Uli,

wäre ich nie drauf gekommen, aber es klappt!

bin ich wohl etwas  zu spät dran. Aber vielleicht ist
http://thenoodleincident.com/tutorials/box_lesson/boxes.html
für Dich auch noch von Interesse.

Grüße aus Nürnberg,
HarryS

[Ulrich Albrecht]

Vielen Dank,

bin ich wohl etwas  zu spät dran. Aber vielleicht ist

es ist nie zu spät ;-)

Bin mittlerweile dabei, die gesamte Seite von Tabellen zu befreien und so kommt mir Dein Link sehr gelegen.

Es geht nun um die gesamte Navigation, bei mir also der Klassiker: Top, left,middle, right.

Dafür gibt es ja wohl zwei Ansätze, einmal auf Deinem Link

http://thenoodleincident.com/tutorials/box_lesson/boxes.html

bzw. auch http://www.glish.com/css/7.asp und
noch http://www.webwriting-magazin.de/sogehts/csstutorial/tut12.html

Da bei mir im Mittelteil auch noch DIVs sind, gerät für mich die Sache allmählich ausser Kontrolle ;-)

• Die im obigen Posting erwähnten drei Angebote  werden nur zu zweit angezeigt,
• sie füllen nicht den gesammten middle-Bereich
• IE6 schaltet manchmal auf kursiv um

Der zweite, einfachrere Weg (dritter Link oben) ist weniger problematisch, aber ich bekomme dabei keinen beweglichen Mittelteil hin...

Ich befürchte, dass die Sache für CSS (oder für mich?) zu heftig ist, die in Tabellen trivial ist.
Ich werde aber noch nicht aufgeben, prinzipiell bin ich von den Möglichkeiten begeistert, auch wenn ich zudem befürchte, das ich erhebliche Browser-Kompatibilitäts-Probleme haben werde (da ich ziemlich wacklig auf diesem High-End-CSS-Niveau bin)
Leider bin ich noch nicht online, so daß ich Euch die Fehler nicht zeigen kann.

Uli

[HarryS]

Hallo Uli,

Bin mittlerweile dabei, die gesamte Seite von Tabellen zu befreien und so kommt mir Dein Link sehr gelegen.

Freut mich :-)

Es geht nun um die gesamte Navigation, bei mir also der Klassiker: Top, left,middle, right.

Dafür gibt es ja wohl zwei Ansätze, einmal auf Deinem Link

http://thenoodleincident.com/tutorials/box_lesson/boxes.html

bzw. auch http://www.glish.com/css/7.asp und
noch http://www.webwriting-magazin.de/sogehts/csstutorial/tut12.html

Da bei mir im Mittelteil auch noch DIVs sind, gerät für mich die Sache allmählich ausser Kontrolle ;-)

• Die im obigen Posting erwähnten drei Angebote  werden nur zu zweit angezeigt,
• sie füllen nicht den gesammten middle-Bereich
• IE6 schaltet manchmal auf kursiv um.

Ääääh wie meinst Du das jetzt?

Der zweite, einfachrere Weg (dritter Link oben) ist weniger problematisch, aber ich bekomme dabei keinen beweglichen Mittelteil hin...

Hmmmm Im Original (du meinst den von webwriting oder?) verkleinert er sich aber. Was hast Du denn verändert?

Ich befürchte, dass die Sache für CSS (oder für mich?) zu heftig ist, die in Tabellen trivial ist.
Ich werde aber noch nicht aufgeben, prinzipiell bin ich von den Möglichkeiten begeistert, auch wenn ich zudem befürchte, das ich erhebliche Browser-Kompatibilitäts-Probleme haben werde (da ich ziemlich wacklig auf diesem High-End-CSS-Niveau bin)

Gut so, Immer nur den einfachen Weg zu gehen ist doch langeweilig oder?
Und man kann ne menge dabei lernen (wenn man will ;-)

Also bis auf NS4x sollte das eigentlich in den meisten Browsern ganz gut funktionieren.
Hab übrigens noch ein sehr schönes und relativ einfaches Beispiel gefunden: http://skop.net/self/3spalten.html

Grüße aus Nürnberg,
HarryS

[Uli]

• 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

[HarryS]

Hallo Uli,

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.

Respekt, da hast Du Dir mit 'pure CSS' ganz schön was vorgenommen.

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.

Hmmmm so auf Anhieb schwierig was dazu zu sagen. Du willst also, daß sich auch die Breite der Angebots div skaliert und nicht nur der Abstand zwischen den divs richtig?
Obwohl ich an Deiner Stelle wahrscheinlich nur den Abstand skalieren würde, damit die Angebots-div immer weitgehend gleich aussehen (wegen der Bilder und Logos).

Daß die Bilder und Logos nicht mitskalieren ist Dir bestimmt schon klar, und wenn die images aneinanderstoßen kann das div nicht kleiner werden als die Breite der beiden images.
Hast Du schon mal einfach einen border um die Angebots-div gemacht, damit man genau sieht, ob jetzt der Innhalt oder der Zwischenraum skaliert?

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";

Oha sorry bei PHP bei ich leider ne Vollniete. Aber so wie ich das sehe, wird die Breite des div in % angegeben, somit sollte sie ja eigentlich skalieren *grübel*.

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

Wie gesagt das ist ein ganz schön heavy Teil, es wäre halt einfacher wenn man es sehen könnte aber das geht ja leider (noch) nicht.

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.

Och ich wüsste jetzt nicht, daß Du was falsch machst, aber das Forum ist halt seeeeehr gut besucht und ein Thread überlebt selten länger als ein paar Tage bevor er archiviert wird. Um Dein eigenes Posting besser zu finden, Kannst Du dich z.B. registrieren lassen http://forum.de.selfhtml.org/cgi-bin/fo_userconf Dann kannst Du Deinen Postings eine auffällige Farbe geben und noch viele andere Sachen einstellen dann findest Du Dich leichter ;-)

Tut mir leid, daß ich Dir nicht weiterhelfen konnte.

Grüße aus Nürnberg,
HarryS