[HTML/CSS] DIVs nebeneinaner festmachen

hurga_gonzales · 4. August 2005

Hallo,

wie das Topic schon sagt, möchte ich für die Webseitengestaltung drei DIVs nebeneinander sozusagen "festmachen". Meine Anzeige klappt schon gut, aber der Firefox hat das Problem, dass beim ersten Aufruf der Seite die mittlere Spalte unter die linke geschoben wird und erst durch drücken von F5, bzw. strg-r die Siete richtig geladen wird. Mit scheint, dass Firefox da ein Cache Problem hat, aber ich lasse mich gerne eines Besseren belehren.

Des Weiteren möchte ich, wenn die rechte Spalte NICHT angezeigt wird, dass die mittlere sich auf die rechte Seite, an die Stelle, wo sich die rechte Spalte sonst befinden würde, erweitert. Leider habe ich es bis jetzt nicht geschafft, dass sich die mittlere Spalte automatisch skaliert. Wichtig ist an dieser Stelle, dass aus Applikationsgründen die sich beiden Seitenspalten NICHT in der Breite verändern dürfen, wenn der User beispielsweise eine niedrigere Auflösung hat als die Optimierung der Webseite (in diesem Fall 1024x768 Punkte). Lediglich der mittlere DIV soll skalieren.

Mein Code in Kurzform:

HTML:

.mainontent		{ position: absolute; top: 290px; width: 980px; height: 100%; padding: 0px; margin: auto; }
.contenttable		{ display: table; height: auto; width: 100%; vertical-align: top; }
.content			{ display: column; float: left; width: 50%; margin-bottom: 20px; }
.leftcolumn			{ display: column; float: left; width: 180px; margin-right: 15px; }
.rightcolumn		{ display: column; float: right; width: 250px; margin-left: 15px; text-align: left; }

<!--- Ausgabe --->
<div class="mainContent">
	<div class="contenttable">
		<!--- Linke Spalte --->
		<div class="leftcolumn">
			<!--- News-Kasten --->
			......
		</div>
		<!--- Linke Spalte ENDE --->
		<!--- Rechte Spalte --->
		<div class="rightcolumn">
			<!--- MiniWarenkorb --->
			<!--- diverse Infos rechte Spalte --->
			.......
		</div>
		<div class="content">............</div>
	</div>
</div>

Ich danke schon mal für jegliche Hilfe.

Hurga

syntec · 4. August 2005

Wie machst Du denn fest ob das rechte Div kommt oder nicht? Falls Du das per PHP machst
kannst Du doch an der gleichen stelle ein anderes Div setzen falls die quasi 3 Spalte nicht
kommt. Ansonsten sind die 50% wahrscheinlich nicht sehr glücklick gewählt - leg doch mal
ein paar Prozent oben drauf...

hurga_gonzales · 4. August 2005

Also, danke erstmal für die Antwort.
Der mittlere DIV hat 50%, weil er so für alle Browser passt, wenn rechts eine Spalte anzuzeigen ist.

Ich arbeite mit Cold Fusion und Java. Es handelt sich aber hier keineswegs um eine Angelegenheit der verwendeten Skriptsprache, sondern um ein reines HTML/CSS Problem. Ich könnte die rechte Spalte ja auch per Javascript ausblenden und hätte das gleiche Problem.

Grundsätzlich gilt:

Gibt es Inhalt für die rechte Spalte, wird diese angezeigt und die Mittlere somit verschmälert - gibt es keinen, wird die rechte Spalte nicht angezeigt und die mittlere Spalte verbreitert sich auf Ihre ursprüngliche Breite PLUS den Platz der rechten Spalte.

100% funktioniert NICHT, weil die mittlere Spalte, dann die rechte "verdrängt" und diese nach unten umbrohen wird.

HIIIILFE :-)

Hurga

Floele · 4. August 2005

display:column; gibt es nicht.

Was die automatische Anpassung anbetrifft geht es so zumindest teilweise (der Textfluss passt sich an, bei der Box selbst ist es aber anders.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title>XHTML 1.0</title>
 <style type="text/css">
 div#left {
 float:left;
 width:20em;
 border:solid 1px blue;
 }
 
 div#right {
 /* hier display:none; hinzufügen wenn rechte Spalte weg soll */
 float:right;
 margin-left:1em;
 width:20em;
 border:solid 1px green;
 }
 
 div#content {
 margin-left:21em;
 border:solid 1px red;
 }
 </style>
 </head>
 <body>

 <div id="left">
 Foo bar Foo bar Foo bar Foo bar 
 Foo bar Foo bar Foo bar Foo bar 
 Foo bar Foo bar Foo bar Foo bar 
 Foo bar Foo bar Foo bar Foo bar 
 Foo bar Foo bar Foo bar Foo bar 
 </div>

 <div id="right">
 Foo bar Foo bar Foo bar Foo bar 
 Foo bar Foo bar Foo bar Foo bar 
 Foo bar Foo bar Foo bar Foo bar 
 Foo bar Foo bar Foo bar Foo bar 
 Foo bar Foo bar Foo bar Foo bar 
 </div>
 
 <div id="content">
 Foo bar Foo bar Foo bar Foo bar 
 Foo bar Foo bar Foo bar Foo bar 
 Foo bar Foo bar Foo bar Foo bar 
 Foo bar Foo bar Foo bar Foo bar 
 Foo bar Foo bar Foo bar Foo bar 
 </div>
 
 
 </body>
</html>

hurga_gonzales · 5. August 2005

Hi,

danke, aber so geht das nicht. Gemeint war außerdem display: table-column-group, aber das hab ich eh verworfen.

Wie man meinem Code entnehmen kann, gibt es einen übergeordneten DIV, der "position: absolute;" ist und sich in der Anzeige unter der Navigation befindet, aber im Code oberhalb (für Suchmaschinen).

Und innerhalb des absoluten DIVs sollen sich die drei Spalten befinden und die mittlere soll sich dem zur Verfügung stehen Platz anpassen. Das heißt, gibt es eine rechte Spalte, ist die mittlere schmaler, gibt es sie nicht, dann nimmt die mittlere Spalte den Platz der rechten zusätzlich ein, verbreitert sich sozusagen.

HILFE bitte

Danke
Hurga

Benjamin_L · 5. August 2005

hier ist auch ein Beispiel:

www.fcjengen.de

hurga_gonzales · 5. August 2005

Danke, aber das entspricht nicht gen Vorgaben.

Wie gesagt - oben die Navigation in der Anzeige und drunter der Inhalt mit 3 Spalten. Da im Code aus Suchmaschinen Gründen der Inhalt mit den drei Spalten über der Navigation stehen muss, habe ich den Inhalts-DIV als "position: absolute; top: 280px;" definiert. Das funktioniert ja wunderprächtig. Nur leider habe ich wie gesagt das Problem, dass wenn die rechte spalte des Inhalts NICHT angezeigt wird, die mittlere sich nicht auf die restliche Breite ausdehnt.

Irgendwie versteht das keiner.

Hurga

hurga_gonzales · 5. August 2005

Gut, ich habs mal ein bisschen vereinfacht:

HTML:

.maincontent	{ position: absolute; top: 290px; width: 980px; height: 100%; padding: 0px; margin: auto; }
.content		{ margin-bottom: 20px; }
.leftcolumn	{ float: left; width: 16em; margin-right: 2em; border: 0; }
.rightcolumn	{ float: right; width: 22em; margin-left: 2em; border: 0; text-align: left; }

<div class="maincontent">
	<div class="leftcolumn">
	.....inhalt....
	</div>
	<div class="rightcolumn">
	....Inhalt....
	</div>
	<div class="content">
	....Inhalt....
	</div>
</div>

Erklärung:

body = 980px breit und zentriert, das wird vererbt
maincontent = absolut positionierter Inhalts-Layer mit 980px Breite (ich möchte gar NICHT, dass der sich zusammen schieben läßt; die Seite berücksichtigt 1024x768 und aus)
leftcolumn = linke Spalte
rightcolumn = rechte Spalte
content = Inhalt, der sich, wenn rechte Spalte nciht da ist, auf die volle Breite nach rechts ausweiten soll

So wie oben, ist es leider falsch. Der Inhalt (DIV class=content) umfließt die linke und rechte Spalte. Ich möchte, aber dass alle Spalten 100% in der Höhe haben, was heißt, dass die linke und rechte Spalte in der Höhe der mittleren angepasst sein müssen und mitwachsen.

Danke nochmal
Hurga

Suche

[HTML/CSS] DIVs nebeneinaner festmachen

hurga_gonzales

Captain

syntec

Lt. Commander

hurga_gonzales

Captain

Floele

Cadet 3rd Year

hurga_gonzales

Captain

Benjamin_L

Commander

hurga_gonzales

Captain

hurga_gonzales

Captain

Ähnliche Themen