Drei Divs nebeneinander

[ridda]

moin,

ich möchte gern drei divs nebeneinander platzieren.
und zwar folgend:
div_links und div_rechts bekommen eine feste breite und div_mitte soll die restliche,vorhandene breite einnehmen wie etwa diese tabelle:

<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100px">&nbsp;</td>
    <td>&nbsp;</td>
    <td width="100px">&nbsp;</td>
  </tr>
</table>

ich hab schon einiges ausprobiert aber ich komm leider nicht drauf :(

über diesen gibts steht noch ein banner und der body hat ein padding

body {
    background-color: #CCCCCC;
    padding: 3px 5% 1em 5%;
 height:100%;
 }

der cont_rechts muss bündig mit dem rechten rand des banner sein

#banner{
  width:100%;
  ...
  }

[Ingo Turski]

Hi,

ich hab schon einiges ausprobiert aber ich komm leider nicht drauf :(

schau' Dir einfach mal das Beispiel http://de.selfhtml.org/css/layouts/anzeige/kopfundfuss.htm an und lies Dir ggfls. auch das Kapitel durch.

freundliche Grüße
Ingo

[Peter]

Kann bitte jemand ein fertiges HTML Beispiel geben, ohne ein CSS zu verwenden. (was dann im DIV stehen muss). Mir scheint das sollte didaktisch gehen. Mich wäre das nützlich.
<DIV....> </DIV>
<DIV....> </DIV>
<DIV....> </DIV>

[Peter]

Hier drei Vorschläge, der erste ist am besten.
PS und ohne CSS dargestellt, es geht inline. PPS Im NotePad hat's je auf 1 Zeile Platz, sieht ordentlicher aus.

<div style="position:relative">
  <div style="position:absolute; left:0; width:100; background-color:red;"  >rechter Text</div>
  <div style="position:absolute; right:0;width:100; background-color:green;">linker Text </div>
  <div style="position:absolute; left:100; right:100; background.color:silver">mittlerer Text</div>
</div>

<br><br><br>

<div style="position:relative">
  <div style="float:left; width:100; background-color:red;"  >rechter Text</div>
  <div style="float:right;width:100; background-color:green;">linker Text </div>
  <div style="position:absolute; left:100; right:100; background.color:silver">mittlerer Text</div>
</div>

<br><br><br>

<div style="position:relative">
  <div style="float:left; width:100; background-color:red;"  >rechter Text</div>
  <div style="float:right;width:100; background-color:green;">linker Text </div>
  <span style="background.color:silver">mittlerer Text</span>
</div>

[Peter]

Dann stelle ich noch überrascht einen Druckfehler fest: background.color anstatt background-color. Dem Internet Explorer macht das aber nichts aus - es ist dasselbe!

[Ingo Turski]

Hi,

Hier drei Vorschläge, der erste ist am besten.

Nö - die sind alle Murks.

PS und ohne CSS dargestellt, es geht inline.

was willst Du damit sagen?

<div style="position:relative">

_Ich_ weiß zwar, wozu dies dient, aber ohne Erklärung sollte das nicht gepostet werden.

<div style="position:absolute; left:0; width:100;

Dir ist klar, daß absolute Positionierung hierzu überflüssig ist und bei standardkonformer Interpretation diese fehlerhaften Angaben ignoriert werden?

<div style="position:absolute; left:100; right:100;

Auch hier wieder ungültige Werte. Und der einzige Browser, der diese vielleicht schlucken würde, kann das nicht umsetzen.

<div style="position:relative">
  <div style="float:left; width:100; background-color:red;"  >rechter Text</div>
  <div style="float:right;width:100; background-color:green;">linker Text </div>
  <span style="background.color:silver">mittlerer Text</span>
</div>

Hier ist die position-Angabe überflüssig und das inline-Element völlig deplatziert.

freundliche Grüße
Ingo

[Peter]

Ingo, hast Du das ausprobiert,  besonders mit den verschachtelten position:relative und position:absolute?

PS und ohne CSS dargestellt, es geht inline.
was willst Du damit sagen?

dass man, um es zu diskutieren, die style-Elemente auch direkt in die tags schreiben kann.

Gruss, Peter

[Psycho]

Nö - die sind alle Murks.

Und wieso?

Positionierungseigenschaften zuverwenden hat definitiv den Vorteil das die Rheinfolge der div's im Quelltext egal ist, und sich somit nach der logischen Rheinfolge richten kann. Das ist bei Float nur bedingt möglich.

[Ingo Turski]

Hi,

Nö - die sind alle Murks.

Und wieso?

weil sie allesamt fehlerhaft und - standardkonform - zu ignorieren waren.

Positionierungseigenschaften zuverwenden hat definitiv den Vorteil das die Rheinfolge der div's im Quelltext egal ist, und sich somit nach der logischen Rheinfolge richten kann. Das ist bei Float nur bedingt möglich.

Nur daß diverse Nachteile damit inkauf genommen werden müssen. Und wer sich nicht mit CSS auskennt, sollte mMn die Finger von absoluter Positionierung lassen. Nicht zuletzt auch deshalb bezeichnete ich den Code-Vorschlag als Murks.

freundliche Grüße
Ingo

[Peter]

Hi,

Nö - die sind alle Murks.

Und wieso?
weil sie allesamt fehlerhaft und - standardkonform - zu ignorieren waren.

Positionierungseigenschaften zuverwenden hat definitiv den Vorteil das die Rheinfolge der div's im Quelltext egal ist, und sich somit nach der logischen Rheinfolge richten kann. Das ist bei Float nur bedingt möglich.

Nur daß diverse Nachteile damit inkauf genommen werden müssen. Und wer sich nicht mit CSS auskennt, sollte mMn die Finger von absoluter Positionierung lassen. Nicht zuletzt auch deshalb bezeichnete ich den Code-Vorschlag als Murks.

freundliche Grüße
Ingo

Ich erlaube mir die Bemerkung, dass meine drei absoluten DIVS (bzw. die beiden anderen Varianten) in einem relativen DIV verpackt waren, und somit sich mit "absoluten" Massen auf die Grenzen des relativen DIVS bezogen. Nicht etwa aufs Fenster oder den Bildschirm.
Warum das nicht gut, oder fehlerhaft, oder nicht standardkonform sei, bitte erkläre es mir. Ich bin neu im JS/CSS, aber nicht neu im bithandling. Genau dieser Effekt von position:absolute; ist im SELFHTML in deutscher Sprache beschrieben. Wenn das nicht funktionieren sollte?

Und was ist der Standard für - sich im CSS nicht auskennen, oder auskennen?

[Ingo Turski]

Hi,

Ich erlaube mir die Bemerkung, dass meine drei absoluten DIVS (bzw. die beiden anderen Varianten) in einem relativen DIV verpackt waren, und somit sich mit "absoluten" Massen auf die Grenzen des relativen DIVS bezogen. Nicht etwa aufs Fenster oder den Bildschirm.

schon klar, weshalb ich auch anmerkte:

<div style="position:relative">
_Ich_ weiß zwar, wozu dies dient, aber ohne Erklärung sollte das nicht gepostet werden.

Warum das nicht gut, oder fehlerhaft, oder nicht standardkonform sei, bitte erkläre es mir.

Fehlerhaft, weil z.B. "100" kein korrekter Wert für die Eigenschaft ist - die Einheit fehlt. Daß der IE hier "px" rät und nicht "cm", ändert an der Fehlerhaftigkeit nichts; fehlerhafte CSS-Angaben sind standardkonform zu ignorieren.

Ich bin neu im JS/CSS, aber nicht neu im bithandling. Genau dieser Effekt von position:absolute; ist im SELFHTML in deutscher Sprache beschrieben. Wenn das nicht funktionieren sollte?

Aber mit korrekten Werten. Allerdings: warum hast Du ausgerechnet position:absolute hier herausgesucht? SELFHTML beschreibt auch viele andere Eigenschaften und was die Nutzung der Eigenschaften betrifft, emfehle ich Dir das Kapitel CSS-basierte Layouts. Dort findest Du nur äußerst selten und nur dort, wo es wirklich gebraucht wird position:absolute.

freundliche Grüße
Ingo

[Peter]

Warum das nicht gut, oder fehlerhaft, oder nicht standardkonform sei, bitte erkläre es mir.
Fehlerhaft, weil z.B. "100" kein korrekter Wert für die Eigenschaft ist - die Einheit fehlt. Daß der IE hier "px" rät und nicht "cm", ändert an der Fehlerhaftigkeit nichts; fehlerhafte CSS-Angaben sind standardkonform zu ignorieren.

Interessant. (1) könnte im SelfHTML, nächste Version stehen, dass die Masseinheit obligatorisch sei. (2) Der Frontpage macht bei einer Tabelle von 100 pixel nur width="100". Ohne px. Ich hab's rasch nachgeschaut. Die andere (3) Frage ist noch, ob die Anführungszeichen ".." nötig sind. Der Frontpage schlägt sie im Tag-Editor nie vor.

Gruss, Peter

[Ingo Turski]

Hi,

Interessant. (1) könnte im SelfHTML, nächste Version stehen, dass die Masseinheit obligatorisch sei.

Warum? An keiner Stelle ist eine CSS-Angabe ohne die erforderliche Einheit (0 bzw. den Sonderfall bei line-height ausgenommen)- wenn Du eine findest, melde dies bitte im Bugtracker. Es sollte doch wohl selbstverständlich sein, daß die Einheit anzugeben ist - ansonsten müßte der Bowser die Angabe ignorieren oder wie der IE raten, welche Einheit gemeint ist.

(2) Der Frontpage macht bei einer Tabelle von 100 pixel nur width="100". Ohne px.

In HTML ist das auch korrekt (hier gibt es nur px und %) - obwohl Frontpage ein Synomym für fehlerhaften Code ist. ;-)

Die andere (3) Frage ist noch, ob die Anführungszeichen ".." nötig sind. Der Frontpage schlägt sie im Tag-Editor nie vor.

Wie gesagt... Vergiß Frontpage, wenn es um standardkonformen Code geht (der auch ohne die Fehlerkorrektur des IE funktionieren soll). Attribute sind natürlich in Anführungsstriche zu setzen, auch wenn Microsoft-Produkte diese gern entfernen.

freundliche Grüße
Ingo

[Peter]

Hi,

Interessant. (1) könnte im SelfHTML, nächste Version stehen, dass die Masseinheit obligatorisch sei.
Warum? An keiner Stelle ist eine CSS-Angabe ohne die erforderliche Einheit (0 bzw. den Sonderfall bei line-height ausgenommen)

Damit's ein Einsteiger sieht, etwas Redundanz und Hinweise auf schon gemachte Fehler didaktisch nützlich ist beim self-lernen. Weils zudem in html ohne die Masseinheit geht. Weils keinen CSS-Checker gibt, der das ankreidet.

Warum? An keiner Stelle ist eine CSS-Angabe ohne die erforderliche Einheit (0 bzw. den Sonderfall bei line-height ausgenommen)

Dann kommt es irgendwann auch nicht mehr auf die gestalterische und inhaltliche Aufarbeitung an. Und kannst Du es, wie ein russisches Lehrbuch, im Fliessatz schreiben. Steht alles irgendwo. Schliesslich.

SELFHTML enthält sowohl einführende Kapitel für Anfänger als auch reine Nachschlagekapitel für Profis. Die Dokumentation ist eine Mischung aus Tutorial und Referenz.

[Ingo Turski]

Hi,

Weils zudem in html ohne die Masseinheit geht.

Da geht es _nur_ ohne Maßeinheit (=px) oder mit "%".

Weils keinen CSS-Checker gibt, der das ankreidet.

Aber sicher doch moniert der CSS-Validator ungültige Werte.

freundliche Grüße
Ingo

[Peter]

Hi,

Interessant.

Hi Ingo, darf ich noch folgendes fragen (da Du experte bist).
Ich versuchte (1) <div margin-left=1cm> und es ging. es steht aber nicht in der htmlreferenz. Deswegen änderte ich auf (2) <div style="margin-left:1cm;">

Ist (1) erlaubt oder nicht?
Danke und Gruss, Peter

[Ingo Turski]

Hi,

Ich versuchte (1) <div margin-left=1cm> und es ging.

in welchem Browser?
In HTML gibt es kein Attribut "margin-left" und keinen Attributwert "1cm" - und wenn es das gäbe,  müßte der Wert in Anführungsstriche.

Deswegen änderte ich auf (2) <div style="margin-left:1cm;">

Das ist syntaktisch richtig, aber für die Bildschirmdarstellung wenig sinnvoll (und inline-Styles sollten ohnehin vermieden werden).

freundliche Grüße
Ingo

[Thomas J.S.]

Hallo,

Ich versuchte (1) <div margin-left=1cm> und es ging.

Das ist ziemlich unmöglich. Ich möchte sogar dabei soweit gehen, dass du etwas übersehen hast und dachtest es würde gehen.

es steht aber nicht in der htmlreferenz.

Weil es ein "margin-left"-Attribut für HTML-Elemente nicht gibt.

Deswegen änderte ich auf (2) <div style="margin-left:1cm;">
Ist (1) erlaubt oder nicht?

Das ist erlaubt und korrekt, auch wenn "cm" als Einheit für Webseiten denkbar ungeeignet ist.

Grüße
Thomas

[Psycho]

Die Nachteile sind mir durch aus bewusst. Auch das die Codebeispiel nicht zur direkten Nacharmung zuempfehlen sind ist mir klar. (-> Standardkonformietet!)

Als alternative Vorschlag (zu Float) haben Sie aber IMO trotztdem Wert.

freundliche Grüße
Psycho

[Zeromancer]

Hallo ridda,

div_links und div_rechts bekommen eine feste breite und div_mitte soll die restliche,vorhandene breite einnehmen wie etwa diese tabelle:

HTML
***************

  
<div id="header"></div>  
<div id="links"></div>  
<div id="rechts"></div>  
<div id="inhalt"></div>  

CSS
***************

  
body {  
  background-color: #CCCCCC;  
  padding: 3px 5% 1em 5%;  
  height:100%;  
}  
#header ...  
#links {  
  width:100px;  
  float:left;  
}  
#rechts {  
  width:100px;  
  float:right;  
}  

Wichtig ist, dass die gefloateten Elemente vor dem Inhalt im Quelltext erscheinen.

Mit freundlichen Grüßen,
André

[ridda]

ersteinmal danke für eure hilfe

@ ashura ich habe die id so gewählt, damit es hier im forum eventuell verstädnlicher wird und wenn ich es so mache wie du es vorgeschlagen hast bekommt der container in der mitte
#content_container ;)
nicht die volle breite zugeordnet, die verfügbar wäre, sonder nur einen teil

das gleiche gilt für den beitrag von zeromancer, da er fast das gleiche vorgeschlagen hat :)

ich werde mir nochmal die seiten anschauen, die als link angegeben worden sind,
bin aber natürlich froh über jedes weitere posting, zu dem thema :)

[Ashura]

Hallo ridda.

div_links und div_rechts bekommen eine feste breite und div_mitte soll die restliche,vorhandene breite einnehmen wie etwa diese tabelle:

Sofern „div_links“ „div_rechts“ für IDs oder Klassen stehen, solltest du dir aussagekräftigere Namen überlegen, die etwas über ihren Inhalt aussagen.
Wer sagt, dass die beiden Elemente immer jeweils links und rechts angeordnet werden und du das Layout niemals veränderst?

Zu deinem Problem (heute mal in ASCII-Art):

+---+----------+---+
  |   |          |   |
  |   |          |   |
  | 1 |     2    | 3 |
  |   |          |   |
  |   |          |   |
  +---+----------+---+

Links http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=floaten lässt du die Bereiche 1 und 2.
Rechts floaten lässt du Bereich 3.

Einen schönen Montag noch.

Gruß, Ashura

[Ingo Turski]

Hi,

div_links und div_rechts bekommen eine feste breite und div_mitte soll die restliche,vorhandene breite einnehmen wie etwa diese tabelle:

+---+----------+---+
  |   |          |   |
  |   |          |   |
  | 1 |     2    | 3 |
  |   |          |   |
  |   |          |   |
  +---+----------+---+

Links http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=floaten lässt du die Bereiche 1 und 2.

Nein. Überlege Dir bitte, welche Beite ein gefloatetes Element hat und welche Breiten gewünscht sind.

freundliche Grüße
Ingo

[Ashura]

Hallo Ingo.

Nein. Überlege Dir bitte, welche Beite ein gefloatetes Element hat und welche Breiten gewünscht sind.

Und?

Einen schönen Montag noch.

Gruß, Ashura

[Zeromancer]

Hallo Ashura,

Und?

+---+----------+---+
  |   |          |   |
  |   |          |   |
  | 1 |     2    | 3 |
  |   |          |   |
  |   |          |   |
  +---+----------+---+

Links floaten lässt du die Bereiche 1 und 2.

Du meintest sicher "nur 1 links floaten" und "3 rechts floaten". "2" sucht sich sich schon seinen Platz. ;-)

Mit freundlichen Grüßen,
André

[Ashura]

Hallo Zeromancer.

Du meintest sicher "nur 1 links floaten" und "3 rechts floaten". "2" sucht sich sich schon seinen Platz. ;-)

Nö. Versuch ruhig einmal, dem div#two das float wegzunehmen.

Einen schönen Montag noch.

Gruß, Ashura

[Ingo Turski]

Hi,

Nein. Überlege Dir bitte, welche Beite ein gefloatetes Element hat und welche Breiten gewünscht sind.

Und?

dann gib hier mal div#two { background:red; } an - vorausgesetzt Du hast das nicht zufällig als Hintergrundfarbe im Browser eingestellt. Das klappt so nur, wenn der Inhalt breit genug oder es egal ist, wie breit die Box tatsächlich ist (d.h. keine border oder Hintergrundfarbe hierfür definiert werden muß).

freundliche Grüße
Ingo

[Ashura]

Hallo Ingo.

Und?

dann gib hier mal div#two { background:red; } an - vorausgesetzt Du hast das nicht zufällig als Hintergrundfarbe im Browser eingestellt.

Ah, jetzt verstehe ich was du meinst.

Das klappt so nur, wenn der Inhalt breit genug oder es egal ist, wie breit die Box tatsächlich ist (d.h. keine border oder Hintergrundfarbe hierfür definiert werden muß).

Ja, stimmt.

Nichts für ungut.

Einen schönen Dienstag noch.

Gruß, Ashura

[ridda]

sorry für den doppelt post, aber ich ordne den beitrag mal hier an, habe mich zuvor vertan

ersteinmal danke für eure hilfe

@ ashura ich habe die id so gewählt, damit es hier im forum eventuell verstädnlicher wird und wenn ich es so mache wie du es vorgeschlagen hast bekommt der container in der mitte
#content_container ;)
nicht die volle breite zugeordnet, die verfügbar wäre, sonder nur einen teil

das gleiche gilt für den beitrag von zeromancer, da er fast das gleiche vorgeschlagen hat :)

ich werde mir nochmal die seiten anschauen, die als link angegeben worden sind,
bin aber natürlich froh über jedes weitere posting, zu dem thema :)

[Ashura]

Hallo ridda.

Warum antwortest du mir nicht direkt?

@ ashura ich habe die id so gewählt, damit es hier im forum eventuell verstädnlicher wird und wenn ich es so mache wie du es vorgeschlagen hast bekommt der container in der mitte
#content_container ;)
nicht die volle breite zugeordnet, die verfügbar wäre, sonder nur einen teil

Kann ich nicht nachvollziehen.
Der mittlere Bereich nimmt den verbliebenen Platz ein. (Dass du Bereich 1 und 3 eine Breite verpassen musst, sollte klar sein.)

Einen schönen Montag noch.

Gruß, Ashura

[Detlef G.]

Hallo ridda

ich möchte gern drei divs nebeneinander platzieren.
und zwar folgend:
div_links und div_rechts bekommen eine feste breite und div_mitte soll die restliche,vorhandene breite einnehmen wie etwa diese tabelle:

Schau dir mal die Seite an, die ich mir gemacht habe, um float zu verstehen:
http://d-graff.de/selfhtml/dreidivs.html

Auf Wiederlesen
Detlef

[ridda]

ok ok, ich glaub euch jetzt :)

war sehr freundlich von euch hier gleich zu helfen.
ich hab auch schon anderes erlebt in diversen foren...
ich mach mich jetzt mal dran das problem zu lösung

[Psycho]

Tach,

bin neu hier.

Würde vorschlagen:
1. Die drei div's in ein div zupacken.
2. Container-div auf position: relativ setzen.
3. Die beiden flankierenden div's absolut Positionieren.
4. Das mittlere div mit margin-left und margin-right so zusammen zustauchen das es vollständig sichtbar ist.

Vorteil: Die Reinfolge der div's im Quelltext ist egal.

Nachteil: Wenn das mitlere div in der Höhe kleiner ist als die aüsseren div's kommt es zu unansehnlichen Ergebnissen.

Wer Rechtschreibfehler findet darf sie behalten.