Tutorial HTML, CSS u. PHP - Forum

[orchidee]

Hallo,

ich habe das Problem, dass ich ein Bild einfügen will und es sich woanders hinsetzt wo es soll.
Was muss ich da genau anklicken, damit es sich da hinsetzt wo es soll?

Im Quelltext ist es im ersten Absatz zu finden.
Im Firefox ist es mehrere Absätze später unten zu sehen.
Im IE macht er mir oben einen langen freien Bereich.
Dann sitzt das Bild da wo es hinsoll, aber halt etliche Reihen sind darüber frei ohne Text.

Code: Alles auswählen

<section class="inhalt">

<h1>Überschrift</h1>

<h2>Unterüberschrift</h2>

<img src="bilder/sonstiges/Abakus.jpg" alt="Abakus" title="Abakus" width="150" height="209" style="border: 0px; float: right; clear: both; margin-left: 6px; margin-right: 6px; margin-top: 6px; margin-bottom: 6px;" />

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam </p>

<p>pet justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>

<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</section>

Wäre schön, wenn mir da jemand helfen könnte.

Danke
Andrea

[Sarkkan]

Die Browser die das interpretieren müssen tuen mir Leid :S
Ich meine.. du sagst dem Bild, dass es Rechts floaten soll, also das jeder andere Inhalt sich Links daneben ansammeln soll.
Gleichzeitigst Clearst du aber alles womit du die Anweisung gibst, dass Inhalte erst unterhalb dieses Elementes beginnen sollen und sich nicht daneben legen sollen.
Zudem hat dann sowohl der Absatz als auch das Bild einen Aussenabstand, durch den die Elemente sich weit runter drücken. Das ist dann auch schon die komplette Erklärung gewesen.
(Ich würde ja gerne wissen, ob die anderen Elemente noch Style-Eigenschaft wie floats oder clears bekommen haben..)

Lösung: Hör auf mit dem Clearen an dieser Stelle.
Clear nur da, wo der weitere Inhalt umbedingt sich erst unter dem Element befinden soll, z.B. schönes Beispiel: Footer.

[orchidee]

Ich habe es jetzt ohne clearen gemacht.
Im IE passt es, aber im Firefox (aktuell) ist es eine Section niedriger drin.
Genau 3 Absätze in der 2. Bereich.
Im Quelltext ist es da wo es hinsoll.
Der Quelltext ist valide, habe es getestet.

Es ist ein 3-Spalten-Layout und das Bild ist im mittleren Bereich.

[Sarkkan]

Kannst du das mal wo hochladen?

[orchidee]

Hier ist es:

http://home.arcor.de/orchidee_andrea/Testseite/index.html

Kann das mit dem CSS zu tun haben? Fehlt da evtl eine Angabe?

Danke Dir, bin halt Anfänger
Andrea

[Sarkkan]

Wie.. aber.. hä..o.o

Nimm das Bild mal bitte aus dem p-Tag heraus und setzt es vor dem p in das es quasi angezeigt werden soll..

[orchidee]

Erledigt

[Sarkkan]

Und magst du uns auch erklären wie?

[orchidee]

Ich meinte das hochladen ist erledigt.

[orchidee]

Selbst, wenn es nur eine Section ist (habe da das Ende und den neuen Anfang rauskommentiert) ist das Bild bei Firefox unverändert unten.

[Sören]

Bei mir im Firefox wird das Bild da angezeigt, wo es auch hin soll.

[orchidee]

Guck es Dir bitte im IE an und im Quelltext.
Es soll einen Bereich höher sein.
Der IE sieht es und macht das. Das ist ja mein Problem im Firefox.

Ich bekomme es nicht gelöst.
Selbst wenn ich alles in einen Bereich packe (also die Section in eine große verwandele) liegt es im falschen Bereich.

Hilf mit bitte auf die Sprünge. Ich verstehe es nicht.

[Sören]

Das kann ich mir auch nicht erklären, was auf jedenfall hilft ist ein overflow: hidden bei der section, die das bild beinhaltet.
Damit wird jeglicher Inhalt, der größer als die section ist, in der section abgeschnitten, so dass das Bild "hineinegepresst" wird.

Das ist aber auch nicht die beste Lösung.

[orchidee]

Wird eine Section denn nicht automatisch größer wenn mehr Inhalt da ist?
Die untere Section ist größer vom Inhalt und auch größer in den Ausmaßen.
Da wird nichts abgeschnitten.

Kann man da was mit CSS machen? Eine Größe vorschreiben? Und wenn ja - wie?
Der IE macht es richtig.

Ich habe mal spaßeshalber den rechten Randbereich weggenommen (auskommentiert) bei mir auf dem Rechner.
Es ändert sich nichts.

[Sarkkan]

Ich kann es mir auch nicht erklären.. nimmt man aber das clear: right; von dem aside rechts vom ersten Absatz, dann stimmt es (aber es verschiebt sich der rechte kram).
Also scheinbar ist da etwas nicht sauber gecleart oder so =/