Frage von T1Mde, 88

HTML, CSS - Bild anordnen?

Wie kann ich das zweite Bild richtig anordnen? http://esg-landau.de/wf09/p08/pages/pyramiden.html Wie es richtig aussehen soll, ist denke ich offensichtlich. Danke

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von ilovetoro, 30

Das Problem sind nicht die Bilder. Das 2te Bild "springt" nach links bei bestimmter Breite, weil das erste in den Bereich des zweiten kommt. Beide divs haben keine CSS-Angaben - anstatt das anzusprechen schlage ich vor beide Absätze ( p ) anzuspechen, da diese schon id's haben. Denen gibst du eine mindest-Höhe (im CSS):

p#Geografie {min-height: 230px;}
p#Geschichte {min-height: 290px}

Kommentar von T1Mde ,

Das Problem dabei ist, dass ich für alle Seiten (mit Ausnahme der Startseite) die gleiche Stylesheet benutze und da in allen Seiten die gleichen/ähnliche Artikel vorkommen werden, werden diese Regeln auf alle Seiten angewendet. Ich möchte ungern die Styles direkt in die HTML-Datei schreiben oder für jede Seite eine eigene Stylesheet benutzen.

Kommentar von T1Mde ,

naja, hab's jetzt so gemacht, bleibt mir wohl nichts anderes übrig...

Antwort
von mathematiker12, 42

Ehrlich gesagt nein, also ich weiß nicht, was da anders aussehen soll. Mal abgesehen davon, dass meiner Meinung nach andere Punkte am Design nicht so optimal sind (z. B. Schrift ist viel zu groß, zumindest wenn ich es am PC im Browser angucke).

Kommentar von T1Mde ,

Wie der aufmerksame Leser vielleicht bemerkt, ist diese Seite noch lange nicht fertig.

Kommentar von T1Mde ,

Ah, und mach mal dein Browserfenster ein wenig breiter.

Kommentar von mathematiker12 ,

Ich wollte dich nicht angreifen oder beleidigen, sondern dir einen hilfreichen Tipp geben. Schade, dass du das anders interpretiert hast. Mein Browserfenster ist auf Vollbild; der Bildschirm hat 17 Zoll; aber die Auflösung ist nicht so hoch. Wenn du erklärst, wie du das Bild gerne hättest, kann ich dir bestimmt helfen. :)

Kommentar von mathematiker12 ,

Okay, wenn ich rauszoome verstehe ich, was du meinst. Das Bild inkl. Bildunterschrift sollte zusammen mit der Überschrift (z. B. "Geografie") und dem Text in einen div-Container. Dann ragt auch kein Bild mehr in den nächsten Abschnitt hinein. Falls das bei dir gar nicht der Fall ist, mach am besten mal Strg und Minus, um rauszuzoomen.

Kommentar von T1Mde ,

Wenn du deinen Browser nicht mehr maximierst (gibt's da ein Wort dafür) und die Höhe etwas verringerst, dafür die Breite auf's Maximum stellst, dann wirst du sehen, was ich meine. Sobald die Textzeilen weiter nach unten gehen als das Bild, dann rutscht es ziemlich weit nach links.

Und zu meinem ersten Kommentar: Ich hab das nur geschrieben, weil da in roten Buchstaben steht, dass die Seite noch in Bearbeitung ist. Sollte eigentlich gar nicht so frech klingen ;)

Wenn du ne Idee hättest, könntest du mir auch einen Vorschlag machen, wie man die Bilder anders designen könnte.

Kommentar von mathematiker12 ,

Jetzt haben wir genau gleichzeitig geschrieben ;) Also meine Antwort siehst du direkt über deiner... Soll ich dir ein Beispiel dazu schicken?

Kommentar von T1Mde ,

Ich probier's mal, wenn ich Probleme habe, melde ich mich nochmal :)

Kommentar von T1Mde ,

Dann melde ich mich mal :D - Ich bekomm's nicht hin...
Über ein Beispiel würde ich mich sehr freuen :)

Kommentar von mathematiker12 ,

Habs gerade ausprobiert. Meine Lösung geht doch nicht ganz so, wie ich es mir vorgestellt habe. Was ich jetzt gemacht habe: Statt die Eigenschaften allen p zuzuordnen, habe ich sie nur div class="mycontent" zugeordnet. Dann im HTML so schachteln: <div class="mycontent><figure>alles, was halt in figure ist</figure><p>bleibt auch alles</p></div>. Das ändert dann erst mal nichts, ist aber irgendwie schöner und für spätere Änderungen einfacher. Was jetzt was ändert: Im CSS bei figure folgendes einfügen: clear:both;

Dann sind die Bilder schon mal ganz rechts. Was jetzt noch fehlt: Dass der div-Container sich an die Größe des Bildes anpasst, wenn das Bild größer ist als der Text.

Antwort
von BreiTi0, 42

ordne dem bild eine id zu... und sprich das über die style css über id gesondert an

Kommentar von T1Mde ,

ja, wie ansprechen?

Kommentar von BreiTi0 ,

<img src="" alt="5-Piaster-Münze" id ="bild2">

im style css 

mit #bild2 ... denk ich 

ist schon ne weile her


http://wiki.selfhtml.org

Kommentar von T1Mde ,

das ist mir klar, aber was kommt dann in die CSS-Datei, wie richte ich das richtig aus?

Kommentar von BreiTi0 ,

versuchs mit position: absolute; bei figure img 


aber ich bin da viel zu lange raus und kann dir da ehrlich gesagt auf die schnelle nicht helfen

Kommentar von BreiTi0 ,

ist zwar nicht elegant, aber du könntest einfach ne tabelle machen...

Kommentar von mathematiker12 ,

Das ist nicht nur nicht elegant, sondern völlig überholt. Genau dafür gibt es doch CSS, damit man das nicht mehr so machen muss...

Kommentar von T1Mde ,

Naja, das macht man seit dem vorletzten Jahrzehnt nicht mehr.

Kommentar von BreiTi0 ,

kk

aber es is sinnführend und schnell ;)

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten