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

Bildtitel neben Bild ausrichen

Jewls

Jewls

Neues Mitglied
Hallo, :)

Ist es möglich einen Bildtitel, also den title="Text"...

<img src="Beispiel.jpg" title="Text"/>

...rechts oben neben dem Bild auszurichten, ohne den Text aus dem titel im Img-tag raus zu nehmen ?

Das ganze ist in einer image gallery, wo jedes Bild eine unterschiedliche Beschriftung hat.
Diese Beschriftung möchte ich aber nicht in in dem Bild, sondern rechts oben neben dem Bild auszurichten.

Wie macht man das und geht das auch über css?

Danke :)
 
Könntest du eventuell etwas präziser ausdrücken, was du darstellen möchtest? Ein Text im title wird beim überfahren mit der Maus angezeigt und zwar an der Stelle, an der du mit der Maus das Bild berührst. Den kann man meines Wissens nach nicht ohne weiteres ausrichten (falls es überhaupt möglich ist).
Du kannst die Beschreibung via CSS mit float:right nach rechts neben dem Bild ausrichten.

Oder hab ich da was falsch verstanden?
 
Danke erst mal für die schnelle Reaktion.

Ok noch mal anders.
Das ist sozusagen das HTML Gerüst der image gallery
<ul>
<li> <div id="text">Mein Text</div> <a href="Sample.jpg"><img src="samples/Sample.jpg" title="text"/></a></li>
<li> <div id="text">anderer text</div> <a href="Sample2.jpg"><img src="samples/Sample2.jpg" title="text"/></a></li>
<li> <div id="text">noch andererer text :D</div> <a href="Sample3.jpg"><img src="samples/Sample3.jpg" title="text"/></a></li>
</ul>

und in diesem Beispiel steht "Mein Text" auch auf dem Bild, genauso wie "text" und sobald ich es im css mit "left" oder so versuche neben das bild zu schieben, verschwindet der Text im Bildrand :(
Ich habe den Text aus lauter Verzweiflung schon in ein div gepackt und versucht mit "z-index:999;" über das bild zu bekommen :D^^

...ich bin verwirrt.

Danke :)
 
Mal schauen ob es so funktioniert:

<ul>
<li> <div id="text" style="float:right;">Mein Text</div> <a href="Sample.jpg"><img src="samples/Sample.jpg" title="text"/></a></li>
<li> <div id="text" style="float:right;">anderer text</div> <a href="Sample2.jpg"><img src="samples/Sample2.jpg" title="text"/></a></li>
<li> <div id="text" style="float:right;">noch andererer text </div> <a href="Sample3.jpg"><img src="samples/Sample3.jpg" title="text"/></a></li>
</ul>

EDIT: Mal was anderes: Welchen Browser nutzt du denn?
EDIT 2: Wenn du in den ul-Tag style="list-style:none;" einfügst, bekommst du in älteren Browsern auch die Aufzählungspunkte weg
 

Anhänge

  • upload_2014-6-22_16-1-22.png
    upload_2014-6-22_16-1-22.png
    95 Bytes · Aufrufe: 3
Zuletzt bearbeitet:
Ich verwende Chrome...
list-style:none; habe ich schon verwendet.

hm, also style="float:right;" funktioniert leider auch nicht :/
aber danke für die Idee.

Ich versteh nicht warum der Text selbst extern im div nicht aus der Bild Begrenzung raus geht?!.
 
könnte evtl. daran liegen, dass sowohl der Text, als auch das Bild im li-Tag sind. Ich vermute mal, dass es mit einer unsichtbaren Tabelle hinhauen müsste, ist allerdings recht unübersichtlich, was den Quellcode angeht.
 
Das title-Attribut wird nur von manchen (nicht allen) Browsern oberhalb des Bildes angezeigt, wenn der Nutzer dieses mit der Maus berührt. Stylen und Positionieren kann man diesen Text nicht.
 
Danke erstmal für die Erklärung,
aber wie kann ich den Text im div neben dem Bild positionieren, ohne die Verbindung zwischen Bild und Text zu verlieren,
da zu jedem Bild in der gallery ein anderer text kommen soll?

...mal abgesehen von dem title-Attribut.
 
Ich versteh nicht warum der Text selbst extern im div nicht aus der Bild Begrenzung raus geht?!.
Zum Vergrößern anklicken....
Das müsstest Du erreichen können, wenn Du den div absolut positionierst:
Code: 
<li> <div id="text1" style="position: absolute; left: 100px;">Mein Text</div> <a href="Sample.jpg"><img src="samples/Sample.jpg" title="text"/></a></li>
Für 100px musst Du wahrscheinlich annähernd die Breite des Bildes einsetzen. Diese divs unsichtbar machen und mit Mouseover einblenden.
Das ganze müsste sich auch automatisch mit Javascript machen lassen, so dass Du nicht deine ganze Galerie umeditieren musst.
BTW: IDs müssen eindeutig sein, d. h. Du musst für jedes div eine andere ID vergeben.
 
Zuletzt bearbeitet von einem Moderator:
So vielleicht.
Code: 
<!doctype html>
<html>
<head>
<title>Beispielseite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>

ul {
margin:10px;
padding:10px;
list-style:none;
width:30%;
}

li {
margin:10px;
padding:10px;
list-style:none;
border:1px solid #000;
}
li b {
display:inline-block;
vertical-align:top;
}

li img {
margin-right:5px;
padding:5px;
border:1px solid #000;
display:inline-block;
}
</style>
</head>
<body>
<ul>
<li><a href="Sample.jpg"><img src="bild1.jpg" width="100" alt="bild1" title="text"></a> <b>Mein Text</b> </li>
<li><a href="Sample2.jpg"><img src="bild2.jpg" width="100" alt="bild2"  title="text"></a> <b>anderer text</b> </li>
<li><a href="Sample3.jpg"><img src="bild3.jpg" width="100" alt="bild3"  title="text"></a> <b>noch andererer text :D</b> </li>
</ul>
</body>
</html>

Ja, du kannst natürlich auch figure nehmen.
 
aber es hat alles nicht so richtig funktioniert
Zum Vergrößern anklicken....
Verstehe ich nicht, das was ich gepostet habe, habe ich vorher erfolgreich getestet. Aber möglicherweise modifiziert das Skript das DOM.
evtl. liegt es an der Struktur der gallery?
Zum Vergrößern anklicken....
Um das untersuchen zu können, würde es helfen, wenn Du uns den Link zu deiner Seite posten würdest.
Habe mir mal ein Demo der Galerie angesehen. Wo möchtest Du den Text denn haben, ich vermute, bei den Thumbnails jeweils rechts oben?
 
Zuletzt bearbeitet von einem Moderator:
Meinst Du neben dem großen Bild? Dann verstehe ich den Sinn nicht, denn in einigen Demos wird doch die Beschreibung unten im Bild angezeigt. Warum kannst Du das nicht verwenden?
 
Ja neben dem großen.
in einigen Demos wird doch die Beschreibung unten im Bild angezeigt. Warum kannst Du das nicht verwenden?
Zum Vergrößern anklicken....
Naja, der Text verdeckt dann immer etwas von dem Bild und die Texte sind leider nicht sehr kurz.
 
Ohne jetzt zu wissen, wie der Code der Galerie aufgebaut ist, wäre es nicht bei längeren Texten möglich, diese transparent zu machen? (Also bei dem Text unter dem Bild)
 
Verstehe, das stört mich auch häufig, wenn eine Caption oder eine Controlbar Teile vom Bild verdeckt. Auf Grund welcher Demo hast Du denn deine Galerie aufgebaut?
 
Noch ein Einwand: Wenn Du den Text rechts vom Bild platzierst, besteht die Gefahr, dass er nicht mehr ins Fenster passt, wenn dieses nicht sehr groß ist. Wäre es nicht besser, die Beschreibung unten zu lassen und nur außerhalb des Bildes zu platzieren?
Egal wie, das einfachste ist wahrscheinlich, wenn man das das div von der Beschreibung nimmt und mit CSS anders positioniert, entweder unterhalb oder rechts vom Bild.
Code: 
.exposureData {
position:absolute;
left:0;
right:0;
bottom:0;
height:60px;
padding:7px;
background-image:url(res/veil.png);
color:#fff;
font-family:Arial,Verdana,Helvetica,sans-serif;
font-size:16px;
font-weight:bold;
}
Hier müsste man bloß das bottom:0; auf bottom:-60px; ändern, dann wäre die Box mit der Beschreibung unterhalb und außerhalb vom Bild
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben