0 Daumen
3,9k Aufrufe

Ich habe hier mal kurz was gemacht, das sieht so aus:a25e7d92adc19b6555b25a117b4e6be7 (1).png

--> Wie kann ich das Bild jetzt neben die Aufzählung machen?

Meine Idee:

 <div stlye="float:right; width:220px; height:287px;">  <img src="220px-Kant_gemaelde_3.jpg" /> </div>
Aber das funktioniert irgendwie nicht. Die Werte für Breite und Höhe stimmen - habe die extra nochmal nachgeprüft...
Avatar von

Wie sieht denn Deine Aufzählung codetechnisch aus? Befindet die sich ebenfalls in einem Div?

Sieht so aus:d45a7f486e92f7fdd7bcc0a8043035d1.png

Achso, ich dachte Du hättest für die Aufzählung direkt

<ol></ol>

verwendet. Nun, Du kannst meine Antwort unten entsprechend anpassen :)

2 Antworten

+1 Daumen
 
Beste Antwort

Eine Möglichkeit wäre mit dem float-Attribut zu arbeiten:

<html>
<p><img style="float:left;margin-right:20px" src="pic.png" />
Deine Aufzählung
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>
</html>

Die Aufzählung kannst Du natürlich auch mit <br>-Tags realisieren.

Avatar von

"left;margin-right:20px"

Wofür steht hier die "20px"? Warum einmal left und einmal right?

Wofür steht hier die "20px

20 Pixel. Damit erzeugst Du einen 20 Pixel breiten Abstand vom eingebetteten Bild (sonst klebt der Text direkt am rechten Bildrand).

Warum einmal left und einmal right?

Das left bezieht sich auf die Bildposition. margin-right erzeugt einen Abstand rechts vom Bild.

20 Pixel. Damit erzeugst Du einen 20 Pixel breiten Abstand vom eingebetteten Bild (sonst klebt der Text direkt am rechten Bildrand).

Geht das auch mit dem Text? Weil wenn ich den mit <right> rechtsbündig stelle, dann ist das auch ziemlich nah am Seitenrand.

Geht das auch mit dem Text?

Indirekt über den Div-Tag, in dem Du Deinen Text einklammerst. Auch hier kannst Du wieder die Style-Attribute verwenden.

Siehe auch: https://www.w3schools.com/tags/tag_div.asp

Habe es schon bevor du geantwortet hast verstanden :D

Habe es schon bevor du geantwortet hast verstanden :D

Sehr gut, Racine-kun!

Muss man das verstehen? o.O

Muss man das verstehen? o.O

Was?

"Racine-Kun"

In Japan sprechen Lehrer (先生) ihre Schüler mit -kun (君) an :D Und racine_carrée-kun erschien mir jetzt etwas zu lange ;)

Also einfach das Suffix "-kun" an den Namen des Schülers!

Ich verstehe :)

Lohnt es sich z. B. <ol> als Vokabel mit einzutragen? Oder wäre das redundant, wenn ich <br> kenne?

Lohnt es sich z. B. <ol> als Vokabel mit einzutragen?

Vokabel? Für Deinen HTML-Wortschaft? :D

Oder wäre das redundant, wenn ich <br> kenne?

Auf keinen Fall! <br> ist nur ein Zeilenumbruch, der sich von der Struktur einer Aufzählung signifikant unterscheidet!

Also ja, nimm das gerne als Vokabel mit auf ;) Neben <ol> gibt es z. B. auch noch <ul>. Wenn Du magst, kannst Du ja ausprobieren, was das mit Deiner Aufzählung macht ;)

Habe ein Vokabelheft für Informatik - hört sich vielleicht erst dumm an, aber es heißt nicht umsonst "Programmier-Sprache"

Habe ein Vokabelheft für Informatik

Eine sehr gute Idee! Hat euch das euer Lehrer empfohlen.

"Programmier-Sprache"

Die Ähnlichkeiten zu einer "natürlichen Sprache" sind verblüffend. Einen völlig anderen Bezug zu Sprachen habe ich in "theoretischer Informatik" bekommen. Wer weiß, vielleicht wird es bei Dir doch noch ein Informatikstudium :D

Eine sehr gute Idee! Hat euch das euer Lehrer empfohlen.

Yes!

Wer weiß, vielleicht wird es bei Dir doch noch ein Informatikstudium

Ich kann mir momentan alles vorstellen. Vielleicht werde ich Sänger, wenn ich bald "Vokales Musizieren" in Musik mache?

+1 Daumen

Hallo racine_carrée,

geh doch mal auf die Seite https://www.w3schools.com/

speziell auf https://www.w3schools.com/html/default.asp bzw. https://www.w3schools.com/css/default.asp

Dort findet man viele nützliche Beispiele und kann über den Button "Try yourself" die Auswirkungen verschiedener HTML oder CSS Anweisungen online ausprobieren.

Von besonderem Interesse könnten die Kapitel HTML -> HTML examples -> HTML images -> image floating sein.

Avatar von

Ein anderes Problem?

Stell deine Frage

Ähnliche Fragen

+2 Daumen
3 Antworten
+1 Daumen
1 Antwort
+2 Daumen
0 Antworten

Willkommen bei der Stacklounge! Stell deine Frage einfach und kostenlos

x
Made by a lovely community