Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá a todos,
Estou tentando fazer um layout inicial com esta estrutura:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img12.imageshack.us/img12/3987/123pyb.png&key=43a4b93c50ed8851a48950868361738022c22f361c8a9a57a0c77c259e635c74" alt="123pyb.png" />
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;
}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>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.
Pô Angelorubin, você não me ajudou, praticamente desenvolveu a página para mim, muito obrigado mesmo.
Tenta colocar no seu rodapé o seguinte;
Se for deixar ele ao centro faça assim:
.rodape{
margin: 0 auto/
}