Ir para conteúdo

Arquivado

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

gue

Imagem de fundo rodape ocupar 100%

Recommended Posts

Boa noite galera,

Estou tentando fazer a imagem de fundo do meu rodape ficar 100%, segue imagem abaixo.

 

https://imagizer.imageshack.us/v2/1366x612q90/912/xxf4Xx.jpg

 

 

 

Ja procurei no forum nao achei..

 

 

Eu queria que essa imagem ocupasse width:100%

e o rodape ficasse grudado em baixo tbm.

Pra deixar esses espaços brancos.

 

 

Muito obrigado galera..

 

 

meu css:

*{ // o seletor "*" significa que vai aplicar à todas as tags
    margin: 0;
    padding: 0;
}


html, body {
margin: 0;     
padding: 0;   
text-align: left;
height: 100%;
font: 100% arial, hevetica, sans-serif;
background-color: #fff;
}



#tudo {
position: relative;
width:100%; /* 1050 px*/
margin:0 auto;
text-align: left;
/*border: 1px solid #f5f5f5;*/
min-height: 100%;
position: relative;



background-repeat: no-repeat;
background-position: center top;
background-color: #Fff;
}


/*
* html #tudo {
height: 100%; /* hack para IE6 que trata height como min-height 
}
*/


#conteudo{
clear:both;
margin-top: 0px;
margin-bottom: 10px;

padding-bottom: 30px;
}


/* logo */

#logo {
width: 1010px; /* 1050px */
height: 140px;
/*background-image: url(img/topo.png); 
background-repeat: no-repeat;
background-position: center top;
*/


position: relative;
left: 50%;
;


}

.imglogo {
width: 300px;
height: 160px;
border:none;

}







#logo {
width: 1010px; /* 1050px */
height: 240px;
/*background-image: url(img/topo.png); 
background-repeat: no-repeat;
background-position: center top;
*/


position: relative;
left: 50%;
;

}

.imglogo {
width: 236px;
height: 239px;
border:none;

}
	

	
	
/* menu */	

#menu {
float: right;
}



#menu ul {
	padding:3px;
    margin:0px;
    list-style:none;
	width: 700px;
	position: absolute;
	left: 50%;
	;
	margin-top: -140px;

	
}

#menu ul li { 
display: inline;


}

#menu ul li a {
    padding: 2px 50px;
    float:left;
    /* visual do link */

    color: #949494;
    text-decoration: none;

	
}

#menu ul li a:hover {
	
    color: #ffffff;
	background-color: #DD0000;
	
}


h1 {
font-size: 16px;
}

h2 {
font-size: 16px;
}


	
/* home */


#tanque {
width: 1010px;
height: 500px;
background-color: #123321;
position: relative;
left: 50%;
;
padding: 50px;
}

.tanqueclass{
width: 300px;
height: 260px;
float: left;
}


.textotanque {

color: #595959;
font-size: 10pt;


}




#home {
padding: 20px;
position: relative;


}
	
#java {
width: 1010px;
position: relative;
left: 50%;
; /* 470 */
background-image: url(img/fundojavaa.png);
}

#bloconov{
width: 1010px;
position: relative;
left: 50%;
;
}



#novidade1 {

width: 320px;
height: 200px;
float:left;
padding: 5px;
}

#novidade2 {

width: 320px;
height: 200px;
float:left;
margin-left: 9px;
padding: 5px;
}


#novidade3 {

width: 320px;
height: 200px;
float:right;
margin-left: 9px;
padding: 5px;
text-align: left;



}
	
.img1{
width: 315px;
height:170px;
border: 5px solid #fff;

}

.texto1 {
color: #595959;
font-size: 10pt;
float: left;
margin-left: 10px;

}

.texto2 {
color: #595959;
font-size: 10pt;

}

.icons {
float:left;
margin: 20px;
width: 36px;
height:36px;
}

	
/* quem somos */

#textquemsomos {
padding: 20px;
width: 1010px;
position: relative;
left: 50%;
;

}


#textquemsomosempresa {
padding: 20px;
width: 1010px;
position: relative;
left: 50%;
;

}


.imgempresa{
width: 700px;
height: 550px;
float: right;

}






/* produtos */
	
#textserv {
padding: 20px;
width: 1010px;
position: relative;
left: 50%;
;
}

	
.imgproduto{
margin-right: 10px;
width:190px;
height: 190px;
float: left;
}




.imgserv{
width: 500px;
height: 650px;
float: right;

}




#bloco1 {
width: 460px;
height: 200px;
background-color: #990033;
float: left;
padding: 20px;
}


#bloco2 {
width: 460px;
height: 200px;
background-color: #440099;
float: right;
padding: 20px;
}


#bloco3{
width: 460px;
height: 200px;
background-color: #321345;
float: left;
padding: 20px;
}


#bloco4 {
width: 460px;
height: 200px;
background-color: #432903;
float: right;
padding: 20px;
}






/* contato */


#formulario {
background-color: #1b1b1b;
color: #777777;
padding: 20px;
width: 970px;
height: 500px;
position: relative;
left: 50%;
;




}

#forms {
background-color: #2c2c2c;
float:left;
padding-left: 10px;
text-align: left;
width: 400px;
height: 100%;

}


#nome {
margin-left: 5px;
}

#tel {
margin-left: 5px;
}

#email {
margin-left: 5px;
}

#msg {
margin-left: 5px;
}

#botao{
margin-left: 5px;
}
.nom {
margin-left: 20px;
}
.te {
margin-left: 2px;
}
.em {
margin-left: 18px;
}

textarea {
;

}



	

/* rodapé */
	
#rodape {

position:relative;


width: 100%;
height: 250px;

font-size: 12px;
color: #fff;
text-align: center;

background:url("img/rodape.png") ;



background-repeat: no-repeat;
background-position: center bottom;

}




#fundo-externo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	
}

#fundo {
	
	width: 100%;
	height: 100%;

}

#fundo img {
	position: absolute;
	min-width: 100%;
	min-height: 100%;
	
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

Melhor que o CSS, tem alguma versão do site online? podemos usar a ferramenta do desenvolvedor do browser para analisar melhor, seu CSS foi dado, mas muito depende de como está seu HTML também.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Gue, existem FW's (frameworks) na internet que facilitariam seu trabalho. Pra que um rodapé possua width:100%, ele precisa compreender que o html, body também disponibilize 100% de página.

No campo do CSS onde declarou html, body, adicione também o width:100%.

Agora vamos ao que interessa. Procure por Bootstrap.css na internet (ache os arquivos por sí só, caso não encontre em fóruns ou sites, baixe templates que os contém). O Bootstrap é um forte FW que configura praticamente todo o seu site "sozinho", mas você precisa entender como usá-lo.

Linke-o ao seu HTML e caso tudo o que está acima saia do lugar, coloque toda a informação dentro de uma <div class="container">. Essa Class=container é própria do BTS, como também column, footer, header, nav, table, td, tr...

Tente com essa ferramenta e veja se obtém resultados.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Nao conhecia esse bootstrap, num proximo site vou estudar essa ferramenta.

 

Agora nao compensa eu fazer isso, porque o site ta todo pronto, é só colocar esse rodape com width:100%, ai só falta colocar o conteudo.

Se eu utilizar esse bootstrap agora, vai atrasar tudo!

 

Eu coloquei esse width:100% no html,body. e nao adiantou, nao mudou nada.

 

Estou tentando upar o site pra vcs analisarem melhor, posto o link aqui


Aee amigos upei o site, www.phriopreto.com.br/pbs

nao consigo achar o erro

 

Nao reparem na bagunca, kkkkkk muitas divs coloridas totalmente fora de design, mas coisas arrumarei por ultimo rsrsrs

 

 

 

Mto obrigado pela ajuda!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Hantaroo, nao funcionou..

/* rodapé */
	
#rodape {

position:absolute;
bottom:0;


width: 100%;
height: 100%;
margin:0;
padding:0;


font-size: 12px;
color: #fff;
text-align: center;

background:url("img/rodape.png") ;



background-repeat: no-repeat;
background-position: center bottom;

}

Upei denovo acessa ai pra ver como ficou..

www.phriopreto.com.br/pbs

Se eu deixar absolute, ele fica no meio da tela.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara é simples de resolver...

Sua imagem não é do tamanho da largura que vc precisa, então ela vai ficar pequena.. o que vc precisa fazer é expandir ela pela div.. pra isso vc pode usar 2 propriedades:

 

- background-size: cover

- background-size: contain

 

No seu caso use o "cover", também tire o "position: absolute" e o "bottom:0".

Acredito que funcionará.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Oras, usei seu css e funcionou aqui :(


Troca seu css do rodapé pra esse:#rodape { background-size: cover; width: 100%; height: 100%; margin: 0; padding: 0; font-size: 12px; color: #fff; text-align: center; background-image: url("img/rodape.png"); background-repeat: no-repeat; background-position: center bottom;}

Compartilhar este post


Link para o post
Compartilhar em outros sites

Gue, ao invés de adicionar um background com image, resolvi adicionar a div com a tag <img> dentro e algumas configs no CSS pra te ajudar, já que nenhuma opção serviu.

Veja como eu fiz aqui: JSFIDDLE

Caso você ou outras pessoas não consigam acessar o fiddle no momento, eu deixo o código aqui mesmo.

 

HTML:

<div id="footer">
    <span>Aqui pode ficar o seu texto do rodapé</span>
    <img src="http://hdwallpaperd.com/wp-content/uploads/city_by_the_bay_1232.jpg" />
</div>

CSS:

html,body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0; 
}

#footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;  
    background: #FF0000;
    margin: 0; 
    padding: 0;
}

    #footer img{
        width: 100%;
        height: 100px;
    }

    #footer span{
        position: absolute;
        margin: 0 auto;
        line-height: 100px;
        width: 100%;
        text-align: center;
        color: #fff;
    }

Espero que isso resolva seus problemas. Tente entender o conceito, não fique quebrando a cabeça com o seu site. Se não consegue arrumar, exclua e tente novamente. Ficar tentando arrumar o errado várias vezes é muito mais cansativo do que tentar uma outra alternativa.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Opaa.. uma evoluçao rsrs..

As linhas do rikas deu certo,

olhem ai: www.phriopreto.com.br/pbs/

 

Adicionei um bottom: 0;

pro rodape colar embaixo, mas ainda sim ficou um espaço em branco, por que sera?

 

 

Ja agradeco mtoo..

Compartilhar este post


Link para o post
Compartilhar em outros sites

vc declarou a id=site a qual esta vazia, no caso não seria a #tudo ?

 

eu fiz um teste aqui coloquei a tudo no lugar do site, adicionei position:absolute no #rodape e em margin-bottom em #conteudo você coloca 200px.

 

você ta usando include php ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

to usando inclue sim,

entao guilo, coloquei position absolute a imagem ficou no meio do site tampando tudo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

então seu problema e o include! nem precisa fazer o que eu falei.

 

faz assim abre seu index no notepad++ vai em formatar e depois marca a opção "condificação em UTF-8 (Sem BOM)".

 

da pra fazer em outros editores, e só vc procurar essa opção.

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.