zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden css layout problem mit 3 zentrierten div´s

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.08.2005, 14:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.08.2005
Beiträge: 3
horst befindet sich auf einem aufstrebenden Ast
Standard css layout problem mit 3 zentrierten div´s

ich hab in meiner seite 3 divs verwendet.
- das äußerste zum zentrieren des contents in der mitte (dunkler rand) (760px)
- da drin nen weisses div (740px)
- da wiederrum drin der eigentliche content (720px)

Code:
<div id="middleGrau">
<div id="middleWeiss">
<div id="content">
   <table>
         [MEIN CONTENT]
   </table>
</div>
</div>
</div>
das css:
Code:
// zentriert mittig, dunkel grauer rahmen
#middleGrau {
	position: absolute;
	visibility: visible;
	width: 760px;
	left: 50%;
	margin-left: -380px;
	background-image:url(/templates/images/bg_schatten.gif);
	height: 100%;
	min-height: 750px;
	z-index:10;
	border:1px solid #ff0000;
}

// zentrierte weisse fläche auf dem dunkel grauen div
#middleWeiss {
	position: absolute;
	visibility: visible;
	left: 10px;
	width: 740px;
	background-color:#ffffff;
	height: 100%;
	min-height: 750px;
	z-index:20;
}

// eig. content, auch zentriert auf den beiden anderen divs
#content {
	position: absolute;
	visibility: visible;
	left: 10px;
	width: 720px;
	height: 100%;
	z-index:30;
}
Sieht so aus:


Mein Problem ist, dass wenn ich einige sehr lange Seiten habe, dann werden die beiden äußeren Container nicht der Länge des Content-Containers angepasst, also der Content läuft über die beiden "Rahmen-Container" hinaus.

Siehe hier:


Ich raffe gerad nicht so ganz warum das so ist.
Ich hätte eben gern, das alle 3 Container gleich lang sind in der Höhe.
Mit dem height:100%; maximiere ich den Container auf Bildschirmgröße, aber eben leider nicht auf Seitenlänge...

Kann mir jemand von euch auf die Sprünge helfen?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.08.2005, 14:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 23.03.2005
Beiträge: 1.033
Swoop befindet sich auf einem aufstrebenden Ast
Standard

die Lösung deines Problems findest du wenn du mal float in die suchfunktion eingibst..
__________________
Shibby.....

Mein Blog
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.08.2005, 14:44
Neuer Benutzer
neuer user
 
Registriert seit: 18.08.2005
Beiträge: 9
\infty befindet sich auf einem aufstrebenden Ast
Standard

Ein absolut positioniertes Element streckt seinen Elterncontainer nicht!

Verwende statt dessen:
Code:
position: relative;
Mit Zitat antworten
  #4 (permalink)  
Alt 18.08.2005, 15:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.08.2005
Beiträge: 3
horst befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von \infty
Ein absolut positioniertes Element streckt seinen Elterncontainer nicht!

Verwende statt dessen:
Code:
position: relative;
Und ich dachte immer das absolute und relative Angaben nicht gemischt verwendet werden dürfen... Ich war bisher davon ausgegangen das entweder nur absolute oder nur relative Angaben benutzt werden dürfen...
*Etwas verwirrt*.
Mit Zitat antworten
  #5 (permalink)  
Alt 18.08.2005, 19:40
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.784
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von horst
Und ich dachte immer das absolute und relative Angaben nicht gemischt verwendet werden dürfen... Ich war bisher davon ausgegangen das entweder nur absolute oder nur relative Angaben benutzt werden dürfen...
Du darfst alles einsetzen, was nötig ist.
IMHO brauchst du für dein Layout weder absolute noch relative Positionierung.
Horizontales Zentrieren macht man besser mit margin:0 auto - denn dann verschwinden die Inhalte nicht unerreichbar nach links, wenn das Browserfenster sehr schmal ist.

Ich verstehe auch nicht, weshalb du drei verschachtelte Container brauchst. Die Eigenschaften margin, border und padding sind dir bekannt?
Und warum steckst du deinen Inhalt in eine Tabelle?

Grüße
fricca
Mit Zitat antworten
  #6 (permalink)  
Alt 19.08.2005, 09:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.08.2005
Beiträge: 3
horst befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca
Ich verstehe auch nicht, weshalb du drei verschachtelte Container brauchst. Die Eigenschaften margin, border und padding sind dir bekannt?
Hmm, ich denke ich werde den Aufbau wohl auch nochmal überarbeiten.
3 Container sind wohl wirklich etwas überdimensioniert, da ist was dran, aber ich fand den Aufbau so bisher (für mich) recht übersichtlich!

Naja, mal sehen.


Danke für die Tipps und Anregungen.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Doctype und CSS Problem tech CSS 3 29.05.2009 20:16
problem mit layout --> testcase andip CSS 5 29.02.2008 14:10
css layout problem fz21z CSS 0 30.01.2008 22:41
layout mit css - problem xxlcss CSS 1 30.12.2005 02:25
problem ausrichtung grafik und rand (css layout) celine@23 Barrierefreiheit 1 28.12.2005 13:05


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:37 Uhr.