[Erledigt] Problem mit 100% div

Buschdieb · 25.04.2011, 14:35

Hallo Leute,

ich habe mal wieder ein schönes Problem, dass mich seit Tagen aufhält.

Hier erstmal der Code:

HTML-Code:

<body>
      <div id="topbar">
      <!-- Menu Anfang -->
      <?php include("menu.php"); ?>
      <!-- Menu Ende -->
     </div>
      <div id="frontpage">
      <div class="pagelook">
        <!-- Login Maske Anfang -->
       	<?php include("login_form.php"); ?>
       	<!-- Login Maske Ende -->
      <div class="pagecover_bottom"></div>
      <div id="page"><h1>TEST</h1>fdhwquhfduwqh<div id="footer"</div></div>
      </div>
      </div>
    </body>

Hier der CSS Teil

Code:

#page{
z-index:400;
background-color: #CCCCCC;
width: 800px;
margin-top:auto;
margin-left:auto; 
margin-right:auto;
margin-bottom:0px;
min-height: 100%; /* Mindesth”he fur moderne Browser */
height:auto !important; /* Important Regel fur moderne Browser */
height:100%; /* Mindesth”he fur den IE */
overflow: hidden !important; /* FF Scroll-leiste */ 
}

#frontpage{
}
/* FRONTPAGE {{{ */
#frontpage .pagelook {
    background: url(../images/header.frontpage.bg.6.jpg) no-repeat top center;
    width: 100%;
    height: 313px;
    margin:0px
    padding:0px;
    }

#frontpage .pagecover_bottom {
  margin-top:300px;
  height: 49px;
  background: url(../images/frontcover_bottom.bg.gif) repeat-x bottom left #555a24;
  padding-bottom:0px;
  }

#footer{
background-color: #AAAAAA;
color: #000000;
text-align:center; 
height: 50px;
margin-top:50px;
padding:10px;

}

#topbar {
    height: 49px;
    background: url(/images/topbar.bg.gif) repeat-x bottom left #1c1e1f;
    /*background-color: #1c1e1f;*/
    background-color: #25211e;
    }

ich möchte, dass das div #page immer bis zum unteren Rand des Browser geht. In CSS hat body, html die height:100%;

Problem wird warscheinlich sein, dass vor #page eine ganze andere Menge divs kommen. Meine Frage nun. Hat jemand eine Idee wie ich #page dazu bewegen kann immer bis zum unteren Browserrand zu gehen. Außerdem gibt es die Besonderheit, dass #page ein bissl über #frontpage .pagelook lappen soll. Wenn ich mit fixierten Werten arbeite wie z.B. 800px dann klappt das alles wunderbar nur bei 100% zeigt der Browser nie das an was ich gerne hätte.

Vielen Dank für eure Hilfe!

ChrisB · 25.04.2011, 14:50

Zitat:

Zitat von Buschdieb

Problem wird warscheinlich sein, dass vor #page eine ganze andere Menge divs kommen.

100% plus x sind mehr als 100%, sofern x > 0 ist. Herzlichen Glückwunsch zu dieser Erkenntnis, ihrer Versetzung in die dritte Grundschulklasse steht nun nicht mehr viel im Wege

Zitat:

Hat jemand eine Idee wie ich #page dazu bewegen kann immer bis zum unteren Browserrand zu gehen.

Wenn du mit 100% arbeiten willst, dann in dem du diese auch „von oben“ beginnen lässt.
Das könntest du beispielsweise erreichen, in dem du die anderen Elemente nicht davor herumlungern lässt, sondern in dieses Element mit hinein packst.
Ob das in deinem Layoutwunsch möglich ist, kann natürlich nicht beurteilt werden - weil dieser wieder mal nur sehr rudimentär beschrieben worden ist

Zitat:

Außerdem gibt es die Besonderheit, dass [...]

Ja, sicher, das alles versuche ich mir jetzt mal eben vorzustellen ... nur damit dann vermutlich noch irgendwelche weiteren Details hinzu kommen, die du auch wieder verschwiegen hast.

Nein Danke. Beschreibe bitte erst mal klar, deutlich und nachvollziehbar, was genau du erreichen möchtest. Ein Online-Beispiel, an dem sich der bisherige Stand nachvollziehen lässt, oder auch eine Skizze könnten dabei durchaus hilfreich sein.

Buschdieb · 25.04.2011, 15:10

Hallo ChrisB,

ich wünsch Dir erstmal frohe Ostern.

Hier nun ein Schema damit Du es Dir besser vorstellen kannst.

http://img41.imageshack.us/i/schemaos.jpg

ChrisB · 25.04.2011, 15:32

„Ein Bild sagt mehr als tausend Worte“ - mag sein, aber es ersetzt eine verbale Erklärung nur seltenst adäquat, sondern kann meist nur zur Unterstützung dienen. Auch hier bleibt m.E. noch einiges an Rückfragen offen.

Auf die explizite Bitte hin, das Vorhaben mal genauer zu erklären, einfach nur ein Bild hinterher zu schieben, empfinde ich schon als gewisse Dreistigkeit.
Ich kann mich in solchen Fällen des Eindrucks nicht erwehren, dass der Fragesteller entweder zu faul ist, sein Problem mal für einen Außenstehenden(!) nachvollziehbar zu erklären - oder schlicht nicht in der Lage dazu.

Das mal vorweg.

Nun, das wird ganz so trivial wohl nicht umzusetzen sein.

„Hintergrundfarbe, kein Inhalt“ ruft, wenn dieser Hintergrund nicht über die komplette Seitenbreite gehen und sich anderen Inhalten „anpassen“ soll, nach einer Faux Columns-Technik.

Die Headergrafiken dürften wohl feste Pixelmaße haben, #topbar aber vielleicht eher nicht (Textinhalt, abhängig von Schriftgröße?). Wenn man aber wenigstens voraussetzen kann, dass dieser Inhalt idR. „einzeilig“ bleiben wird bzw. auch bei einem ggf. erforderlichen Umbruch nicht „zu hoch“ wird, könnte dieses Element absolut positioniert werden - das nimmt schon mal eine nicht bekannte, relative Höhe aus der Gleichung, und macht damit den Rest etwas einfacher.

Was genau soll jetzt #page sein - nur der schmale blaue Bereich, oder generell das Rechteck im Hintergrund?
Wie auch immer, um das mit den 100% umsetzen zu können, muss vermutlich dieses Element tatsächlich „von oben“ beginnend eingebunden werden. Dass der Hintergrund dann nur ab einem bestimmten Abstand „von oben“ blau/grau sein soll, könnte man über ein entsprechend positioniertes Hintergrundbild lösen, das „hoch genug“ ist; oder man muss dafür sorgen, dass die Header-Grafiken im oberen Bereich (teilweise) über diesem Element liegen.

Darüber, ob das ganze bei „mehr Inhalt“ die Seite entsprechend nach unten ausdehnen soll, oder ob es bei festen 100% Höhe bleiben soll (mit ggf. seiteninternen Scrollbalken?), hast du auch noch kein Wort verloren. (Oder vielleicht auch noch gar keinen Gedanken „dran verschwendet” ...?)

Buschdieb · 25.04.2011, 20:30

Hallo ChrisB,

Ich möchte wie in der der Grafik zu erkennen im oberen Bereich der Seite eine Menuleiste (#topbar) stehen habe. Diese soll sich über die gesamte Breite des Browserfensters erstrecken. Die Höhe kann hier fest definiert werden. Dem soll eine über das gesamte Browserfenster erstrecke Headergrafik mit fester Höhe folgen (.pagelook) . Im Anschluss daran ist es dann wünschenswert, dass eine Headerabschlussgrafik folgt (pagecover_bottom). Auch hier wieder mit fester Höhe. Im Anschluss daran kommt dann der "Rest" vom Body Teil. Hier sollte dann nur die Hintergrundfarbe zu sehen sein. Der spätere Text usw. soll in einem separaten DIV Container stehen. Diesen habe ich mal #page genannt. #Page soll sich über die Headergrafik (.pagelook) und die Headerabschlussgrafik (.pagecover_bottom) sowie den Rest vom Body Teil erstrecken. Du hast richtig erkannt, dass #Page das hellblaue Rechteck ist. Auch der hellblau durchsichtige Teil gehört dazu. Diesen haben ich absichtlich transparent gestaltet damit man die Beschriftungen lesen kann.

Zitat:

Zitat von ChrisB

Darüber, ob das ganze bei „mehr Inhalt“ die Seite entsprechend nach unten ausdehnen soll, oder ob es bei festen 100% Höhe bleiben soll (mit ggf. seiteninternen Scrollbalken?), hast du auch noch kein Wort verloren. (Oder vielleicht auch noch gar keinen Gedanken „dran verschwendet” ...?)

#Page soll sich zum einen in der Höhe an den Inhalt anpassen und zum anderen sich immer bis zum unteren Rand des Browserfensters erstrecken.

Hast Du noch Verständnisfragen?

Danke für die Hilfe!

Buschdieb · 25.04.2011, 20:33

Zitat:

Zitat von ChrisB

Dass der Hintergrund dann nur ab einem bestimmten Abstand „von oben“ blau/grau sein soll, könnte man über ein entsprechend positioniertes Hintergrundbild lösen, das „hoch genug“ ist; oder man muss dafür sorgen, dass die Header-Grafiken im oberen Bereich (teilweise) über diesem Element liegen.

Hier könnte man mit z-index arbeiten oder?

ChrisB · 25.04.2011, 21:07

Zitat:

Zitat von Buschdieb

Hier könnte man mit z-index arbeiten oder?

Ja, in Kombination mit absoluter Positionierung. (Fixed wäre ungünstig bei kleineren Viewports, bzw. würde für diese eine Alternative erfordern. Da du aber noch mit keinem Wort erwähnt hast, dass der Header beim Scrollen des Seiteninhaltes stehen bleiben soll, gehe ich erst mal davon aus, dass das auch nicht gefordert ist.)
Da alle Header-Elemente feste Maße haben, sollte Positionierung hier kein allzu großes Problem darstellen.

Topbar und Headergrafik kämen auf der z-Achse über dem Inhaltscontainer zu liegen, die Header-Abschlussgrafik darunter. (Ggf. entsprechend Schneiden/Aufteilen, damit das passt.)

Damit der Inhalt erst im „sichtbaren“ Bereich unterhalb des Headers beginnt, wird das erste Element innerhalb des Inhaltscontainers über ein entsprechendes padding-top auf Abstand gehalten. (margin ginge auch, aber dann sind die Wechselwirkungen mit dem margin des Containers zu beachten.)

Buschdieb · 25.04.2011, 22:49

Zitat:

Zitat von ChrisB

Da du aber noch mit keinem Wort erwähnt hast, dass der Header beim Scrollen des Seiteninhaltes stehen bleiben soll, gehe ich erst mal davon aus, dass das auch nicht gefordert ist.)
Da alle Header-Elemente feste Maße haben, sollte Positionierung hier kein allzu großes Problem darstellen.

Die ganze Seite sollte scrollfähig bleiben. Sobald also mehr Inhalt bei #page (Inhalt) drin ist als rein passt ins Fenster, soll die ganze Seite gescrollt werden können.

Ich habe jetzt ein absoluten div container am oberen Rand positioniert. Dieser erstreckt sich über die gesamte Seite. Soweit so gut. In diesem div Container liegt jetzt #page. Somit muss ich meine Headergrafiken nicht schneiden und stückeln. Jetzt habe ich immer wieder zwei Probleme. Entweder geht #page nicht bis zum untersten Rand oder man kann zu weit scrollen und es läuft ins leere. Den Code dazu stelle ich morgen ein. Der Browser muss zwei Dinge verarbeiten. Einmal die Mindesthöhe von 100% über die gesamte Seite und ein mal die variable Höhe je nach Seiteninhalt. Ein schwieriges Unterfangen.

ChrisB · 25.04.2011, 23:02

Zitat:

Zitat von Buschdieb

Ich habe jetzt ein absoluten div container am oberen Rand positioniert. Dieser erstreckt sich über die gesamte Seite. Soweit so gut. In diesem div Container liegt jetzt #page.

Das ist nicht das, was ich im Sinn hatte ...

Den ganzen Header-Krempel absolut positionieren.
#page außerhalb davon im normalen Flow belassen ...

Buschdieb · 27.04.2011, 09:04

Beispiel-Code:

so soll es im Prinzip aussehen nur #Page ist zu lang, weil wie bereits herausgefunden von uns Beiden über #Page ein paar Divs liegen.

HTML-Code:

<div id="menu" style="height:40px; background-color:#ff0000">Menuleiste</div>
<div id="header" style="height:200px;background-color:#228B22">Header</div>
<div id="header_end" style="height:20px;background-color:#9B30FF">Headerabschlussgrafik</div>
<div id="page" style="display:block;position:absolute;top:150px;left:50%;width:800px; margin-left:-400px; height:100%; background-color:#ffff00">
<h1>Inhalt</h1>
ifwheuihweifhweifhwiehf w efwhef<br>
wqdjoh qwhdhqwidhqwihdiqwhdihqwidhiqwhdihqwh<br>
<div id="footer" style="height:20px;background-color:#FF00FF">FOOTER</div>
</div>

Lösung mit javascript:
Eine CSS Lösung schöner. Bei dieser Lösung hat mir ein Kollege geholfen.

HTML-Code:

<div id="menu" style="height:40px; background-color:#ff0000">Menuleiste</div>
<div id="header" style="height:200px;background-color:#228B22">Header</div>
<div id="header_end" style="height:20px;background-color:#9B30FF">Headerabschlussgrafik</div>
<div id="page" style="display:block;position:absolute;top:20px;left:20%;width:50%;background-color:#ffff00">
<h1>Inhalt</h1>
ifwheuihweifhweifhwiehf w efwhef<br>
wqdjoh qwhdhqwidhqwihdiqwhdihqwidhiqwhdihqwh<br>
<div id="footer" style="height:20px;background-color:#FF00FF">FOOTER</div>
</div>



window.onresize = test();



window.onload = test();



function test()

{

	obj=document.getElementById("page");

	h 	= obj.clientHeight;

	ph	= document.body.clientHeight;

	dist	=	obj.offsetTop;

	if (ph>(h+dist))

	{

		obj.style.height = ph-dist;

	}

	obj.style.display="block";

}




 
  Zitat:
    
					Zitat von ChrisB  
 Das ist nicht das, was ich im Sinn hatte ...

Den ganzen Header-Krempel absolut positionieren.

#page außerhalb davon im normalen Flow belassen ...
  
 
 
das probiere ich mal aus...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit Ajax - Session Problem	halskrause	PHP Tipps 2009	10	12.01.2010 02:27
[Erledigt] Problem mit Mehrsprachigkeit	Sniper_Kotaro	PHP Tipps 2009	2	16.12.2009 11:47
Problem beim Download Management	mistermint	PHP Tipps 2009	8	24.10.2009 11:34
Umlaut Problem	nokieone	PHP Tipps 2009	7	16.10.2009 19:30
Problem mit Basedir in PhP	cmuch05	Datenbanken	9	08.01.2009 14:17
[Erledigt] Problem: PHP Selbe Datei mehr als 1 Mal	soulan	PHP Tipps 2008	13	28.11.2008 22:51
Problem Upload mehrere Dateien und schreiben in DB	Lapje	PHP Tipps 2008	1	22.10.2008 13:12
utf8 Problem (Daten aus DB auslesen)	go1denboy	PHP Tipps 2008	1	23.09.2008 12:19
Problem mit swfobjects	R4v3r	JavaScript, Ajax und mehr	8	21.09.2008 14:17
[Erledigt] Galerie Problem...	coraplanet	PHP Tipps 2008	4	06.06.2008 13:42
datensätze defekt oder problem mit dem einlesen?	Ministry	Datenbanken	4	06.07.2006 18:42
problem!!!		PHP Tipps 2006	6	08.02.2006 11:06
Smarty und PHP-Skript Problem		PHP Tipps 2004-2	2	03.12.2004 22:27
Problem mit alter JavaScript-Funktion	woods	PHP Tipps 2004	1	13.08.2004 13:34


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

25.04.2011, 15:10
Buschdieb Erfahrener Benutzer Registriert seit: 11.12.2004 Beiträge: 238 PHP-Kenntnisse: Anfänger	Hallo ChrisB, ich wünsch Dir erstmal frohe Ostern. Hier nun ein Schema damit Du es Dir besser vorstellen kannst. http://img41.imageshack.us/i/schemaos.jpg __________________ fragen ist kostenlos! Buschdieb.com

25.04.2011, 15:32
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	„Ein Bild sagt mehr als tausend Worte“ - mag sein, aber es ersetzt eine verbale Erklärung nur seltenst adäquat, sondern kann meist nur zur Unterstützung dienen. Auch hier bleibt m.E. noch einiges an Rückfragen offen. Auf die explizite Bitte hin, das Vorhaben mal genauer zu erklären, einfach nur ein Bild hinterher zu schieben, empfinde ich schon als gewisse Dreistigkeit. Ich kann mich in solchen Fällen des Eindrucks nicht erwehren, dass der Fragesteller entweder zu faul ist, sein Problem mal für einen Außenstehenden(!) nachvollziehbar zu erklären - oder schlicht nicht in der Lage dazu. Das mal vorweg. Nun, das wird ganz so trivial wohl nicht umzusetzen sein. „Hintergrundfarbe, kein Inhalt“ ruft, wenn dieser Hintergrund nicht über die komplette Seitenbreite gehen und sich anderen Inhalten „anpassen“ soll, nach einer Faux Columns-Technik. Die Headergrafiken dürften wohl feste Pixelmaße haben, #topbar aber vielleicht eher nicht (Textinhalt, abhängig von Schriftgröße?). Wenn man aber wenigstens voraussetzen kann, dass dieser Inhalt idR. „einzeilig“ bleiben wird bzw. auch bei einem ggf. erforderlichen Umbruch nicht „zu hoch“ wird, könnte dieses Element absolut positioniert werden - das nimmt schon mal eine nicht bekannte, relative Höhe aus der Gleichung, und macht damit den Rest etwas einfacher. Was genau soll jetzt #page sein - nur der schmale blaue Bereich, oder generell das Rechteck im Hintergrund? Wie auch immer, um das mit den 100% umsetzen zu können, muss vermutlich dieses Element tatsächlich „von oben“ beginnend eingebunden werden. Dass der Hintergrund dann nur ab einem bestimmten Abstand „von oben“ blau/grau sein soll, könnte man über ein entsprechend positioniertes Hintergrundbild lösen, das „hoch genug“ ist; oder man muss dafür sorgen, dass die Header-Grafiken im oberen Bereich (teilweise) über diesem Element liegen. Darüber, ob das ganze bei „mehr Inhalt“ die Seite entsprechend nach unten ausdehnen soll, oder ob es bei festen 100% Höhe bleiben soll (mit ggf. seiteninternen Scrollbalken?), hast du auch noch kein Wort verloren. (Oder vielleicht auch noch gar keinen Gedanken „dran verschwendet” ...?) __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?