Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Como faço para os primeiros items de cada menu ficam próximo do título (h2), estão com uma pequena margem.
index.php
<!--
Site no ar desde: Março de 2007
Contador de visitas desde: 20 de Janeiro de 2008
Autor:Rafael Rodrigues Viana
-->
<html>
<head>
<title>Grupo Escoteiro Arés</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
<!-- Body carega o efeito no mouse -->
<body>
<div id="tudo"> <!-- Engloba todo conteúdo -->
<div id="topo"></div> <!-- Cabeçalho -->
<div id="menu"> <!-- Menu -->
<ul>
<li> <a href="index.php?area=principal">Principal</a></li>
<li> <a href="index.php?area=contato">Contato</a></li>
</ul>
<h2>Escotismo</h2>
<ul>
<li> <a href="index.php?area=escotismo">História</a></li>
<li> <a href="index.php?area=dicionario">Dicionário Escoteiro </a></li>
<li> <a href="index.php?area=multimidia">Multímidia</a></li>
<li> <a href="index.php?area=dicas">Dicas Escoteiras</a></li>
<li> <a href="index.php?area=sites">Sites Interessantes </a></li>
</ul>
<h2>Grupo</h2>
<ul>
<li> <a href="cpg/index.php">Álbum de Fotos </a></li>
<li> <a href="index.php?area=historia">História</a></li>
<li> <a href="index.php?area=diretoria">Diretoria</a></li>
<li> <a href="index.php?area=regulamento">Regulamento</a></li>
<li> <a href="index.php?area=localizacao">Localização</a></li>
</ul>
<h2>Lobinho</h2>
<ul>
<li> <a href="index.php?area=calendario-lobinho">Calendário</a></li>
<li> <a href="index.php?area=jogos-lobinho">Jogos</a></li>
<li> <a href="index.php?area=membros-lobinho">Membros</a></li>
<li> <a href="index.php?area=programacao-lobinho">Programações</a></li>
</ul>
<h2>Escoteiro</h2>
<ul>
<li> <a href="index.php?area=calendario-escoteiro">Calendário</a></li>
<li> <a href="index.php?area=jogos-escoteiro">Jogos</a></li>
<li> <a href="index.php?area=membros-escoteiro">Membros</a></li>
<li> <a href="index.php?area=programacao-escoteiro">Programações</a></li>
</ul>
<h2>Sênior</h2>
<ul>
<li> <a href="index.php?area=calendario-senior">Calendário</a></li>
<li> <a href="index.php?area=jogos-senior">Jogos</a></li>
<li> <a href="index.php?area=membros-senior">Membros</a></li>
<li> <a href="index.php?area=programacao-senior">Programações</a></li>
</ul>
<!-- Contador -->
<?php
include("conta.php");
?>
</div> <!-- Fim Menu -->
<div id="conteudo"> <!-- Conteúdo -->
</div> <!-- Fim Conteudo -->
<div id="rodape"> <!-- Rodapé -->
<p>
Página Melhor Visualizada em 1024x768
<br />
© 2007 Grupo Escoteiro Arés | Webmaster <a href="mailto:superzicaman@gmail.com" Rafael</a>
</p>
</div> <!-- Fim Rodapé -->
</div> <!-- Fim Tudo -->
</body>
</html>/ --------------------------------Estilo para construção da página --------------------------------// Estilo para a body /
body {
margin:0; / Para centralizar /
padding:0; / Para centralizar /
text-align:center; / hack para o IE /
font: 12px Tahoma, Verdana, Arial, Helvetica, sans-serif;
}/ Estilo para a div tudo /
#tudo {
width: 760px;
border: 2px solid #999;
margin:0 auto; /* Para centralizar */
padding: 10px; /* Para centralizar */
text-align:left; /* "remédio" para o hack do IE */
}/ Estilo para a div topo /
#topo {
width: 760px;
height: 100px;
background-color:#006600;
}/ Estilo para a div menu /
#menu {
float: left;
width: 130px;
border:#CCCCCC 0.5px solid;
}/ Estilo para a div conteudo /
#conteudo {
float: left;
width: 550px;
padding: 5px; /* Para centralizar */
}/ Estilo para a div rodapé /
#rodape {
width: 700px;
height: 30px;
padding: 10px 10px;
background-color: #fff;
clear: both;
text-align:center;
}/ ------------------------------------- Estilo para o menu ----------------------------------------/
h2 {
background:#006600;
width:130px;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
}#menu ul {
list-style-type: none;
width:130px;
padding:0;
}#menu li {
border: 1px solid #CCCCCC;
}#menu li a {
font:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
text-decoration:none;
}#menu li a:visited {
}
#menu li a:hover {
}
#menu li a:active {
}
Carregando comentários...