[cezar]

Såhär ser min kod ut nu, väldigt enkel men det borde ju fungera.

#flickr_badge { width: 300px; height: 200px; position: absolute; margin-left: 55%; margin-top: 1%; }

<div id="flickr_badge">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=5&display=random&size=t&la yout=x&source=user&user=23190634%40N02"></script>
</div>

Varför visas de vertikalt för oavsett om jag sätter lägre height?

[cezar]

Ingen som vet?

[nicclas]

Problemet(?) är att de fyra bilderna är inkluderade i fyra div:s i den Flickr-html som genereras. Div:s har "block-display" som standard vilket gör att de alltid visas på en ny rad. Om du lägger till

div { display: inline; }

i din style så kommer du att modifera funktionen hos div att likna de som span har (ingen ny rad) och du kommer att få dina bilder horizontellt om det är så att din div-bredd är tillräckligt stor för alla fyra bilderna.

[cezar]

Originally posted by nicclas@Feb 3 2008, 12:12
Problemet(?) är att de fyra bilderna är inkluderade i fyra div:s i den Flickr-html som genereras. Div:s har "block-display" som standard vilket gör att de alltid visas på en ny rad. Om du lägger till

div { display: inline; }

i din style så kommer du att modifera funktionen hos div att likna de som span har (ingen ny rad) och du kommer att få dina bilder horizontellt om det är så att din div-bredd är tillräckligt stor för alla fyra bilderna.

Tack Niclas!
Det gjorde susen.

Verkar som flickr gör egna divar som heter lickr_badge_image1, flickr_badge_image2 osv.

Satte div#flickr_badge_image1 { display: inline; } osv men det kanske går att göra en div för alla?
Fungerade inte med detta iaf;
#flickr_badge { width: 400px; height: 100px; position: absolute; margin-left: 55%; margin-top: 1%; display: inline; }

[dAEk]

Kan du kapsla in HTML:n som du får ut från flickr?

I så fall skulle du kunna göra nåt i stil med:

<div id="kapsel-runt-flickr">
	[...] <-- innehållet från flickr här
</div>

och sedan applicera stilregler på divarna inom det omslutande elementet:

#kapsel-runt-flickr div {
	display: inline;
}

Antingen det eller så kör du med CSS 3 attributselektor som kan matcha elementens id:n

div[id^="flickr_badge_image"] {
	display: inline;
}

(div[id^="flickr_badge_image"] matchar alla divar med id:n som börjar med "flickr_badge_image")

Jag har aldrig använt flickr och vet inte vad flickr badge är för något men om det är vanlig HTML så borde det här funka.

[Clarence]

Originally posted by dAEk@Feb 3 2008, 20:40

div[id^="flickr_badge_image"] {
	display: inline;
}

(div[id^="flickr_badge_image"] matchar alla divar med id:n som börjar med "flickr_badge_image")

Jag har aldrig använt flickr och vet inte vad flickr badge är för något men om det är vanlig HTML så borde det här funka.

Tilläggas bör nog att i runda slängar 60% av svenska besökare över huvud taget stödjer attributselektorer.

[cezar]

Följde denna guide http://veerle.duoh.com/blog/comments/fickr...adge_w3c_valid/ så blev det bra.