Ir para conteúdo

POWERED BY:

Arquivado

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

~meela

<hr> ao lado do texto

Por , em Desenvolvimento frontend

Recommended Posts

~meela    0

~meela
Postado

Oi gente.

Tenho um título que vem acompanhado de uma barra pra preencher o restante da largura da div, de acordo com o tamanho do texto.

Pensei em usar a tag hr pra isso, mas estou com dificuldades pra centralizar ela com o texto, e pra fazê-la acompanhar o restante da largura.

 

Também pensei em usar uma imagem com repeat-x, mas também não sei como fazê-la acompanhar a largura, e ainda teria a questão de um dos cantos ser arredondado.

 

Alguma sugestão de como posso resolver?

 

Segue uma imagem pra ilustrar o que eu preciso, e o código que tenho.

 

exemplox.jpg

 

#post {
background-color:#CCC;
width: 560px;
margin-left: 20px;
float: left;
}
#post .title {
height: 30px;
}
#post .title h1 {
font-family: 'Ubuntu', arial, serif;
font-size: 25pt;
font-style: italic;
font-weight:700;
color: #25BBB5;
float: left;
}
#post .title hr {
color: #25BBB5;
background-color: #25BBB5;
height: 2px;
width: 50%;
text-align: right;
border: solid thick #25BBB5;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;


}

<div id="post">
  <div class="title">
     <h1>Lorem Ipsum</h1>
     <hr />         
  </div>
</div>

 

 

Obrigada desde já! :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Eu não entendi o porque de você não usar imagens, pode explicar novamente?

Se conseguir poste um link com o que você já fez, fica mais fácil :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

crf_h0m3r    5

crf_h0m3r
Postado

Com imagem vai ser muito mais fácil, assim como o Giovani falou.

Você vai passar menos tempo quebrando a cabeça pra alinhar a linha com texto.

 

(...) ainda teria a questão de um dos cantos ser arredondado.

Você pode fazer duas imagens. Uma é a parte reta, o "corpo" da linha e outra a "cabeça", no final. :ermm:

Compartilhar este post

Link para o post
Compartilhar em outros sites

crf_h0m3r    5

crf_h0m3r
Postado

Bom, tentei fazer aqui, serve apenas para ideia mesmo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
*{margin:0; padding:0;}
#post {width:450px; background:#963;}
.title {float:left; height:40px; background:#03F;}
.linha {float:right; top:16px; position:absolute;}
</style>
</head>

<body>
<div id="post">
  <div class="title"><h1>Lorem Ipsum</h1></div>
  <img src="linha.png" class="linha" />
</div>
</body>
</html>

 

Como disse anteriormente, desenhei uma linha e fui movimentando ela. Ficou assim, testei no FF 5.0 e no IE9.

Fiz rapidamente só pra você ter uma ideia: Clique aqui

 

E assim como disse o Giovani: "Se conseguir poste um link com o que você já fez, fica mais fácil :)"

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito