[Resolvido] Dificuldade em posicionar o rodapé

[Guilhermej 1]

Olá a todos,

Estou tentando fazer um layout inicial com esta estrutura:

 

 

O logo e a caixa de pesquisa consegui centralizar do jeito que queria, mas o rodapé (imagem e cor preta) não consigo. Definindo o "height" da página até foi, mas queria que o layout fosse líquido. Já tentei várias combinações, mas nada deu certo. Como não tenho muita experiencia com CSS, talvez exista uma propriedade para se fazer isso de maneira fácil e eu não a conheço.

 

Tudo que fiz até agora (o .rodape{... não está funcionando):

 

.rodape{
bakcground-image: url(imagens/rodape.gif);
background-position: bottom center;
}
body{
background-color: #f9f9f9;              
}

#logo{
width: 400px;
height:100px;
position: absolute;
top: 35%;
margin-top:-23px;
left: 50%;
margin-left:-150px;

}
#pesquisa{
height:28px;
width: 330px;
border: solid 1px black;
margin: 15px 90px 0px 0px;
float: right;
padding: 0px 5px;
outline: none;
text-transform: uppercase;
font: 19px normal Arial, sans-serif;

}
#submit{
float: right;
margin: 15px 19px 0px 315px;
padding: 0px;
border: 0px;
position: absolute;
}

 

<div id="logo">
<img src="imagens/logo.png" alt="logo" />

<form action="#" method="get">
<input type="image" src="imagens/submit.png" alt="buscar" id="submit" />
<input type="text"  name"pesquisa" id="pesquisa" value=""    onfocus="EmptyField(this.id);" />
</form>
</div>

<div class="rodape">

</div>

[Wellington Silvério 0]

Tenta colocar no seu rodapé o seguinte;

 

Se for deixar ele ao centro faça assim:

 

.rodape{
margin: 0 auto/
}

[angelorubin 142]

Boa tarde,

 

CSS

* {
   margin:0;
   padding:0;
}

#box_global{
   padding: 250px 0 0 0;
   width:100%;
   height:auto;
   min-height:600px;
   margin:0 auto;
   overflow:hidden;
   background-color:#CCC;
   /* Para Mozilla/Gecko (Firefox etc) */
   background: -moz-linear-gradient(top, #666, #fff) repeat-X;
   /* Para WebKit (Safari, Google Chrome etc) */
   background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#fff)) repeat-X;
   /* Para IE 8 */
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#666, endColorstr=#FFFFFFFF)";
   /* Para IE 5.5 - 7 */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#666, endColorstr=#FFFFFFFF);
   }

#box_logo {
   width:250px;
   height:auto;
   min-height:250px;
   overflow:hidden;
   margin:0 auto;
   }

#box_buscar {
   width:100%;
   height:auto;
   min-height:auto;
   text-align:center;
   margin:20px 0 80px 0;
   overflow:hidden;
   }

.logo {
   width:250px;
   height:250px;
   }

.buscar {
   padding:6px;
   width:300px;
   }

.btn_buscar {
   padding:5px;
   }

#faixa_horizontal {
   width:100%;
   height:50px;
   overflow:hidden;
   background-image:url('http://wallpoper.com/images/00/40/59/04/pattern-patterns_00405904.jpg');
   background-repeat:repeat-x;
}

#box_rodape{
   width:100%;
   min-height:200px;
   height:auto;
   background-color:#000;
   float:left;
   }

 

XHTML

<div id="box_global">
   <div id="box_logo">
       <img class="logo" src="http://3.bp.blogspot.com/-_phRPNWiMxY/Ti73XuybGuI/AAAAAAAAAQs/-rhfrKYQNAA/s1600/caafalgumacoisa.png" alt="logo" />
   </div>
   <form id="box_buscar" action="#" method="get">
       <input class="buscar" type="search"/>
       <input class="btn_buscar" type="button" value="Buscar" />
   </form>
   <div id="faixa_horizontal"></div>
   <div id="box_rodape"></div>
</div>

 

Veja o exemplo online - Clique aqui

 

Espero que ajude.

[Guilhermej 1]

Pô Angelorubin, você não me ajudou, praticamente desenvolveu a página para mim, muito obrigado mesmo.