← HTML + CSS

problema no CSS

Lida 1701 vezes

Offline

Mac 
Membro
Mensagens 93 Gostos 0
Troféus totais: 22
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 50 Posts 10 Posts

Eu tenho o seguinte problema.

Na parte do conteúdo, eu queria que a minha imagem de bg repeti-se na vertical, ate que quando o conteúdo termina pare essa repetição.

O que acontece é que a imagem não se repete.

fica assim:



Código: (css) [Seleccione]
.content{
width:800px;
margin:0 auto 0 auto;
padding:30px 0 10px 0;
background:url(images/bgmen.png) repeat-y;
}

.welcome{
width:300px;
margin-left:20px;
float:left;
text-align:justify;
}

.welcome h2{
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
font: bold;
color:#FFF;
text-transform:uppercase;}

.welcome p{
font-size:15px;
color:#FFF;}

.welcome a{
color: #c4d92e;
text-decoration: none;
/* FOR SMOOTH TRANSITION EFFECT */
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.welcome a:hover{
color: #fff;
}

.trailer{
width:400px;
margin-right:20px;
float:right;
}

.trailer h2{
text-transform:uppercase;
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
font: bold;
color:#FFF;}

Código: (html4strict) [Seleccione]
<div class="content">
<div class="welcome">
    <h2>Bem-Vindo</h2>
    <br />
<p><a href="#" target="_blank">A Casa</a> é uma curta metragem produzida por <b>Rui Sousa</b>, para a aprovação da Prova de Aptidão Profissional (PAP).
            <br />
            <br />
            Esta curta
</p>
      </div>
     
  <div class="trailer">
    <h2>Trailer</h2>
    <br />
    <iframe width="400" height="233" src="http://www.youtube.com/embed/QU0SEeQJy0c" frameborder="0" allowfullscreen></iframe>
    </div>
</div>
Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Isso acontece porque dentro do elemento que queres que o background repita tens elementos com float. Coloca no .content :

Código: [Seleccione]
{ overflow: hidden; }
Offline

Mac 
Membro
Mensagens 93 Gostos 0
Troféus totais: 22
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 50 Posts 10 Posts

Isso acontece porque dentro do elemento que queres que o background repita tens elementos com float. Coloca no .content :

Código: [Seleccione]
{ overflow: hidden; }

Obrigado, é mesmo isso.
Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Obrigado, é mesmo isso.

De nada ;)