← HTML + CSS

Imagem e video lado a lado

Lida 4012 vezes

Offline

RuiViana 
Membro
Mensagens 49 Gostos 2
Feedback +3

Troféus totais: 20
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 10 Posts First Post

Boas.

Estou com um pequeno problema que me está a matar o cérebro  #-o
Então é o seguinte, eu estou a desenvolver uma página só em HTML & CSS e nele quero colocar imagens que são os icons do lado esquerdo no sentido vertical e o video ao lado mas tudo centrado. Só as imagens estão a ficar por cima do video.

O que pretendo fazer é isto:



Código: [Seleccione]
<center>
<div style="padding-left: auto;">
<div style="float: left;">
<a href="URL" target="_blank"> <img src="IMAGEM"></a>
<br />
<a href="URL" target="_blank"> <img src="IMAGEM"></a>
<br />
<a href="URL" target="_blank"> <img src="IMAGEM"></a>
</div></div>

<div style="padding-center: auto;">
<div style="float:center;margin:0 10px 5px 0;">
<object height='360' width='640'><param name='movie' value='http://www.site.com/video1234'/><param name='allowscriptaccess' value='always'/><param name='allowfullscreen' value='true'/><param name='wmode' value='transparent'/><embed allowfullscreen='true' allowscriptaccess='always' height='360' src='http://www.site.com/video1234' type='application/x-shockwave-flash' width='640' wmode='transparent'/></object></div></div>
</center>

Se me poderem ajudar agradecia,  :obrigado:
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Em primeiro lugar, evita usar in-line css...

Mas para ser mais rápido, tenta:

Código: (html4strict) [Seleccione]
<div style="margin: 0 auto; width: 900px;">

   <div style="float: left; margin-right: 50px;">
      <a href="URL" target="_blank"> <img src="IMAGEM"></a>
      <br />
      <a href="URL" target="_blank"> <img src="IMAGEM"></a>
      <br />
      <a href="URL" target="_blank"> <img src="IMAGEM"></a>
   </div>

   <div style="float: left;">
         <object height='360' width='640'><param name='movie' value='http://www.site.com/video1234'/><param name='allowscriptaccess' value='always'/>
            <param name='allowfullscreen' value='true'/>   <param name='wmode' value='transparent'/>
            <embed allowfullscreen='true' allowscriptaccess='always' height='360' src='http://www.site.com/video1234' type='application/x-shockwave-flash' width='640' wmode='transparent'/>
         </object>
   </div>

   <div style="clear: both;"> </div>

</div>

Muda o primeiro width: ; para a largura do site.
Offline
T

Thomato 
Membro
Mensagens 4125 Gostos 3
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Código: [Seleccione]
<center>
<div id="container">
<div style="float: left;">
<a href="URL" target="_blank"> <img src="IMAGEM"></a>
<br />
<a href="URL" target="_blank"> <img src="IMAGEM"></a>
<br />
<a href="URL" target="_blank"> <img src="IMAGEM"></a>
</div>

<div style="float: right;">
<object height='360' width='640'><param name='movie' value='http://www.site.com/video1234'/><param name='allowscriptaccess' value='always'/><param name='allowfullscreen' value='true'/><param name='wmode' value='transparent'/><embed allowfullscreen='true' allowscriptaccess='always' height='360' src='http://www.site.com/video1234' type='application/x-shockwave-flash' width='640' wmode='transparent'/></object>
</div>
<div style="clear: both;">

</div>
</center>
Vê se isto funciona.
Na DIV #container, dá-lhe a largura que precisas (e convém ajustares as larguras de cada uma das colunas).

EDIT: Reparei agora que o Pedro já corrigiu o código ;)
Offline

RuiViana 
Membro
Mensagens 49 Gostos 2
Feedback +3

Troféus totais: 20
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 10 Posts First Post

Já está, obrigado aos dois.
Podem fechar,
Cumpz

Páginas: 1

Posts relacionados

UI & UX Design

div fixa ao lado de div 100%

a
alexandremdn

WordPress

Colocar botão Gosto ao lado dos títulos dos artigos

TEkN0

WordPress

Mudar Sidebar de lado

s
swing