|
|||
CSS Float Problem
Hallo, ich sehe im Moment den Wald vor lauter Bäumen nicht mehr,
weswegen ich um hilfe bitten möchte. So soll mein vorhaben mit CSS umgesetzt werden: Code:
---------Box A ---------------------------- -----Box C---- ------Text Box A-------------------------- ---Text C----- ---Text C----- ---Box B1--- ---Box B2--- ---Box B3--- ---Text C----- ---Text B1-- ---Text B2-- ---Text B3-- ---Text C----- Code:
<div id="container"> <div id="smallbox"> <div class="boxhead" id="boxA"> TabA </div> <div class="boxcontent" id="boxA"> Einigung </div> <div id="smallboxA"> <div class="boxhead" id="boxB"> Tab1a </div> <div class="boxcontent" id="boxB"> dddd </div> </div> <div id="smallboxA"> <div class="boxhead" id="boxB"> Tab1b </div> <div class="boxcontent" id="boxB"> dddd </div> </div> <div id="smallboxA"> <div class="boxhead" id="boxB"> Tab1c </div> <div class="boxcontent" id="boxB"> dddd </div> <br style="clear:both;"></div> </div> <div id="smallbox"> <div class="boxhead" id="boxC"> TabC </div> <div class="boxcontent" id="boxC"> xxxxxxxx </div></div> </div> Code:
div#container{ width: 990px; margin:0 auto 0px; padding:0px; text-align: left; overflow: hidden; } div.boxhead{ margin-top:20px; width:624px !important; width:624px; height: 19px !important; height: 19px; border:solid 2px #3578B5; border-bottom:solid 1px #3578B5; background-color: #E5ECF9; padding-top:2px; padding-left:3px; padding-right:3px; position: relative; left: 10px; font-weight:bold; } div.boxcontent{ width:624px !important; width:624px; background-color: #fff; text-align:left; border:solid 2px #3578B5; border-top:none; position: relative; left: 10px; padding: 3px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; } div#boxA{ width: 729px !important; width: 729px; float:left; clear:left; } div#boxB{ width: 237px !important; width: 237px; margin-left: 10px; float:left; clear:left; } div#boxC{ width: 230px !important; width: 230px; margin-left: 10px; float:left; clear:left; } div#smallbox{ float:left; } div#smallboxA{ float:left; } Hoffentlich kann mir jemand helfen. Vielen Dank im Vorraus flo PS: Live kann man die bisherige Anordnung hier sehen: http://www.freeweb24.de/test_css.html |
Sponsored Links |
Sponsored Links |
|
|||
Könntet ihr mal schauen, was in meinem Quellcode falsch sein könnte, oder was ich verbessern müsste, damit es funktioniert. Ich beschäftige mich mit CSS seit nicht ganz 2 Tagen, deshalb bin ich da nicht so der Held, auch wenn ich mir über float und einige andere Funktionen gedanke gemacht habe.
Vielen Dank im Vorraus PS: Eigentlich umschliessen ich in der "smallbox" alles, was links stehen soll und in der zweiten "smallbox" die tabelle c, die rechts stehen soll, von daher mache ich schon das, was dein tipp ist... Geändert von flo007 (09.08.2007 um 01:20 Uhr) |
|
|||
Wenn ich jetzt die Divs wie folgt verändere:
Code:
<div id="container"> <div id="smallbox"> <div class="boxhead" id="boxA"> TabA </div> <div class="boxcontent" id="boxA"> Einigung </div> <div id="smallboxA"> <div class="boxhead" id="boxB"> Tab1a </div> <div class="boxcontent" id="boxB"> dddd </div> <div class="boxhead" id="boxB"> Tab1b </div> <div class="boxcontent" id="boxB"> dddd </div> <div class="boxhead" id="boxB"> Tab1c </div> <div class="boxcontent" id="boxB"> dddd </div></div> </div> <div id="smallbox"> <div class="boxhead" id="boxC"> TabC </div> <div class="boxcontent" id="boxC"> xxxxxxxx </div></div> </div> Code:
--------Tab A--------- -----Tab C---- ---Tab A1--- ---Tab A2--- ---Tab A3--- |
|
|||
Eigentlich mache ich das, aber es funktioniert net. ;(
http://www.freeweb24.de/test_css.html CSS: Code:
div#boxB{ width: 237px !important; width: 237px; float:left; } div#boxB1{ width: 237px !important; width: 237px; margin-left: 7px; float:left; } div#boxB2{ width: 237px !important; width: 237px; margin-left: 7px; float:left; } div#smallboxA{ float:left; clear:left; } Code:
<div id="smallbox"> <div class="boxhead" id="boxA"> TabA </div> <div class="boxcontent" id="boxA"> Einigung </div> <div id="smallboxA"> <div class="boxhead" id="boxB"> Tab1a </div> <div class="boxcontent" id="boxB"> dddd </div> <div class="boxhead" id="boxB1"> Tab1b </div> <div class="boxcontent" id="boxB1"> dddd </div> <div class="boxhead" id="boxB2"> Tab1c </div> <div class="boxcontent" id="boxB2"> dddd </div></div></div> |
Sponsored Links |
|
||||
Validiere erstmal: The W3C Markup Validation Service
Und wirf alle important-Deklarationen raus (sind überflüssig). |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS float <div> | FSxx | CSS | 10 | 05.07.2009 21:27 |
Doctype und CSS Problem | tech | CSS | 3 | 29.05.2009 21:16 |
Problem mit CSS Style | flo007 | CSS | 3 | 25.01.2009 18:08 |
Problem mit CSS | MaxxWald | CSS | 3 | 13.01.2009 22:00 |
Mozilla zeigt DIV zu oft an | cracki | CSS | 6 | 09.03.2008 16:22 |