Probleme bei der Beschriftung von Bildern

[bigbootykilla]

Hi Leute,

ich hab gerade eine Seite am laufen bei der ich diverse Bilder einfügen möchte. Unter diese Bilder möchte ein Kommentar schreiben.
Folgenden Code habe ich verwendet:

<img src="bilder/singapore/001.jpg" alt="Business Class" border="5" align="left" hspace="35" vspace="20" />
<p>Hallo</p>
<img src="bilder/singapore/002.jpg" alt="Business Class" border="5" align="right" hspace="35" vspace="20" />
<p>Hallo</p>

die Homepage von mir könnt ihr auf
private Homepage von Andre Sommer
sehen.

Das Problem sieht man gleich. Bei Bild1 schreibt er es unterhalb das Bild und bei Bild2 rechts davon in der ersten Spalte oberhalb des Bildes.

Wo liegt mein Fehler? Kann mir da jemand auf die Sprünge helfen?

gruß bigbootykilla

P.S. HTML und CSS Datei habe ich angehängt falls sich das mal jemand anschauen möchte. Jedoch wohl ohne Bilder, da es sonst zu groß wäre

 

[prm]

Für diesen Zweck bietet sich eine CSS-formatierte Liste an, siehe
Bildergalerie
Alternativ auch hier, Variante 6, wobei du zwei Spalten bräuchtest, von denen eine gefloatet sein müsst.
Text zu Bildern anordnen

 

[Junny]

Um die Beziehung zwischen Bild und beschreibendem Text am besten zu verdeutlichen, verwende ich in solchen Fällen Definitionslisten.

<dl>
  <dt><img src="bilder/singapore/001.jpg" alt="Business Class" border="5" align="left" hspace="35" vspace="20" /></dt>
  <dd>Hallo</dd>
</dl>
<dl>
  <dt><img src="bilder/singapore/001.jpg" alt="Business Class" border="5" align="left" hspace="35" vspace="20" /></dt>
  <dd>Hallo</dd>
</dl>

dl ist eine Definitionsliste.
dt umschließt das, was erklärt werden soll.
dd enthält die Erklärung/Beschreibung. Es können mehrere dd nach einem dt folgen.
Leider muss bei Nebeneinanderpositionierung jedes Bild in eine eigene Liste gepackt werden, aber das ist meiner Meinung nach vertretbar.
Die Definitionslisten werden wie gewünscht formatiert und links gefloatet. Anschließend sollte gecleart werden.

Letztendlich ist es Geschmackssache, welche der Varianten man verwendet. Die eine betont die Auflistung mehrerer gleichberechtigter Bilder mit Absätzen und die andere stellt den Zusammenhang von Bild und Text besonders deutlich dar.

Gruß
Junny

 

[Maxi]

P.S. HTML und CSS Datei habe ich angehängt falls sich das mal jemand anschauen möchte. Jedoch wohl ohne Bilder, da es sonst zu groß wäre

Kannst die Dateien auch direkt anhängen oder den Code hier reinstellen, runterladen und entpacken werde ich mir bestimmt nix ;-)

 

[bigbootykilla]

Na toll :twisted:

Jetzt hab ich alle 3 Varianten durchprobiert und immer das gleiche Resultat erhalten.
Als HTML Code hab ich folgendes gemacht:

<dl style="width:360; float:left; text-align:left;">
    <dt><img src="bilder/singapore/001.jpg" alt="Business Class" width="350px" height="263px" border="5px" align="left" hspace="25px" vspace="20px" /></dt>
    <dd>yyyyyyyyyyyyyyyyyyyyyyyyyyyyy</dd>
</dl>

<dl style="width:360; float:right; text-align:right;">
    <dt><img src="bilder/singapore/002.jpg" alt="Business Class" width="350px" height="263px" border="5px" align="right" hspace="25px" vspace="20px" /></dt>
    <dd>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</dd>
</dl>

und als CSS Datei den "Content" Bereich folgendermaßen definiert:

#content {
    width: 85%;
    height: 4242px;
    float: right;
    background-color: silver;
    }
    
    #content h1 {
        font-family: arial;
        font-size: 30px;
        /*padding: 10px;*/
        text-align: center;
    }
    
    #content p {
        font-family: arial;
        font-size: 14px;
        /*margin: 5px;*/
        /*text-align: center;*/
    }

Als Ergebnis erhalte ich eine komische Ausgabe:
private Homepage von Andre Sommer

Dort ist die Beschreibung versetzt ausgerichtet worden. Ich weiß nicht warum? Kann mir da jemand helfen?

gruß

 

[Junny]

Hallo,

das sieht doch schonmal gar nicht so schlecht aus!

Ein paar Tipps:

• Du kannst ruhig alle Definitionslisten links floaten lassen. Die Abstände erreichst Du mit margin.
• Eine Angabe der Breite ist nicht nötig: Floatende Blockelemente verkleinern sich auf die Breite ihres Inhalts (alle Bilder sind ja gleich breit).
• Die Eigenschaft text-align positioniert inline-Elemente innerhalb des Blockelements. Darum ist der Beschreibungstext links am linken Rand und der rechts am rechten Rand ausgerichtet. Wenn es einzeilig bleibt, sieht text-align: center; imho ganz gut aus.

Gruß
Junny

 

[bigbootykilla]

ok nach langem rumprobieren hab ich es jetzt glaube ich. Ich habe ein paar Dinge von denen du gesagt hast, man sollte sie lieber löschen wie zbsp. width, rausgelöscht.

Aber ich glaube das Zauberwort von all diesem war das margin:auto;

Hab in der css Tabelle folgendes reingeschrieben:

#content dd {
        font-size: 14px;
        text-align: center;
        margin: auto;
    }

damit war es dann zentriert. Warum er mir aber vorher so was komisches einseitiges zentriert hab ich zwar noch nicht verstanden, aber vielleicht war es einfach ein wirwarr von mir was jetzt gesäubert wurde.

also danke

gruß bigbootykilla