Container Größe an Content anpassen (position:absolute)

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    Container Größe an Content anpassen (position:absolute)

    Hi,
    habe folgendes Problem:

    ich habe mir folgendes design gebastelt:


    soweit passt alles. Nur jetzt wollte ich eben den Header noch etwas
    variabler zu den Seiten hin haben. z.B. um einen Übergang zum
    background herzustellen. Dafür habe ich mir dann ein weiteren Container
    angelegt und diesem ein Backgroundimage mit einem niedrigeren
    z-index verpasst. Sieht dann wie folgt aus:


    Solange der Content des inneren Containers jetzt nicht größer
    ist als der Äußere Container (schwarzer Rand) ist alles im grünen Bereich.
    Jedoch bekomme ich es nicht hin, diesen äußeren Container dem Content
    anzupassen falls dieser größer ausfällt.


    Code:
    PHP-Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <    html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <    head>
    <    title>lala</title>
     <    style type="text/css">
         html,body {
          margin:0px;
          padding:0px;
          height:98%
     }

         body {
          text-align:center;
          font-family:Verdana, Arial, Helvetica;
          font-size:10pt
         }

         #outer_container {
          position:relative;
          margin:25px auto 10px auto;
          width:1000px;
          min-height:86%;
          border:1px solid #000
         }

         #inner_container {
          z-index:3;
          position:absolute;
          top:0px;
          left:100px;
          margin:0;
          width:800px;
          min-height:99%;
          border:1px solid #82A2C2;
          background-color:#EEF7FF
         }

     *     html #outer_container { height:86% }
         * html #inner_container { height:99% }

     #header_bg {
          z-index:1;
          position:absolute;
          top:0px;
          width:1000px;
          left:0px;
          height:80px;
          background-image:url(css_test_bg.gif);
          background-repeat:no-repeat
         }

         #mainContent {
          text-align:left;
          padding:10px
         }

         #header {
          height:80px;
          background-color:#82A2C2
         }

         #footer {
          position:relative;
          top:10px;
          font-size:8pt;
          color:#000;
          text-align:center
         }

     .    box {
          border:1px solid #26a;
          padding:0px
         }

     .    box .ueber {
          font-weight:bold;
          padding:2px 5px;
          color:#fff;
          background-color:#26a;
          text-align:left
         }

     .    box .content {
          color:#000;
          padding:5px;
          font-size:10pt;
          background-color:#fff
         }

     .    clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden }
     .    clearfix { display: inline-table }

         /* Hides from IE-mac \*/
         * html .clearfix {height: 1%;}
     .    clearfix {display: block;}
         /* End hide from IE-mac */
         </style>
    </    head>

    <    body>

    <    div id="outer_container">
     <    div id="header_bg">sdf</div>
     <    div id="inner_container">
      <    div id="header">

      </    div>
      <    div id="mainContent" class="clearfix">

       <    div class="box" style="width:450px; float:left">
        <    div class="ueber">&nbsp;</div>
        <    div class="content">
         <    p>&nbsp;</p>
         <    p>&nbsp;</p>
         <    p>&nbsp;</p>
         <    p>&nbsp;</p>
         <    p>&nbsp;</p>
         <    p>&nbsp;</p>
         <    p>&nbsp;</p>
         <    p>&nbsp;</p>
         <    p>&nbsp;</p>
         <    p>&nbsp;</p>
         <    p>&nbsp;</p>
         <    p>&nbsp;</p>
         <    p>&nbsp;</p>
         <    p>&nbsp;</p>
         <    p>&nbsp;</p>
         <    p>&nbsp;</p>
         <    p>&nbsp;</p>
         <    p>&nbsp;</p>
         <    p>&nbsp;</p>
         <    p>&nbsp;</p>
         <    p>&nbsp;</p>
        </    div>
       </    div>

       <    div class="box" style="width:300px; float:right">
        <    div class="ueber">&nbsp;</div>
        <    div class="content">
        <    p>&nbsp;</p>
        </    div>
       </    div>

      </    div>

     </    div>
    </    div>

    <    div id="footer">test | test | test<br /><br />blablabla</div>

    </    body>
    </    html> 
    Das ganze sollte eben mittig sein weswegen ich auch diesen äußeren
    container nochmal erstellt habe, da ich nicht wusste wie ich das ganze
    sonst mittig bekommen soll wenn ich mit position:absolute arbeite.

    Hoffe Ihr könnt mir helfen oder vielleicht auch einen ganz anderen
    Lösungsweg vorschlagen. Alles was ich will ist eigentlich nur ein
    background image, welches hinter dem normalen header liegt aber eben
    auf jeder seite ca. 100px breiter ist um somit eben grafisch mehr daraus
    machen zu können.

    schonmal vielen Dank und Gruß
    slimer
    Zuletzt geändert von sLiMeR²³; 31.12.2005, 15:43.
    Stichworte: -
  • #2
    tjo, wenn du height und min-height vom äußeren DIV weg nimmst, vergrößert er sich im FF, gleichzeitig wird dann aber irgendwie der Rand zerschossen *lol*

    ich hasse div-layouts >_>

    Ein netter Guide zum übersichtlichen Schreiben von PHP/MySQL-Code!
    bei Klammersetzung bevorzuge ich jedoch die JavaCoding-Standards
    Wie man Fragen richtig stellt

    Kommentar

    • #3
      hehe, ja ich kann diese div layouts eigentlich auch nicht leiden...
      aber wollte es einfach mal probieren und es muss ja irgendwie gehen :-)

      naja also wenn ich die min-height und height vom äußeren container
      entferne dann habe ich noch immer das selbe problem bei mir. der äußere
      container ist dann einfach irgendwie 1px hoch und der rest überlappt wie
      vorher.

      man kann das ganz gut erkennen, da der footer dann immer weg ist / verdeckt wird.

      wo sind die css freaks?! *g*

      Kommentar

      • #4
        brich erst einmal deinen code um.

        und dann reicht es auch, wenn du nur die css-angaben postest. den rest braucht man nicht.
        INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


        Kommentar

        • #5
          CSS:
          ------
          PHP-Code:

           html          ,body {
                      margin:0px;
                      padding:0px;
                      height:98%
           }

                     body {
                      text-align:center;
                      font-family:Verdana, Arial, Helvetica;
                      font-size:10pt
                     }

                     #outer_container {
                      position:relative;
                      margin:25px auto 10px auto;
                      width:1000px;
                      min-height:86%;
                      border:1px solid #000
                     }

                     #inner_container {
                      z-index:3;
                      position:absolute;
                      top:0px;
                      left:100px;
                      margin:0;
                      width:800px;
                      min-height:99%;
                      border:1px solid #82A2C2;
                      background-color:#EEF7FF
                     }

           *           html #outer_container { height:86% }
                     * html #inner_container { height:99% }

           #header_bg {
                      z-index:1;
                      position:absolute;
                      top:0px;
                      width:1000px;
                      left:0px;
                      height:80px;
                      background-image:url(css_test_bg.gif);
                      background-repeat:no-repeat
                     }

                     #mainContent {
                      text-align:left;
                      padding:10px
                     }

                     #header {
                      height:80px;
                      background-color:#82A2C2
                     }

                     #footer {
                      position:relative;
                      top:10px;
                      font-size:8pt;
                      color:#000;
                      text-align:center
                     }

           .          box {
                      border:1px solid #26a;
                      padding:0px
                     }

           .          box .ueber {
                      font-weight:bold;
                      padding:2px 5px;
                      color:#fff;
                      background-color:#26a;
                      text-align:left
                     }

           .          box .content {
                      color:#000;
                      padding:5px;
                      font-size:10pt;
                      background-color:#fff
                     }

           .          clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden }
           .          clearfix { display: inline-table }

                     /* Hides from IE-mac \*/
                     * html .clearfix {height: 1%;}
           .          clearfix {display: block;}
                     /* End hide from IE-mac */ 

          Kommentar

          • #6
            habs jetzt etwas anders hinbekommen.

            CSS:
            -----

            PHP-Code:

              html            ,body {
                           margin:0;
                           padding:0;
                           height:96%
              }
                          body {
                           text-align:center
                          }

                          #rahmen {
                           position:absolute;
                           top:25px;
                           left:0;
                           width:100%;
                           text-align:center;
                           min-height:86%;
                           border:1px solid #000;
                           background-image:url(test.jpg);
                           background-repeat:no-repeat;
                           background-position:top center
                          }

                          #container1 {
                           margin:0px auto;
                           width:800px;
                           text-align:left;
                           border:1px dashed #ABABAB
                          }

              *             html #rahmen { height:86% } 
            und dazugehöriger HTML quelltext:
            PHP-Code:
             <div id="rahmen">
              <            div id="container1">
              
                          #site content#

                          </div>
             </            div> 
            zwar greift die height angabe für den "container1" in % noch nicht,
            da ich nicht genau weiß wie ich dies ohne "position:absolute"
            hinbekomme, aber ansonsten passt jetzt alles.

            Gruß
            slimer

            Kommentar

            • #7
              Re: Container Größe an Content anpassen (position:absolute)

              Original geschrieben von sLiMeR²³
              Das ganze sollte eben mittig sein weswegen ich auch diesen äußeren
              container nochmal erstellt habe, da ich nicht wusste wie ich das ganze
              sonst mittig bekommen soll wenn ich mit position:absolute arbeite.

              dazu noch nen tipp:

              position:absolute;
              left:50%;
              margin-left:- breiteDesInhalts/2 px;

              Kommentar

              • #8
                Re: Re: Container Größe an Content anpassen (position:absolute)

                Wieso jemand bei einem solchen Layout mit absoluter Positionierung arbeiten will, ist mi schleierhaft ...

                Anyway, da du mit absoluter Positionierung ein Element aus dem Fluss nimmst, beeinflusst es natürlich die Höhe seiner Vorfahrenelemente nicht mehr. Wer das noch nicht verstanden hat, sollte von absoluter Positionierung auf jeden Fall die Finger lassen.
                I don't believe in rebirth. Actually, I never did in my whole lives.

                Kommentar

                Vorherige template Weiter
                Lädt...
                X