XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Wrapper wächst nicht mit, keine Floats (http://xhtmlforum.de/showthread.php?t=60164)

maclady 10.02.2010 14:36

Wrapper wächst nicht mit, keine Floats
 
Hallo,

ich möchte, daß die eigentlichen DIVs von einem Container umschlossen werden. Sonst habe ich mit floats gearbeitet und ein clearendes Element nach den Hauptdivs genutzt, damit der Container mitwächst.

Diesmal ist das Design aber etwas verschachtelt, daher habe ich die DIVs positioniert. Nun wächst aber der umschliessende Container nicht mehr mit. :x

Irgendwie stehe ich auf dem Schlauch...


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" />
<title>Unbenanntes Dokument</title>
<link href="sytle.css" rel="stylesheet" type="text/css" />
</head>
        <body>
                <div id="container">
                          <div id="wrapper">       
                                <div id="logo">Tolles Logo
                                </div>       
                <div id="top">Tolles Menü
                                </div>
                <div id="right">
                                </div>
                <div id="left">Tolles Menü
                                </div>
                <div id="flex">Tolles Bild                                </div>
                <div id="lang">
                                </div>       
                                <div id="main">Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text </div>
                        </div>       
                  </div>       
        </body>
</html>

Code:

@charset "UTF-8";
/* CSS Document */

html{
        min-height: 101%;
}

table {
        border-spacing: 0px;
}

td {
        margin: 0px;
        padding: 0px;
}

tr {
        margin: 0px;
        padding: 0px;
}

img {
        border: 0px;
        margin: 0px;
        padding: 0px;
}

address {
        font-style: normal;
        color: #ff4400;
}

.readon {
        margin: 0 0  0 15px;
        font-size: 7pt;
        text-transform : uppercase;
}

body{
        font-size: 12px;
        font-family:Verdana,Arial,Helvetica,sans-serif;
        margin: 0px;
        padding: 0px;
}

#container{
        width: 832px;
        margin: 0 auto;
        margin-top: 0px;
        background-color: #33FF00;
}

#wrapper {
        width: 816px;
        margin: 0 auto;
        margin-top: 0px;
        background-color: #fbe7c5;
        position: relative;
        top: 0px;
        left: auto;
}

#logo{
        width: 253px;
        height: 184px;
    padding: 0px;
    margin: 0px;
        background: #663300;
        border-bottom: 10px solid #8c6640;
        position: relative;
}

#top{
        width: 514px;
        height: 174px;
        padding: 0px;
        margin: 0px;
        background: #663300;
        position: absolute;
        top: 0px;
        left: 253px;
}

#right{
        width: 49px;
        height: 184px;
            padding: 0px;
            margin: 0px;
        background: #663300;
        position: absolute;
        top: 0px;
        right: 0px;
        border-bottom: 10px solid #8c6640;
}

#left{
        width: 253px;
        height: 326px;
            padding: 0px;
            margin: 0px;
        background: #fbe7c5;
        position:absolute;
        top: 194px;
        left: 0px;
        border-bottom: 10px solid #990000;
               
}

#flex{
        width: 514px;
        height: 356px;
        padding: 0px;
        margin: 0px;
        background: #ffffff;
        position: absolute;
        top: 174px;
        left: 253px;
}

#flex img {
        border: 0px;
        margin: 0px;
        padding: 10px;
}


#lang{       
        width: 49px;
        height: 326px;
            padding: 0px;
            margin: 0px;
        background: #fbe7c5;
        position: absolute;
        top: 194px;
        right: 0px;
        border-bottom: 10px solid #990000;

               
}       

#main {
        width: 816px;
            padding: 0px;
            margin: 0px;
        background: #990000;
        position: absolute;
        top: 530px;
        left: 0px;
        color: #ffffff;
}


EvT 10.02.2010 14:49

Hallo,
bei absoluter Positionierung wachsen die Eltern-Elemente nicht mit, so positionierte Elemente sind für den Rest einfach nicht vorhanden.

Wenn ich mir dein Layout anschaue, vermute ich, dass du einen Wrapper möchtest, der sich bei wenig Inhalt bis zum unteren Browserrand erstreckt und sich bei mehr Inhalt nach unten ausdehnt. Richtig?

maclady 10.02.2010 14:57

Hallo EvT,

so in etwa ist es gedacht. Der Wrapper (grüner Kasten) soll immer soweit nach unten wachsen, daß der rote Mainbereich (Text) umschlossen ist. Wächst auch der rote Bereich weiter nach unten (weil mehr Text abgebildet wird) dann soll der Wrapper auch weiter mitwachsen.
Der Wrapper bekommt ein Hintergrundbild (repeat-y), damit soll ein Schlagschatten realisiert werden.
Bin ich vielleicht ganz falsch an die Sache rangegangen?! Hilfe!!!!

EvT 10.02.2010 15:12

Fang von vorne an. Damit der (Haupt-)Container sich auf volle Höhe erstecken kann, brauchen seine Vorgänger-Elemente html und body eine Höhenzuweisung von je 100%. Der #container bekommt ebenfalls 100%, aber nicht als Höhe, sondern als Mindesthöhe.

Code:

<style type="text/css">
html, body {height: 100%;}
#container {min-height:100%;}
</style>

<body>
<div id="container"> </div>
</body>

Das sollte für den Anfang reichen. Die anderen Elemente deiner Seite kannst du nun ganz normal in den Container einsetzen und anordnen. Aber bitte nicht mit absoluter Positionierung, sondern bei nebeneinander stehenden Elementen besser per float.

PS: Falls du mit Opera arbeitest, müsstest du in den o.g. Code noch ein <link href="soundso.css" rel="stylesheet" type="text/css" /> einsetzen, da einige Opera-Versionen ansonsten die min-height nicht annehmen.

maclady 10.02.2010 15:31

Hallo EvT,

danke schon mal für die Antwort. Mit floats habe ich es nicht hinbekommen, daß DIV flex ohne Abstand zum DIV top angezeigt wird. Es war immer ein Versatz da, weil er nur bis zur unteren Kante des DIVs right nach oben gefloatet ist. Dieses verschachtelte ging erst, als ich die DIVs positioniert habe.

EvT 10.02.2010 15:39

Hattest du den CSS-Prolog (-->FAQ 1) in deinem Stylesheet drin? Ansonsten schreib doch nochmals deinen Seitenaufbau neu und poste ihn, selbst wenn er fehlerhaft sein sollte. Man sieht dann besser, um was es eigentlich geht bzw. wo es fehlt.

maclady 10.02.2010 16:49

Ok, habe es nochmal neu geschrieben:

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>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
        <body>
                  <div id="wrapper">       
                        <div id="logo">Logo
            </div>       
                        <div id="top">Menü
            </div>
                        <div id="right">Nix
            </div>
                        <div id="left">Menü
            </div>       
                        <div id="flex">Bild
            </div>
                        <div id="lang">Sprache
            </div>       
                        <div id="main">Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. </div>
            <div id="footer">
            </div>
                  </div>       
</body>
</html

hier die CSS:

Code:

@charset "UTF-8";
/* CSS Document */

* { margin: 0; padding: 0; }

html{
        height: 100%;
}

table {
        border-spacing: 0px;
}

td {
        margin: 0px;
        padding: 0px;
}

tr {
        margin: 0px;
        padding: 0px;
}

img {
        border: 0px;
        margin: 0px;
        padding: 0px;
}

address {
        font-style: normal;
        color: #ff4400;
}

.readon {
        margin: 0 0  0 15px;
        font-size: 7pt;
        text-transform : uppercase;
}

body{
        font-size: 12px;
        font-family:Verdana,Arial,Helvetica,sans-serif;
        margin: 0px;
          padding: 0px;
        height: 100%;
}

#container{
        width: 832px;
        margin: 0 auto;
        margin-top: 0px;
        background-color:#33FF00;
        min-height: 100%;

}

#wrapper {
        width: 817px;
        margin: 0 auto;
        margin-top: 0px;
        background-color:#FF0000;
}

#logo{
        width: 253px;
        height: 184px;
        padding: 0px;
        margin: 0px;
        background-color:#FFFF00;
        border-bottom: 10px solid #8c6640;
        float: left;
}

#left{
        width: 253px;
        height: 326px;
        padding: 0px;
        margin: 0px;
        background-color:#FF9900;
        border-bottom: 10px solid #990000;
        float: left;
}

#top{
        width: 514px;
        height: 174px;
        padding: 0px;
        margin: 0px;
        background-color:#00FFFF;
        float: left;
}

#flex{
        width: 514px;
        height: 356px;
        padding: 0px;
        margin: 0px;
        background: #999;
        float: left;
}

#right{
        width: 49px;
        height: 184px;
        padding: 0px;
        margin: 0px;
        background: #663300;
        border-bottom: 10px solid #8c6640;
        float: left;
}

#lang{       
        width: 49px;
        height: 326px;
        padding: 0px;
        margin: 0px;
        background-color:#FF99FF;
        border-bottom: 10px solid #990000;       
        float: left;
}       

#main {
        width: 816px;
        padding: 0px;
        margin: 0px;
        background: #fff;
        color: #000;
        float: left;
}

#footer {
        clear: both;
}

Die roten Balken sollten nicht sichtbar sein. Das ist der Versatz von dem ich sprach. Wenn ich z.B. für das DIV flex ein margin-top: -18px anwende, zieht er das DIV nach oben und dann sieht es ok aus, aber ich glaube nicht, daß das die feine englische Art ist. Wenn es also eine sauberere Lösung gibt, wäre ich sehr daran interessiert! Danke für die Mühe,

die Lady

EvT 10.02.2010 17:12

Schau dir mal #logo, #top und #right an. In diesen Regeln sind sowohl untere Rahmenlinien festgelegt als auch unterschiedliche Höhen:

Code:

height: 184px; bzw. height: 174px;

border-bottom: 10px solid #8c6640;


maclady 10.02.2010 17:25

Genauso soll es ja sein. Das meine ich mit "verschachtelt". Top soll nicht so hoch sein wie logo und right und flex soll dementsprechend hochrutschen. Das ist eben mein Problem :no:
Daher dachte ich, daß man das nicht mit floats sondern mit relativer/absoluter Positionierung arbeiten muss.
Wenn Du für flex ein margin-top: -18px angibst, siehst Du, wie es aussehen soll.

EvT 10.02.2010 17:39

Zitat:

Zitat von maclady (Beitrag 458352)
Wenn Du für flex ein margin-top: -18px angibst, siehst Du, wie es aussehen soll.

Dann mach das doch, ich wüsste im Moment nichts, was dagegen spricht.


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:50 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023