zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 100% Höhe von Divs klappt einfach nicht.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.09.2010, 00:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.09.2010
Beiträge: 5
icecold befindet sich auf einem aufstrebenden Ast
Standard 100% Höhe von Divs klappt einfach nicht.

Hallo,
ich versuche jetzt schon seit vielen Stunden ein Layout zu erstellen.
Habe auch fast alles so hinbekommen wie ich es will außer die Höhe der divs in der Mitte der Seite.
Zur Erklärung:
Oben ein header (feste höhe und 100% breite),
darunter links ein menü (feste breite), mitte der inhalt (variabele breite) und rechts eine weiteres Fenster (feste breite),
und unten ein footer. (feste höhe und 100% breite).

Der Header passt. Der footer passt. Aber ich bekomme es einfach nicht hin das alles in der Mitte die restliche Seite ausfüllt. In Der Breite klappt das. Aber nicht in der Höhe.

Bitte helft mir!
Hier der Code der Seite:

PHP-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="all2.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="outer_wrapper">
<div id="wrapper">

<div id="header">
<?php include 'header.php' ?>
</div><!-- /header -->

<div id="container">

<div id="left">
<?php include 'menue.php' ?>
</div><!-- /left -->

<div id="main">
<?php
if($_GET['ac']=='Startseite' || !$_GET['ac'])include 'Startseite.php';
if(
$_GET['ac']=='Wir')include 'Wir.php';
if(
$_GET['ac']=='Kontakt')include 'Kontakt.php';
if(
$_GET['ac']=='Impressum')include 'Impressum.php';
?>
</div><!-- /main -->

<!-- This is for NN6 -->
<div class="clearing">&nbsp;</div>
</div><!-- /container -->

<div id="sidebar">
<?php include 'sidebar.php' ?>
</div><!-- /sidebar -->
<!-- This is for NN4 -->
<div class="clearing">&nbsp;</div>

<div id="footer">
<?php include 'footer.php' ?>
</div><!-- /footer -->

</div><!-- /wrapper -->
</div><!-- /outer_wrapper -->

</body>
</html>
und hier das css:
HTML-Code:
html, body {
height: 100%; /* wichtig */
margin:0px;
padding:0px;
background-color:#FFC;
}

#outer_wrapper {
min-width:740px;
width:100%;
}

#wrapper {

}

#header {
border:1px;
width:100%;
/* the above declaration creates an horizontal scroll bar in IE, this is to get rid of it */
margin:0 -1px;
height:150px;
}

#container {
float:left;
width:100%;
display:inline;
margin-left:-200px;

}

#left {
float:left;
width:150px;
display:inline;
margin-left:200px;
}

#main {
/* the width from #left (150px) + the negative margin from #container (200px) */
margin-left:350px;
background-color:#FFF;
}
/* good to know: if #sidebar is to be shorter than #main, then there is no need for this rule */
#sidebar {
/* this is to keep the content of #sidebar to the right of #main even if the content of "main is shorter */
padding-left:100%;
/* this is to "bring back" the #sidebar that has been moved out of the viewport because of the padding value */
margin-left:-200px;
}

#sidebar p {
    text-align:center;
}

#footer {
position: absolute;
/* see #outer_wrapper  */
width:100%;
/* this is to clear #container */
clear:both;
border-top:1px;
border-bottom:1px;
bottom: 0; /* wichtig */
}
/* this is the class that is applied to 2 structural hacks in the markup. The first "meaningless" element is used to clear #left in NN6 and the last one is used to clear #container in NN4 */
.clearing {height:0;clear:both}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.09.2010, 00:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.09.2010
Beiträge: 5
icecold befindet sich auf einem aufstrebenden Ast
Standard

Ach so ich habe die Hälfte vergessen...
Das Css habe ich natürlich bereinigt von meinen versuchen.
Ich habe es probiert mit:
HTML-Code:
min-height: 100%;
height:auto !important; /* moderne Browser */
height:100%; /* IE */
position: relative;
Ich glaub mittlerweile an jeder position der css.

Wenn jemand eine besser Idee für ein solches Layout hat würde mich das natürlich auch brennend interessieren.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.09.2010, 00:29
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
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

Was soll denn passieren, wenn der Inhalt mehr Platz braucht als 100%?

Dein PHP ist übrigens nutzlos hier. Poste bitte einen Link, siehe auch die Hinweise für Fragende.
Mit Zitat antworten
  #4 (permalink)  
Alt 24.09.2010, 00:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.09.2010
Beiträge: 5
icecold befindet sich auf einem aufstrebenden Ast
Standard

Danke für die rasche Antwort.
Es soll sich alles am div main "ausrichten" wenn es zu groß ist.
Sprich: Immer soll der mittelteil eine höhe von 100% haben.
Und wenn zuviel inhalt im div main ist dann soll alles angezeigt werden und der "rest" also der footer nach unten wandern.
- Ich hoffe das versteht jemand, weiß garnicht wie ich das beschreiben soll. -

Welchen Link soll ich senden? Zur Seite? Die ist noch nicht online.
Das include kann man auch gerne durch text ersetzen, muss ja trotzdem gehen...
Mehr php ist noch nicht ind der Seite.
Ich kann gerne die Dateien per PN, icq oder so zuschicken wenn das hilft...
Und noch was: Es klappt bei keinem Browser. Habe die jeweils aktuelle Version (ohne Beta) von den meistgenutzen 5 browsern.

Geändert von icecold (24.09.2010 um 00:45 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 24.09.2010, 00:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
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 icecold Beitrag anzeigen
Danke für die rasche Antwort.
Es soll sich alles am div main "ausrichten" wenn es zu groß ist.
Sprich: Immer soll der mittelteil eine höhe von 100% haben.
Und wenn zuviel inhalt im div main ist dann soll alles angezeigt werden und der "rest" also der footer nach unten wandern.
Du beschreibst "Footer Stick Alt", siehe FAQ Punkt 7.
Gleich hohe Spalten: FAQ Punkt 1.

Zitat:
Welchen Link soll ich senden? Zur Seite? Die ist noch nicht online.
Dann ist es jetzt Zeit, das zu ändern.
Niemand hat Zeit für Bausätze. Und bei dir kommt noch nichtmal etwas brauchbares raus, wenn man sich die Mühe machen würde. Nochmal: Serverseitiger Code ist hier nutzlos!
Zitat:
Ich kann gerne die Dateien per PN, icq oder so zuschicken wenn das hilft...
Kostenlosen Privatsupport? Nein, ganz bestimmt nicht.
Mit Zitat antworten
  #6 (permalink)  
Alt 24.09.2010, 00:46
Benutzerbild von emti
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.06.2008
Ort: 23816 Groß Niendorf
Beiträge: 702
emti sorgt für eine eindrucksvolle Atmosphäreemti sorgt für eine eindrucksvolle Atmosphäre
Standard

Fusszeile immer am unteren Rand / "Footer Stick Alt"

Edit: Zu langsam.
__________________
Gruß Michael
SketchAtomTransmit
Mit Zitat antworten
  #7 (permalink)  
Alt 24.09.2010, 00:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.09.2010
Beiträge: 5
icecold befindet sich auf einem aufstrebenden Ast
Standard

Jetzt online: entfernt!
Das Menü ist ohne funktion...

Geändert von icecold (24.09.2010 um 10:45 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 24.09.2010, 00:58
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Du hast bereits die richtigen Tipps bekommen: FAQ 1 und 7.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #9 (permalink)  
Alt 24.09.2010, 01:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.09.2010
Beiträge: 5
icecold befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Du hast bereits die richtigen Tipps bekommen: FAQ 1 und 7.
Mags sein aber leider kann ich diesen Tip nicht umsetzen weil ich es nicht verstehe.
Wenn damit die Sache mit dem Hindergrundbild gemeint ist, dann glaube ich nicht wirklich dass das was wert ist. Ich hätte schon gerne erreicht das es auf jeden monitor so aussieht wie ich es will. Also 200px links, mitte die restliche breite, und rechts 200px. egal ob es auf einem 15 Zoll netbook meiner freundin ist oder auf meinem 30 zoller. und bei einem hintergrundbild geht das eher nicht. oder?
[FAQ]Du beschreibst "Footer Stick Alt", siehe FAQ Punkt 7.[/FAQ]
richtig. mein footer ist auch dort wo er hin soll aber die höhe der boxen darüber ist nicht korrekt.

P.S. Ich wollte hilfe uund lernen. Aber rumraten hilft da nicht weiter.
Falls jemand einen lösungsweg hat und mir sagen kann was ich falsch gemacht habe kann er gerne schreiben.
Aber es nützt nichts wenn jemand einen link zu einem link zu einem link postet. So wird das weder für mich noch für nachfolgende user erfolgreich.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 24.09.2010, 01:49
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von icecold Beitrag anzeigen
Aber es nützt nichts wenn jemand einen link zu einem link zu einem link postet.
Doch, denn dort ist genau erklärt, was zu tun ist. Niemand hat Zeit, Dinge zu erklären, die an anderer Stelle bereits ausführlich erklärt werden.

Das Prinzip von FAQ 1: Ein Element, das alle 3 Spalten umgibt, bekommt ein bg-Bild, das sich vertikal wiederholt. Und da das umgebende Element immer so hoch ist wie die höchste Spalte, kann die (immer bis ganz unten laufende) Grafik den Eindruck gleich hoher Spalten erzeugen.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
css, div

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
Wie bekomme ich 2 Divs mit dynamischer, gleicher Höhe nebeneinander? davious CSS 4 27.09.2009 23:57
Problem mit DIVs mit dynamischer Höhe. waltermelon CSS 6 29.07.2006 15:49
div hat keine Höhe, wenn innere divs gefloatet werden? Anotherone CSS 3 23.07.2006 02:25
Ausrichtung von div's und die Höhe eines Suchfeldes... Saesh CSS 13 18.07.2006 11:56
div's in der Höhe synchronisieren zed leppelin CSS 9 27.06.2004 18:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:38 Uhr.