Avatar billede 1409 Praktikant
14. april 2010 - 12:52 Der er 3 kommentarer og
1 løsning

Placering af to billeder

Jeg vil gerne placere to billeder, hhv. før og efter noget tekst.
Det øverste bliver placeret til højre med en del af teksten, der løber til venstre for det. No problem...

Men hvordan indsætter jeg billede to til venstre i bunden sådan, at den sidste del af teksten løber højre for det?

<img src="grafik/fotos/ws.jpg" border="0" width="200" height="100" style="float: right; margin-left: 10px; margin-bottom: 10px;" />
Vestibulum vel mauris nunc, non feugiat risus. Curabitur eget lacus eu nulla vestibulum vulputate nec quis leo. In hac habitasse platea dictumst. Praesent porttitor nisl eget nunc mattis ut gravida enim interdum. Vestibulum faucibus cursus dolor, non laoreet sapien congue eget. Aenean ante elit, lacinia vitae cursus id, facilisis ac sapien. Praesent quam dolor, bibendum eu gravida vel, blandit nec odio. Nulla luctus venenatis molestie. Mauris vehicula porta accumsan. Aenean ac pellentesque lorem. Nullam nec iaculis dolor.
<img src="grafik/fotos/ma.jpg" border="0" width="200" height="110" style="float: left; margin-right: 10px; margin-top: 10px;" />

Desværre virker "float: left" virker...

BTW. Både tekst og billeder hentes ind dynamisk med php. Og jeg kender ikke dimensionerne på dem på forhånd.
14. april 2010 - 13:36 #1
Hvis du kunne dele teksten i to og saa placere billede nummer to mellem de to stykker saa ville den vaere hjemme.  Jeg ved ikke om det er muligt.  Jeg proevede det her.  Jeg lavede teksten laengere for bedre at se effekten paa min testside:

<body>
<img src="grafik/fotos/ws.jpg" border="0" width="200" height="100" style="float: right; margin-left: 10px; margin-bottom: 10px;" />
Vestibulum vel mauris nunc, non feugiat risus. Curabitur eget lacus eu nulla vestibulum vulputate nec quis leo. In hac habitasse platea dictumst. Praesent porttitor nisl eget nunc mattis ut gravida enim interdum. Vestibulum faucibus cursus dolor, non laoreet sapien congue eget. Aenean ante elit, lacinia vitae cursus id, facilisis ac sapien. Praesent quam dolor, bibendum eu gravida vel, blandit nec odio. Nulla luctus venenatis molestie. Mauris vehicula porta accumsan. Aenean ac pellentesque lorem. Nullam nec iaculis dolor. Vestibulum vel mauris nunc, non feugiat risus. Curabitur eget lacus eu nulla vestibulum vulputate nec quis leo. In hac habitasse platea dictumst. Praesent porttitor nisl eget nunc mattis ut gravida enim interdum. Vestibulum faucibus cursus dolor, non laoreet sapien congue eget. Aenean ante elit, lacinia vitae cursus id, facilisis ac sapien. Praesent quam dolor, bibendum eu gravida vel, blandit nec odio. Nulla luctus venenatis molestie. Mauris vehicula porta accumsan. Aenean ac pellentesque lorem. Nullam nec iaculis dolor.
<img src="grafik/fotos/ma.jpg" border="0" width="200" height="110" style="float: left; margin-right: 10px; margin-top: 10px;" />
Vestibulum vel mauris nunc, non feugiat risus. Curabitur eget lacus eu nulla vestibulum vulputate nec quis leo. In hac habitasse platea dictumst. Praesent porttitor nisl eget nunc mattis ut gravida enim interdum. Vestibulum faucibus cursus dolor, non laoreet sapien congue eget. Aenean ante elit, lacinia vitae cursus id, facilisis ac sapien. Praesent quam dolor, bibendum eu gravida vel, blandit nec odio. Nulla luctus venenatis molestie. Mauris vehicula porta accumsan. Aenean ac pellentesque lorem. Nullam nec iaculis dolor. Vestibulum vel mauris nunc, non feugiat risus. Curabitur eget lacus eu nulla vestibulum vulputate nec quis leo. In hac habitasse platea dictumst. Praesent porttitor nisl eget nunc mattis ut gravida enim interdum. Vestibulum faucibus cursus dolor, non laoreet sapien congue eget. Aenean ante elit, lacinia vitae cursus id, facilisis ac sapien. Praesent quam dolor, bibendum eu gravida vel, blandit nec odio. Nulla luctus venenatis molestie. Mauris vehicula porta accumsan. Aenean ac pellentesque lorem. Nullam nec iaculis dolor.
</body>
Avatar billede 1409 Praktikant
14. april 2010 - 13:43 #2
Tak for buddet, men jeg tror ikke det er muligt, da teksten længde også er dynamisk.

Hov, jeg ser at jeg byttet rundt på img-taggene!
Det skal selvfølgelig være:

Øverst. Billedet skal stå til højre:
<img src="grafik/fotos/ws.jpg" border="0" width="200" height="100" style="float: right; margin-right: 10px; margin-bottom: 10px;" />

[tekst...]

Og nederst. Billedet til venstre:
<img src="grafik/fotos/ma.jpg" border="0" width="200" height="110" style="float: left; margin-left: 10px; margin-top: 10px;" />
16. april 2010 - 13:46 #3
Jeg kender ikke og kan ikke taenke paa andre loesninger paa hvad du vil.  Jeg ventede for at se om der var andre der kom med ideer, men det var ikke tilfaeldet.

Hvis du bytter om paa raekkefoelgen af teksten og den anden <img> saa du har

<img src="grafik/fotos/ws.jpg" border="0" width="200" height="100" style="float: right; margin-right: 10px; margin-bottom: 10px;" />
<img src="grafik/fotos/ma.jpg" border="0" width="200" height="110" style="float: left; margin-left: 10px; margin-top: 10px;" />
tekst

Saa faar du, som du sikkert allerede har arbejdet med, billederne til hoejre og til venstre, begge for oven og med tekst imellem og overskydende tekst nedenunder under begge billeder.

Ellers tror jeg at du enten maa finde en maade at dele teksten i to (kan du for eksempel tage teksten ind i en string og saa dele den?)

Jeg sender dette som et svar hvis du skulle skoenne at mit indlaeg trods alt var nyttigt.  Ellers maa du jo selv lave et svar.  Jeg haaber du lukker, for god ordens skyld og saa spoergsmaalet ikke laengere staar som aabent i min liste af indlaeg, med mindre du stadig forventer nye indlaeg.
Avatar billede 1409 Praktikant
20. april 2010 - 08:37 #4
Lukker...
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester