Ergebnis 1 bis 4 von 4

Thema: Div wächst nicht mit Inhalt

  1. #1
    Interessierte/r
    Registriert seit
    18.08.2007
    Beiträge
    112
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Div wächst nicht mit Inhalt

    Hi Leute,

    ich hab nen Problem mit einem Div welches nicht mit dem Inhalt wächst.
    Folgendes Szenario:

    Das Div "Content" hat als Hintergrund ein Bild weshalb ich hier eine feste größere setzen muss. In dem Content Div befinden sich zwei weitere Div Container "sub_navi" für die Seiten-Navigation und "content_elem" für den eigentlichen Inhalt.

    Wenn der Inhalt jetzt länger ist als das Hintergrund Bild von "Content"
    (Welches ich nicht mit repeat-y wachsen lassen kann da es ein Bild ist
    und kein Muster etc.)
    Soll das Div "content_wraper" mit wachsen, dort habe ich nämlich eine Grafik die sich wiederholen kann und an das Ende der "content"-Grafik passt.

    Leider wächst das content_wraper Div nicht mit, habe schon alles versucht was mir einfiel. Also da die beiden divs Sub_Navi und Content_elem gefloatet sind habe ich nen clear:both gesetzt ... height auf auto stellen bringt auch kein erfolg.

    Wenn ich dem content_wraper ne feste höhe gebe klappt auch alles super,
    mit der Verschmelzung der 2 Grafiken ... aber es ist ja nie eine feste Content-Höhe auf der Seite, weswegen ich schon ein automatisch wachsendes Div benötige.


    Um es noch mal kurz zu machen:
    Das Content_Wraper Div soll mit dem Inhalt von "content_elem" wachsen.

    Danke schon mal für eure Hilfe

    HTML-Code
    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    
    <head>
         <link href="css/basic.css" rel="stylesheet" type="text/css">
        <title>%Variable%</title>
    </head>
    
    <body>
    <div id="main">
    
    <div id="head"></div><!--Ende Head-->
    
    <div id="navi">
    <ul>
         <li><a href="#">XYZ</a></li>
         <li><a href="#">XYZ</a></li>
         <li><a href="#">XYZ</a></li>
         <li><a href="#">XYZ</a></li>
         <li><a href="#">XYZ</a></li>  
         <li><a href="#">XYZ</a></li>
    </ul>
    </div><!--Ende Navi-->
    <div id="content_wraper">
    <div id="content">
    
    <div id="sub_navi">
         <div id="sub_title">Produktgalerie</div>
    <ul>
         <li><a href="#">XYZ</a></li>
         <li><a href="#">XYZ</a></li>
         <li><a href="#">XYZ</a></li>
         <li><a href="#">XYZ</a></li>
         <li><a href="#">XYZ</a></li>
         <li><a href="#">XYZ</a></li>
         <li><a href="#">XYZ</a></li>
         <li><a href="#">XYZ</a></li>
         <li><a href="#">XYZ</a></li>
    </ul>
    </div><!--Ende Sub_Navi-->
    
    <div id="content_elem" style="font-size:11px">
    Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed<br>
    diam no eirmod tempor invidunt ut  labore et dolore magna <br>
    aliquyam erat, sed dia voluptua. At vero eos et accusam et justo<br>
    duo dolores et ea rebum. Stet kasd gubergren, no sea  takimata<br>
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit<br>
    amet, consetetur sadipscing elitr, sed diam nonumy <br>
    eirmod tempor invidunt ut Lorem ipsum dolor sit amet, <br>
    consectetuer sad tempor invidunt ut  labore et dolore magna<br>
    aliquyam erat, sed dia sanctus.<br>
    </div><!-- Ende Content Elem-->
    </div><!-- Ende Content-->
    </div><!-- Ende Content Wrapper-->
    
    <div id="footer">
    <span>
    Lorem ipsum dolor sit amet ...
    </span>
    </div><!-- Ende Footer-->
    
    </div><!-- Ende Main-->
    </body>
    </html>
    CSS
    Code:
    *{
         margin:0px;
         padding:0px;
         border: 0 none;
         font-size: 100%;
         font-style: inherit;
         font-weight: inherit;
         text-decoration: inherit;
         list-style-type: none;
    }
    
    body{
         background-color: #8c0001;
         font-family: 'Arial';
         font-size: 12px;
         color: #19171b;
    }
    
    
    /*==========
    Div's
    ===========*/
    
    #main{
         width: 954px; 
         margin: 0 auto; 
         padding: 6px 0 0; 
         position: relative;
    }
    
    #head{
         height: 127px;
         background-image: url("../layout/head.jpg");
    }
    
    #navi{
         height: 27px;
         background-image: url("../layout/navi.jpg");
    }
    
    #navi ul{
         padding-left:294px;
         padding-top:3px;
         font-weight: bold;
    }
    
    #navi li{
         display: inline;
         padding: 0 10px;
         border-right: 1px solid #000000;
         float: left;
    }
    
    #content{
         clear: left;
         width: 100%;
         height: 526px;
         background-image: url("../layout/bg.jpg");
    }
    
    #sub_navi{
         float:left;
         padding-top: 15px;
         margin-left: 80px;
         width: 185px;
    }
    
    #sub_navi ul{
        padding-top: 3px;
        list-style-position:outside;
    }
    
    #sub_navi li{
         text-indent: 13px;
         padding-top: 2px;
         padding-bottom: 3px;
         border-bottom: 3px solid #ffffff;
    }
    
    #sub_title{
         color: #e6eeec;
         padding-left: 13px;
         padding-bottom: 4px;
         font-family: 'Times New Roman';
         font-size: 16px;
         font-weight: bold;
         border-bottom: 3px solid #ffffff;
    }
    
    #content_elem{
         float:left;
         padding-top: 40px;
         padding-left: 40px;
    }
    
    #content_wraper{
         background-image: url("../layout/bg_erw.jpg");
         background-repeat:repeat-y;
         clear:both;
         /*height: 670px;*/
    }
    
    #footer{
         height: 49px;
         background-image: url("../layout/footer.jpg");
    }
    
    #footer span{
         padding-left: 110px;
         font-size:  11px;
         position:relative;
         top:10px;
         color: #777777;
    }

    Edit:
    Habe das Problem nun lösen können mit einem CSS-Snippet.

    Also Problem nicht mehr aktuell
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von VivaLosTioz (07.04.2009 um 14:35 Uhr)

  2. #2
    Unregistriert
    Gast

    Standard AW: Div wächst nicht mit Inhalt

    Moin,

    schön wäre es, wenn Du den CSS-Code, der geholfen hat, mal posten könntest.
    Es gibt noch mehr Menschen mit dem gleichen Problem...

    Vielen Dank
    sagt
    Frank

  3. #3
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Div wächst nicht mit Inhalt

    lieber frank, wenn du ein spezifisches problem hast, öffne doch bitte einen neuen thread, statt alte zu reanimieren, dann kann auch speziell auf deine belange eingegangen werden...

    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  4. #4
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Div wächst nicht mit Inhalt

    wobei er mit seinem Post schon recht hat.
    Wie auch immer, neuer Thread ist jetzt am sinnvollsten,
    vielleicht sieht in losTioz ja sogar

Ähnliche Themen

  1. Antworten: 1
    Letzter Beitrag: 01.08.2007, 16:44
  2. Ich verstehe den Inhalt des Textes nicht so ganz!!!!!!!
    Von im Forum Off Topic und Quasselbox
    Antworten: 2
    Letzter Beitrag: 31.01.2007, 19:36
  3. pop up zeigt inhalt nicht an in ie
    Von ND im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 12.10.2006, 02:13
  4. Inhalt meiner Iframes wird nicht angezeigt ????
    Von boa78m im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 17.07.2006, 17:08
  5. Inhalt wird nicht aktualisiert!
    Von caesar im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 27.12.2005, 12:11

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •