margin werte bei float:left werden ignoriert

[daniel]

hallo alle zusammen,

ich habe ein kleines problem.

am besten ihr werft mal einen kurzen blick auf http://82.83.142.224/ .

in dem fließtext sind 3 überschriften <h1> eingebunden.
die untere border ist dabei mit 1px solid black sichtbar gemacht.

nun ignorieren die überschriften aber die margin-werte die ich für das menue und das bild eingebunden habe.
und vorallem geht der rahmen der h1 "unter" den anderen ebenen durch, anstatt davor "aufzuhören"....

kann mir da jemand auf die sprünge helfen?
ich meine, ein weglassen des float oder ein clear: bringen ja auch ni, dann würde der restliche text ja nicht um die ebenen fließen.

übrigens habe ich das problem in allen aktuellen browser MSIE, Moz, Opera - insofern nehme ich mal stark an, das ist so gewollt von CSS und eher meine unfähigkeit denn ein bug ;-)

vielen dank für eure hilfe,
grüße,
daniel

[Struppi]

ich habe ein kleines problem.

am besten ihr werft mal einen kurzen blick auf http://82.83.142.224/ .

Ich sehe eine Schwarze Seite mit schwarzen Text. Oben ein Logo, ein Bild mittendrin und unten die Fußzeile.

Der  ganze code ist ein bisschen durcheinander und auch fehlerhaft:
http://validator.w3.org/check?uri=http%3A%2F%2F82.83.142.224%2F
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2F82.83.142.224%2F&warning=1&profile=css2&usermedium=all

Struppi.

[daniel]

hi,

mit welchen browser /version / OS hast du dir die seite denn angesehen?

den code validiere ich in jedem fall noch - keine frage.

[Struppi]

mit welchen browser /version / OS hast du dir die seite denn angesehen?

IE 4/win95 (inkl. webwasher)

Struppi.

[daniel]

hi struppi,

ok, und wie ist es wenn du einen aktuellen browser benutzt,
dann solltest du eigentlich was sehen?

kannst du mir dann mit meinem problem weiterhelfen?

grüße,
daniel

[daniel]

hi struppi,

wolltest du mir jetzt nur sagen, daß du mit einem 10 jahre alten OS und einem noch älteren browser auf einer seite eine verschobene ansicht hast? die noch dazu in css codiert ist?

sorry, aber sowas kann man sich doch echt schenken.
ich bin sowas von genervt, echt !

immer dieses jericho-geschreie hier in diesem forum.
macht man was mit tabellen, kommt sofort wer der einem erzählen will,
man solle es doch lieber in css machen. egal wie die frage war.
macht man was in css, kommt tatsächlicher einer daher und erzählt einem gaanz stolz, daß er einen browser hat, mit dem die seite nicht funktioniert. gaaaanz toll, gut gemacht.
das ich seit einem halben jahr keinen IE4 mehr in den statistiken anderer sites gesehen habe, ist ja auch egal....

was ja auch alles nicht so schlimm wäre, wenn man dann wenigstens noch was konstuktives zur frage beizusteuern hätte.
aber einfach so immer mal gleich per prinzip die klappe aufreißen, auch wenn es mit der frage NICHTS zu tun hat, das ist echt daneben.

schlimmer als im heise forum, wenn wieder linux/windows/mac anhänger aufeinanderprallen.

daniel

[Struppi]

ich wollte dir lediglich mitteilen, das dein CSS Fehler enthält, wie du mit dem Validator ja auch festellen kannst und das führt in meinen veralteten Browser dazu, das die Seite gar nicht mehr funktioniert. Was du daraus für Rückschlüsse ziehst weiß ich nicht. Ich persönlich würde einfach mal versuchen dein HTML und dein CSS gültig zu machen. Bevor

Struppi.

[Struppi]

ich wollte dir lediglich mitteilen, das dein CSS Fehler enthält, wie du mit dem Validator ja auch festellen kannst und das führt in meinen veralteten Browser dazu, das die Seite gar nicht mehr funktioniert. Was du daraus für Rückschlüsse ziehst weiß ich nicht. Ich persönlich würde einfach mal versuchen dein HTML und dein CSS gültig zu machen. Bevor

Obwohl. Ich hab keine Ahnung was da falsch ist, aber der Quellcode ist dermaßen verschachtelt, dass man sich nur schwer vorstellen kann bzw. Rückschlüsse ziehen wo was jetzt falsch ist. Die einzige Vermutung die man äußern kann ist, das dein float Element keine breite hat, was aber nötig wäre.

Struppi.

[daniel]

hi,

mein float element hat eine breite (zumindest das des menues):

#menue_sub {
 border:1px solid black;
 border-left:none;
 background-color:#EAEAEA;
 color:#333333;
 width:150px;
 float:left;
 padding:10px 5px 10px 5px;
 margin:10px 10px 10px 0px;
 text-align: left;
}

die image-klasse hat allerdings keine breite, das stimmt.
aber ich weiß ja auch vorher nicht, wie breit die bilder werden:

.image_content {
 border:1px dotted black;
 float:right;
 margin:10px;
 padding:5px;
 background-color:#EAEAEA;
}

aber wiso ist de quelltext verschachtelt?

content_body

>image
  >menue_main
  >menue_sub
  >breadcrumbs
  >content_text
     >image

content_footer

das ist doch nicht verschachtelt, oder?
wie sollte ich es sonst machen?

grüße,
daniel

[Struppi]

mein float element hat eine breite (zumindest das des menues):

siehste, übersehen. Es ist halt bei so umfangreichne Code immer schwierig für Aussenstehende alles zu durchschauen bzw. was für was zuständig ist.

#menue_sub {
border:1px solid black;
border-left:none;
background-color:#EAEAEA;
color:#333333;
width:150px;
float:left;
padding:10px 5px 10px 5px;
margin:10px 10px 10px 0px;
text-align: left;
}

Dann sollten auch die margin Werte mit einbezogen werden und bei mir ist das auch so.

aber wiso ist de quelltext verschachtelt?

ok, falscher Ausdruck. Der Quelltext enthält sehr viele Bereiche und code, der mit dem eigentlichen Problem nichts zu tun hat und aus diesen tiefen läßt sich nur schwer solch ein Problem nachvollziehen.

Struppi.

[Ingo Turski]

Hi,

nun ignorieren die überschriften aber die margin-werte die ich für das menue und das bild eingebunden habe.

falsch: die margins sind nicht ausreichend groß. Du machst den Fehler, die margins zu den floatenden Elementen setzen zu wollen, die jedoch aus dem Textfluß genommen sind. Zwar kommt es zu keinen Überlagerungen, aber h1 rechnet blocklevel-Element den margin vom Rand aus.

Übrigens wären h2 hier angebrachter.

freundliche Grüße
Ingo

[daniel]

hi ingo,

ich glaube, ich verstehe:

die h1 (oder h2) sind elemente im "normalen" textfluss und stehen als solche innerhalb von #content.
deshalb werden auch alle margins oder sonstwas, die ich <h1>/<h2> mitgebe in bezug auf #content angewandt (und nicht auf #submenue oder #image -> diese stehen ja nicht im normalen textfluss, da sie float als eigenschaft haben).
right?

aber was kann ich dann machen, um sozusagen die <h1>/<h2> elemente den floatenden elementen anzupassen? sodaß deren margin erst ab #menue/#image gerechnet wird? und nicht ab #content?

gibt es da eine möglichkeit?

grüße,
daniel

[Ingo Turski]

Hi,

entweder du versiehst die floatenden Elemente mit einem margin oder addierst bei Hx deren Breite.

freundliche Grüße
Ingo