[Resolvido] Como colocar barra infinita no rodapé

Anderson Coutinho · Dezembro 30, 2011

Olá !,

Eu não estou conseguindo colocar barra infinita lá em baixo , igual ta lá em cima . . .

Olhem meu site:

Código HTML com as DIV'S:

<!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>Guilda PowerBomb</title>
</head>

<link rel="stylesheet" type="text/css" href="style.css" />

<body>



<div id="tudo"> 

  <div id="topo"> </div>

  <div id="menu"> 
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1000" height="73" id="menu powerbomb" align="middle">
			<param name="movie" value="menu.swf" />
			<param name="quality" value="best" />
			<param name="bgcolor" value="#000000" />
			<param name="play" value="true" />
			<param name="loop" value="true" />
			<param name="wmode" value="window" />
			<param name="scale" value="showall" />
			<param name="menu" value="true" />
			<param name="devicefont" value="false" />
			<param name="salign" value="" />
			<param name="allowScriptAccess" value="sameDomain" />
			<!--[if !IE]>-->
			<object type="application/x-shockwave-flash" data="Flash/menu.swf" width="1000" height="73">
				<param name="movie" value="Flash/menu.swf" />
				<param name="quality" value="best" />
				<param name="bgcolor" value="#000000" />
				<param name="play" value="true" />
				<param name="loop" value="true" />
				<param name="wmode" value="window" />
				<param name="scale" value="showall" />
				<param name="menu" value="true" />
				<param name="devicefont" value="false" />
				<param name="salign" value="" />
				<param name="allowScriptAccess" value="sameDomain" />
			<!--<![endif]-->
				<a href="http://www.adobe.com/go/getflash">
					<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
				</a>
			<!--[if !IE]>-->
			</object>
			<!--<![endif]-->
		</object>

  </div>




        <div id="partedecima">

 </div>

         <div id="meio">
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Ma lditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
             Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
             Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos  Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos  Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos  Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos  Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys MalditosBla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos
           Bla Bla Bla Poneys Malditos

         </div>



     <div id="rodape"> </div>



</div>
</body>

</html>

Código CSS das DIV'S:

@charset "utf-8";
/* CSS Document */

*{
margin:0;
   padding:0;
background-color:#000;


}

body{
background:url(Imagens/faixa.png) repeat-x;




}

#tudo{
width:1000px; 
align:center;
margin:auto;



}

#topo{
background:url(Imagens/Topo.png) no-repeat;
height:311px;

}


#partedecima{
background:url(Imagens/partedecima.png) no-repeat;
height:116px;

}

#meio{
padding-left:60px;
padding-right:60px;
padding-bottom:20px;
background:url(Imagens/meio.png) repeat-y;
color:#606

}


#rodape{
height:357px;
background:url(Imagens/partedebaixo.png) no-repeat;


}


#fundorodape{
background:url(Imagens/faixa.png) repeat-x;



}

Thiago Souza_63114 · Dezembro 30, 2011

Olá amigo o que acontece é que você colocou seu rodape junto com a div tudo assim ele criou um delimitação;

o que tem que fazer e separa a div rodape e colocar a fundo rodape igual está ai em baixo.

O css dica assim :

#rodape{

height:357px;

width: 1000px;

margin: 0px auto;

background:url(Imagens/partedebaixo.png) no-repeat;

}

#fundorodape{

width:100%;

padding-bottom:20px;

background:url(Imagens/faixa.png) repeat-x;

}

e o html fica assim

....

Bla Bla Bla Poneys Malditos

</div>

</div>

</div>

</body>

</html>

No caso eu testei e deu ceto mais o que acontece é que a image de fundo do rodape(Imagens/faixa.png) não está encaixando certo, para resolver isso você tem que editar a image. Qualquer dúvida e só falar.

Anderson Coutinho · Dezembro 30, 2011

Não funcionou D: ;

O rodapé tem o pedaço final da imagem do meio (aquela que vai o texto blablabla (dividia tem 3 partes) )

depois que eu fiz o que você disse , ficou um uma faixa preta entre as 2 img e um quadrado pedro na esquerda D;

Anderson Coutinho · Janeiro 1, 2012

Olá ! ,

O site está sob checagem de malware , então vou postar as prints dele:

Como podem ver , só a barra de cima é infinita para os lados <<< >>>

Já o rodapé eu não consigo fazer o mesmo D:

kenweb · Janeiro 1, 2012

você quer q fique repetindo o texto infinitamente? eh isso?

Anderson Coutinho · Janeiro 1, 2012

você quer q fique repetindo o texto infinitamente? eh isso?

Não é o texto , é a faixa dos lados , sabe a faixa vermelha do topo ? ela está esticada para os lados , porém a do rodapé não ta dando para fazer isso . . .

kenweb · Janeiro 2, 2012

eh so colocar ela como bg dentro de uma tabela 100%.... o basico de html *___*

Anderson Coutinho · Janeiro 2, 2012

eh so colocar ela como bg dentro de uma tabela 100%.... o basico de html *___*

Não entendi , pode dizer o código ?

Seria isso ?

HTML:

CSS:

#faixarodape{

background:url (imagens/faixa.png);

??????:100%

}

Lucas Peperaio · Janeiro 2, 2012

eh so colocar ela como bg dentro de uma tabela 100%.... o basico de html *___*

Tabela nãoo OMG. Usa DIV com largura 100% e com repeat-x no background, tabela para fazer layout é coisa dos anos 2000

Anderson Coutinho · Janeiro 2, 2012

O procedimento foi:

- Criar uma div (#fundorodape) dentro da body , mas fora da tudo;

-Criar a div (#rodape) dentro da (#fundorodape) e indicar o limite de largura , margem e altura ,e claro a imagem que será repetida horizontalmente.

Em código:

<div id="fundorodape"> 

	<div id="rodape">  </div>

</div>

#rodape{
width:1000px; 
margin:auto;
height:357px;
background:url(Imagens/partedebaixo.png) no-repeat;	
}


#fundorodape{
background:url(Imagens/faixa2.png) repeat-x;
clear:both;
}

Antes:

Depois:

Obrigado a todos , e a Diéssica por ter resolvido de fato o problema ;P

Diéssica · Janeiro 2, 2012

#fundorodape{
    width:100%;
	padding-bottom:20px;
       background:url(Imagens/faixa.png) repeat-x;  
}

eh so colocar ela como bg dentro de uma tabela 100%.... o basico de html *___*

Não precisa ser dentro de tabela para definir 100%. Qualquer elemento pode ter esse valor, tanto que width 100% é default de todos os elementos no HTML.

O básico de HTML.

Arquivado

[Resolvido] Como colocar barra infinita no rodapé

Recommended Posts

Anderson Coutinho 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Souza_63114 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Anderson Coutinho 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Anderson Coutinho 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

kenweb 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Anderson Coutinho 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

kenweb 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Anderson Coutinho 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Peperaio 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

Anderson Coutinho 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

recuperando parametros simplexml_load_file

PHP+Codeigniter - Adicionar Registro Plano de Contas

Fóruns

Tempo Real

Informação importante