[CSS] 3 Column Layout, dnyamische Mitte bleibt leer ohne Text

-=Renegade=- · 20. Januar 2008

[CSS] 3 Column Layout, dynamische Mitte bleibt leer ohne Text

Hi!

Also, ich hab ein Layout mit 3 Spalten erstellt, wobei die mittlere Spalte sich automatisch an die Breite anpasst und die beiden äußeren (zwei Bilder) immer gleich groß bleiben. Das ganze funktioniert auch ganz gut, doch der Hintergrund der mittleren Box wird nur dann gefüllt, wenn dort ein Text steht. Sobald man jedoch einen fixen Wert vergibt, funktioniert das ganze System nicht mehr. Hat irgendwer eine Lösung für mich?

HTML File:

HTML:

    <div class='ASCs_con'>	
	<div class='ASCs_cb_l'></div>
	<div id='ASCs_cb_m'>
		<div class='ASCs_cb_m_s'>
                  Text
		</div>
	<div class='ASCs_cb_r'></div></div></div>

CSS File:

Code:

.ASCs_con {
  margin-top:30px;
  min-width:892px;
}

.ASCs_cb_l {
  background-image:url(../images/ASCs_CB_L.png);
  background-repeat:no-repeat;
  position: absolute;
  margin:0px;
  border:0;
  float:left;
  left:0;
  width:314px;
  height:355px;
}

#ASCs_cb_m {
  background-image:url(../images/ASCs_CB_M.png);
  background-repeat:repeat-x;
  margin: 0 288px 0 314px;
  padding:10px 0;
  height:355px;
  border:0;
  float:left;
}

.ASCs_cb_m_s {
  text-align:justify;
  font-family:'Times New Roman', sans-serif;
  font-style:normal;
  font-size:1em;
  margin:0;
  padding:0; padding-right:16px;
  max-height:330px;
  overflow:auto;
  float:left;
}

.ASCs_cb_r {
  background-image:url(../images/ASCs_CB_R.png);
  background-repeat:no-repeat;
  position: absolute;
  margin:0px; margin-top:-10px; margin-left:-30px;
  border:0;
  float:left;
  right:0;
  width:288px;
  height:355px;
}

Vielen Dank im Voraus

so long
Renegade

Crizzo · 21. Januar 2008

AW: [CSS] 3 Column Layout, dynamische Mitte bleibt leer ohne Text

Nimm den beiden "Ränden" "position:absolute" ---> "static".

Wieso lässt du die Mitte "floaten"? Nimm das auch mal raus.

Und nenne die mal sinnvoll um...das ist ja grausam.

-=Renegade=- · 22. Januar 2008

Die Position:absolute haben schon ihre Berechtigung, ohne gehts nicht.

Float war tatsächlich überflüssig und somit auch der Fehler, jetzt gehts, danke.

Die Bennenung mag für einen Außenstehenden vllt schwer nachzuvollziehen sein, aber intern lässt es sich deutlich angenehmer mit Abkürzungen arbeiten, wenn man halt weiß, was sie bedeuten

so long
Renegade

Crizzo · 27. Januar 2008

-=Renegade=- schrieb:
Die Position:absolute haben schon ihre Berechtigung, ohne gehts nicht.

Erklär mal, was die dort machen sollen.

-=Renegade=- · 27. Januar 2008

Das Design baut darauf auf, dass die rechte und linke Spalte immer gleich bleiben, während die mittlere den restlichen Platz einnimmt, der im Browserfenster übrig bleibt.

Nimmt man die position:absolute raus bzw ersetzt man sie durch static, verrutscht das ganze Design.

Insofern bin ich jetzt damit zufrieden, weil alles läuft so wie ich es mir vorstelle

so long
Renegade

Crizzo · 1. Februar 2008

Naja, ich würde die rechten/linken Spalten per float ausrichten, eine Breite definieren und dem mittleren Teil nur noch die Abstände nach Links/Rechts geben und schon passt er sich dynamisch an.

Suche

[CSS] 3 Column Layout, dnyamische Mitte bleibt leer ohne Text

-=Renegade=-

Lt. Junior Grade

Crizzo

Redakteur

-=Renegade=-

Lt. Junior Grade

Crizzo

Redakteur

-=Renegade=-

Lt. Junior Grade

Crizzo

Redakteur

Ähnliche Themen