Ingo Siemon: Bilder mit CSS einbinden --- hab da noch Probleme

Beitrag lesen

Lieber Ingo

Sorry, dass ich noch weiter nerve :)
Aber da ich noch neu bin im Umgang mit CSS,
haperts bei mir noch etwas mit dem kompletten Verständnis.

XHTML will Dich zu logisch strukturiertem Quelltext zwingen, nicht aber, daß Du um jedes inline-Element ein Block-Element setzt.
Also: Du hast einen Inhaltsbereich mit verschiedenen Elementen. Überlege Dir, welche Elemente sinnvoll gruppiert werden könnten und setze um diese ein DIV. Wenn Du nun sagst: "alle", dann setzt Du das DIV eben um alle Elemente und kannst es später ggfls. noch für allg. Seitenformatierungen nutzen, z.B. wenn Du die Seite mal zentrieren möchtest.

Bei mir auf der Seite soll es später einen Bereich geben,
in dem die Überschriften (h1 und h2), die Teste und die Bilder
immer in so Kästen mit weißen Rahmen eingeschlosen sind.
So wie Du es im Grunde hier sehen kannst: <//http://www.spaceart.de/_WC3_Test.shtml>
Dabei sollen all diese Elemente immer untereinander angeordnet werden
und immer einen Abstand zum obigen Element von 10px haben.
Ganz unten in diesem Posting findest Du wieder den dazugehörigen
neuen Quelltext und die CSS-Datei.

Wie Du sehen kannst, habe ich also nun um all diese Elemente
(h1, h2, p und img) ein DIV gesetzt. Und dem body-Element
habe ich dann in der CSS-Datei einen border und ein margin zugewiesen.
Das müsste doch nun eigentlich eine gute Lösung sein.
Zumal in dann später meine Navi ja auch in ein DIV schmeissen kann
und dieses dann positionieren.
Habe ich das nun richtig verstanden?
Ich möchte es halt von Anfang an richtig lernen und mir nicht
gleich wieder blöde Tricksereien angewöhnen :-)

Das einzige, was mich nun noch wundert ist, dass der Abstand
zwischen dem Bild und dem darunter liegendem p größer als 10px ist.
Und zwar im IE, FF und OP.
Angucken kannst Du es hier: <//http://www.spaceart.de/_WC3_Test.shtml>

Kann ich daraus schliessen, dass zum img-Element noch ein "internes
margin-bottom" oder so gehört, welches die Browser addieren?
Oder dass dieses "interne margin-bottom" einfach größer ist,
als meine gewünschten 10px und somit meines überschreibt?
Oder ist das alles der totale Unsinn?

* html body {font-size:101%;}
ich weiß ja, daß Du dies von hier hast, aber Hacks solltest Du nach Möglichkeit vermeiden. Mit
body {font-size:100.1%;} kommt jeder Browser klar.

Sicher? Ich meine mich zu erinnern, dass ich den rat bekommen hatte,
diesen einen Hack anzuwenden, weil irgendwelche Browser mit font-size:100.1%
doch wieder Probleme haben.

html {
  scrollbar-[...]
Du willst doch valide Seiten, oder? Dann verzichte drauf

Naja, diese eine Sache w mit den farbigen Scrollbalken würde ich mir
doch gerne "gönnen", zumahl es ja nur da in der CSS auftaucht
und auf den sonstigen Code keine auswirkung hat.
Meinst Du nicht, das man das bringen könnte (bitte bitte :-))

oder lagere diese Definitionen über Conditional Comment für den IE aus.

Aber das geht doch nur in der HTML-Datei und nicht in der CSS-Datei ... oder?
Und da möchte ich das nicht haben, dann würde ich sogar lieber darauf verzichten.

Und übrigens erreichst Du damit die 5er IEs nicht - dazu solltest Du diese IE-Eigenschaften für html,body angeben.

Das soll doch aber wieder nicht funktionieren bei

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

font-family : Arial, Verdana, Helvetica, sans-serif;
Du gibst hier einfach ohne Überlegung willkürliche Schriftarten an.

Ja, das habe ich vor damals, als ich mit HTML angefangen habe,
einfach mal so irgedwoher übernommen, ohne groß nachzudenken.

Verdana hat eine sehr große Laufweite, während Arial und Helvetica unter Windows AFAIK gleich dargestellt werden, unter anderen Betriebssystemen jedoch häufiger Helvetica anzutreffen ist als Arial und Helvetica AFAIK auch besser aussieht.

Diese Definitionen können nun dazu führen, daß auf dem einen Rechner Arial mit geringer Laufweite verwendet wird und auf dem anderen Verdana mit großer Laufweite, obwohl auch Helvetica zur Verfügung stünde. Wenn Du also große Laufweite willst, dann definiere:
Verdana, Helvetica, Arial, sans-serif;
und ansonsten:
Helvetica, Arial, Verdana, sans-serif;

Ich möchte ja eigentlich gar keine größen Laufweiten.
Ist dann Helvetica, Arial, sans-serif; noch sinnvoller?

Gruß
Ingo