Ir para conteúdo

POWERED BY:

Arquivado

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

marcelo2605

background-image dentro de div não funciona?

Por , em Desenvolvimento frontend

Recommended Posts

marcelo2605    10

marcelo2605
Postado

Seguinte: criei uma div (#content) e usei as seguintes configurações:

 

#content {
width: 978px;
height: auto;
background-image: url(../images/nav/content_978x577.png);
background-repeat: repeat-y;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

 

Dentro dela está uma outra div, onde irá o conteúdo. O problema é que quando coloco esta outra div com float left, a div content não obedece mais o repeat-y.

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcelo2605    10

marcelo2605
Postado

Cara, o problema é quando eu dou o float: left na div que está dentro da outra div com o background-image. SE eu tiro o float, o repeat-y funciona.

 

Se eu defino um min-heigh, o fundo só vai até o tamanho determinado. Não responde ao repeat-y.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Geelherme    1

Geelherme
Postado

Pelo que entendi você já havia postado nesse tópico. Funcionava quando você setou o height como 577px não é? Digo, o problema era outro.

determine como min-height: 577px e height: auto

poste os resultados

 

OBS: Aconselho não criar um tópico duas vezes para uma mesma dúvida. É chato para quem está navegando nele.

 

 

 

 

 

_____________

EDIT:

Tente tbm setar um tamanho para a div flutuante ou usar um display:block nela. Só para testes mesmo

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcelo2605    10

marcelo2605
Postado

Eu realmente havia postado um tópico ontem sobre este problema. Mas achei que ele estava mal explicado. Me desculpem por ter postado duas vezes.

 

Mas acho que encontrei a solução:

 

Nesta div está o fundo

 

#content {
width: 978px;
background-image: url(../images/nav/content_978x577.png);
background-repeat: repeat-y;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
min-height:577px;
}

 

Esta div está dentro da div content

 

.content_left {
width: 220px;
height: auto;
float: left;
}

 

O problema é que o repeat-y não estava funcionando. A saída que encontrei foi colocar em #content o seguinte código:

 

overflow:hidden

 

Ainda não testei tudo, mas parece que funcionou. Agora pq eu não sei. Se alguém souber, pode postar aqui.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Geelherme    1

Geelherme
Postado

Bem, ok. Sinceramente não sei o motivo do overflow fazer seu código ficar correto. Eu fiz o seguinte código e funcionou perfeitamente no Opera:

 

<style type="text/css">
#content {
       width: 978px;
       height: auto;
       background: url(repeat.png) #000 repeat-y;
       margin-top: 0px;
       margin-right: auto;
       margin-bottom: 0px;
       margin-left: auto;
}
.content_left {
       width: 220px;
       height: auto;
       float: left;
}
</style>
<!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>Documento sem título</title>
</head>

<body>
<div id="content">
<div class="content_left">A<br />AAAA<br />AAA</div>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

wdc_black_    0

wdc_black_
Postado

cara, tente colocar assim

 

<div id="content">
<div class="content_left">A<br />AAAA<br />AAA</div>
<div class="content_left">A<br />AAAA<br />AAA</div>
<div class="content_left">A<br />AAAA<br />AAA</div>
<div class="content_left">A<br />AAAA<br />AAA</div>
<br style="clear:both;" />
</div>

 

;)

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