Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia pessoal.
Sou meio novato nesse assunto e estou apanhando muito em uma duvida.
eu queria deixa o cabeçalho e o rodapé do site 100% em todos os site. isso também para o background.
eu tentei usar a opção width:100% no cabeçalho, rodapé e container do meu codigo, mas acabou que desconfigurou todas a pagina.
como sou meio novato acho que to fazendo algum erro bem besta. se alguém poder me ajudar.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Indie Party</title>
<link rel="stylesheet" href="css.css" type="text/css">
<script language="javascript" type="text/javascript" src="indiescript.js"></script>
</head>
<body>
<div id="container">
<!-- cabeçalho do site -->
<!-- <div id="back" class="backg"></div> -->
<div id="cabecalho">
<div id="organizacao">
<div id="logo" class="lg"><a href="#" class="llg">INDIE<br />PARTY</a></div>
<div id="calendario"><a href="#" onMouseOver="changecalendario()" onMouseOut="changecalendarioagain()"><img src="imagens/calendario.gif" name="imgcalendario" class="imgc"></a></div>
<div id="setlist"><a href="#" onMouseOver="changeradio()" onMouseOut="changeradioagain()"><img src="imagens/radio2.gif" name="radio" class="imgr"></a></div>
<div id="fotos"><a href="#" onMouseOver="changecamara()" onMouseOut="changefotosagain()"><img src="imagens/camara.gif" name="fotos" class="imgfts"></a></div>
<div id="nomecontato"><a href="#" class="ln">INDIE PARTY</a> | <a href="#" class="ln">CONTATO</a></div>
</div>
</div> <div id="corpo">
</div><!-- rodape do site -->
<div id="rodape">
<div id="website" class="mrw">
<p class="mrp">WEBSITE</p>
<ul>
<li class="mrli"><a href="#" class="li">AGENDA</a></li>
<li class="mrli"><a href="[http://indieparty.tumblr.com/](http://indieparty.tumblr.com/)" class="li">TUMBLR</a></li>
<li class="mrli"><a href="#" class="li">GALERIAS</a></li>
</ul>
</div>
<div id="redesociais" class="mrrs">
<p class="mrp">REDE SOCIAIS<br></p>
<ul>
<li class="mrli"><a href="#" class="li">FACEBOOK</a></li>
<li class="mrli"><a href="[http://www.facebook.com/events/440233052727865](http://www.facebook.com/events/440233052727865)" class="li">EVENTO</a></li>
<li class="mrli"><a href="#" class="li">CONTATO</a></li>
</ul>
</div>
<div id="direitos">INDIE PARTY © 2013 - TODOS OS DIREITOS RESERVADOS</div>
<div id="imgfacebook"><a href="#" class="ic" onMouseOver="changeimg()" onMouseOut="changeimgagain()"><img src="imagens/facebookicone3.gif" name="imgfacebook" class="imgf"></a></div>
</div>
</div>
</body>
</html>CSS
@charset "utf-8";
/ CSS Document /
#container{
position:absolute;
top:0px;
left:0px;
width:1300px;
height:1000px;
/* border:solid #999 5px; */
background-image:url(imagens/fungo.jpg);
}/#organizacao{position:fixed}/
/*.backg{
position:absolute;
top:0px;
left:0px;
width:1300px;
height:150px;
background:#CF6;
opacity:0.4;/ cabeçalho /
#cabecalho{
position:absolute;
top:0px;
left:0px;
width:1300px;
height:150px;
/* border:solid #006 5px; */
}/ configurações do logo da festa /
.lg{position:absolute;
top:15px;
left:200px;
font-family:Pozofour;
font-size:50px;
text-align:center;
font-weight:bolder;
}a.llg:link, a.llg:visited{
text-decoration:none;
color:#000;
}a.llg:hover{
font-size:60px;
}a.llg:active{
text-decoration:none;
}/ nome e contato no canto superior do cabeçalho /
#nomecontato{
position:absolute;
top:20px;
left:800px;
color:#000;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}a.ln:link, a.ln:visited{
text-decoration:none;
color:#000;
font-weight:bolder;
}
a.ln:hover{text-decoration:none;
color:#333;
font-weight:bolder;
}
a.ln:active{text-decoration:none;
font-weight:bolder;
}/ imagem calendário /
.imgc{position:absolute;
top:20px;
left:380px;
width:90px;
height:90px;
border:0px;
}/ imagem radio /
.imgr{position:absolute;
top:20px;
left:520px;
width:90px;
height:90px;
border:0px;
}/ imagem fotos /
.imgfts{position:absolute;
top:20px;
left:640px;
width:90px;
height:90px;
border:0px;
}/ corpo /
#corpo{position:absolute;
top:150px;
left:140px;
width:1000px;
height:640px;
/* border:solid #030 5px; */
}/ codigos do rodape /
#rodape{
position:absolute;
top:800px;
left:0px;
width:1300px;
height:200px;
/* border:solid #006 5px; */
background-color:#FFF;
}/ configuração do website /
.mrw{
position:absolute;
top:50px;
left:200px;
/*border:1px solid #000033;*/
width:150px;
color:#C90;
}.mrrs{
position:absolute;
top:50px;
left:350px;
/*border:1px solid #000033;*/
width:150px;
color:#C90;
}
.mrli{
line-height:20px;
font-size:12px;
}
.mrp{
margin-left:30px;
font-size:14px;
}a.li:link, a.li:visited{
text-decoration:none;
color:#C90;
}
a.li:hover{text-decoration:none;
color:#CC6;
}
a.li:active{text-decoration:none;
}/ direitos das imagens e produto /
#direitos{
position:absolute;
top:10px;
left:800px;
color:#C90;
font-family:"Times New Roman", Times, serif;
font-size:12px;
}/ icones rodapé /
.imgf{position:absolute;
top:40px;
left:980px;
width:40px;
height:40px;
border:0px;
}a.ic:link, a.ic:visited{
background-image:url(imagens/facebookicone3.png);
}a.ic:hover{
background-image:url(imagens/facebookicone4.png);
border:0px;
}a.ic:active{
border:0px;
}Espero a ajuda de vocês.
Carregando comentários...