✔ mittlere Spalte soll sich dynamisch anpassen

K

kalterjava

Erfahrenes Mitglied
Hallo und ein frohes Neues! :)

Ich habe ein Problem mit einem Layout meiner Seite. Ich möchte gerne, dass sich die mittlere Spalte dynamisch anpasst. Soll heißen, wenn ich das Fenster von rechts nach links verkleinere, so soll sich die Spalte in der Mitte auch verkleinern.
Ich habe schon ein paar Sachen ausprobiert (so wie es jetzt ist, macht man es 100% nicht:-) aber mit relative Angaben sind alle Boxen gleich gesprungen) und das ist jetzt der Stand der Dinge s. Anhang.

2 Probleme:

1.) Die mittlere Spalte verkleinert sich, aber die Miniboxen überlagern bei zu kleinem Fenster den Text in der Mitte, was nicht schön ist. Sprich, die rechte Spalte ist nicht abhängig von der mittleren Spalte

2.) bei zu kleinem Fenster, springt die rechte Spalte unter alle anderen , was das Layout zerreißt.

So soll es z.B. von der Aufteilung und der Funktionsweise aussehen:
http://www.moodle.de/


Abstände rechts und links überall gleich. Mittlere Spalte verkleinert sich. Ist das Fenster zu klein, wandern die Spalten nicht einfach drunter, sondern bleiben so stehen wie auf der Beispielseite.

Wenn jmd. einen Tipp hat, wär das super!

Danke und viele Grüße
 

Anhänge

Hi,

dir auch ein "Frohes Neues" :)

Hab mir das Attachment näher angeschaut, und empfehle dir innerhalb der Box #wrapper folgendes Markup:

Code: 
<div id="wrapper">

<div id="spalte_li">
Hier steht später das Navigationsmenü mit all den vielen Links
</div>

<div id="spalte_re">
        <div class="title_box">Nachrichten</div>
        <div class ="mini_box">Minibox</div>
</div>

<div id="spalte_mitte">
Hier wird später der Content aufgeführt. Was es da alles zu sehen gibt, da sind wir alle mal richtig gespannt Hier wird später der Content aufgeführt. Was es da alles zu sehen gibt, da sind wir alle mal richtig gespannt
</div>

<div clear="left"></div>

</div><!--End wrapper-->

in Verbindung mit dieser überarbeiteten Fassung deines Stylesheets:

Code: 
#seite{
        width:100%;
        min-width:974px;
        margin: 0 auto;
        background-color:#AABBFF;
        /*float:left;*/
}


#header{
        position:relative;
        /*width:974px;*/
        width:100%;
        height:70px;
        background-color:#000066;
        /*float:left;*/
}

#header_underline{
        position:relative;
        /*width:974px;*/
        width:100%;
        height:15px;
        background-color:#EFEFEF;
        /*float:left;*/
}

#spalte_li{
        /*position:absolute;*/
        padding:15px;
        margin-left:10px;
        margin-right:10px;
        width:160px;
        background-color: #AABBFF;
        float:left;
        display:inline;
}

#spalte_mitte{
        position:relative;
        padding:15px;
        margin:0 180px 0 210px; /* sorgt fuer dynamische Breite */ 
        /*left:200px;*/
        /*width:60%;*/
        min-height:400px; /*fuer neue Browser*/
        height:auto !important; /*fuer neue Browser*/
        height:400px; /*für IE< Version 7*/
        /*background-color: #FDCAFE;*/
        /*float:left;*/
}



#spalte_re{
        position:relative;
        padding:15px;
        padding-right:-10px;
        width:150px;
        /*width:15%;*/
        margin-left:10px;
        min-height:400px; /*fuer neue Browser*/
        height:auto !important; /*fuer neue Browser*/
        height:400px; /*für IE< Version 7*/
        /*background-color: #FDCAFE;*/
        float:right;
}


mfg Maik
 
Ich probier es gleich aus - vielen Dank schonmal!

EDIT: Hat wunderbar geklappt! Ich habe gesehen, dass du die div-Reihenfolge der Spalten geändert hast - also zuerst links, dann rechts und erst dann die Mitte. War dies der Hauptgrund, warum das bei mir nicht so geklappt hat?

Vielen dank nochmals!
 
Zuletzt bearbeitet:
Hi,

neben der CSS-Formatierung, war dies auch ein Grund für die Fehlinterpretationen ;)

mfg Maik
 
OK thanks. :) Jetzt möchte ich oben für Header auch so etwas einbauen und der Text in der Mitte sollte sich etwas mehr zusammendrücken lassen. Aber mit deinen Vorgaben kann ich jetzt weiterprobieren.
 
Als Zugabe empfehle ich dir den Artikel How To Clear Floats Without Structural Markup, um im HTML-Code das inhaltsleere "clearing"-DIV

Code: 
<div clear="left"></div>

durch ein paar wenige CSS-Regeln zu ersetzen, die in der derzeitigen Modellstruktur auf die Box #wrapper angewendet werden :)

Code: 
<div id="wrapper" class="clearfix"> ... </div>


lg Maik
 
Ok - vielen Dank! hab das jetzt so eingebaut.

Mir ist gerade aufgefallen, dass im FF 2.0 der Text in der Mitte eine Zeile weiter oben angezeigt wird (das war schon vor der clearfix-Aktion), als im IE 7. Na ich schau mal.
Falls ich es nicht hinbekomme melde ich mich. Danke!
 
Hab den Fehler gerade gefunden - thx.

die Styleangaben header und header_underline waren doppelt in der CSS-Klasse drin. Ich dachte ich hätte meine Angaben gelöscht. Also das Problem ist gelöst. Wie ich die mittlere Spalte mehr zusammenschieben kann habe ich jetzt auch herausgefunden, indem ich einfach der Seite eine geringere Breite vergebe. Prima, jetzt kann ich mich an das Problem des Headers versuchen.
 
Sorry, jetzt habe ich doch noch ein "kleines Problem"

Wenn ich ein Bild in die dynamische Spalte (also spalte_mitte) einfüge, so bremst die spalte_re nicht, sondern überlappt das Bild. Ich möchte nämlich mit einer Klasse alle Bilder gleich formatieren:

PHP: 
<div id="spalte_mitte">
Hier wird später der Content aufgeführt. Was es da alles zu sehen gibt, da sind wir alle mal richtig gespannt Hier wird später der Content  aufgeführt. Was es da alles zu sehen gibt, da sind wir alle mal richtig gespannt.
<br>
<div class="bilder"><img src="bilder/header_mitte.gif"></div>
Text geht weiter
</div>


CSS:
.bilder {
	position:relative;
	margin-top: 5px;
	margin-bottom: 5px;
	border: none;
                      float: left;
}

Der Text soll einfach unter dem Bild weiterlaufen.
Das Testbild hat eine Breite von 559px und eine Höhe von 70px

Wäre super, wenn jmd. die Lösung hätte. Danke!
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück