CSS Layout Prob

Maehmann

OC Addicted

Registered: Aug 2002
Location: Vienna
Posts: 1110

21.07.2005 - 14:58

Hallo Leute,

Ich bin grad dabei eine Layout nur mit CSS zu realisieren und bin dabei auf das folgende Problem gestoßen.

Zu sehen ist das Ganze unter:
Index: http://www.freizeitgeek.net/test
CSS: http://www.freizeitgeek.net/test/css/css.css

Die Navigation ragt über den Nav-Content Container hinaus.
Wenn man den Text im Content Bereich länger macht, passt sich das div entsprechend an.

Es sollte natürlich so sein, dass entweder die Navigation oder der Contentbereich die Höhe des Nav-Content Container bestimmt.

Was muss ich dafür ändern?

*tia*

Christoph

Bearbeitet von Maehmann am 27.07.2005, 19:08

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

21.07.2005 - 15:57

tricky.. damit #navigation und #content einfluss auf die Größe von #navigation-content haben, müssen alle 3 position:relative; haben.. aber dann richtet sich natürlich auch #content unterhalb von #navigation aus... hab jetzt ka Lösung gefunden.

Maehmann

OC Addicted

Registered: Aug 2002
Location: Vienna
Posts: 1110

21.07.2005 - 17:50

jep, hab mich schon ein bissl mit position: absolute, relative gespielt. alles nicht brauchbar =/

Das Einzige wäre eine Tabelle mit zwei Zellen zu machen und in diesen dann die DIVs ... nur dann ist halt das CSS only Layout beim Teufel. =(

ica

hmm

Registered: Jul 2002
Location: Graz
Posts: 9822

21.07.2005 - 20:14

nach deinem content div, also bevor du navigation-content zumachst füg diesen div ein

<div style="clear: both;"> </div>

das problem ist, dass floats ihre größe selbst bestimmen

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

21.07.2005 - 23:46

nice, aber verstehen tu ich das ganze nicht, warum is es mit einem zusätzlichem div mit clear:both; dann so?

ica

hmm

Registered: Jul 2002
Location: Graz
Posts: 9822

22.07.2005 - 00:09

Zitat von Spikx
nice, aber verstehen tu ich das ganze nicht, warum is es mit einem zusätzlichem div mit clear:both; dann so?

ehrlich gesagt - keine ahnung

ich hätts mit nem height:100% gemacht, aber nachdem das nicht funktioniert hat hab ich in meinem css buch nachgesehen und da steht das oben genannte drinnen. außerdem steht dabei, dass height:100% eigentlich funktionieren sollte, es in den browsern aber nicht tut.

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

22.07.2005 - 00:14

na geh, und da steht net drin warum des funktioniert? damn

ica

hmm

Registered: Jul 2002
Location: Graz
Posts: 9822

22.07.2005 - 00:27

Zitat
Floats and Height
The drawback to floats is that they tend to auto-size their height. In some cases, floats will stick out of their parent elements. It’s possible to force a parent element to wrap around floats, but getting floats to stretch taller is much harder. There isn’t a reliable way to force a float to be as tall as its parent element (even though height: 100% should work . You can get a parent to wrap around a float by inserting at the end a clear: both element:

<div style="clear: both;"> </div>

Zitat
Modifying Flow
Despite the obvious value that flow provides, you may wish to prevent content from flowing around a float. You can do this using the clear property and any one of its values, described in Table 6.3.

Table 6.3: Clear Property Values and Their Meanings Value
Description

Left
The top margin of a nonfloated box is increased so that its top border edge is below the bottom margin edge of a left-floated box.

Right
The top margin of the box is increased so that its top border edge is below the bottom margin edge of any right-floated boxes.

Both
The box is moved below all floating boxes.

None
There are no constraints on the box whatsoever.

Quelle und (c) Copyright: Cascading Style Sheets: The Designer's Edge
by Molly E. Holzschlag

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

22.07.2005 - 00:33

thx, war aber net negativ gemeint sondern nur allgemeine Frustration darüber

Maehmann

OC Addicted

Registered: Aug 2002
Location: Vienna
Posts: 1110

23.07.2005 - 01:32

thx ... nice ... werd ich morgen ausprobieren.
hab irgendwie keine emailverständigung bekommen

im mom hab ichs mit einem table gemacht, weil ich was weiterbringen musste ^^

3mind

mimimi

Registered: Sep 2004
Location: 1030
Posts: 1594

23.07.2005 - 08:51

apropos CSS. wenn wer ein eBook dazu hätte wäre ich sehr dankbar wenn er sich bei mir via PM melden würde.

tia. (sry 4 thread missbrauch)

Maehmann

OC Addicted

Registered: Aug 2002
Location: Vienna
Posts: 1110

23.07.2005 - 10:58

@iCA- : Thx a lot. Funktioniert, is halt irgendwie eine "Pfuschlösung" ... aber so wies aussieht, besteht CSS Formatieren aus pfuschen *g*

gue

Addicted

Registered: Feb 2003
Location: Linz
Posts: 400

23.07.2005 - 11:00

Nicht wirklich ein erklärendes EBook aber die CSS-Referenz gibts hier: http://www.w3.org/TR/CSS21/css2.pdf [pdf]
bzw. hier: http://www.w3.org/TR/CSS21/ [html]
@Spikx: Kapitel 9.5 dürfte für dich interessant sein

.

3mind

mimimi

Registered: Sep 2004
Location: 1030
Posts: 1594

23.07.2005 - 11:53

Zitat von gue
Nicht wirklich ein erklärendes EBook aber die CSS-Referenz gibts hier: http://www.w3.org/TR/CSS21/css2.pdf [pdf]
bzw. hier: http://www.w3.org/TR/CSS21/ [html]
...

thx. trotzdem nach wie vor ein 'echtes' eBook req. :rolleyes:

Maehmann OC Addicted Registered: Aug 2002 Location: Vienna Posts: 1110	21.07.2005 - 14:58 Hallo Leute, Ich bin grad dabei eine Layout nur mit CSS zu realisieren und bin dabei auf das folgende Problem gestoßen. Zu sehen ist das Ganze unter: Index: http://www.freizeitgeek.net/test CSS: http://www.freizeitgeek.net/test/css/css.css Die Navigation ragt über den Nav-Content Container hinaus. Wenn man den Text im Content Bereich länger macht, passt sich das div entsprechend an. Es sollte natürlich so sein, dass entweder die Navigation oder der Contentbereich die Höhe des Nav-Content Container bestimmt. Was muss ich dafür ändern? tia Christoph Bearbeitet von Maehmann am 27.07.2005, 19:08
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	21.07.2005 - 15:57 tricky.. damit #navigation und #content einfluss auf die Größe von #navigation-content haben, müssen alle 3 position:relative; haben.. aber dann richtet sich natürlich auch #content unterhalb von #navigation aus... hab jetzt ka Lösung gefunden.
Maehmann OC Addicted Registered: Aug 2002 Location: Vienna Posts: 1110	21.07.2005 - 17:50 jep, hab mich schon ein bissl mit position: absolute, relative gespielt. alles nicht brauchbar =/ Das Einzige wäre eine Tabelle mit zwei Zellen zu machen und in diesen dann die DIVs ... nur dann ist halt das CSS only Layout beim Teufel. =(
ica hmm Registered: Jul 2002 Location: Graz Posts: 9822	21.07.2005 - 20:14 nach deinem content div, also bevor du navigation-content zumachst füg diesen div ein <div style="clear: both;"> </div> das problem ist, dass floats ihre größe selbst bestimmen
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	21.07.2005 - 23:46 nice, aber verstehen tu ich das ganze nicht, warum is es mit einem zusätzlichem div mit clear:both; dann so?
ica hmm Registered: Jul 2002 Location: Graz Posts: 9822	22.07.2005 - 00:09 Zitat von Spikx nice, aber verstehen tu ich das ganze nicht, warum is es mit einem zusätzlichem div mit clear:both; dann so? ehrlich gesagt - keine ahnung ich hätts mit nem height:100% gemacht, aber nachdem das nicht funktioniert hat hab ich in meinem css buch nachgesehen und da steht das oben genannte drinnen. außerdem steht dabei, dass height:100% eigentlich funktionieren sollte, es in den browsern aber nicht tut.
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	22.07.2005 - 00:14 na geh, und da steht net drin warum des funktioniert? damn
ica hmm Registered: Jul 2002 Location: Graz Posts: 9822	22.07.2005 - 00:27 Zitat Floats and Height The drawback to floats is that they tend to auto-size their height. In some cases, floats will stick out of their parent elements. It’s possible to force a parent element to wrap around floats, but getting floats to stretch taller is much harder. There isn’t a reliable way to force a float to be as tall as its parent element (even though height: 100% should work . You can get a parent to wrap around a float by inserting at the end a clear: both element: <div style="clear: both;"> </div> Zitat Modifying Flow Despite the obvious value that flow provides, you may wish to prevent content from flowing around a float. You can do this using the clear property and any one of its values, described in Table 6.3. Table 6.3: Clear Property Values and Their Meanings Value Description Left The top margin of a nonfloated box is increased so that its top border edge is below the bottom margin edge of a left-floated box. Right The top margin of the box is increased so that its top border edge is below the bottom margin edge of any right-floated boxes. Both The box is moved below all floating boxes. None There are no constraints on the box whatsoever. Quelle und (c) Copyright: Cascading Style Sheets: The Designer's Edge by Molly E. Holzschlag
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	22.07.2005 - 00:33 thx, war aber net negativ gemeint sondern nur allgemeine Frustration darüber
Maehmann OC Addicted Registered: Aug 2002 Location: Vienna Posts: 1110	23.07.2005 - 01:32 thx ... nice ... werd ich morgen ausprobieren. hab irgendwie keine emailverständigung bekommen im mom hab ichs mit einem table gemacht, weil ich was weiterbringen musste ^^
3mind mimimi Registered: Sep 2004 Location: 1030 Posts: 1594	23.07.2005 - 08:51 apropos CSS. wenn wer ein eBook dazu hätte wäre ich sehr dankbar wenn er sich bei mir via PM melden würde. tia. (sry 4 thread missbrauch)
Maehmann OC Addicted Registered: Aug 2002 Location: Vienna Posts: 1110	23.07.2005 - 10:58 @iCA- : Thx a lot. Funktioniert, is halt irgendwie eine "Pfuschlösung" ... aber so wies aussieht, besteht CSS Formatieren aus pfuschen g
gue Addicted Registered: Feb 2003 Location: Linz Posts: 400	23.07.2005 - 11:00 Nicht wirklich ein erklärendes EBook aber die CSS-Referenz gibts hier: http://www.w3.org/TR/CSS21/css2.pdf [pdf] bzw. hier: http://www.w3.org/TR/CSS21/ [html] @Spikx: Kapitel 9.5 dürfte für dich interessant sein .
3mind mimimi Registered: Sep 2004 Location: 1030 Posts: 1594	23.07.2005 - 11:53 Zitat von gue Nicht wirklich ein erklärendes EBook aber die CSS-Referenz gibts hier: http://www.w3.org/TR/CSS21/css2.pdf [pdf] bzw. hier: http://www.w3.org/TR/CSS21/ [html] ... thx. trotzdem nach wie vor ein 'echtes' eBook req.

CSS Layout Prob

Forum Index > Software > Coding Stuff

Maehmann

Spikx

Maehmann

ica

Spikx

ica

Spikx

ica

Spikx

Maehmann

3mind

Maehmann

gue

3mind