1

Estou desenvolvendo um site no qual todas as paginas tem um com um titulo que varia de tamanho, e neste mesmo titulo tem duas linhas, uma de cada lado do texto que tem que ajustar ao tamanho certo.

Sei que parece confuso, mas para explicar melhor segue uma imagem para vocês entenderem:

imagem

O meu código:

.promo{
	display:block;
	float:left;
	width:100%;
	height:200px;
	background-image:url(http://s0.ejesa.ig.com.br/portal/images/2012-07/1.461037.jpg);
	background-size:cover;
	background-position:center center;
}
h1{
	width:100%;
	text-align:center;
}

h1.tit_header{
	width:70%;
	margin:80px 15% 10px 15%;
	color:#FFF;
}

.line_01, .line_02, .line_03{
	display:block;
	width: 100%;
	clear:both;
	font-size:1em;
}

.line_01{
	display:block;
	float:left;
	width:80%;
	margin:0 10%;
	text-align:center;
}

.text_tit{
	display:block;
	float:left;
	width:33%;
}

.linhaAzul_box{
	display:block;
	float:left;
	width:33%;
	height:40px;
}
.linha{
	display:block;
	float:left;
	width:100%;
	height:5px;
	background-color:#fff;
	margin-top:18px;
}
<div class="promo">
    <h1 class="tit_header">
        <span class="line_01">
            <span class="linhaAzul_box"><span class="linha"></span></span>
            <span class="text_tit">Titulo Grande de Mais</span>
            <span class="linhaAzul_box"><span class="linha"></span></span>
        </span>
    </h1>
</div>

3
  • Não está bem claro o que procuras... podes explicar melhor? é isto que queres? -> jsfiddle.net/j9nv4v3w/3
    – Sergio
    Commented 19/12/2014 às 19:48
  • Quase isso, só que ao invés do texto se ajustar é a linha branca que deve ficar maior ou menos. Commented 19/12/2014 às 19:53
  • Marcelo dei uma resposta, era isso que procurava?
    – Sergio
    Commented 20/12/2014 às 8:12

2 Respostas 2

4

A melhor solução é usar Flexbox, vai te poupar muito trabalho em ficar calculando o posicionamento interno dos elementos e tornar seu HTML mais simples. Ver navegadores que suportam.

Você pode criar dois elementos <span> (um antes e outro depois) da tag onde ficará o título. Ou então adotar uma solução mais elegante utilizando os pseudo-elementos ::after e ::before das CSS3 para fazer as linhas, visto que elas não tem relevância para página pois trata somente de algo visual.

*{box-sizing:border-box;margin:0;padding:0}

header {
    background:url(https://i.sstatic.net/DGejA.jpg) center center;
    background-size:cover;
    height: auto;
    padding: 10% 10px;
    width: 100%;
    
    /* flexbox */
    display: -webkit-flex;
            display: flex;
  
    /* comportamento: em linha com wrap */
    -webkit-flex-flow: row wrap;
            flex-flow: row wrap;
  
    /* conteúdo justificado no centro */
    -webkit-justify-content: center;
             justify-content:center;
}

span, h2 {
    -webkit-flex: 1 0 auto;
            flex: 1 0 auto;
}

.line {
    background: #fff;
    margin-top:12px;
    height: 4px;
    width: auto /* tcharam! */
}

h2 {
    color: #fff;
    text-align:center;
}
<header>
    <span class='line'></span>
    <h2 class='title'>Título pequeno?</h2>
    <span class='line'></span>
</header>

O segredo está em não definir a largura dos elementos internos, deixando o calculo na mão da propriedade flexbox.

PS: Você pode definir os tamanhos tranquilamente, o comportamento vai depender da regra flex-flow. No exemplo eu deixei o width dos elementos todos com auto, supondo que eu tivesse definido meu <h2> com 200px e o tamanho ultrapassasse a largura do header o conteúdo interno será quebrado como na imagem seguinte:

créditos: CSS-tricks

É claro, não confie somente nessa regra. Não sei como está o seu CSS mas chegará em uma resolução pequena que você precisará tratar os breakpoints corretamente com media queries.

Para provar que o Flexbox funciona muito bem, por que não testar um título maior?

/* É o mesmo CSS, minificado */

*{box-sizing:border-box;margin:0;padding:0}header{background:url(https://i.sstatic.net/FFTx9.jpg) center center/cover;height:auto;padding:10% 10px;width:100%;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-justify-content:center;justify-content:center}h2,span{-webkit-flex:1 0 auto;flex:1 0 auto}.line{background:#fff;margin-top:12px;height:4px;width:auto}h2{color:#fff;text-align:center}
<header>
    <span class='line'></span>
    <h2 class='title'>Olá, você me acha um título muito grande?</h2>
    <span class='line'></span>
</header>


Execute o bloco de código em tela cheia aqui no SOpt. Se estiver no , use o atalho ctrl + shift + m para iniciar o modo de design adaptável e ver como as linhas são posicionadas conforme a tela é redimensionada. No existe uma forma semelhante explicada nessa resposta.

1
  • 1
    A forma que você fez com o Flexbox me parece mais correto e semântico, realmente era isso que eu precisava, obrigado pelo ajuda e desculpa a demora de resposta estou voltando de ferias agora! obrigado mesmo Renan Commented 10/01/2015 às 8:35
2

Acho que a solução passa por usar display: table; e display: table-cell; nos descendentes imediatos. Dessa maneira consegues que as céculas dessa "tabela" se adaptem ao tamanho/largura.

Porem isso só por sí não resolve pois entendo que queres a célula central basicamente fixa, do tamanho do conteúdo. Para fazer isso funcionar podes enganar o browser e dizer que as laterais devem ter 50% da largura e que a célula central deve ter white-space: nowrap;. Isso vai impedir quebras de linha e vai forçar as células laterais a dar espaço para o titulo.

Sugiro umas mudanças no CSS:

.line_01 {
    display: table;
    width:80%;
    margin:0 10%;
    text-align:center;
}
.line_01 > span {
    display: table-cell;
}
.text_tit {
    padding: 0 10px;
    white-space: nowrap;
}
.linhaAzul_box {
    width: 50%;
    height:40px;
}
.linha{
    display:block;
    width:100%;
    height:5px;
    background-color:#fff;
    margin-bottom: 5px;
}

jsFiddle: http://jsfiddle.net/38ucz1ev/

1
  • Sensacional, realmente era isso que eu precisava, obrigado pelo ajuda e desculpa a demora de resposta estou voltando de ferias agora! obrigado mesmo Sergio Commented 10/01/2015 às 8:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .