|
|||
DIVS zentrieren + 100% Höhe
Hallo
also erstmal muss ich sagen das ich wirklich schon sauviel gegoogled hab und auch seiten zu dem thema gefunden hab aber die codes die dort stehen zeigen irgendwie nicht die gewünschte wirkung also ich habe im großen und ganzen 3 divs ein div oben als header darunter 2 divs nebeneinander (links menü, rechts inhalt) probleme 1. das gesamte konstrukt soll 100% seitenhöhe haben im firefox hat es aber 100% + header und im IE vergrößern sich die unteren divs garnicht 2. das gesamte konstrukt soll zentriert werden im IE wird der header zwar zentriert aber der rest nicht, im firefox wird garnix zentriert hier der html code Code:
<div id="wrap"> <div id="head"> Hier is der Header </div> <div id="menu"> <p> <ul> <li><a href="index.php">Startseite</a></li> <li><a href="index.php">Fitness</a></li> <li><a href="index.php">Krafttraining</a></li> <li><a href="index.php">Kurse</a></li> <li><a href="index.php">Boxen</a></li> <li><a href="index.php">Kick- + Thaiboxen</a></li> <li><a href="index.php">Realfight</a></li> <li><a href="index.php">Personal Training</a></li> <li><a href="index.php">Senior Fit 50+</a></li> <li><a href="index.php">Heavy Kids</a></li> <li><a href="index.php">Kontakt</a></li> <li><a href="index.php">Impressum</a></li> </ul> </p> </div> <div id="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> Code:
*{ font-size: 100%; color: #FFFFFF; } body{ text-align: center; height: 100%; padding 0; margin: 0px auto; font-family: 'Trebuchet MS', Verdana, Arial, Sans-Serif; } wrap{ text-align: left; width: 900; } #head{ width: 900px; height: 178px; background-image: url(images/header.gif); } #content{ float:left; width: 700px; height: 100%; padding-left: 30px; padding-right: 30px; background-image: url(images/right.gif); } html>body #content { width: 640px; } #menu{ float:left; width: 200px; height: 100%; padding-left: 25; padding-right: 25; background-image: url(images/left.gif); } html>body #menu { width: 150px; } ul{ text-align: left; } li{ font-weight: bold; list-style: square; } a{ text-decoration:none; |
Sponsored Links |
|
||||
Ohne mich jetzt genauer eingelesen zu haben, würde ich es mit einem div probieren der die drei anderen Bereiche einschließt. Dem gibst du 100%Höhe und zentrierst ihn mit margin: auto;
__________________
http://www.studio-nineteen.de |
Sponsored Links |
|
|||
so ein div is ja schon eingebaut (wrap)
hab jetzt mal das getestet was du gesagt hast wrap{ margin: auto; height: 100%; text-align: left; width: 900; } geht aber leider auch nicht. edit: uuuppps hab die raute vorm wrap vergessen! mal eben schaun edit2: ok super das zentrieren klappt jetzt aber es sind immernoch mehr als 100% höhe |
|
|||
also es ist vl etwas unverständlich geworden:
ich möchte das alle divs zusammen (header fixe größe + die 2 darunter flexibeL) 100% seitenhöhe einnehmen. wenn ich aber 100% einstelle bei den unteren beiden wird das zu hoch weil die höhe vom header nich abgezogen wird. was mach ich da? |
|
|||
"faux columns" anwenden. Siehe FAQ.
Dort findest du auch Informationen zu 100%-Höhe. Dein Code oben ist weder valide noch vollständig. Lies bitte: http://xhtmlforum.de/40080-fuer-frag...twortende.html Validatoren: The W3C Markup Validation Service The W3C CSS Validation Service |
|
|||
hm bei faux collums steht was, was ich garnich brauche
"F: Wie kann ein Container die Höhe eines anderen Containers annehmen, der je nach Inhalt verschiedene Höhen hat?" steht ja nu nix von 100% höhe.... und die beiden beispielseiten bei 100% höhe raff ich nicht ganz... hab mal versucht son footer einzubaun aber funktioniert hat das ganze leider nich |
|
|||
Hi,
Also du erstellt zunächst ein großes div, das alles umfasst (height:100%;). Dann erstellt du ein weiteres div, für deinen header, dabei schreibst du aber height:???px mit rein (höhe vom bild). Als nächstes erstellst du darunter einfach zwei weitere divs mit float:left; dabei schreibst du bei height wieder 100% und fertig. MfG
__________________
Geändert von ct2oo4 (08.04.2007 um 11:04 Uhr) |
|
|||
hallo danke für deine antwort.
das vergrößert die Seite zwar, aber ZU groß! das ganze hat dann ne höhe von 100% PLUS headerhöhe hier nochmal der code.. wrap umfasst alles Code:
#wrap{ margin: auto; text-align: left; height:100%; width: 900; } #head{ width: 900px; height: 178px; background-image: url(images/header.gif); } #content{ height: 100%; float:left; width: 700px; padding-left: 30px; padding-right: 30px; background-image: url(images/right.gif); } html>body #content { width: 640px; } #menu{ height: 100%; float:left; width: 200px; padding-left: 25; padding-right: 25; background-image: url(images/left.gif); } html>body #menu { width: 150px; } |
|
|||
Zitat:
Zitat:
Genau. Es geht so nicht. Das steht auch in den FAQ. Und dort befindet sich auch ein Beispiel für deinen Layoutwunsch. Deine Inhalte brauchen keine 100%-Höhe. Es genügt, wenn der umgebende Container die 100% Mindesthöhe (siehe FAQ!) hat und das Hintergrundbild aus "faux columns" bekommt. Dein Codebeispiel ist noch immer nur ein Schnipsel und nicht valide! Geändert von fricca (08.04.2007 um 12:18 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren | Alien | CSS | 17 | 20.03.2011 10:23 |
div mit u. ohne flexibler Höhe kombinieren und horizontal zentrieren | heftpflaster | CSS | 14 | 30.08.2009 17:31 |
div hat keine Höhe, wenn innere divs gefloatet werden? | Anotherone | CSS | 3 | 23.07.2006 01:25 |
divs aneinander in der höhe ausrichten - wie ? | MS Master | CSS | 1 | 24.02.2005 16:49 |