CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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.

Synes godt om

Christian_Belgien Novice

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>

Synes godt om

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;" />

Synes godt om

Christian_Belgien Novice

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.

Synes godt om

1409 Praktikant

20. april 2010 - 08:37 #4

Lukker...

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS