Ir para conteúdo

POWERED BY:

Arquivado

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

pwd

Esticar uma DIV pra esquerda e outra pra direita

Recommended Posts

Tudo em paz?

Estou com uma dúvida, não queria um código complexo.


O que quero é ter uma DIV com 2 BG´s diferentes na esquerda e direita, ou esticar uma DIV para ambos os lados conforme a resolução.


Segue o frame:

frame_zpsa0061c8c.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

Caso não seja possível a utilização de CSS3, onde você pode declarar mais fundos apenas separando por vírgula, explore um pouco os pseudo-elementos :before e :after. Salvo engano, eles funcionam inclusive no IE8 ou superior.

 

 

.elemento {
position: relative;
}
.elemento:before {
content: '';
display: inline-block;
position: absolute;
background: /* declare aqui fundos adicionais, e depois posicione o pseudo-elemento relativo ao elemento original com margem ou top, left etc */
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você pode fazer duas divs diferentes uma com float left e outra com right e depois juntá-las no mesmo ponto no meio, ou então você poderia fazer a imagem de background e determinar a width da div como 100%

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pessoal,

Meu código ficou assim:

Mas quando testo em resolução menor, as divs sobrepõem a div do meio, melhor usar Media Queries?

 

<div id="barra-paginas">
            	 <div id="left-verde"></div>
            	 <div id="titulo-pagina"><h1>Pagina</h1></div>
                 <div id="right-preta"></div>
</div>
#left-verde, #right-preta{
	width: 25%;
	float: left;
	height: 79px;
}

#left-verde, #right-preta{
	background: #8FBE00;
}
#right-preta{
	background: #000;
}

#titulo-pagina{
	width: 50%;
	font-size: 24px;
	background: url(images/bg-titulo-pagina.png) no-repeat 0px 0px;
	height: 79px;
	float: left;
}
#titulo-pagina h1{
	font: 46px "quicksand_lightregular";
	color: #FFF;
	background: #000;
	margin-left: 319px;
	text-transform: uppercase;
	padding-top: 15px;
	padding-bottom: 11px;
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

Se me permite, IE8+ e demais navegadores:

HTML

<h1 class="teste">Título</h1>


CSS

.teste {
	background: #000;
	color: #FFF;
	font: 40px/59px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	position: relative;
	text-indent: 47.4%;
}
.teste:before {
	background: #8FBE00 url(before.jpg) 100% 0 no-repeat;
	content: '';
	display: inline-block;
	height: 59px;
	left: 0;
	position: absolute;
	top: 0;
	width: 45.5%;
}


Imagem:
http://www.criativus.com.br/testes/before.jpg

:thumbsup:

Compartilhar este post


Link para o post
Compartilhar em outros sites

Seu código ficou perfeito, mas o BG que vc usou o before.jpg, se vc notar no frame ele tem uma transparência.

 

Obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara, vazado é um pouco mais "complicado". Eu não tive muito tempo aqui pra pensar numa maneira mais simples (que com toda certeza deve existir), mas segue algo (que funciona somente em navegadores standards, IE9+ e demais):

 

CSS:

.teste {
	background: #000;
	color: #FFF;
	font: 40px/59px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	position: relative;
	text-indent: 15px;
	width: 54.5%;
	margin: 0 0 0 45.5%;
}
.teste:after,
.teste:before {
	content: '';
	display: inline-block;
	height: 59px;
	position: absolute;
	top: 0;
}
.teste:after {
	background: #8FBE00;
	left: -83.5%;
	width: 75%;
}
.teste:before {
	background: url(before-n.png) 100% 0 no-repeat;
	left: -120px;
	width: 120px;
	z-index: 9999;
}
@media all and (max-width: 610px) {
	.teste:after {
		width: 50%;
	}
}
@media all and (max-width: 1160px) and (min-width: 610px) {
	.teste:after {
		width: 64.5%;
	}
}
@media all and (max-width: 1630px) and (min-width: 1160px) {
	.teste:after {
		width: 70%;
	}
}

Imagem:

http://www.criativus.com.br/testes/before-n.png

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.