Olá pessoal,
estou estudando CSS. Fiz um template no PS, só tem 3 imagens, mas usa um degradê, então a 1ª serve para o menu e para o inicio do conteúdo, mas essa não pode se repetir, a que se repete é a por baixo dessa, como fasso para a outra imagem repetir no lugar dessa? O code esta assim:
[codebox]body {
background: #000;
margin: 0;
}
#topo {
width: 800px;
margin: auto;
padding: 8px, 0;
}
#topo h1 {
padding-right: 18px;
text-align: right;
color: #6c6c6c;
font-family: Tahoma;
font-size: 11px;
}
#topo h2 {
text-align: right;
color: #6c6c6c;
font-family: Tahoma;
font-size: 12px;
}
#corpo {
width: 800px;
min-height: 472px;
background-image: url(images/corpo-cima.gif);
background-repeat: url(images/corpo-meio.gif) repeat-y; //Essa é a imagem que querro que se repita no lugar da de cima
margin: auto;
}
#corpo-baixo {
width: 800px;
min-height: 40px;
background: url(images/corpo-baixo.png) no-repeat;
margin: auto;
}[/codebox]
Obrigado. Abraços.
Repetir Outra Imagem
Started By Tiago ---Яэℓเ¢K---, 30/07/2009, 12:27
7 replies to this topic
#2
Édipo Costa Rebouças
-
- Ex-Admins
-
- 1079 posts
Veterano
- Sexo:Masculino
- Localidade:Brasil - São Paulo
Posted 30/07/2009, 12:59
não dá para fazer isso, o que você pode fazer é colocar duas div's #corpo e aux_corpo...
na div #aux_corpo você colocar de fundo a imagem que tem que se repetir verticalmente, e no #corpo você coloca o fundo que não se repete verticalmente.
<div id="aux_corpo"> <div id="corpo"> <!-- --> </div> </div>
na div #aux_corpo você colocar de fundo a imagem que tem que se repetir verticalmente, e no #corpo você coloca o fundo que não se repete verticalmente.
#3
Tiago ---Яэℓเ¢K---
-
- Usuários
-
- 4 posts
Novato no fórum
- Sexo:Não informado
Posted 30/07/2009, 13:53
Obrigado pela ajuda Édipo... Mas agora encontrei outro problema...
[codebox]
#corpo {
width: 800px;
min-height: 472px;
background: url(images/corpo-cima.gif) no-repeat;
margin: auto;
}
#corpo-aux {
width: 800px;
height: auto;
background: url(images/corpo-meio.gif) repeat-y;
margin: auto;
}
#corpo-baixo {
width: 800px;
min-height: 40px;
background: url(images/corpo-baixo.png) no-repeat;
margin: auto;
}
[/codebox]
Fiz isso, quando não é preciso repetir a imagem do meio fica tudo legal, mas quando se põe algum conteúdo e ela repete fica com um espaço entre ela e a imagem de baixo... Como posso resolver isso?
[codebox]
#corpo {
width: 800px;
min-height: 472px;
background: url(images/corpo-cima.gif) no-repeat;
margin: auto;
}
#corpo-aux {
width: 800px;
height: auto;
background: url(images/corpo-meio.gif) repeat-y;
margin: auto;
}
#corpo-baixo {
width: 800px;
min-height: 40px;
background: url(images/corpo-baixo.png) no-repeat;
margin: auto;
}
[/codebox]
Fiz isso, quando não é preciso repetir a imagem do meio fica tudo legal, mas quando se põe algum conteúdo e ela repete fica com um espaço entre ela e a imagem de baixo... Como posso resolver isso?
#4
Édipo Costa Rebouças
-
- Ex-Admins
-
- 1079 posts
Veterano
- Sexo:Masculino
- Localidade:Brasil - São Paulo
Posted 30/07/2009, 17:15
Se for um problema de encaixar as duas imagem perfeitamente:
bem, o que acho que você teria que fazer é de alguma forma garantir que a altura do corpo, seja sempre de algum multiplo com base na imagem que se repete para sempre se encaixar perfeitamente, ou você tera que ajustar as imagens para que fiquem legais nesse esquema... eu não sei bem o que você quer fazer, se tiver um exemplo visual fica melhor de palpitar.
bem, o que acho que você teria que fazer é de alguma forma garantir que a altura do corpo, seja sempre de algum multiplo com base na imagem que se repete para sempre se encaixar perfeitamente, ou você tera que ajustar as imagens para que fiquem legais nesse esquema... eu não sei bem o que você quer fazer, se tiver um exemplo visual fica melhor de palpitar.
#5
Tiago ---Яэℓเ¢K---
-
- Usuários
-
- 4 posts
Novato no fórum
- Sexo:Não informado
Posted 30/07/2009, 17:57
Então, como disse agora a imagem se repete por tras da que fica no topo, mas quando isso acontece a imagem de baixo fica com um espaço entre ela e a que se repete(a direta nesta img), mas quando ela não ultrapassa a imagem do topo fica normal (a esquerda)..
#6
Édipo Costa Rebouças
-
- Ex-Admins
-
- 1079 posts
Veterano
- Sexo:Masculino
- Localidade:Brasil - São Paulo
Posted 30/07/2009, 18:15
era para dar certo, como esta o html disso?
#7
Tiago ---Яэℓเ¢K---
-
- Usuários
-
- 4 posts
Novato no fórum
- Sexo:Não informado
Posted 30/07/2009, 18:51
O html está assim:
[codebox]
<body>
<div id="topo">
<h1>A- A+</h1></div>
<div id="corpo-aux">
<div id="corpo">
<p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p>
<p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p>
<p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p>
</div>
</div>
<div id="corpo-baixo"></div>
</body>[/codebox]
No Dreamweaver da certo, mas no browser acontece isso (testei no IE e no Chrome).
[codebox]
<body>
<div id="topo">
<h1>A- A+</h1></div>
<div id="corpo-aux">
<div id="corpo">
<p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p>
<p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p>
<p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p>
</div>
</div>
<div id="corpo-baixo"></div>
</body>[/codebox]
No Dreamweaver da certo, mas no browser acontece isso (testei no IE e no Chrome).
#8
Édipo Costa Rebouças
-
- Ex-Admins
-
- 1079 posts
Veterano
- Sexo:Masculino
- Localidade:Brasil - São Paulo
Posted 30/07/2009, 22:47
<div id="corpo-aux"> <div id="corpo"> <p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p> <p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p> <p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p><p>m</p> </div> <div id="corpo-baixo"><!-- --></div> </div>
coloque um height e não um min-height no corpo-baixo.
se você precisar de um min-height que funcione no ie6 faça assim:
min-height: 40px;height: auto !important; height: 40px;
Edição feita por: Édipo Costa Rebouças, 30/07/2009, 22:49.
1 user(s) are reading this topic
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)
