Ergebnis 1 bis 8 von 8

Thema: Variable höhe eines DIV-Containers

  1. #1
    Teeny
    Registriert seit
    09.03.2007
    Beiträge
    46
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Variable höhe eines DIV-Containers

    Hallo,
    ich versuche gerade mal wieder meine CSS Kentnisse aufzufrischen und wollte mir ein Layout machen. Dieses hat im oberen Teil ein DIV-Container, der Header, einen mittleren mit dem Content und eine Fußzeile. Das ganze sieht im Moment mal so aus:
    HTML-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> </head> <body>     <div style="background-image:url(background.jpg);background-repeat:repeat; margin:0px; padding:0px; position:fixed; left:0px; top:0px; width:100%;">         <div style="background-image:url(header.jpg); background-repeat:repeat; height:115px; width:100%;">header</div>                  <div style="height:auto; width:950px; position:relative; left:50%; margin-left:-475px; margin-top:10px; margin-bottom:-10px;">             <div style="width:700px; float:left;">                 <div style="background-image:url(box_content_oben.png); background-repeat:no-repeat; height:15px; ">&nbsp;</div>                 <div style="background-image:url(box_content_mitte.png); background-repeat:repeat-y;  ">                     <div style="width:640px; background-color:#FFFFFF; position:relative; top:10px; left:20px;">Hier steht der Content                     </div>                     </div>                 <div style="background-image:url(box_content_unten.png); background-repeat:no-repeat; height:16px; ">unten</div>             </div>                          <div style=" width:250px; float:right;">                 <div style="background-image:url(box_banner_oben.png); background-repeat:no-repeat; height:14px; ">&nbsp;</div>                 <div style="background-image:url(box_banner_mitte.png); background-repeat:repeat-y; height:100%; ">                     <div style="width:195px; background-color:#000000; position:relative; top:10px; left:20px;">Content</div>                     </div>                 <div style="background-image:url(box_banner_unten.png); background-repeat:no-repeat; height:24px; ">unten</div>             </div>         </div>                <div style="background-image:url(box_footer_komplett.png); background-repeat:repeat; height:115px; width:100%; position:absolute; left:0px; bottom:0px;">footer</div>                </div> </body> </html>
    Das Problem ist jetzt aber, wenn der Contentbereich zu groß wird, also die Stelle wo steht "Hier steht der Content", dann passt sich die box zwar an, es erscheinen im Brwoser aber keine Scroll-Balken, egal, ob ich mit overflow arbeite oder nicht. Ich geh mal davon aus, ich muss meinem mittleren DIV noch irgendwie beibringen dass die Höhe Variabel sein soll?
    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 !!!!!

  2. #2
    Unregistriert
    Gast

    Standard AW: Variable höhe eines DIV-Containers

    Glaubst du wirklich, dass sich jemand diese Buhstabenwüste ansieht? Füge Zeilenumbrüche ein und formatiere den HTML-Code ordentlich.

  3. #3
    Teeny
    Themenstarter

    Registriert seit
    09.03.2007
    Beiträge
    46
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Variable höhe eines DIV-Containers

    Du hattest natürlich recht, irgendwie muss meine Formatierung verloren gegangen sein.
    Hier der 2. Versuch:
    HTML-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>
    </head>
    <body style="font-family:Arial, Helvetica, sans-serif">
        <div style="background-image:url(background.jpg);background-repeat:repeat; margin:0px; padding:0px; position:fixed; left:0px; top:0px; width:100%; ">
            <div style="background-image:url(header.jpg); background-repeat:repeat; height:115px; width:100%;">header</div>
            
            <div style="width:950px; position:relative; left:50%; margin-left:-475px; margin-top:10px; margin-bottom:-10px; overflow:visible; min-height:400px;">
                <div style="width:700px; float:left; height:2000px;">
                    <div style="background-image:url(box_content_oben.png); background-repeat:no-repeat; height:15px; ">&nbsp;</div>
                    <div style="background-image:url(box_content_mitte.png); background-repeat:repeat-y;">
                        <div style="width:640px; background-color:#FFFFFF; position:relative; top:10px; left:20px;">
                            
                            <div style="font-size:24px; font-weight:bold; text-align::justify;">
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
                            </div>
                         
                        </div>    
                    </div>
                    <div style="background-image:url(box_content_unten.png); background-repeat:no-repeat; height:16px; ">unten</div>
                </div>
                
                <div style=" width:250px; float:right;">
                    <div style="background-image:url(box_banner_oben.png); background-repeat:no-repeat; height:14px; ">&nbsp;</div>
                    <div style="background-image:url(box_banner_mitte.png); background-repeat:repeat-y; height:100%; ">
                        <div style="width:195px; background-color:#000000; position:relative; top:10px; left:20px;">Content</div>    
                    </div>
                    <div style="background-image:url(box_banner_unten.png); background-repeat:no-repeat; height:24px; ">unten</div>
                </div>
            </div>
            
          <div style="background-image:url(box_footer_komplett.png); background-repeat:repeat; height:115px; width:100%; position:absolute; left:0px; bottom:0px;">footer</div>  
            
        </div>
    </body>
    </html>
    

  4. #4
    Fortgeschrittene/r Avatar von unknownsoldier
    Registriert seit
    16.06.2010
    Ort
    "Dreamland"
    Alter
    26
    Beiträge
    174
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Variable höhe eines DIV-Containers

    Grundlagen!!!
    Es gibt auch andere HTML-Elemente als "<div>", ich bezweifel das diese DIV-Suppe wirklich nötig ist.

    Außerdem lager bitte mal das CSS in eine externe Datei aus, dann wird es wesentlich übersichtlicher.

  5. #5
    Youngster
    Registriert seit
    06.06.2011
    Beiträge
    11
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Variable höhe eines DIV-Containers

    Hi,

    also wenn du möchtest, dass sich die Höhe deines Containers automatisch an den Inhalt anpasst, dann nimm: height:auto;

    Zum Thema CSS-Auslagerung, kann ich mich nur dem Kommentar von "unknownsoldier" anschließen! Es ist mit einer separaten CSS einfach übersichtlicher.

  6. #6
    Teeny
    Registriert seit
    13.06.2011
    Ort
    St. Paul, A-9470
    Alter
    22
    Beiträge
    32
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Variable höhe eines DIV-Containers

    Also, ich halte von style="height:auto" nicht wirklich viel weil das in keinen zwei browsern gleich angezeigt wird....

    Aber mit table-tags wärs wirklich viel einfacher...

  7. #7
    Fortgeschrittene/r Avatar von unknownsoldier
    Registriert seit
    16.06.2010
    Ort
    "Dreamland"
    Alter
    26
    Beiträge
    174
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Variable höhe eines DIV-Containers

    Eine Tabelle ist aber NICHT für das Layout gedacht, sondern zur tabellarischen Darstellung von Daten.

    Ausserdem nenne mir bitte sehr ein Browser der "height:auto" nicht richtig darstellt, mir fällt gerade keiner ein. Ich verwende es immer und es läuft in allen Firefox, IE, Opera und Safari Versionen. In Netscape und Chrome ebenfalls.

  8. #8
    Teeny
    Registriert seit
    13.06.2011
    Ort
    St. Paul, A-9470
    Alter
    22
    Beiträge
    32
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Variable höhe eines DIV-Containers

    ach, so?
    dann mach ich wohl was falsch...
    Bei mir zeigts dann in jedem Browser etwas anderes an...

    Die table is halt irgendwie einfach und unkompliziert...
    Sie macht was ich will^^

Ähnliche Themen

  1. CSS float - variable Höhe der Navigation?
    Von 1234d1 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 05.07.2010, 18:16
  2. CSS Höhe eines Divs
    Von Longbow im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 23.06.2010, 14:04
  3. Variable Höhe in Variable
    Von Alienx im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 10
    Letzter Beitrag: 23.05.2009, 20:19
  4. Höhe eines td
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 13.10.2008, 13:24
  5. Variable höhe und Zentrierung von Divs
    Von Insanctus im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 03.09.2007, 00:33

Stichworte

Berechtigungen

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