[Gelöst] Margin, padding, what the Hell?! --- CSS Profi gesucht!

Dein CSS oben bezieht sich nur auf die H2-Überschriften innerhalb der Blöcke, die mit DIVs angegeben sind. Probier mal, die Ränder für die DIVs zu ändern statt für die Überschriften. Firebug hilft dir dabei.

Unter Umständen kann es auch am Browser liegen, die sind manchmal recht eigenwillig, wenn mehrere Angaben für Ränder aufeinander treffen (vor allem IE).

Resourcen für den Theming-Ninja ist auch recht nützlich.

Also wenn ich es so mache:

Gehts definitiv auch nicht. Egal ob Margin oder Padding, dann rutscht es ran.

Ich habe das Pendant zu Firebug für Opera und habe damit auch schon vorhin die ganze Zeit gesucht, aber werd nicht schlau draus.

Ich habe den Eindruck als wenn die Feldgruppe Produktdetails direkt hinter der Überschrift der Feldgruppe Spezifikationen (darüber) beginnt, er also die Inhalte der Feldgruppe Spezifikationen außen vor lässt und diese Felder garnicht beachtet, wenn er den Rand berechnet.

So was lässt sich am besten am lebenden Objekt klären. Hast du einen Link zu einer Testsite?

Es läuft ja wenn ich es jeweils entsprechend einstelle (oben margin unten padding), ich würde nur gern verstehen warum, damit ich beim nächsten mal das ganze besser machen kann und sowas vermeide.

Wenn es nicht zu viel Unstände macht, kann ich Dir gern den Link per PM senden, da es keine Testseite ist, aber kommst Du dann auch an die CSS Daten?

Mit Firebug kann man das, sollte auch mit Dragonfly kein Problem sein, dis CSS Daten auszulesen.

ich würde auch gerne mal eine testeseite sehen ... dann könnten wir es auch besser nachvollziehen :-)

monsi

Ich hab Frank mal die Daten geschickt.

Ich habe mir das mit dem Dragonfly schon alles angesehen, aber werde nicht wirklich schlau draus (* also ich werde nicht schlau draus wo der Fehler liegt), weil ich kein CSS Profi bin ;=)

würdest du's mir bitte auch mal schicken? :)

Erst mal warten was der gute Frank sagt ;=) Ich will die Seite wie gesagt nicht so öffentlich machen zzt.

Hab schon mal einen schnellen Blick drauf geworfen, aber noch nichts gefunden :-(

Welches Theme nimmst du denn?

Das Theme ist "Danland".

Keine Hektik, wie man sieht hab ich ja eh noch ne Menge zut tun ;=)
Schonmal von Mir ein schönes Wochenende!

Ich hab probeweise mal das folgende CSS ergänzt, um zu sehen, wie sich die fraglichen Elemente ins Layout einfügen:

Wie man sieht, fängt das untere DIV gar nicht direkt unter der Tabelle an, sondern viel weiter oben. Wenn du margin-top nur groß genug machst, funktioniert das auch hier. Aber wahrscheinlich ist padding dann doch die bessere Lösung.

Bei so vielen verschachtelten DIVs, die dann auch noch per "float" positioniert sind, ist es manchmal schwierig, den Überblick zu behalten, welches an welcher Stelle kommt.

Wenn man testweise mal das float für das obere Feld deaktiviert, sieht's genau andersrum aus:

Das sieht mir ganz stark nach einem ungecleartem Float aus. Gib dem .group-product-details mal ein overflow:hidden mit auf den weg.

Edit: http://j.mp/bgdgme (Clearing floats)

Kannte ich noch nicht. Aber du müsstest das overflow: hidden; für den umgebenden Block setzen, d.h. in der Regel das nächsthöhere Element in der DOM-Hierarchie, in diesem Fall für div.content (ggf. noch etwas präziser auf den Kontext zuschneiden). Das sollte klappen. So sieht's aus, die beiden padding-Anweisungen sind deaktiviert:

Ja das hilft recht oft ;)

Man muss aber aufpassen in welcher Situation man das einsetzt. Das entspricht ja nicht der eigentlich Funktion. Die sagt nämlich dem Client wieder Inhalt behandelt werden soll der nicht in das umgebende Element passt.

Ich meine das gem. der CSS Spezifikation overflow, gefloatete Elemente in das Elternelement einschließen soll wenn Sie einen anderen Wert hat als visible haben. Das müsste ich aber noch mal genauer nachlesen.

Oha, das entwickelt sich ja hier zum Expertentreff! Vielen Dank für all die Hilfe!

Sag mir mal eins, wie hast Du denn bitte das CSS "ergänzt" ohne Zugang auf die Seite? Hast Du das irgendwie in deinem Browser mit Firebug gemacht?

Diese Geschichten mit dem float stammen von CCK, ich habe nur die Abstände etc. ergänzt. So wie es im letzten Bild ist, hätte ich erwartet, dass es sich verhält.

Ich werd mal mit dem overflow testen. 100% verstehen tue ich es allerdings noch nicht. Was hat Overflow mit dem Float zu tun?
Wie hätte es denn eigentlich mit dem clear gehen müssen?

EDIT: Ach ich seh grad da war ein Link zum CLEAR. Werd ich mir erstmal ansehen, das beantwortet das wohl dann schon.

Ah ok! Nun verstehe ich was Sache ist.

Vielen Dank für eure Mühe und den Link, hat mich echt mal wieder ein ganzes Stück weiter gebracht, die Zusammenhänge kannte ich noch nicht!

Da laut dem Link die Variante mit Overflow bei manchen Browsern Konfigurationen vielleicht später nicht astrein läuft, denke ich ich werde es für die fertige Seite einfach so lassen wie es nun ist, aber zumindest bin ich dem Mysterium auf die Spur gekommen und das war ja die Hauptsache!

Vielen Dank nochmal, Ihr seid echt klasse!

Genau so ist das, im FireBug kannst Sozusagen On-The-Fly den CSS-Code verändern. Die Veränderungen siehst Du dann gleich Online. Keine Angst, das sind jeweils nur temporäre (sozusagen lokale Browsereinstellungen) Änderungen, aber FireBug zeigt dir sogar an, in welchem File Du die Änderungen vornehmen musst.

Ich dachte eigentlich mit Dragonfly geht das auch, aber ich habe Opera trotz seines unhemlichen Tempos noch nicht so ausgiebig getestet.

Ja geht auch hab ich grad gesehen, wusste ich nicht, ich benutze es ja erst seit kurzem. Hätte ich das vorher gewusst, hätte ich mir Stunden an Editieren, hochladen, Seite refreshen gespart.... Mist ;=)
Naja nun weiss ich es....

Da binn ich aber froh, dass ich dir damals mit Dragonfly, nicht einen schlechten Rat verpasst habe.

Ja, super, das ist echt ne Funktion, welche man mit Nachgucken im Quelltext wohl eher nicht ersetzen kann ;=)

Als Mittelding zwischen dem flüchtigen Firebug - wo die Änderungen verloren gehen, wenn du die Seite wechselst - und einer permanenten Änderung deiner CSS-Dateien bietet sich Stylish an. Damit kannst du allen Webseiten dein eigenes CSS aufdrücken!

Und dann gibt's da noch FireFile

Naja nur leider nicht für mich als alten Opera-Fan :D

Aber auch so ist es ja schon ne super erleichterung mit Dragonfly.

kost ja auch nix

;=)