como alinho uma do lado da outra as divs conteudo e menu
como faco para a div rodape ficar sempre em baixo? queria fazer estilo o rodape da pagina da globo uma imagem de fundo que pegasse toda a div
se puderem me ajudar, fico grato
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>:: Meu site ::</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript" src="js/ajax.js"></script>
<script language="javascript" src="js/instrucao.js"></script>
<style type="text/css">
#menu {
background-color: transparent;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#menu li {
float: left;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#menu a {
background-color: transparent;
color: #fff;
display: block;
float: left;
margin: 0;
padding: 10px 12px;
text-decoration: none;
font-weight:normal;
}
#menu a.itemMenu:hover {
background:#2592AE;
color: #fff;
padding-bottom: 11px;
font-size: 100%;
}
#menu a.itemRed:hover {
background:#FF0000;
color: #fff;
padding-bottom: 11px;
font-size: 100%;
}
#menu a:hover {
background: #E010E8 url("images/hover.gif") bottom center no-repeat;
color: #fff;
padding-bottom: 10px;
font-size: 100%;
}
body
{
margin:0;
padding:0;
background: #ECECEC url('images/fundo.jpg') repeat-x;;
}
#centro{
margin: 0 auto;
padding: 0 auto;
width:778px;
}
div#wrapper div
{
margin: 0 auto;
padding: 0 auto;
width:778px;
background-color: transparent;
}
div#layer1
{
background-color: transparent;
height:161px;
margin: 0 auto;
}
div#layer2
{
background-color: transparent;
height:38px;
}
div#layer3
{
float:left;
width:469px;
background-color:#000000;
}
div#layer4
{
float:right;
width:130px;
background-color:#FF0000;
}
</style>
<body>
<div id="wrapper">
<div id="layer1">
<img src="images/logo1.png" alt="Embaladas" vspace="18">
</div>
<div id="layer2">
<ul id="menu">
<li><a href="#" class="itemMenu">Página Inicial</a></li>
<li><a href="#" onclick="abrirPag('conteudo.html');" class="itemMenu">Quem Somos</a></li>
<li><a href="#" class="itemMenu" target="_self">Os Mandamentos</a></li>
<li><a href="#" class="itemMenu" target="_self">Membros</a></li>
<li><a href="#" class="itemMenu" target="_self">Agenda</a></li>
<li><a href="#" class="itemMenu" target="_self">Notícias</a></li>
<li><a href="#" class="itemMenu" target="_self">Galeria</a></li>
<li><a href="#" class="itemMenu" target="_self">Recados</a></li>
<li><a href="#" class="itemMenu" target="_self">Contato</a></li>
</ul>
</div>
<div id="conteudo">
/*conteudo1*/
</div>
<div id="menu">
/*conteudo2*/
</div>
</div>
<div id="rodape"></div>
</body>
</html>
mexi mais um pouco e olha o resultado.. o rodape fico por cima da div conteudo
os dados carregados na div conteudo é feito atraves ajax httprequest
Foto de como fico... http://imageshack.us.../ajudasite.png/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>:: meu site ::</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript" src="js/ajax.js"></script>
<script language="javascript" src="js/instrucao.js"></script>
<style type="text/css">
#menu {
background-color: transparent;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#menu li {
float: left;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#menu a {
background-color: transparent;
color: #fff;
display: block;
float: left;
margin: 0;
padding: 10px 12px;
text-decoration: none;
font-weight:normal;
}
#menu a.itemMenu:hover {
background:#2592AE;
color: #fff;
padding-bottom: 11px;
font-size: 100%;
}
#menu a.itemRed:hover {
background:#FF0000;
color: #fff;
padding-bottom: 11px;
font-size: 100%;
}
#menu a:hover {
background: #E010E8 url("images/hover.gif") bottom center no-repeat;
color: #fff;
padding-bottom: 10px;
font-size: 100%;
}
body
{
margin:0;
padding:0;
background: #FFF url('images/fundo.jpg') repeat-x;;
}
#centro{
margin: 0 auto;
padding: 0 auto;
width:778px;
}
div#wrapper
{
margin: 0 auto;
padding: 0 auto;
width:778px;
background-color: transparent;
}
div#layer1
{
background-color: transparent;
height:161px;
margin: 0 auto;
}
div#layer2
{
background-color: transparent;
height:38px;
}
div#conteudo
{
float:left;
width:538px;
background-color:#000000;
}
div#menu
{
float:right;
width:240px;
background-color:#FF0000;
}
div#rodape
{
background-color: #161616;
border-top: 1px solid #282727;
bottom: 0;
height: 100px;
position: absolute;
width: 100%;
}
</style>
<body>
<div id="wrapper">
<div id="layer1">
<img src="images/logo1.png" alt="Embaladas" vspace="18">
</div>
<div id="layer2">
<ul id="menu">
<li><a href="#" class="itemMenu">Página Inicial</a></li>
<li><a href="#" onclick="abrirPag('conteudo.html');" class="itemMenu">Quem Somos</a></li>
<li><a href="#" class="itemMenu" target="_self">Os Mandamentos</a></li>
<li><a href="#" class="itemMenu" target="_self">Membros</a></li>
<li><a href="#" class="itemMenu" target="_self">Agenda</a></li>
<li><a href="#" class="itemMenu" target="_self">Notícias</a></li>
<li><a href="#" class="itemMenu" target="_self">Galeria</a></li>
<li><a href="#" class="itemMenu" target="_self">Recados</a></li>
<li><a href="#" class="itemMenu" target="_self">Contato</a></li>
</ul>
</div>
<div id="conteudo">
/*conteudo1*/
</div>
<div id="menu">
/*conteudo2*/
</div>
</div>
<div id="rodape">/*rodape*/</div>
</body>
</html>
Edição feita por: rohde, 22/09/2011, 23:59.
