Ergebnis 1 bis 9 von 9

Thema: Height:auto funktioniert bei verschachtelten DIVs nicht?

  1. #1
    Youngster
    Registriert seit
    05.08.2009
    Beiträge
    12
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Height:auto funktioniert bei verschachtelten DIVs nicht?

    Hallo,
    ich habe eine Seite in HTML und CSS gebaut. Dabei habe ich mehrere DIVs verschachelt. Die Idee war, dass es einen Content-Div (content2) gibt, den ich fülle mit zwei DIVs (colleft und colright), so dass ich den Inhalt im Content-Div geordnet habe. Wenn ich in colright oder colleft jetzt mehr hineinschreibe, als min-height oder height bei #content2 an Platz bereitstellen, wird über den Rand hinausgeschrieben und nicht #content2 angepasst.

    Ein CSS-Ausschnitt:
    Code:
    #content2{
            min-height:410px;    
            height:auto !important;
            height:400px;}
    
    .colleft{
            background-color:#ffffcc; 
            position:absolute;
            width:auto;
            right:0px;
            height:auto !important;
            margin-right:350px;
            margin-top:10px !important;
            margin-top:0px;
    }
    
    .colright{
            background-color:#ffffcc; 
            position:absolute;
            height:auto !important;
            width:323px;
            margin-left:577px;
            margin-top:0px;
            margin-right:0px;        
    }
    Der Aufbau im HTML-Doc:
    Code:
    <div id="content2">
          <div class="colright"><h2>...</h2><p>...</p></div>
          <div class="colleft">...</div>
          <div id="impressumlink">...</div>
    </div>
    Im Anhang noch einmal die vollständigen Dateien, da dies nur der grobe Aufbau eines kleinen teiles ist.

    Vielleicht ist der gesamte Aufbau der Seite Murks?

    Bin für jede Hilfe dankbar.
    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 !!!!!
    Angehängte Dateien Angehängte Dateien

  2. #2
    webdesigner
    Gast

    Standard AW: Height:auto funktioniert bei verschachtelten DIVs nicht?

    poste mal den Link zur Seite Bitte, auf jeden Fall geht das nicht

    HTML-Code:
    min-height:410px;    
            height:auto !important;
            height:400px;}
    entweder

    HTML-Code:
    min-height: 410px;
    height: auto;
    oder nur

    HTML-Code:
    height: px,auto,%,em;
    aber du sagst min-height(Mindesthöhe): 410px; und die ganze höhe ist nur 400px

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    05.08.2009
    Beiträge
    12
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Height:auto funktioniert bei verschachtelten DIVs nicht?

    Zitat Zitat von webdesigner Beitrag anzeigen

    HTML-Code:
    height: px,auto,%,em;
    aber du sagst min-height(Mindesthöhe): 410px; und die ganze höhe ist nur 400px
    Hi, das ist durch Probieren entstanden, um die Seite bei IE und FF gleich aussehen zu lassen. Weil IE soweit ich weiß das min-height ignoriert, klappte das halbwegs. Es ging darum, den "Impressumslink" direkt unter dem Content-DIV zu haben. Der Content-DIV soll mindestens 400 bzw 410 Px hoch sein und sich nur bei Bedarf vergrößern.

    Ich hab die Seite noch nicht online. Aber die CSS und eine Bsp.-HTML war im Anhang gerade mein ich. Reichen die CSS und die eine Seite? Alle Seiten sind gleich aufgebaut.

  4. #4
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Height:auto funktioniert bei verschachtelten DIVs nicht?

    hab jetzt ein wenig rumprobiert...

    Naja, leider ist mir nicht bekannt ob es möglich ist ein übergeordnetes <div> zu vergrößern wenn ein untergeordnetes zu groß ist...

    Habs jetzt nicht hingekriegt, die einzige möglichkeit die mir jetzt einfällt wäre JS :X



    //SO

    HTML-Code:
    <script type="text/javascript">
    <!--
    
    function Test()
     {
     var divHeight = ((document.getElementById('colright').offsetHeight) + 'px');
    document.getElementById('content2').style.height = divHeight;
     }
    //-->
    </script>
    Musst aber deiner colright noch die id="colright" verpassen.
    Bei content2 die height: angaben alle rausnehmen bis auf min-height.

    Ahja, nach der navi hast du dein <p> tag zu schnell geschlossen (</p></ul> vertauschen)

    <body id ="global" onload="Test()">
    Geändert von Grevas (05.08.2009 um 18:37 Uhr)

  5. #5
    Youngster
    Themenstarter

    Registriert seit
    05.08.2009
    Beiträge
    12
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Height:auto funktioniert bei verschachtelten DIVs nicht?

    Funzt! Super, danke. Hab wirklich null Ahnung von Javascript und habs halt komplett ohne probiert.

    Hab jetz nur noch ne Blockade, wie ich den Impressumslink unter content2 bekomme.

    Eigentlich ja:

    Code:
    <div id="content2">
          <div class="colright"><h2>...</h2><p>...</p></div>
          <div class="colleft">...</div>      
    </div>
    <div id="impressumlink">...</div>
    so, aber der setzt den Link immer mitten ins DIV und nicht darunter. Nur ne Kleinigkeit in der CSS oder wieder JS nötig?

  6. #6
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Height:auto funktioniert bei verschachtelten DIVs nicht?

    wenn du die Struktur beibehalten willst ja.

    Allerdings kannst es dir "einfacher" machen:
    HTML-Code:
    <div id="content2">
            <div class="colright"><h2>...</h2><p>...</p>
                <div id="impressumlink">...</div>
            </div>
          <div class="colleft">...</div>      
    </div>
    Dann musst du noch beim #impressumlink top:400px; in top:40px; z.B. abändern dann gehts.

    Indem nutzt du jetzt dein altes Problem aus da content nicht größer wird, wenn ein unterelement rausgeht (gehört ja nicht mehr zu colright sondern ist wieder n neuer div -> colright wird nicht vergrößert)
    /P.S: WAAH, vergessen: du musst noch position: relative; machen statt absolute bei deinem link.
    Geändert von Grevas (05.08.2009 um 19:26 Uhr)

  7. #7
    Youngster
    Themenstarter

    Registriert seit
    05.08.2009
    Beiträge
    12
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Height:auto funktioniert bei verschachtelten DIVs nicht?

    Es läuft. Besten Dank.

    Macht ja auch Sinn aber manchmal ist halt Hirnblockade.

    Ganz andere Frage. Der IE blockiert bei mir zunächst das JS und so ist er vermutlich bei vielen eingestellt. Also sieht die Seite nach Murks aus, bis ich JS manuell aktiviere. Gibt es eine Möglichkeit, über die DOCTYPE z.B. die Seite auch beim IE auf Anhieb vernünftig aussehen zu lassen?

  8. #8
    Youngster
    Themenstarter

    Registriert seit
    05.08.2009
    Beiträge
    12
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Height:auto funktioniert bei verschachtelten DIVs nicht?

    Zitat Zitat von Grevas Beitrag anzeigen
    /P.S: WAAH, vergessen: du musst noch position: relative; machen statt absolute bei deinem link.
    wenn ich das mach, denn rutscht der Link aber beim FF nach links und ist beim IE ganz verschwunden. warum relative?

  9. #9
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Height:auto funktioniert bei verschachtelten DIVs nicht?

    Weil du ohne JS keine absoluten koordinaten setzen kannst...

    IE: ja seh ich auch grad ... Der link ist schon da - nur unterhalb der seite *seufz* . Allerdings geht bei mir JS im IE (standard einstellung).

    FF: Ich weiß nicht warum er bei dir nach links rutschen sollte o.O bei mir siehts ganz ok aus.

    Also als Hotfix für den IE kannst du deinem #impressum noch ein padding-bottom: 25px; verpassen... dann ist es allerdings auf dem hellen hintergrund :X (und zwar in beiden browsern)


    Alles andere (wie z.B. das loswerden vom JS) ist nach meinem Wissen ne umarbeitung des ganzen... Wenn du die 2 columnen brauchst - kannst es in eine tabelle packen... damit würde sich dein content2 div auch automatisch ausdehnen *behaupt*.

    Nja vllt weiß jemand anders einen rat, ich bin überfragt

    JS lösung:

    HTML-Code:
    function Test()
     {
     
    var divHeight = ((document.getElementById('colright').offsetHeight));
    document.getElementById('content2').style.height = divHeight+ 'px';
    document.getElementById('impressumlink').style.top = divHeight + 20 + 'px';
     }
    und den div:
    HTML-Code:
    <div id="content2">
            <div class="colright"><h2>...</h2><p>...</p></div>
    	<div class="colleft">...</div>
    	<div id="impressumlink">...</div>
    </div>
    Geändert von Grevas (05.08.2009 um 19:51 Uhr)

Ähnliche Themen

  1. Probleme mit DIVs... Ich kriegs nicht hin :(
    Von -TS-design im Forum HTML & CSS Forum
    Antworten: 16
    Letzter Beitrag: 08.01.2008, 12:10
  2. border + height:auto ?
    Von minimammut im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 17.01.2007, 22:36
  3. IE ignoriert width/height = auto?
    Von Gast im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 15.01.2007, 18:38
  4. <div style="width:100%; height:100%; overflow:auto&q
    Von stani im Forum HTML & CSS Forum
    Antworten: 28
    Letzter Beitrag: 29.10.2006, 13:07
  5. problem: min-width und margin:0 auto 0 auto
    Von rib im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 26.12.2005, 22:05

Stichworte

Berechtigungen

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