← HTML + CSS

Ajuda em HTML

Lida 9831 vezes

Offline

Spacecowboy 
Membro
Mensagens 761 Gostos 0
Feedback +10

Troféus totais: 20
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 500 Posts 100 Posts 50 Posts

Boas pessoal,

Estou a tentar estruturar conteúdo em HTML, segui-me por algumas tutoriais mas não consigo saber o que tem de ser feito para as coisas ficarem como eu gostava que ficassem.

<!DOCTYPE html>
<html>
<body>


<p style="font-size:3em;">TESTE 1234567890</p>
<a href="http://hypescience.com/"><img class="alignnone size-full wp-image-555" title="BELEZA" src="http://hypescience.com/wp-content/uploads/2009/01/olho-azul-grande.jpg" width="190" height="180" /></a>
<a href="http://hypescience.com/">
<img src="http://www.clker.com/cliparts/M/q/Y/T/f/Q/reservar-yellow-button-th.png" alt="HTML tutorial" width="32" height="32"></a></p>
</body>
</html>


O que pretendia fazer era colocar o botão reservar ao lado do titulo TESTE1234567890 e não ao lado da imagem/link e colocar um parágrafo (texto) a seguir ao link/quadrado

Agradeço desde já qualquer ajuda ou dica

cumprimentos
Offline

=IceBurn= 
Membro
Mensagens 897 Gostos 3
Feedback +3

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

Experimenta assim...

Código: (html4strict) [Seleccione]
<!DOCTYPE HTML>
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
 <title>TESTE 1234567890</title>
 <style type="text/css">
  <!--
p.title { font-size: 3em; }
  -->
 </style>
 </head>
 <body>
  <p class="title">TESTE 1234567890
   <a href="http://hypescience.com/"><img src="http://www.clker.com/cliparts/M/q/Y/T/f/Q/reservar-yellow-button-th.png" alt="Reservar" width="32" height="32" /></a>
  </p>
  <p>
   <a href="http://hypescience.com/"><img src="http://hypescience.com/wp-content/uploads/2009/01/olho-azul-grande.jpg" alt="hypescience" width="190" height="180" /></a>
  </p>
  <p>Texto...</p>
 </body>
</html>
Offline

Spacecowboy 
Membro
Mensagens 761 Gostos 0
Feedback +10

Troféus totais: 20
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 500 Posts 100 Posts 50 Posts

Obrigado pela resposta Rápida Ice-Burn,

 resultou   :) mas secalhar expliquei mal a última parte, o texto a seguir ao bloco era ao lado e não em baixo..peço desculpa  #-o

Edit: o texto gostava que ficasse alinhado com o quadrado e não só em uma linha
Offline

=IceBurn= 
Membro
Mensagens 897 Gostos 3
Feedback +3

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

Assim?

Código: (html4strict) [Seleccione]
<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>TESTE 1234567890</title>
    <style type="text/css">
     <!--
     p.title { font-size: 3em; }
     div.media-block, div.text-block { float: left; }
     div.text-block { margin-left: 10px; }
     -->
    </style>
  </head>
  <body>
    <p class="title">
      TESTE 1234567890
      <a href="http://hypescience.com/"><img src="http://www.clker.com/cliparts/M/q/Y/T/f/Q/reservar-yellow-button-th.png" alt="Reservar" width="32" height="32" /></a>
    </p>
    <div class="media-block">
      <p>
        <a href="http://hypescience.com/"><img src="http://hypescience.com/wp-content/uploads/2009/01/olho-azul-grande.jpg" alt="hypescience" width="190" height="180" /></a>
      </p>
    </div>
    <div class="text-block">
      <p>
        Texto...
      </p>
    </div>
  </body>
</html>
Offline

Spacecowboy 
Membro
Mensagens 761 Gostos 0
Feedback +10

Troféus totais: 20
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 500 Posts 100 Posts 50 Posts

É isso mesmo Ice   :) só que se for a escrever mais texto aparece tudo em baixo, queria escrever mais ou menos um parágrafo nesse espaço ao lado do quadrado, é tipo uma descrição do produto.

não dá para meter mais texto ao lado?
Offline

Spacecowboy 
Membro
Mensagens 761 Gostos 0
Feedback +10

Troféus totais: 20
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 500 Posts 100 Posts 50 Posts

Já consegui ICE  :cool: Mudei de linha e escrevi frases mais pequenas, dá perfeitamente para aquilo que quero fazer.

 + 1 para ti  :obrigado:


cumprimentos
Offline

=IceBurn= 
Membro
Mensagens 897 Gostos 3
Feedback +3

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

Já consegui ICE  :cool: Mudei de linha e escrevi frases mais pequenas, dá perfeitamente para aquilo que quero fazer.


Isso desenrasca, mas não é a forma correcta de fazer. Talvez queiras começar por definir no div.text-block o parâmetro width para que possas controlar o espaço horizontal ocupado pelo texto... Faz isso em vez de fazeres quebras de linha. Procura saber mais acerca de CSS juntamente com HTML.

Offline

Spacecowboy 
Membro
Mensagens 761 Gostos 0
Feedback +10

Troféus totais: 20
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 500 Posts 100 Posts 50 Posts


Isso desenrasca, mas não é a forma correcta de fazer. Talvez queiras começar por definir no div.text-block o parâmetro width para que possas controlar o espaço horizontal ocupado pelo texto... Faz isso em vez de fazeres quebras de linha. Procura saber mais acerca de CSS juntamente com HTML.



Mas resulta na perfeição, estou é a tentar descobrir como fazer para os produtos abaixo, fiz um copy-paste desse script e repeti-o mas o segundo titulo ficou no lado direito desalinhado, usei alguns Br´s para dar mais espaço porque poderia ser disso mas não é  :-k


EDIT: Já deu, afinal eram mais BR´S que faziam falta  :) grazie  :+trafego: