nicht angemeldet
Text unter dem Bild anzeigen
Also, erstmal muss ich sagen, das ich absoluter Neuling auf dem gebiet html bin.
Mein Problem ist, das ich Bilder habe, wo darunter der Bildname stehen soll. Allerdings funktioniert das nicht und der Text wird immer rechts neben dem Bild angezeigt.
Hab bis jetzt folgenes:
<center><img src="http://foto.arcor-online.net/palb/alben/67/4563767/120_3630303436663836.jpg"</img>
<font> Rotes Acara Plüschie </font>
<img src="http://foto.arcor-online.net/palb/alben/67/4563767/120_3265343236373165.jpg"</img>
<font> Gelbes Acara Plüschie </font>
Vielleicht kann mir ja jemand helfen...
-
Hallo,
schau mal unter Table und Div nach.-
schau mal unter Table und Div nach.
was haben tabellen und divs mit dem umbruchsverhalten von inline-elementen bzw inline-block-elementen zu tun?
für die auszeichnung einer galerie ist imho eine liste die beste wahl - eine tabelle stellt in matritzen strukturierte daten dar und div-elemente gruppieren zusammengehörige elemente (sofern kein anderes element passt)
-
-
Also, erstmal muss ich sagen, das ich absoluter Neuling auf dem gebiet html bin.
macht nix, wer lernwillig ist, lernt schnelll ;)
Mein Problem ist, das ich Bilder habe, wo darunter der Bildname stehen soll. Allerdings funktioniert das nicht und der Text wird immer rechts neben dem Bild angezeigt.
das ist ein problem, welches vorerst nichts mit html zu tun hat - wie dinge aktuell aussehen, interessier html nicht - dafür ist css zuständig
Hab bis jetzt folgenes:
also zurück zum reißbrett, ändere dein markup aus semantischen gründen folgendermaßen ab (je nach:
<ul class="galerie"> <li> <img src="example.png" alt="foobar"> <p>Rotes Acara Plüschie</p> </li> <li> <img src="example2.png" alt="foobar"> <p>Gelbes Acara Plüschie</p> </li> </ul>grund: du hast offenbar eine liste an bilder mit bildunterschriften und kein center-element ohne aussage mit bilder und einem font-element ohne aussage
das obrige beispiel formatierst du nun mit http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=css
einerseits entfernst du sämtliche formatierungen von der liste, die du nicht benötigst (aussen und innenabstände, sowie listenaufzählungszeichen
danach hangelst du dich nach weiter innen durch - dh das bild soll oben stehen und der text darunter? wenn das bild einen umbruch verursachen soll, muss es entsprechende eingenschaften haben (die anzeigeeigenschaft "block" könnte hierfür für dich interessant sein)
-
Also, erstmal muss ich sagen, das ich absoluter Neuling auf dem gebiet html bin.
Mein Problem ist, das ich Bilder habe, wo darunter der Bildname stehen soll. Allerdings funktioniert das nicht und der Text wird immer rechts neben dem Bild angezeigt.
Hab bis jetzt folgenes:<center><img src="http://foto.arcor-online.net/palb/alben/67/4563767/120_3630303436663836.jpg"</img>
<font> Rotes Acara Plüschie </font>
<img src="http://foto.arcor-online.net/palb/alben/67/4563767/120_3265343236373165.jpg"</img>
<font> Gelbes Acara Plüschie </font>Vielleicht kann mir ja jemand helfen...
Du hast lediglich Zeilenumbrüche vergessen. Außerdem hat der img-Tag keinen Endtag. Und der font-tag wird dir nicht viel bringen, wenn du keine Attribute einfügst.
Ohne bzw. mit sieht das dann so aus:<center><img src="http://foto.arcor-online.net/palb/alben/67/4563767/120_3630303436663836.jpg"><br> Rotes Acara Plüschie<br> <img src="http://foto.arcor-online.net/palb/alben/67/4563767/120_3265343236373165.jpg"><br> Gelbes Acara PlüschieHoffe ich konnte helfen
-
Du hast lediglich Zeilenumbrüche vergessen.
jedes br, welches nicht aus gründen eines typographisch sinnvollen zeilenumbruchs gesetzt wird, ist fehl am platz - auch in diesem fall
Außerdem hat der img-Tag keinen Endtag.
in html hat ein img-_element_ noch nie einen end-tag benötigt, das ganze ist ein sgml-feature names omittag
Und der font-tag wird dir nicht viel bringen, wenn du keine Attribute einfügst.
das font-element ist nur zu formatierungszwecken da und hat in html eigentlich nix mehr verloren
-
Ja, konntest mir helfen, ABER: Hatte vergessen zu erwähnen, das die bilder nebeneinander und nicht untereinander stehen sollen. Wie gehe ich dann vor?
-
Ja, konntest mir helfen, ABER: Hatte vergessen zu erwähnen, das die bilder nebeneinander und nicht untereinander stehen sollen. Wie gehe ich dann vor?
wenn du meinen post nicht ignoriert hättest, wärst du deiner lösung schon näher
stell dir einfach vor, ich wäre yoda und taraku ist der imperator - die sache mit den br-elemente führt dich schnell zum erfolg, du stürzt dich auf lange sicht aber ins verderben ;)
nachdem du selbst sagst, du wärst ein neuling auf dem gebiet, möchtest du sicher etwas lernen
es wird dich zwar etwas mehr zeit kosten, den weg mit der liste zu begreifen, auf lange sicht gesehen hast du dadurch aber wesentlich mehr vorteile als nachteile
was dir taraku jetzt vermutlich anbieten wird, ist eine tabelle oder irgend eine irre div-suppe - diese verursacht wesentlich mehr quelltext als die ursprünglich von mir vorgeschlagene lösung und ist noch starrer zu formatieren
du hast noch die chance, der dunklen seite der macht abzuschwören und kannst versuchen ordentliches html zu lernen ;)
-
Hehe. Ok ok... Ich werde mich da nachher mal dran versuchen... Bis jetzt habe ich das zwar noch nich so ganz verstanden, aber kommt zeit kommt rat... ;)
-
Hehe. Ok ok... Ich werde mich da nachher mal dran versuchen... Bis jetzt habe ich das zwar noch nich so ganz verstanden, aber kommt zeit kommt rat... ;)
wichtig ist, dass du deinen geist säuberst ;) nein im ernst: denke nicht an das "wie soll es aussehen" sonder denke daran "was sagt es aus" oder "was ist es, was ich grade habe"
sämtliche dinge, die das aussehen betreffen haben in html nix zu suchen - alles was du an aussehen in html hineinbringst, macht dir nur arbeit
die bilder untereinander oder nebeneinander ist mit dem richten html-schnipsel unabhängig vom unfang deiner galerie mit wenigen css-zeilen erleidigt
untereinander und nebeneinander ist prinzipiell nur ein display: block; gegen ein float: left; zu tauschen (beim li-element)
ob du nun 2 bilder nebeneinander haben willst und dann eine neue zeile oder 3 oder 7 ist völlig egal - auch eine dynmanische anzahl je nach größe des elternelements ist möglich
eine starre variante mit kompliziertem html zeigt zb die google bildersuche - hier ist immer eine fixe anzahl an bildern nebeneinander (egal wie groß der viewport des browsers ist)
der vollständigkeit halber hier nochmal - die container für deine bilder sollten so aussehen - angenommen 3 bilder pro zeile, 5 bilder in summe
<ul class="galerie"> <li>[BILD]</li> <li>[BILD]</li> <li>[BILD]</li> <li>[BILD]</li> <li>[BILD]</li> <ul>die ungute variante mit tabelle sähe etwa so aus
<table class="galerie"> <tr> <td>[BILD]</td> <td>[BILD]</td> <td>[BILD]</td> </tr> <tr> <td>[BILD]</td> <td>[BILD]</td> <td> </td> </tr> <table>wenn du nun 2 bilder pro zeile haben willst, sieht die tabelle so aus
<table class="galerie">
<tr>
<td>[BILD]</td>
<td>[BILD]</td>
</tr>
<tr>
<td>[BILD]</td>
<td>[BILD]</td>
</tr>
<tr>
<td>[BILD]</td>
<td> </td>
</tr>
<table>[/code]der code der liste ändert sich dadurch nicht, der bleibt gleich
am anfang sieht die tabellen-variante immer einfacher aus, aber wenn du etwas ändern willst, oder dynamik brauchst, bricht dir der augenscheinlich schnelle und einfache weg das genick ;)
-
-
-
-