Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

mestre fyoda

colocar 2 setas uma embaixo da outra

Recommended Posts

como que eu faço para colocar duas figuras uma embaixo da outra ?por exemplo eu presizo colocar 2 setas uma emcima da outra , como eu faço ?/\ -> uma seta\/ -> outra seta

Compartilhar este post


Link para o post
Compartilhar em outros sites

Copie, cole e estude o código abaixo para gerar as setas.

O código abaixo renderiza ssim:

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Setas do mestre fyoda</title>
<style type="text/css">
p.setas {
font-size:50px; /* tamanho das setas */
color:#f00; /* cor das setas */
font-weight:bold; /* espessura das setas */
}
</style>
</head>
<body>

<p class="setas">
↑; 
<br /> <!-- coloque mais BRs para afastar as setas -->
↓; 
</p>

</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

poderia colocar um display: block tb... colocava as setas dentro d um span e coloca um display block... ae naum precisaria mudar o xhtml caso mudasse alguma propriedade... e ainda poderia colocar a seta como imagem mesmo...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Soluções existem várias e adotar uma ou outra depende de cada caso.

 

Se você pretende inserir as setas em várias páginas codificando individualmente cada uma delas (sem inserção dinâmica) é certo que o melhor é passar o controle da distância entre elas para as CSS.

 

Vamos então pensar em colocar as setas dentro de span e declarar display:block conforme sugerido.

Mas aí eu pergunto:

Se span e div tem o mesmo valor semântico por que não usamos logo um div que já tem comportamento padrão de bloco? Por que usar span? O que você acha?

 

O código:

.....
<style type="text/css">
.setas {
font-size:50px; /* tamanho das setas */
color:#f00; /* cor das setas */
font-weight:bold; /* espessura das setas */
	}
</style>
</head>
<body>
<div class="setas">↑</div>
<div class="setas">↓</div>
</body>
</html>

 

Mas, se são poucas páginas com setas use o elemento BR como indicado no código postado anteriormente.

PS: Sempre que houver uma solução com textos ou caracteres prefira a usar imagens.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.