Yinyang: Positionierung: Box erweitert sich nicht!

SELF-Forum

Positionierung: Box erweitert sich nicht!

Yinyang
– Informationen zu den Bewertungsregeln

Hallo Community,

ich erstelle gerade unter

casa.taijiworld.eu

ein Mittelalter-Template. Leider, ganz egal wie ich es anstelle, schaffe ich es nicht, dass das die Pergamentrolle sich automatisch in der Länge dem Inhalt anpasst.

Die Rolle ist mit drei JPEGs realisiert. Wobei Oben und Unten fix sind und das Mittelteil sich mit repeat-y in der Vertikalen wiederholen soll.

Das Duplizieren an sich ist klar. Dennoch: Momentan ist es immer so, dass der Content aus seiner Box herausragt in den unteren Teil der Rolle hinein, bzw. darüber hinaus.

Das ist aber nicht das Verhalten, das ich erreichen will.

Hat jemand eine Idee?

Über Vorschläge bin ich mehr als Dankbar, ich arbeite seit einer Woche Fieberhaft an einer Lösung....

Der Code: <body id="body">

<div id="wrapper">
<div id="logo"><img src="http://casa.taijiworld.de/templates/medieval/images/logo3.jpg" width="745" height="137" alt="logo" />
</div>
<div id="ritter"><pre>adsf
adf
adf
adf
afda
fda
fda
dfa
dsf</pre></div>

<div id="o-rolle"></div>

<div id="inhalt">
<div id="content"><?php mosMainBody(); ?></div>
<div id="menu"><?php mosLoadModules ( 'left' ); ?></div>
</div>

<div id="u-rolle"></div>
</div>
</body><body id="body">

<div id="wrapper">
<div id="logo"><img src="http://casa.taijiworld.de/templates/medieval/images/logo3.jpg" width="745" height="137" alt="logo" />
</div>
<div id="ritter">
<pre>adsf
adf
adf
adf
afda
fda
fda
dfa
dsf</pre></div>

<div id="o-rolle"></div>

<div id="inhalt">
<div id="content"><?php mosMainBody(); ?></div>
<div id="menu"><?php mosLoadModules ( 'left' ); ?></div>
</div>

CSS TEIL

.menu {
 bottom: auto;
 width: 150px;

float: left;
 top: 70px;
        left: 40px;
 margin left: 40px;
 position: absolute;

}

#body {
    min-width: 950px;
    text-align:center;
    background-color: #000000;
}

#wrapper {
    margin: 0 auto;
    width: 950px;
    text-align: left;
    position: relative;
}

#logo {
    background-color:#000000;
    width: 950px;
}

#ritter {
 background-image: url(../images/ritter.gif);
    width: 250px;
    height: 468px;
    background-color: #CCCCCC;
    background-repeat: no-repeat;
    right: 0px;
    position: absolute;
    top: 137px;
}

#o-rolle {
    position: relative;
    left: 0px;
    margin: 0;
    top: 0px;
    background-image: url(../images/o-rolle.jpg);
    width: 698px;
    height: 85px;
    background-repeat: no-repeat;
}

#u-rolle {
        position: relative;
 background-image: url(../images/u-rolle.jpg);
 background-repeat: no-repeat;
 height: 87px;
 width: 700px;
 left: 0px;
 margin: 0;
}

#inhalt {
 position: relative;
        background-image: url(../images/m-rolle.jpg);
        background-repeat: repeat-y;
 width: 700px;
 left: 0px;
        max-height: 1000px;
 padding-bottom: 0px;

}

#content{
position: absolute;
float: left;
left: 200px;
}

<div id="u-rolle"></div>
</div>
</body>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Positionierung: Box erweitert sich nicht!

    wahsaga Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi,

    </body><body id="body">

    Du beliebst zu scherzen, oder hast keine Ahnung von HTML?

    Ein HTML-Dokument enthält genau einen Body.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Positionierung: Box erweitert sich nicht!

    yinyang
    – Informationen zu den Bewertungsregeln

    Sorry, bim posten des Codes hat sich einiges verhaspelt! Hier nochmal der Code:

    CSS:
    .menu {
     bottom: auto;
     width: 150px;

    float: left;
     top: 70px;
            left: 40px;
     margin left: 40px;
     position: absolute;

    }

    #body {
        min-width: 950px;
        text-align:center;
        background-color: #000000;
    }

    #wrapper {
        margin: 0 auto;
        width: 950px;
        text-align: left;
        position: relative;
    }

    #logo {
        background-color:#000000;
        width: 950px;
    }

    #ritter {
     background-image: url(../images/ritter.gif);
        width: 250px;
        height: 468px;
        background-color: #CCCCCC;
        background-repeat: no-repeat;
        right: 0px;
        position: absolute;
        top: 137px;
    }

    #o-rolle {
        position: relative;
        left: 0px;
        margin: 0;
        top: 0px;
        background-image: url(../images/o-rolle.jpg);
        width: 698px;
        height: 85px;
        background-repeat: no-repeat;
    }

    #u-rolle {
            position: relative;
     background-image: url(../images/u-rolle.jpg);
     background-repeat: no-repeat;
     height: 87px;
     width: 700px;
     left: 0px;
     margin: 0;
    }

    #inhalt {
     position: relative;
            background-image: url(../images/m-rolle.jpg);
            background-repeat: repeat-y;
     width: 700px;
     left: 0px;
            max-height: 1000px;
     padding-bottom: 0px;

    }

    #content{
    position: absolute;
    float: left;
    left: 200px;
    }

    HTML:

    <?php
    /**

    * template_name - Mambo 4.5.1 template

    * @version 4.5.1

    * @copyright (C) 2004 by Gilbert Plugowski

    * @license all rights reserved

    */
    defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
    <!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>
    <?php if ( $my->id ) { initEditor(); } ?>
    <meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
    <?php mosShowHead(); ?>
    <?php echo "<link rel="stylesheet" href="$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css" type="text/css"/>" ; ?><?php echo "<link rel="shortcut icon" href="$GLOBALS[mosConfig_live_site]/images/favicon.ico" />" ; ?>
    <link href="template-css.css" rel="stylesheet" type="text/css" />
    </head>

    <body id="body">

    <div id="wrapper">
    <div id="logo"><img src="http://casa.taijiworld.de/templates/medieval/images/logo3.jpg" width="745" height="137" alt="logo" />
    </div>
    <div id="ritter"><pre>adsf
    adf
    adf
    adf
    afda
    fda
    fda
    dfa
    dsf</pre></div>

    <div id="o-rolle"></div>

    <div id="inhalt">
    <div id="content"><?php mosMainBody(); ?></div>
    <div id="menu"><?php mosLoadModules ( 'left' ); ?></div>
    </div>

    <div id="u-rolle"></div>
    </div>
    </body>
    </html>

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Positionierung: Box erweitert sich nicht!

      wahsaga Homepage des Autors
      – Informationen zu den Bewertungsregeln

      hi,

      #content{
      position: absolute;
      float: left;
      left: 200px;

      Diese beiden Angaben zu position und float zusammen sind Nonsense - denn es ist definiert, dass float den Wert none annimmt, wenn position den Wert absolute hat.

      Beide haben gemein, dass sie Elemente aus dem Fluss nehmen - sie also die Ausmaße ihrer Vorfahrenelemente nicht mehr beeinflussen.
      Bei absoluter Positionierung gibt es nichts, was du dagegen machen kannst - also bleibt wenn überhaupt von den beiden nur float als hier sinnvolles Positionierungsschema übrig.
      Und um den gefloateten Elementen ihre in diesem Falle ungünstige Eigenart, sich ausserhalb des Flusses zu befinden, abzugewöhnen, wende eine der hier bereits zahlreich diskutierten Möglichkeiten an:

      • clearendes Element hinter den gefloateten einfügen, oder
      • Container selbst ebenfalls floaten, oder
      • Container mit overflow:hidden formatieren.

      gruß,
      wahsaga

      --
      /voodoo.css:
      #GeorgeWBush { position:absolute; bottom:-6ft; }
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln