zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden Layout mit vier Boxen...

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.10.2005, 16:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.10.2005
Beiträge: 4
thailer befindet sich auf einem aufstrebenden Ast
Standard Layout mit vier Boxen...

Hallo miteinander,
bin schon länger auf der suche nach einer Lösung für mein Problem, hoffe ich finde sie hier

Zu meinem Problem, ich habe eine #page-box, welche relativ positioniert ist, um den gesamten Webinhalt mittig auszurichten. Darin sind drei weiter Boxen, #header-box, #content-box und #navi-box, enthalten, welche absolut positioniert sind. So weit so gut. Nun, wenn ich die #content-box fülle, dann geht die #page-box nicht mit auf, das selbe bei der #navi-box. Wenn ich nun in der #page-box das Attribut "overflow:auto;" setze, dann geht es, aber nur im Firefox und nicht im IE. Gibt es hierfür eine Lösung, welche ohne gebastel à la JavaScript auskommt?

Hier noch der Source:

Code:
<body>
<div id="page">page
  <div id="header">header</div>
  <div id="content">content</div>
  <div id="navi">navi</div>
</div>
</body>
Code:
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: normal;
	background-color: #CCCCCC;
	margin: 0px;
	padding: 0px;
	text-align: center;
}
#page {
	background-color: #FFFFFF;
	text-align: left;
	margin: auto;
	width: 900px;
	position: relative;
	overflow:auto;
}
#header {
	background-color: #00FF00;
	height: 150px;
	width: 900px;
	position: absolute;
	left: 0px;
	top: 0px;
}
#content {
	position: absolute;
	left: 0px;
	top: 150px;
	height: auto;
	width: 740px;
	background-color: #00CCFF;	
}

#navi {
	position:absolute;
	left:740px;
	top:150px;
	width:160px;
	background-color:#996699;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.10.2005, 16:36
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 20.02.2005
Beiträge: 1.045
Tigereye befindet sich auf einem aufstrebenden Ast
Standard

Sorry, aber ich werde aus deinem Text nicht schlau. Wie meinst du das, dass die Boxen "nicht mit aufgehen"??
BTW: Das position: relative; in #page kannst du dir sparen, ein einfachen margin:0 auto; tuts auch.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.10.2005, 16:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.10.2005
Beiträge: 4
thailer befindet sich auf einem aufstrebenden Ast
Standard

ja das schon, aber wenn ich die position der Box #page nicht auf relativ setze, dann ist der bezugspunkt (0-Punkt) der anderen Boxen nicht der der Box #page (im linken oberen Eck), sondern der des body!
Desweitern ist es ja so, dass wenn ich einfach zwei Boxen in einander habe, und ich in der inneren der beiden etwas schreibe, denn gehen beide Boxen auf, sofern ich nicht eine höhe der Box definiert habe, aber wenn ich diese absolut positioniere, dann eben nicht! Meine Frage ist jetzt, wie man das machen könnte!?
Mit Zitat antworten
  #4 (permalink)  
Alt 03.10.2005, 17:57
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 20.02.2005
Beiträge: 1.045
Tigereye befindet sich auf einem aufstrebenden Ast
Standard

Ich verstehe leider immer noch nicht, was du mit "aufgehen" meinst. Sollen die anderen Container mit größer werden, wenn der Content größer wird?? Dann such mal nach faux columns!
Hast du einen Link auf die Seite?
An deiner Stelle würde ich die ganze absolute und relative Positionierung weglassen! Wenn du #content und #navi jeweils float:left gibst und einfach jedes "position:absolute" und position:relative" löschst, wirds genauso dargestellt! Positionierung ist oft eine Fehlerquelle.
Mit Zitat antworten
  #5 (permalink)  
Alt 04.10.2005, 09:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.10.2005
Beiträge: 4
thailer befindet sich auf einem aufstrebenden Ast
Standard

ja, die anderen Conainer sollen mit grösser werden. Einen Link habe ich nicht, da das ein allgemeines Problem ist, welches ich habe.
Das stimmt, wenn ich die Positionierungs angaben weglasse, dann wirds genau so, nur ist es ja dann trotzdem relativ positioniert und zudem habe ich damit schlechte erfahrungen gemacht, weil der IE die abstände anders, meiner Meinung nach falsch, darstellt als z.b. der Firefox oder Opera! Darum würde ich es schon gerne absolut positionieren. Werde mal wie du gesagt hast nach "faux columns" nachschauen.
Mit Zitat antworten
  #6 (permalink)  
Alt 04.10.2005, 12:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
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 thailer
Das stimmt, wenn ich die Positionierungs angaben weglasse, dann wirds genau so, nur ist es ja dann trotzdem relativ positioniert
Nein, wie kommst du darauf?
Zudem lässt relative Positionierung im Gegensatz zu absoluter die Elemente im normalen Fluss.

Zitat:
und zudem habe ich damit schlechte erfahrungen gemacht, weil der IE die abstände anders, meiner Meinung nach falsch, darstellt als z.b. der Firefox oder Opera!
Dann musst du dem IE diese Fehler austreiben. Es gibt fast für alle Bugs des IE auch einen Bugfix.

Zitat:
Darum würde ich es schon gerne absolut positionieren.
Absolute Positionierung ist ein Irrweg. Damit stehen die Elemente in keiner Beziehung mehr zueinander, es kann sich also auch nichts mehr aneinander anpassen.

Grüße
fricca
Mit Zitat antworten
  #7 (permalink)  
Alt 04.10.2005, 12:18
Benutzer
neuer user
 
Registriert seit: 02.10.2005
Beiträge: 45
B. Scheuert befindet sich auf einem aufstrebenden Ast
Standard

Verstehe ich dich richtig, du schaffst es nicht die inneren Boxen korrekt zu positionieren?

Wenn das so ist, dann mach bitte folgendes:

Code:
#page { 
   background-color: #FFFFFF;
   margin: 0 0 0 -450px;
   padding: 0;
   width: 900px; 
   position: absolute; 
   left: 50%;
   overflow:auto; 
}
Dann lassen sich die inneren Boxen auch nach dieser (#page) ausrichten.
In deinem Fall richten sich die inneren Boxen nach dem Browser und nicht nach der #page Box.

Der Code ist auf jedenfall zu den wichtigsten Browsern (Firefox/Opera/IE) kompatiebel und wird identisch interpretiert.

Greetz B.
Mit Zitat antworten
  #8 (permalink)  
Alt 04.10.2005, 12:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
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 B. Scheuert
In deinem Fall richten sich die inneren Boxen nach dem Browser und nicht nach der #page Box.
Sorry, aber das stimmt so nicht. Auch ein relativ positioniertes Element dient als Positionierungsgrundlage für darin liegende absolut positionierte.
Deine Variante der horizontalen Zentrierung ist die schlechteste alle Möglichkeiten, da der Inhalt bei schmalem Viewport unerreichbar nach links verschwindet.

Grüße
fricca
Mit Zitat antworten
  #9 (permalink)  
Alt 04.10.2005, 12:25
Benutzer
neuer user
 
Registriert seit: 02.10.2005
Beiträge: 45
B. Scheuert befindet sich auf einem aufstrebenden Ast
Standard

Wenn der IE es aber nicht so interpretiert!
Der IE ist nunmal ein nicht wegzudenkender Browser, da kann ich nicht nur für Firefox oder Opera Seiten erstellen, zumal der Code so valide ist.

Ich verstehe deine Abneigung gegen den IE nich, in mehreren Threads verzichtest du auf eine vom User gewünschte Eigenschaft, die der IE eben anders interpretiert.

Sorry für meine Meinung, nimms dir nicht zu Herzen!

Schau dir meine Seite an, da nutze ich das auch so und ich finde alles bestens!
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 04.10.2005, 12:32
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
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 B. Scheuert
Wenn der IE es aber nicht so interpretiert!
Du irrst dich, das ist auch im IE kein Problem. Der kann das auch.
Bitte schau dir dieses Beispiel an, da geht's zwar eigentlich um vertikale Zentrierung - aber es ist auch horizontal zentriert:
fricca.funpic.de
edit: hmm, gerade nicht erreichbar.
Dann kopier dir den Code von hier:
http://www.xhtmlforum.de/viewtopic.php?p=34786#34786

Zitat:
Ich verstehe deine Abneigung gegen den IE nich, in mehreren Threads verzichtest du auf eine vom User gewünschte Eigenschaft, die der IE eben anders interpretiert.
Ich weiß nicht, wovon du sprichst.

Zitat:
Schau dir meine Seite an, da nutze ich das auch so und ich finde alles bestens!
Mach dein Browserfenster schmal und versuche an den linken Bereich des Inhalts zu kommen. Das finde ich völlig inakzeptabel.
Mit Zitat antworten
Sponsored Links
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
Split Layout mit vier Slides Cu Chullain Javascript & Ajax 0 16.01.2015 22:36
Problem mit Mittelspalte bei 3-Spalten Layout mit Boxen ToDoWaldi CSS 6 02.03.2013 21:02
3 Spalten Layout: Schrift läuft in andere Boxen nauen CSS 7 05.12.2011 15:39
Vertikales Layout - Floats - 2 Boxen nebeneinander grischa_sgd CSS 4 25.09.2007 15:55
Zentriertes Layout und Boxen darüber ==> Problem Steran CSS 1 03.01.2006 13:26


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:34 Uhr.