Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

robson cavalcante

Posicionando o MENU!

Por , em Desenvolvimento frontend

Recommended Posts

robson cavalcante    0

robson cavalcante
Postado

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">

<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" alt="Institucional" title="Institucional"/>

<area shape="rect" coords="441,212,513,239" href="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" alt="Na Mídia" title="Na Mídia"/>

<area shape="rect" coords="593,203,665,229" href="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" 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.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito