Not logged in. · Lost password · Register
Forum: Customising UNB › Designs RSS
Eigene div-Box "beschneidet" vorgegebene divs
stuetzl 2007-12-09, 18:23 #1
Member since Dec 2007 · 15 posts
Group memberships: Members
Show profile · Link to this post
Subject: Eigene div-Box "beschneidet" vorgegebene divs
Der Titel mag etwas verwirrend sein, aber das Problem ist mit dem PrintScreen einfach zu erklären (siehe Anhang).
Ich bastle grad etwas an meinem Design und da fällt mir auf, dass mein zusätzliches div mit der beige-hellbraunen Hintergrundfarbe nicht bis zum Seitenende mitgeht.

Vom Aufbau her ist's so: ich hab zwischen dem Logo-div und dem "angemeldet als [name]" ein div eingefügt (div#forumsinhalt), und dieses dann mit eben jenem beige-hellbraunen Farbton versehen (dazu noch ein 10px-padding und ein margin: 0 100px; für schönere Abstände).

Wieso geht jetzt mein eingefügtes div mit dem div .page_outer_container und nicht mit div .categories_outer_container mit? Denn dem Quellcode nach sind beide container im div#forumsinhalt enthalten; folglich sollte mein div die container nicht beschneiden. Wieso dann doch?
Ich kann euch noch den Quellcode der Seite zeigen, wenn ihr wollt.

gruss stuetzl
The author has attached one file to this post:
prtscr.jpg 143.2 kBytes
You have no permission to open this file.
Avatar
Yves (Administrator) 2007-12-09, 19:16 #2
User title: UNB developer & webmaster
Member since Jan 2004 · 3855 posts · Location: Erlangen, Germany
Group memberships: Administrators, Members
Show profile · Link to this post
Ich hab das jetzt nicht ganz verstanden, aber versuche mal, dir mit einer Erklärung der Grundlagen dessen, was wir auf dem Bild sehen, weiterzuhelfen.

Du hast ein div mit einer Hintergrundfarbe versehen, das nur den Teil der rechten Seite enthält. Demnach ist dieses div auch nur so hoch wie sein Inhalt, und der hört da auf, wo der Inhalt auf der rechten Seite aufhört. Die linke Box ist ein float. D.h. dass sie jeder weitere Inhalt an ihr vorbeifließt. Diese floating box (auch ein div) kann viel höher sein als das, was daran vorbeifließt (der rechte Inhalt). Da die linke Box aber nicht mit der Hintergrundfarbe versehen ist, wirkt sich die Farbe natürlich auch nicht auf die floating box aus.

Was du jetzt brauchst, ist ein div, das neben dem rechten Inhalt auch die komplette floating box enthält, damit es ausreichend hoch ist, um beide Seiten (links und rechts) mit der Hintergrundfarbe auszufüllen. Dafür wirst du vermutlich ein neues <div> um die beiden Container setzen müssen.

Ich hab grad den Quelltext nicht zur Hand, hoffe aber, dass dir diese Beschreibung schonmal weiterhilft.
♪ ...nanananah, all in all we’re just brilliant thieves, nanananah... ♪♬
stuetzl 2007-12-09, 20:10 #3
Member since Dec 2007 · 15 posts
Group memberships: Members
Show profile · Link to this post
Du hast den Nagel auf den Kopf getroffen. Allerdings muss ich trotzdem noch einmal nachfragen.
Quote by Yves:
Du hast ein div mit einer Hintergrundfarbe versehen, das nur den Teil der rechten Seite enthält. Demnach ist dieses div auch nur so hoch wie sein Inhalt, und der hört da auf, wo der Inhalt auf der rechten Seite aufhört.
öh, nein. ;) mein eingefügtes div (id="forumsinhalt") umfasst alles zwischen header und footer.
Wenn ich jetzt noch ein div zwischen Anfang und Ende von Controlpanel-Template lege, führt das zum selben Ergebnis.

Ich hänge mal den Quelltext der Seite "summary" an

gruss stuetzl
The author has attached one file to this post:
controlpanel.txt 7.1 kBytes
You have no permission to open this file.
Avatar
Dark Spot in the Corner 2007-12-11, 09:20 #4
Member since Nov 2005 · 61 posts · Location: Der wilde Südwesten! =)
Group memberships: Members
Show profile · Link to this post
Das sieht für mich aus, als fehlt da ein <div style="clear:both;"></div> am Ende des Inhaltscontainers.
stuetzl 2007-12-11, 10:49 #5
Member since Dec 2007 · 15 posts
Group memberships: Members
Show profile · Link to this post
boah genau... Sowas hat mir gefehlt. Jetzt funktionierts!

Danke Dark Spot!

gruss stuetzl
Close Smaller – Larger + Reply to this post:
Verification code: VeriCode Please enter the word from the image into the text field below. (Type the letters only, lower case is okay.)
Smileys: :-) ;-) :-D :-p :blush: :cool: :rolleyes: :huh: :-/ <_< :-( :'( :#: :scared: 8-( :nuts: :-O
Special characters:

Go to forum
This board is powered by the Unclassified NewsBoard software, 20120620-dev, © 2003-2011 by Yves Goergen
Page created in 161.3 ms (110.7 ms) · 71 database queries in 110 ms
Current time: 2013-05-20, 01:55:47 (UTC +02:00)