• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Text rechtsbünding

  • Ersteller Ersteller Jürgen222
  • Erstellt am Erstellt am
J

Jürgen222

Guest
Hey guten morgen,


Habe ein Problem und zwar bekomme ich den Text nicht rechts neben das Bild hin

<div style="text-align: left">

<img src="grafiken/shaqiri.jpg" width="180" height="140" /><p><cite>Hallo</cite></p>
</br>
<img src="grafiken/gonzalez.jpg" width="180" height="140" /><p>Hallo</p>
</br>
<img src="grafiken/gashi.jpg" width="180" height="140" />
</br>

</div>


Egal ob float:left oder in CSS was ändere, die bilder werden dann nicht mehr untereinander angeziegt und der Text ist nicht rechtsbündig, sondern wird untereinander angezeigt
 
Hallo.

Wie wäre es denn damit:
HTML: 
<p><img src="grafiken/shaqiri.jpg" width="180" height="140" /><cite>Hallo</cite></p>

Gruss
Elroy
 
Also die Bilder sind untereinander geordnet, jedoch erscheint der Text direkt untern am Rand und ich will dass der Text oben erscheint neben dem Bild und nicht untern neben dem Bild, wie bekomme ich das hin, dass es oben dasteht?
 
Hallo.

Hast du es mal mit vertical-align: top; oder vertical align: text-top; probiert.
Ich habe gerade keine Zeit das zu testen sollte aber funktionieren.

Gruss
Elroy
 
Hallo,

mir fehlen genauere Angaben zum Problem:

1. Kann der Text auch aus mehreren Worten oder sogar ganzen Sätzen oder Absätzen bestehen?

2. In welchem Verhältnis steht der Text zum Bild? Beschreibt der Text das Bild kurz? Oder dient das Bild als Information zu einem längeren Text?

3. Was soll geschehen, wenn der Text höher als das Bild wird? Soll der weitere Text dann unter das Bild rutschen? Oder soll der gesamte Text zwar rechts vom Bild sein, aber im ganzen linksbündig ausgerichtet?

Im Moment sehe ich das cite-Element als sachlich falsch. Genau wie die br-Elemente.

Gruss

MrMurphy
 
Eine Definitionsliste DL wäre vielleicht eine gute Wahl.
Code: 
<!DOCTYPE html>
<html><head>
   
  <title>Bilder</title>
<style>

/* Globae Einstellungen */
* {
 margin:0;
 padding:0;
 list-style:none;
 border:none;
 outline:none;
}




/* Galerie Container */
#gal {
 margin:10px auto;
 position:relative;
 width:600px;  /* Gesamtbreite = dt(img(400px) + dd(200px )  */
 border:20px solid #fff;
 background: #333;
 overflow:hidden;
 box-shadow:0px 0px 1px #000;
}

#gal dl {
 position:relative;

}


#gal dt  {
 position:relative;
 display:block;
 float:left;
 margin:10px 0;
}

#gal dd {
 padding:10px;
 margin:10px 0;
 float:left;
 width:180px;
 height:280px;
 background:#333;
 color:#fff;
}


/* Bildbreite 400px */
#gal img {
 width:400px;
 float:left;
}


</style>

</head>
<body>


<div id="gal">

<dl>
<dt><img src="xx.jpg" alt="bild1"></dt>
<dd>text</dd>
<dt><img src="xx.jpg" alt="bild1"></dt>
<dd>text</dd>
<dt><img src="xx.jpg" alt="bild1"></dt>
<dd>text</dd>
</dl>





</body></html>
{/code]
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben