Få till bildtext

4 svar · 1 121 visningar · startad av silfver 12 juni 2006

silfverMedlem sedan apr. 200312 679 inlägg

Frågan12 juni 2006 15:40#1

Hur är smartast att lägga upp en bild? Har försökt med lite olika varianter men kom får det inte riktigt att sitta. Som det är nu så ser det ut så här:

		.bildvisning {
			font-family: verdana;
			display: table;
		}
		.bild {
			padding: 3px;
			border: 1px solid #999;
		}
		.bildtext {
			font-size: .75em;
		}
		.byline {
			font-size: .65em;
			text-align: right;
			color: #333;
		}

<div class="bildvisning">
	<img src="bild.jpg" alt="" class="bild" />
	<div class="bildtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
	<div class="byline">Foto: Lorem Ipsum.</div>
</div>

Men då går ju texten förbi bilden, vilket jag inte vill. Jag vill ju att bildtext ska sträcka sig lika långt som bilden, sen ska den radbrytas. Men då måste jag ju sätta samma bredd på bildvisning som på bild vilket jag inte kan.

Hur skulle ni löst det?

zcorpanMedlem sedan dec. 20042 245 inlägg

12 juni 2006 16:33#2

Du kan lägga till en bredd på .bildvisning (tex width:4em). Eftersom den beter sig som en tabell kan den bli bredare om dess innehåll kräver det.

För IE kan du kanske lösa det med en expression som hämtar bredden på bilden...?

silfverMedlem sedan apr. 200312 679 inlägg

13 juni 2006 10:11#3

zcorpan skrev:

Du kan lägga till en bredd på .bildvisning (tex width:4em). Eftersom den beter sig som en tabell kan den bli bredare om dess innehåll kräver det.

För IE kan du kanske lösa det med en expression som hämtar bredden på bilden...?

Din lösning med att sätta en fast bredd på .bildvisning fungerar bra i Opera åtminstone (inte prövat nåt annat). Men vet du med dig att det inte fungerar i IE?

Har inte lust att ta en lösning som bara fungerar för vissa. Tänkte ifall det fanns en smart all-roundlösning där ute. :)

zcorpanMedlem sedan dec. 20042 245 inlägg

13 juni 2006 10:31#4

IE (före version 7) expanderar boxen för att täcka bilden men texten radbryter ändå där boxen skulle ha slutat om den inte hade expanderats.

Det går dock lösa med en liten expression. Om du har bilden som första barn till .bildvisning kan det se ut ungefär såhär:

.bildvisning { display:table; border-style:solid; width:4em; width:expression(this.firstChild.clientWidth + "px"); }

silfverMedlem sedan apr. 200312 679 inlägg

13 juni 2006 11:14#5

Det blir bra så. Tack zcorpan. ;)