zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Float Problem

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.08.2007, 23:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.08.2007
Beiträge: 12
flo007 befindet sich auf einem aufstrebenden Ast
Standard 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-----
So versucht habe ich es mit mehreren Divs von einem Beispielquellcode ...


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>
Die CSS Datei dazu:
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;

}
Wenn ich eine boxB unter die boxA setze, dann landet die boxC rchts oben, wenn ich aber drei mal boxB neben einander unter der boxA setzen will, dann landen alle 4 kleinen Boxen rechts neben der boxA.

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.08.2007, 23:28
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Deine Skizze ist etwas verschoben, aber sehe ich richtig, daß es quasi ein 2-spaltiges Design ist? Dann hättest Du alle Elemente außer Box C in einem div, das als linke Spalte dient, und Box C wäre die rechte.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.08.2007, 23:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.08.2007
Beiträge: 12
flo007 befindet sich auf einem aufstrebenden Ast
Standard

Ja, das Stimmt, aber in der linken Tabelle in der zweiten Zeile sollen drei Tabellen bzw. div elemente nebeneinander ...
Mit Zitat antworten
  #4 (permalink)  
Alt 09.08.2007, 00:57
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Das ist ja kein Problem, diese drei floaten alle links.
Mit Zitat antworten
  #5 (permalink)  
Alt 09.08.2007, 01:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.08.2007
Beiträge: 12
flo007 befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #6 (permalink)  
Alt 09.08.2007, 01:24
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Du hast 2 Haupt-divs: Das eine enthält die 4 divs A und B1-3, und das andere ist C. Die beiden Haupt-divs floaten nebeneinander, und innerhalb des linken floaten B1-3 nebeneinander (unterhalb von A).
Mit Zitat antworten
  #7 (permalink)  
Alt 09.08.2007, 01:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.08.2007
Beiträge: 12
flo007 befindet sich auf einem aufstrebenden Ast
Standard

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>
Erhalte ich die folgende Ausgabe
Code:
--------Tab A--------- -----Tab C----
---Tab A1---
---Tab A2---
---Tab A3---
Jetzt soll aber Tab A1, A2 und A3 nebeneinander unter Tab A angezeigt werden.
Mit Zitat antworten
  #8 (permalink)  
Alt 09.08.2007, 01:32
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Deswegen schrieb ich

Zitat:
Zitat von heiko_rs Beitrag anzeigen
innerhalb des linken floaten B1-3 nebeneinander (unterhalb von A).
Gib A1-3 (wie sie jetzt benannt sind) float: left; mit passender Breite.
Mit Zitat antworten
  #9 (permalink)  
Alt 09.08.2007, 02:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.08.2007
Beiträge: 12
flo007 befindet sich auf einem aufstrebenden Ast
Standard

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;
}
HTML nur die linke Seite
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>
;(
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 09.08.2007, 09:45
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Validiere erstmal: The W3C Markup Validation Service

Und wirf alle important-Deklarationen raus (sind überflüssig).
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:56 Uhr.