Antworten zum Thema „Problemkind: "CSS-Float" Div(-Boxen) Anordnung“

eFoX · 30.08.2008

hi,

jetzt weis ich wirklich nicht mehr weiter, seit 3h probiere ich nun alles mögliche rum aber finde einfach keine lösung.

folgendes problemkind:

erklärung der div-boxen:
links oben, "navigation" = #boxtitle
rechts oben, "home" = #contenttitle

unter links drunter container mit den ganzen links = #box
unter rechts soll der content-container kommen = #content

danach folgt ein float:clear und eine zweite box bestehend aus #boxtitle ("aktuelles") + #box ("hier fehlen noch unterpunkte") wird *ungefähr mittig zum content zu sehen sein. *ungefähr weil das keine rolle spielt

mein html-quellcode dazu, ich versuche es wie bei der erklärung umzusetzen und schreibe die kommentare extra aus:

HTML:

<!-- Box 1 Titel links-->
<div id="boxtitle">Navigation</div>

<!-- Contenttitel direkt rechts davon -->
<div id="contenttitle">&raquo;Home</div>


<!-- Box 1 direkt unterm box1titel links -->
<div id="box">
<a class="menu" href="#">&raquo; Home</a><br />
<a class="menu" href="#">&raquo; Artwork</a><br />
<a class="menu" href="#">&raquo; Fotografie</a><br />
<a class="menu" href="#">&raquo; Download</a><br />
<a class="menu" href="#">&raquo; Kontakt</a><br />
<a class="menu" href="#">&raquo; Disclaimer</a><br />

<a class="hidelink" href="http://validator.w3.org/check?uri=referer">
<img style="border:0;width:80px;height:15px" src="xhtml10.gif" alt="Valid XHTML 1.0 Transitional" /></a>

<a class="hidelink" href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:80px;height:15px" src="css.png" alt="Valid CSS!" /></a>
</div>

<!-- Content direkt unterm titel rechts-->
<div id="content">

[... jede menge contenttext ...]

</div>

<!-- Das Clear hebt den Float von box1 auf content auf und ermöglicht direkt unter box1 eine weitere box2 mit zwischenabstand siehe margin -->

<br style="clear:left;" />


<!-- Box 2 Titel -->
<div id="boxtitle">Aktuelles</div>

<!-- Box 2 -->
<div id="box">
<a class="menu" href="#">&raquo; Hier</a><br />
<a class="menu" href="#">&raquo; fehlen</a><br />
<a class="menu" href="#">&raquo; noch</a><br />

<a class="menu" href="#">&raquo; weitere</a><br />
<a class="menu" href="#">&raquo; Unterpunkte</a><br />
</div>

mein css sieht so aus:

PHP:

#box {
width:15%;
padding:5px;
margin:-5px 5px 5px 5px;
border:1px solid #409DFC;
background-image:url(7x7dunkelgrau90.png);
line-height:18px;
}

#boxtitle {
width:15%;
padding:5px;
margin:10px 0px 5px 5px;
border-left:1px solid #409DFC;
border-top:1px solid #409DFC;
border-right:1px solid #409DFC;
background-image:url(7x7blau75_409DFC.png);
font-weight:bold;
color: #FFF;
letter-spacing:3px;
}

#content {
width:80%;
border:1px solid #409DFC; 
background-image:url(7x7dunkelgrau90.png);
float:right;
margin:-5px 5px 5px 10px;
}

#contenttitle {
width:80%;
float:right;
padding:5px;
margin:0px 5px 5px 0px;
border:1px solid #409DFC;
background-image:url(7x7blau75_409DFC.png);
font-weight:bold;
color: #FFF;
letter-spacing:3px;
text-align:right;
}

Den aktuellen Stand seht ihr weiter unten!!

wo ist mein fehlerteufel drin?? :motz:

ich habe zuerst den margin zwischen den beiden box1 titel sowie contenttitel vermutet, isses aber wohl nicht. auch das ich irgendwo nen absatz oder was ganz triviales vergessen habe?
oder ich hab einfach die float mechanik nicht gerallt oder den quellcode falsch aufgebaut.

wäre nett wenn jemand kurz drüberrutschen könnte

-edit-
auf http://www.skrypta.de könnt ihr eine ältere variante davon sehen, in der aber alles funktioniert. habe das sheet übern haufen geschmissen weil ich transparente titel haben wollte. (damals auch die titel als "class" definiert)

Top_Gun · 30.08.2008

AW: Problemkind: "CSS-Float" Div(-Boxen) Anordnung

Wo bitte ist denn dein Problem?

exploit89 · 30.08.2008

AW: Problemkind: "CSS-Float" Div(-Boxen) Anordnung

Top_Gun schrieb:
Wo bitte ist denn dein Problem?

ich vermute er meint das die blaue headline nicht mir dem unteren div zusammen an die navi boxen ausgerichtet ist ... da sie ja einfach da "liegen"

Aaasaasa · 30.08.2008

AW: Problemkind: "CSS-Float" Div(-Boxen) Anordnung

Er meint dass die div's verstreut sind und er weiß es nicht wie er die zähmen kann

:lol:

eFoX · 30.08.2008

AW: Problemkind: "CSS-Float" Div(-Boxen) Anordnung

genau, das habe ich vergessen zu sagen. ich finde auch diesen direkten umbruch von box1 zu content sehr komisch. ggf. doch margin schuld?

Top_Gun · 30.08.2008

AW: Problemkind: "CSS-Float" Div(-Boxen) Anordnung

Ähm... wenn die CSS-Definitionen für contenttitle und boxtitle sich so unterscheiden (gerade bei Margin) kann das schonmal gar nicht gehen... passe die Definitionen erstmal an

eFoX · 30.08.2008

AW: Problemkind: "CSS-Float" Div(-Boxen) Anordnung

habs schon geändert, bringt aber nix. vermute wirklich es liegt am float oder ich hab i-wo dummerweise nen zeilenumbruch drin den ich nicht finde. ich poste gleich nen pic wie ich mir das vorstelle.

eFoX · 30.08.2008

AW: Problemkind: "CSS-Float" Div(-Boxen) Anordnung

hier mal eine grafik wie ich mir das vorgestellt habe:

darum vermute ich nicht mehr es könnte am margin liegen...

so siehts auf der page mit den neuen divs aus:

nochmal das neuere sheet mit den angepassten divs:

PHP:

#box {
float:left;
width:15%;
padding:5px;
margin:0px 0px 5px 5px;
border:1px solid #409DFC;
background-image:url(7x7dunkelgrau90.png);
line-height:18px;
}

#boxtitle {
width:15%;
padding:5px;
margin:10px 0px 0px 5px;
border-left:1px solid #409DFC;
border-top:1px solid #409DFC;
border-right:1px solid #409DFC;
background-image:url(7x7blau75_409DFC.png);
font-weight:bold;
color: #FFF;
letter-spacing:3px;
}

#content {
float:right;
width:80%;
border:1px solid #409DFC; 
background-image:url(7x7dunkelgrau90.png);
margin:0px 5px 5px 0px;
}

#contenttitle {
float:right;
width:80%; 
padding:5px 0px 5px 0px;
margin:10px 5px 0px 0px;
border-left:1px solid #409DFC;
border-top:1px solid #409DFC;
border-right:1px solid #409DFC;
background-image:url(7x7blau75_409DFC.png);
font-weight:bold;
color: #FFF;
letter-spacing:3px;
text-align:right;
}

der neue quelltext:

HTML:

<!-- Box 1 Titel -->
<div id="boxtitle">Navigation</div>

<!-- Box 1 -->
<div id="box">
<a class="menu" href="#">&raquo; Home</a><br />
<a class="menu" href="#">&raquo; Artwork</a><br />
<a class="menu" href="#">&raquo; Fotografie</a><br />
<a class="menu" href="#">&raquo; Download</a><br />
<a class="menu" href="#">&raquo; Kontakt</a><br />
<a class="menu" href="#">&raquo; Disclaimer</a><br />

<p>
<a class="hidelink" href="http://validator.w3.org/check?uri=referer">
<img style="border:0;width:80px;height:15px" src="xhtml10.gif" alt="Valid XHTML 1.0 Transitional" /></a>

<a class="hidelink" href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:80px;height:15px" src="css.png" alt="Valid CSS!" /></a>
</p>
</div>





<!-- Contenttitel -->
<div id="contenttitle">&raquo;Home</div>

<!-- Content -->
<div id="content">
jede menge blindtext 1
jede menge blindtext 2
jede menge blindtext 3
</div>

<!-- Das Clear hebt den Float auf -->
<br style="clear:left;" />
<!-- Box 2 -->



<!-- Box 2 Titel -->
<div id="boxtitle">Aktuelles</div>

<!-- Box 2 -->
<div id="box">
<a class="menu" href="#">&raquo; Hier</a><br />
<a class="menu" href="#">&raquo; fehlen</a><br />
<a class="menu" href="#">&raquo; noch</a><br />

<a class="menu" href="#">&raquo; weitere</a><br />
<a class="menu" href="#">&raquo; Unterpunkte</a><br />
</div>

vermutung: float?

edit: http://www.skrypta.de/newcss/index.html
(so siehts momentan aus)

Top_Gun · 30.08.2008

AW: Problemkind: "CSS-Float" Div(-Boxen) Anordnung

Ähm... Schau dir dein CSS mal bitte genau an:

HTML:

#boxtitle {
padding:5px;
margin:10px 0px 0px 5px;
}

#contenttitle {
padding:5px 0px 5px 0px;
margin:10px 5px 0px 0px;
}

Edit: In deiner Zeichnung willst du einen Abstand zwischen den Boxen haben, wenn du aber den linken bzw rechten margin-Wert auf 0px setzt wirst du da keinen Abstand haben...

eFoX · 30.08.2008

AW: Problemkind: "CSS-Float" Div(-Boxen) Anordnung

ja weil der abstand von den übrigen 5% kommen sollte, 5% übrig weil ja die box mit einer 15% width und den content mit einer 80% width definiert ist! ich kann auch nen extremen wert von 200px einsetzen und es ändert sich nicht.

Top_Gun · 30.08.2008

AW: Problemkind: "CSS-Float" Div(-Boxen) Anordnung

Also ich hab mir jetzt die Mühe gemacht deine Seite und das CSS mal durch zu forsten und es ist ein einfacher Fehler, weswegen wir ihn wohl nicht bemerkt haben...

Als erstes möchte ich dich aber bitten, wenn du bei einer box den Rahmen oder den Abstand für alle 4 Seiten anzugeben nicht für jede eine Zeile CSS zu schreiben (Bei den Title-divs konnte ich das ja noch verstehen, hab es da aber auch zum testen zusammengefasst)

Probier mal das:
CSS:

HTML:

#box {
    BORDER: #409dfc 1px solid;
        PADDING: 5px;
        FLOAT: left;
        BACKGROUND-IMAGE: url(7x7dunkelgrau90.png);
        MARGIN: 0px 0px 0px 5px;
        WIDTH: 15%;
        LINE-HEIGHT: 18px
}
#boxtitle {
    BORDER: #409dfc 1px solid;
        PADDING: 5px;
        FLOAT: left;
        BACKGROUND-IMAGE: url(7x7blau75_409DFC.png);
        MARGIN: 10px 0px 0px 5px;
        WIDTH: 15%;
        COLOR: #fff;
        FONT-WEIGHT: bold;
        LETTER-SPACING: 3px
}
#content {
    BORDER: #409dfc 1px solid;
        PADDING: 5px;
        FLOAT: right;
        BACKGROUND-IMAGE: url(7x7dunkelgrau90.png);
        MARGIN: 0px 5px 0px 0px;
        WIDTH: 80%
}
#contenttitle {
    BORDER: #409dfc 1px solid;
        PADDING: 5px;
        FLOAT: right;
        BACKGROUND-IMAGE: url(7x7blau75_409DFC.png);
        MARGIN: 10px 5px 0px 0px;
        WIDTH: 80%;
        COLOR: #fff;
        LETTER-SPACING: 3px;
        FONT-WEIGHT: bold;
        TEXT-ALIGN: right
}

HTML:

<!-- Contenttitel -->
<DIV id=contenttitle>Contenttitle</DIV>
<!-- Box 1 Titel -->
<DIV id=boxtitle>Boxtitle 1</DIV>
<!-- Content -->
<DIV id=content>
Content
</DIV>
<!-- Box 1 -->
<DIV id=box>
Box 1
</DIV>
<!-- Das Clear hebt den Float auf --><BR style="CLEAR: left">
<!-- Box 2 Titel -->
<DIV id=boxtitle>Boxtitle 2</DIV>
<!-- Das Clear hebt den Float auf --><BR style="CLEAR: left">
<!-- Box 2 -->
<DIV id=box>
Box 2
</DIV>

Wenn du dir deine divs mal als Tabelle vorstellst, wirst du sehen, dass du pro Zeile eine linke und eine rechte Zelle brauchst. In deinem Beispiel hattest du es aber so aufgeteilt, dass du

eine linke Zelle (boxtitle 1) hattest und keine rechte
eine linke Zelle (box 1) und eine rechte (contenttitle) - Deswegen waren die dann auf gleicher Höhe

Deswegen war das ganze verschoben, nicht wie angenommen wegen den Margin oder Paddingwerten... (Hätte auch gar nicht sein können fällt mir jetzt auf, hattest für oben ja die gleichen Werte angegeben, war da wohl Betriebsblind, sorry)

eFoX · 30.08.2008

AW: Problemkind: "CSS-Float" Div(-Boxen) Anordnung

hey top_gun,
erstmal danke für deine hilfe. im endeffekt steht es nun durch deine hilfe/lösung, wie es stehen sollte... ich hab natürlich noch bissl im sheet rumgespielt. die idee das ich eigentlich zwei floats "clearen" muss habe ich mal kurz in betracht gezocken es aber verworfen. den content rechts zuerst anzufloaten verstehe ich nicht ganz, aber es funktioniert so wohl.
wie meinst du das:

wenn du bei einer box den Rahmen oder den Abstand für alle 4 Seiten anzugeben nicht für jede eine Zeile CSS zu schreiben

sollte ich dafür gar ein "ÜBER" div verwenden? ich weis so ist es ein ziemlicher aufwand, schien mir aber für die lösung noch am besten da ich eben dann weis wo ich welchen abstand nehme.
ich werd jetzt einfach nochmal mein css geschreibsel schöner formatieren, editor ftw! eine danksagung im nächsten homepageworkshop sei dir gewiss!

Top_Gun · 31.08.2008

AW: Problemkind: "CSS-Float" Div(-Boxen) Anordnung

eFoX schrieb:
wie meinst du das:

wenn du bei einer box den Rahmen oder den Abstand für alle 4 Seiten anzugeben nicht für jede eine Zeile CSS zu schreiben

Zum Vergrößern anklicken....

Dein CSS sah auf deiner Seite (anders als du es hier gepostet hast) so aus:

HTML:

#box {
width:15%;
border-top:1px solid #409DFC;
padding-top:5px;
border-right:1px solid #409DFC;
padding-right:5px;
margin:-5px 5px 5px 5px;
border-left:1px solid #409DFC;
padding-left:5px;
background-image:url(7x7dunkelgrau90.png);
border-bottom:1px solid #409DFC;
padding-bottom:5px;
line-height:18px;
}

Ich weiß nicht ob du die padding und border Angaben selber so zerpflückt hast, so dass für jede Seite (top, right, bottom, left) eine Angabe gemacht wurde, wenn ja dann benutze bitte das nächste mal:

HTML:

border:1px solid #409DFC;
 padding:5px;

eFoX schrieb:
sollte ich dafür gar ein "ÜBER" div verwenden? ich weis so ist es ein ziemlicher aufwand, schien mir aber für die lösung noch am besten

Ich finde es ist weniger Aufwand weil dadurch alles übersichtlicher werden würde... Aber das muss jeder selber wissen...

eFoX · 31.08.2008

AW: Problemkind: "CSS-Float" Div(-Boxen) Anordnung

Top_Gun schrieb:
Dein CSS sah auf deiner Seite (anders als du es hier gepostet hast) so aus:

HTML:

#box { width:15%; border-top:1px solid #409DFC; padding-top:5px; border-right:1px solid #409DFC; padding-right:5px; margin:-5px 5px 5px 5px; border-left:1px solid #409DFC; padding-left:5px; background-image:url(7x7dunkelgrau90.png); border-bottom:1px solid #409DFC; padding-bottom:5px; line-height:18px; }

Ich weiß nicht ob du die padding und border Angaben selber so zerpflückt hast, so dass für jede Seite (top, right, bottom, left) eine Angabe gemacht wurde, wenn ja dann benutze bitte das nächste mal:

HTML:

border:1px solid #409DFC; padding:5px;

das padding für top/right/left/bottom muss wohl dein editor so zerpflückt haben. so ein css habe ich nicht gepostet. ich habe es immer mit padding:5px gelöst. selbst habe ich den code im editor geschrieben, einzig die border habe ich zerpflückt. wobei das könnte ich ja wieder einfacher machen mit border: xxx und border-bottom: 0px (möchte kein border auf der unterseite)

wenn du mal schauen willst wie es aussieht: klick!

Top_Gun · 31.08.2008

AW: Problemkind: "CSS-Float" Div(-Boxen) Anordnung

eFoX schrieb:
das padding für top/right/left/bottom muss wohl dein editor so zerpflückt haben. so ein css habe ich nicht gepostet. ich habe es immer mit padding:5px gelöst. selbst habe ich den code im editor geschrieben, einzig die border habe ich zerpflückt. wobei das könnte ich ja wieder einfacher machen mit border: xxx und border-bottom: 0px (möchte kein border auf der unterseite)

wenn du mal schauen willst wie es aussieht: klick!

Wenn dann hat das der IE6 so zerpflückt, aber egal ^^

Joar sieht doch nett aus. Mir fehlt unter der 2. Box aber noch ein bissl Freiraum...