tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
3
ZUGRIFFE
501
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 15.05.08 18:33 #1
    matzseesi matzseesi ist offline Mitglied Gold
    Registriert seit
    Dec 2003
    Beiträge
    205
    Hi Leute,

    Ich habe wieder mal ein Problem bei der Positionierung von ein paar divs.

    folgender Code:

    HTML-Code:
    	<head>
    <style type="text/css">
      <!--
        body { margin:0px; padding:0px; }
        .root { position:relative; width:988px; border:0px solid #000000; margin:0px auto; padding:0px; text-align:left; 
                background-color:#ffffff; color:#000000; margin-top:0px; } 
        .head { height:120px; background-color:#ff0000; }
        .content { width:100%; min-height:655px; margin:0px; background-color:#000000; }
        .ausgabe { min-height:700px; position:absolute; float:left; padding-left:1px; width:796px; min-width:796px; background-color:#00ff00; }
        .info { margin-left:1px; width:189px; left:797px; position:absolute; float:left; background-color:#0000ff; }
        .footer { height:20px; background-color:#000f00; }
      -->
    </style>    
	</head>
	<body>
	  <div class="root">
	    <div class="head">
	      testhead
	    </div>
      <div class="content">
        <div class="ausgabe">
          test1
        </div>
        <div class="info">
          test2
        </div>
      </div>
      <div class="fotter">
        test3
      </div>
	  </div>
	</body>
    das schwarze div (also das div mit der classe content) soll nun mit dem div mit der classe ausgabe mitwachsen falls es größer wird. Jedoch tut es das nicht. was kann man da machen! Ich vermute dass es mit der absoluten Positionierung zu tun hat...

    Was ich auch nicht verstehe ist warum das ausgabe div sich (trotz position:absolute) am content div (welches nicht absolut positioniert wurde) orientiert und nicht ganz nach oben wandert (zum position:relative div). (Im Prinzip passt es so wie es angezeigt wird, nur verstehen tu ich es nicht.

    Ich hoffe ihr könnt mir helfen!

    Gruß

    Matz
     
  2. 15.05.08 18:44 #2
    Maik Tutorials.de Gastzugang
    Hi,

    kommentier mal die absolute Positionierung aus:

    Code :
    1
2
3
4
5
6
7
8

    body { margin:0px; padding:0px; }
        .root { position:relative; width:988px; border:0px solid #000000; margin:0px auto; padding:0px; text-align:left;
                background-color:#ffffff; color:#000000; margin-top:0px; }
        .head { height:120px; background-color:#ff0000; }
        .content { width:100%; min-height:655px; margin:0px; background-color:#000000; }
        .ausgabe { min-height:700px; [B]/*position:absolute;*/ [/B]float:left; padding-left:1px; width:796px; min-width:796px; background-color:#00ff00; }
        .info { margin-left:1px; width:189px; [B]/*left:797px;*/ /*position:absolute;*/ [/B]float:left; background-color:#0000ff; }
        .footer { height:20px; background-color:#000f00; }
    erweitere das Stylesheet mit der folgenden Regel:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14

    .clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
 
.clearfix {display:inline-block;}
 
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
    ruf die Klasse clearfix zusätzlich im DIV content auf:

    Code :
    1

    <div class="content [B]clearfix[/B]">
    und korrigiere zum Schluß im HTML-Code den Schreibfehler im class-Attribut des DIVs footer.
     
  3. 15.05.08 19:01 #3
    matzseesi matzseesi ist offline Mitglied Gold
    Registriert seit
    Dec 2003
    Beiträge
    205
    Hi,

    Danke für die rasche antwort!
    Hast recht das clearfix hatte ich vergessen! hab diesen Code nur hier fürs Forum schnell getippt damit es etwas anschaulicher wird und dabei diese Details vergessen.

    dh. falls ich absolut positioniere, funktioniert es nicht?

    Gruß

    M.
     
  4. 15.05.08 19:03 #4
    Maik Tutorials.de Gastzugang
    Zitat Zitat von matzseesi Beitrag anzeigen
    dh. falls ich absolut positioniere, funktioniert es nicht?
    Richtig, eine absolute Positionierung verhindert das "Mitwachsen" der Parent-Box content.
     
« IE7 Darstellungsfehler | Kein Inhalt zu sehen | Brauche Hilfe bei CSS Tabs »

Ähnliche Themen

  1. [IE7] DIV wird nicht größer trotz nichteingestellter höhe
    Von DiDiJo im Forum CSS
    Antworten: 6
    Letzter Beitrag: 17.12.08, 17:03
  2. Container wird einfach größer!
    Von thefaxx im Forum CSS
    Antworten: 5
    Letzter Beitrag: 16.05.07, 17:45
  3. Maske, die nicht nur größer wird, sondern auch verschwindet
    Von christian14 im Forum Flash Plattform
    Antworten: 3
    Letzter Beitrag: 02.07.05, 13:39
  4. Tabelle wird immer größer
    Von Freak_Desperado im Forum PHP
    Antworten: 3
    Letzter Beitrag: 21.10.04, 06:25