Anzeige

CSS - Div soll sich automatisch an den Inhalt anpassen!

CSS - Div soll sich automatisch an den Inhalt anpassen! | PSD-Tutorials.de

Erstellt von Jimbim, 30.03.2009.

  1. Jimbim

    Jimbim Noch nicht viel geschrieben

    Dabei seit:
    25.10.2008
    Beiträge:
    30
    Geschlecht:
    männlich
    CSS - Div soll sich automatisch an den Inhalt anpassen!
    Hi Leute!

    Eins vorweg, ich bin noch ein ziemlicher Anfänger in Sachen CSS und HTML. Viele Probleme, konnte ich schon durch bereits vorhandene Themen in diesem Forum lösen, doch dafür hab ich bis jetzt noch keine Lösung gefunden.

    Folgendes: Ich hab ne Homepage gemacht, mit divs. Die Linke und die rechte Spalte passen sich schön der Größe des Inhalts an, weil ich den Inhalt direkt in die divs einfügen kann, es ändert sich nix.
    Aber der Container in der Mitte, der Inhalt soll sich ständig ändern, wenn man auf einen Link aus der Menüleiste klickt.

    Ich hab das Problem bis jetzt mit einem iFrame gelöst. Der passt sich aber nicht der Größe des Inhalts an, oder lieg ich da falsch. Versteht mich nicht falsch, aber ich will nicht bei jedem neuen Eintrag die Größe des iFrames ändern.

    Auch mein div, dass ich als Hintergrund benutze (der gelbe, unter dem Header) passt sich nicht der Größe seines Inhalts an (funktioniert nur im IE). Wenn ich das richtig verstehe, liegt das daran, dass die drei container, mit "float: left;" die Spalten erzeugen.

    Ich hoffe ich hab es verständlich rüber gebracht und ihr könnt mir helfen!
     
    #1      
  2. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    CSS - Div soll sich automatisch an den Inhalt anpassen!
    AW: CSS - Div soll sich automatisch an den Inhalt anpassen!

    Quellcode (css) oder ein Link wär nicht schlecht. Wenn du deinem div keine feste Höhe gibst, wird er mit dem Inhalt mitwachsen bzw. schrumpfen...
     
    #2      
  3. Tattoomaus78

    Tattoomaus78 nemesis-artgroup.de

    654
    Dabei seit:
    23.08.2005
    Beiträge:
    5.328
    Geschlecht:
    weiblich
    Ort:
    auf und davon
    CSS - Div soll sich automatisch an den Inhalt anpassen!
    AW: CSS - Div soll sich automatisch an den Inhalt anpassen!

    Link zur Seite?
    Quelltext?
     
    #3      
  4. Jimbim

    Jimbim Noch nicht viel geschrieben

    Dabei seit:
    25.10.2008
    Beiträge:
    30
    Geschlecht:
    männlich
    CSS - Div soll sich automatisch an den Inhalt anpassen!
    AW: CSS - Div soll sich automatisch an den Inhalt anpassen!

    Der Link zur Seite: TEST

    Der CSS Code:

    body {
    background-image: url(../images/back.png)
    }


    #header {
    background-image: url(../images/header.png);
    width: 940px;
    height: 126px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
    }


    #navi {
    width: 938px;
    height: 20px;
    margin-left: 1px;
    margin-right: auto;
    margin-top: 94px;
    z-index: 100;
    position: absolute;
    }


    #back {
    background-color: #F2D973;
    width: 918px;
    height: auto;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    min-height: 500px;
    }


    #links {
    width: 150px;
    height: auto;
    min-height: 200px;
    margin: 0px;
    padding: 0px;
    float: left;
    }


    #mitte {

    width: 598px;
    height: auto;
    min-height: 200px;
    margin-left: 10px;
    padding: 0px;
    float: left;
    }

    #rechts {
    width: 150px;
    height: auto;
    min-height: 200px;
    margin-left: 10px;
    padding: 0px;
    float: left;
    }

    .box {
    background-image: url(../images/box_header.png);
    background-repeat: no-repeat;
    border: 1px solid;
    border-color: #000000;
    width: 138px;
    height: auto;
    min-height: 100px;
    margin-bottom: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    text-align: justify;
    padding: 25px 5px 5px 5px;
    }

    .box_header {

    width: 138px;
    height: auto;
    margin: -23px auto 0px auto;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: #FFFF99;
    position: absolute;
    }

    .mainbox {
    background-image: url(../images/box_header_m.png);
    background-repeat: no-repeat;
    border: 1px solid;
    border-color: #000000;
    width: 586px;
    height: auto;
    min-height: 100px;
    margin: 0px 0px 10px 0px;
    padding: 25px 5px 5px 5px;
    }
     
    #4      
  5. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    CSS - Div soll sich automatisch an den Inhalt anpassen!
    AW: CSS - Div soll sich automatisch an den Inhalt anpassen!

    nach dem schliessen des rechten bereichs ein <div style="clear:both;"></div> würde schonmal dafür sorgen, dass der Browser weiss, wann das floaten zuende ist, und den Hintergrund entsprechend anzeigen lassen.
    die inhalte sind auf der Beispielseite immer noch in einem iframe.
     
    #5      
  6. Jimbim

    Jimbim Noch nicht viel geschrieben

    Dabei seit:
    25.10.2008
    Beiträge:
    30
    Geschlecht:
    männlich
    CSS - Div soll sich automatisch an den Inhalt anpassen!
    AW: CSS - Div soll sich automatisch an den Inhalt anpassen!

    Super, des mit dem Hintergrund funktioniert. Danke schon mal.

    Auf der Beispielseite ist der Inhalt in der Mitte in einem iFrame, stimmt. So soll es vom Prinzip her auch funktionieren. Die Links HOME, SPONSOREN, IMPRESSUM und KONTAKT funktionieren, so soll es am Ende ausschauen. Nur ohne iFrame, oder gibt es eine Möglichkeit, dass sich der iFrame seinem Inhalt anpasst?
     
    #6      
  7. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.557
    Geschlecht:
    männlich
    CSS - Div soll sich automatisch an den Inhalt anpassen!
    AW: CSS - Div soll sich automatisch an den Inhalt anpassen!

    Frame an Inhalt geht nur per Javascript...


    du kannst aber, wenn du deine Sachen statt iframe zu nutzen includest, dem Bereich Höhen zuordnen, die sich automatisch verlängern...


    Beispiel

    Code (Text):
    1.  
    2. #mitte {
    3.  
    4. width: 598px;
    5. min-height:200px;
    6. height:auto !important;  /* für moderne Browser */
    7. height:200px;  /*für den IE */
    8. margin-left: 10px;
    9. padding: 0px;
    10. float: left;
    11. }
    12.  
    mainbox müßtest du noch anpassen... da könnte die Höhe aber im Prinzip raus...

    Im Quelltext
    PHP:
    1.  
    2. <div id="mitte">
    3.  
    4. <div class="mainbox">
    5. <?PHP
    6. include("f_index.html");
    7. ?>
    8. </div>
    9.  
    10. </div>
    11.  

    wobei du die f_index.html anpassen mußt (nur der Inhalt des body darf da stehen...)
     
    #7      
  8. Jimbim

    Jimbim Noch nicht viel geschrieben

    Dabei seit:
    25.10.2008
    Beiträge:
    30
    Geschlecht:
    männlich
    CSS - Div soll sich automatisch an den Inhalt anpassen!
    AW: CSS - Div soll sich automatisch an den Inhalt anpassen!

    Habs gelöst. Den iframe hab ich mit Java-Script dran bekommen. Danke für eure Hilfe!
     
    #8      
x
×
×