Floatende CSS container @ tutorials.de: Tutorials, Forum & Hilfe

directtel · 04.05.11 17:06

Hallo zusammen,

ich befasse mich seit kurzem mit CSS und floatenden div Containern. Dazu möchte ich eine Seite mit mehreren Containern erstellen die an verschiedenen Stellen angeordnet sind.

Es klappt eigentlich auch alles soweit ganz gut, nur habe ich eine Sache die ich nicht ganz verstehe. Um alle meine Container habe ich einen Rahmen-Container erstellt um alle divs zusammenzuhaben. Klappt eigentlich auch ganz gut, nur auf einmal wenn ich die letzten div-klassen festlege, rutscht der Rahmen nach oben und die letzten div's werden nicht mehr mit eingeschlossen.

Hier mal mein Beispiel:

HTML-Code:

<head>
    <title><!-- Insert your title here --></title>
    <style type="text/css">
        .dtwrapper {
            border: solid 1px yellow;
            padding: 5px;
            width: 800px;
        }
        .dtheader { /* Main header of the product site */
            border: solid 1px grey;
            margin: 0px 0px 10px 0px;
        }
        .dtusr1 { /* General information for the product, applicable to all options */
            border: solid 1px blue;
            float: left;
            width: 250px;
        }
        .dtusr1:hover { /* Mouse over effect for the general information box */
            background-color: grey;
            cursor: default;
        }
        .dtusr2 {
            float: left;
            border: solid 1px red;
            width: 250px;
            margin: 0px 0px 10px 5px;
        }
        .dtusr2:hover {
            background-color: grey;
            color: white;
            cursor: default;
        }        
        .dtusr3 {
            float: left;
            border: solid 1px orange;
            width: 250px;
            margin: 0px 0px 10px 5px;
        }
        .dtusr3:hover { 
            background-color: grey;
            cursor: default;
        }        
        .dtmainproduct { /* Box for main product of the site */
            clear: both;
            border: solid 1px green;
            margin: 0px 0px 10px 0px;
        }
        .dtoptext1 { /* Optional extras for the main product if applicable */
            border: solid 1px purple;
            float: left;
            width: 250px;
            margin: 0px 0px 10px 0px;
        }
        .dtoptext2 {
            border: solid 1px black;
            float: left;
            width: 250px;
            margin: 0px 0px 10px 5px;
        }
        .dtoptext3 {
            border: solid 1px green;
            float: left;
            width: 250px;
            margin: 0px 0px 10px 5px;
        }
        .dtsubproduct1 { /* Box for sub products (e.g. Manual prefix or Autoamtich prefix on the page of lines & calls, main product is DT OneBill) */
            border: solid 1px blue;
            clear: left;
            float: left;
            min-width: 250px;
            margin: 0px 0px 10px 0px;
        }
        .dtsubproduct2 {
            border: solid 1px red;
            float: left;
            min-width: 250px;
            margin: 0px 0px 10px 5px;
        }
        .dtsubproduct3 {
            border: solid 1px black;
            float: left;
            min-width: 250px;
            margin: 0px 0px 10px 5px;            
        }        
    </style>
</head>
<body>
    <div class="dtwrapper">
        <div class="dtheader">This will be the header</div>
        <div class="dtusr1">dtusr1</div>
        <div class="dtusr2">No call connection charge with any of our products.<br />No call connection charge with any of our products.<br />No call connection charge with any of our products.<br /></div>
        <div class="dtusr3">dtusr3</div>
        <div class="dtmainproduct">DT OneBill - Land line rental with Direct Telecom</div>
        <div class="dtoptext1">Optional extra - Line Guard</div>
        <div class="dtoptext2">Optional extra - Uk 250</div>
        <div class="dtoptext3">Optional extra - De 250</div>
        <div class="dtsubproduct1">Manual prefix</div>
        <div class="dtsubproduct2">Automatic prefix</div>
        <div class="dtsubproduct3">Semi-automatic prefix</div>
    </div>
</body>

Hat da jemand von euch eine Idee warum das passiert? Mache ich etwas falsch? Benutze ich vielleicht zu viel float?

Bin für jede Hilfe dankbar.

Schönen Gruss

das-schaf · 04.05.11 18:10

Du musst zum Schluss das floaten beenden mit z.b. nem clear-div. Hier dein Quellcode mit dem Div am ende, ... kuck mal müsste gehn.

HTML-Code:

<head>
    <title><!-- Insert your title here --></title>
    <style type="text/css">
        .dtwrapper {
            border: solid 1px yellow;
            padding: 5px;
            width: 800px;
        }
        .dtheader { /* Main header of the product site */
            border: solid 1px grey;
            margin: 0px 0px 10px 0px;
        }
        .dtusr1 { /* General information for the product, applicable to all options */
            border: solid 1px blue;
            float: left;
            width: 250px;
        }
        .dtusr1:hover { /* Mouse over effect for the general information box */
            background-color: grey;
            cursor: default;
        }
        .dtusr2 {
            float: left;
            border: solid 1px red;
            width: 250px;
            margin: 0px 0px 10px 5px;
        }
        .dtusr2:hover {
            background-color: grey;
            color: white;
            cursor: default;
        }        
        .dtusr3 {
            float: left;
            border: solid 1px orange;
            width: 250px;
            margin: 0px 0px 10px 5px;
        }
        .dtusr3:hover { 
            background-color: grey;
            cursor: default;
        }        
        .dtmainproduct { /* Box for main product of the site */
            clear: both;
            border: solid 1px green;
            margin: 0px 0px 10px 0px;
        }
        .dtoptext1 { /* Optional extras for the main product if applicable */
            border: solid 1px purple;
            float: left;
            width: 250px;
            margin: 0px 0px 10px 0px;
        }
        .dtoptext2 {
            border: solid 1px black;
            float: left;
            width: 250px;
            margin: 0px 0px 10px 5px;
        }
        .dtoptext3 {
            border: solid 1px green;
            float: left;
            width: 250px;
            margin: 0px 0px 10px 5px;
        }
        .dtsubproduct1 { /* Box for sub products (e.g. Manual prefix or Autoamtich prefix on the page of lines & calls, main product is DT OneBill) */
            border: solid 1px blue;
            clear: left;
            float: left;
            min-width: 250px;
            margin: 0px 0px 10px 0px;
        }
        .dtsubproduct2 {
            border: solid 1px red;
            float: left;
            min-width: 250px;
            margin: 0px 0px 10px 5px;
        }
        .dtsubproduct3 {
            border: solid 1px black;
            float: left;
            min-width: 250px;
            margin: 0px 0px 10px 5px;            
        }        
    </style>
</head>
<body>
    <div class="dtwrapper">
        <div class="dtheader">This will be the header</div>
        <div class="dtusr1">dtusr1</div>
        <div class="dtusr2">No call connection charge with any of our products.<br />No call connection charge with any of our products.<br />No call connection charge with any of our products.<br /></div>
        <div class="dtusr3">dtusr3</div>
        <div class="dtmainproduct">DT OneBill - Land line rental with Direct Telecom</div>
        <div class="dtoptext1">Optional extra - Line Guard</div>
        <div class="dtoptext2">Optional extra - Uk 250</div>
        <div class="dtoptext3">Optional extra - De 250</div>
        <div class="dtsubproduct1">Manual prefix</div>
        <div class="dtsubproduct2">Automatic prefix</div>
        <div class="dtsubproduct3">Semi-automatic prefix</div>
        <div style="clear: both"></div>
    </div>
</body>

Grüße,
Tobi

directtel · 05.05.11 10:00

Hallo Tobi,

super das hat geklappt.

Das bedeutet dann, dass man floatende Elemente immer clearen muss und wenn kein weiterer Container mehr kommt, dann einfach einen einfügen?

Vielen Dank für deine Hilfe

das-schaf · 05.05.11 10:25

Japp, so schauts aus

tobi

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

floatende divs, IE mit falscher Position

Hintergrundfarbe in Container A an Höhe Container B anpassen.

[CSS] IE6 rückt floatende Boxen zu weit ein - was tun?

container (div) genauso hoch wie div im container

Floatende Box

E-Mail:

Abonnieren Abbestellen