Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal, boa tarde. Mais uma vez eu aqui enchendo o saco. Vamos lá:
Estou fazendo o site http://www.abreed.com.br/Site/ como voluntário. Trata-se de uma intituição sem fins lucrativos e que só trabalha como voluntários.
Seguindo:
Estou com problemas no menu na lateral. Não consigo montr de forma correta como no Rough que fiz. Clique aqui para visualizar: Clique Aqui .
Segue abaixo os códigos:
HTML ou PHP
>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml%22)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...:::: ABREED - Associação Brasil Esporte e Educação ::::...</title>
<style type="text/css">
<!--
@import url("css/geral.css");
@import url("css/menu.css");
-->
</style>
</head>
<body>
<div id="geral">
<div id="topo"></div>
<div id="meio">
<div id="menu_cima"><img src="imagens/topo.jpg" alt="ABREED" width="764" height="344" border="0" usemap="#Map" /></div>
<map name="Map" id="Map">
<area shape="rect" coords="341,215,437,245" href="[http://www.teste.com.br"](http://www.teste.com.br) alt="Institucional" title="Institucional"/>
<area shape="rect" coords="441,212,513,239" href="[http://www.teste.com.br"](http://www.teste.com.br) alt="Doação" title="Doação"/>
<area shape="rect" coords="516,206,587,233" href="[http://www.teste.com.br"](http://www.teste.com.br) alt="Na Mídia" title="Na Mídia"/>
<area shape="rect" coords="593,203,665,229" href="[http://www.teste.com.br"](http://www.teste.com.br) alt="Notícias" title="Notícias"/>
<area shape="rect" coords="669,199,743,223" href="[http://www.teste.com.br"](http://www.teste.com.br) alt="Contatos" title="Contatos"/>
</map>
<div id="lateral_esquerda">
<div id="topomenu"><img src="imagens/cima_menu.jpg" alt="Menu" width="152" height="13" /></div>
<div id="meiomenu">
<div id="dentromenu">Quem Somos? <ul><li>História</li>
<li>Missão</li>
<li>Visão</li>
<li>Administração</li>
</ul>
</div>
</div>
<div id="basemenu"><img src="imagens/baixo_menu.jpg" alt="Menu" width="152" height="11" /></div>
</div>
<div id="lateral_direita">
<h1>Institucional / Quem Somos?</h1>
<p>testando o texto que irá estar neste local</p>
</div>
<div id="rodape">rodape</div>
<div id="rodape_base"></div>
</div>
<div id="baixo"></div>
</div>
</body>
</html>Geral.css
>
/ CSS Document /
body{
background:#F7F7F7;
font-family:Helvetica, Arial, sans-serif;
font-size:12px;
}h1{
color:#84C225;
text-align:right;
padding:2px;
}
#geral{
width: 776px;
margin:0 auto;
background-image:url(../imagens/fundo_geral.jpg);
}
#topo{
background:#F8C300;
height:20px;
}
#meio{
background:#FFFFFF;
width:764px;
margin:0 auto;
}
#menu_cima{
width:764px;
}
#lateral_direita{
width:550px;
margin:5 auto;
float:right;
padding:2px;
}
#lateral_esquerda{
width:200px;
margin-left: 10;
float:left;
padding:2px;
}
#meiomenu{
width:150px;
background-color:F8C300;
padding-left:2px;
}
#dentromenu{
width:143px;
background-color:FFFFFF;
margin-left:1px;
}
#rodape{
height:50px;
clear:both;
}
#rodape_base{
background-image:url(../imagens/rodape.jpg);
height:21px;
}
#baixo{
height:5px;
}a.linkLogo{
display:block;
width:x;
height:y;
position:x
}Manu.css
>
/ CSS Document /
#menu {
position: absolute;left: ## px; /posição à direita/
top: ## px; /posição abaixo/
width: 180px;
}#menu ul {
list-style-type: none; /remove o marcador/
margin: 0; /remove o recuo IE e Opera/
padding: 0; /remove o recuo Mozilla e NN/
font: bold 16px arial, helvetica, sans-serif;
}#menu li { margin-bottom:1px; }
#menu a {
display: block;
padding: 1px 0 1px 25px;
border: 1px solid #000000;
width: 180px;
background-color: #339966;
color: #FFFFFF;
text-decoration: none;
background-image: url(caminho/fundo_1.gif);voice-family: "\"}\""; /Box Model Hack/
voice-family:inherit;
width:153px;
}body>#menu a {width:153px;}
#menu a:hover {
border: 1px solid #000000;
background-color:#FFFF99;
background-image: url(caminho/fundo_2.gif);
color:#000000;
}Hack= Largura - (padding-left + padding-right +
border-left + border-right)
Hack= 180 px - (25 px + 0px +
1 px + 1px) = 180 px - 27 px = 153
px
Se alguém puder agradeço a força.. para fazer também os Bullets
Abraços.
Carregando comentários...