Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

t_e_e_m

Dificuldade em menu horizontal drop down

Recommended Posts

t_e_e_m

Boas Tenho o meu site em que esta em fase de construção, e desejava substituir o menu que tenho actualmente, por um horizontalmas com sub menus.

Tentei adapatra este: h**p://css-tricks.com/examples/SimplejQueryDropdowns/

ao meu site o qual nao estou a conseguir. Aletro tudo na boa, mas ao inserir no meu site deixa de funcionar correctramente.

O meu codigo css:

/*-----------------------------------------------------------Estrutura geral do site *------------------------------------------/



/* Deixar as margens 0 em todo o site */
* {
margin:0;
pading:0;
}
/* Border das imagens 0 */
img {
border:0;
}
/* cor e letra todo o site */
body {
background-image: url(Imagens/bg-sidebar.png);
font-family: Tahoma;
}
/* formatação */
h1, h2 {
font-size:14px;
font-weight:bold;
}
p {
font-size:12px
}
.nota {
font-size:11px;
color: #3333FF;
}
/* Estrutura geral do site */
#geral {
width:730px;
height:650px;
margin:0 auto; /* centra o div geral */
}
/* Topo do site e altura */
#topo {
width:730px;
height:156px;
}
/* border-bottom:2px solid #fbc970;*/


/* Espaço menus */
#menus {
width:730px;
height:38px;
background-image: url(Imagens/bg_menu2.jpg);
}
#menus ul {
list-style-type:none;
background-image: url(Imagens/bg_menu2.jpg); background-repeat:repeat-x;
}
#menus ul li {
display:inline;
}
#menus ul li a {
padding:10px 25px;
float:left;
text-decoration:none;
color:#77787b;
border-left: 1px solid #a09a94
}
#menus ul li a:hover {
color: #000;
}
/*CONTEUDO DO SITE*/

#conteudo {
width:730px;
height:392px;
background-color:#feefd6;
border-top: 2px solid  #feefd6;
}


#coluna_esq {
width:550px;
height:392px;
padding-left:0px;
border-right: 3px solid #d9d9df;
float:left;

}

/* Inicio do rodape */
#Rodape {
width:730px;
height:49px;
border-top:0px solid #fae5c3;
background-image: url(Imagens/bg-sidebar.png);
padding-top:0px;
color:#000000;
text-align:center;
font-size:10px;
}

/*------------------------------------------------------FIM Estrutura geral do site *------------------------------------------*/





/* _____________________________________________________Coluna esq da pagina index*_______________________________________*/



/* Coluna esqtop */

.coluna_esqtopindex {
width:511px;
height:108px;
padding-left:39px;
float: right;
}
/* Formatação */


.coluna_esqtopindex img {
margin:5px;
float:left;
}
.coluna_esqtopindex h1 {
color:#a2a2a3;
padding:5px 0;
}
/* Links */

.coluna_esqtopindex p a {
color:#a2a2a3;
text-decoration:none;
}
.coluna_esqtopindex p a:hover {
text-decoration:underline;
}
/* Parte de baixo da coluna esquerda */

.coluna_esqbotindex {
width:438px;
height:230px;
background-repeat:no-repeat;
margin:14px 0 0 43px;
padding:10px 20px 10px;
_margin:13px 0 0 22px;
background-image:url(Imagens/bg_evento.jpg);
float:left;

}


/* Formatação */

.coluna_esqbotindex h1 {
color: #666666;
padding-bottom:5px;
font-size:12px;
font-weight:bolder;

}
.coluna_esqbotindex h2 {
color: #a2a2a3;
padding-top:5px;
font-size:12px;
font-weight:bolder;
}
.coluna_esqbotindex h3 {
color: #666666;
padding-left: 300px;
font-size:12px;
font-weight:bolder;

}

.coluna_esqbotindex p {
color: #999999;
font-size:11px;
text-align:justify;
}

.coluna_esqbotindex p a {
color:#0000CC;
text-decoration:none;
}
.coluna_esqbotindex p a:hover {
text-decoration: underline;
}
.coluna_esqbotindex img {
float:left;
margin:26px 5px;
}

/* _____________________________________________________FIM Coluna esq da pagina index*_______________________________________*/



/* _____________________________________________________Coluna esq da pagina admnass*_________________________________________ */

.coluna_esqbot {
width:438px;
height:350px;
background-repeat:no-repeat;
margin:14px 0 0 43px;
padding:10px 20px 10px;
_margin:13px 0 0 22px;
background-image: url(Imagens/equipa.gif);
float:left;
text-align:center;
}




.coluna_esqbot1 {
width:170px;
height:190px;
float: left;
text-align:left;
margin-left: 20px;
_margin: 13px 0 0 22px;
_padding: 0;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;


}

/* Formatação da coluna bot1*/

.coluna_esqbot1 h1 {
color: #666666;
padding-bottom:5px;
font-size:12px;
font-weight:bolder;

}
.coluna_esqbot1 h2 {
color: #333333;
padding-top:5px;
font-size:12px;
font-weight:bolder;
}
.coluna_esqbot1 h3 {
color: #666666;
padding-left: 300px;
font-size:12px;
font-weight:bolder;

}

.coluna_esqbot1 p {
color: #333333;
font-size:11px;
line-height: 20px;
}

.coluna_esqbot1 p a {
color:#666666;
text-decoration: underline;
}
.coluna_esqbot1 p a:hover {
text-decoration: underline;
}
.coluna_esqbot1 img {
float:left;
margin:26px 5px;
}


/*Fim da formatação da coluna bot 1*/


/*Formatação da coluna bot 2*/

.coluna_esqbot2 {
width:172px;
height:180px;
background-repeat:no-repeat;
float: left;
text-align:left;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}

.coluna_esqbot2 h1 {
color: #666666;
padding-bottom:5px;
font-size:12px;
font-weight:bolder;

}
.coluna_esqbot2 h2 {
color: #333333;
padding-top:5px;
font-size:12px;
font-weight:bolder;
}
.coluna_esqbot2 h3 {
color: #666666;
padding-left: 300px;
font-size:12px;
font-weight:bolder;

}
.coluna_esqbot2 h3 {
color: #a2a2a3;
padding-top:5px;
font-size:12px;
font-weight:bolder;
}
.coluna_esqbot2 p {
color: #333333;
font-size:11px;
line-height: 20px;
}




/*Fim da formatação da coluna bot 2*/


/*Formatação da coluna bot 3*/

.coluna_esqbot3 {
width:384px;
height:50px;
float: left;
text-align:left;
margin-left: 20px;
_margin: 13px 0 0 22px;
_padding: 0;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;

}

.coluna_esqbot3 h1 {
color: #666666;
padding-bottom:5px;
font-size:12px;
font-weight:bolder;

}
.coluna_esqbot3 h2 {
color: #333333;
padding-top:5px;
font-size:12px;
font-weight:bolder;
}
.coluna_esqbot3 h3 {
color: #666666;
padding-left: 300px;
font-size:12px;
font-weight:bolder;

}
.coluna_esqbot3 h3 {
color: #a2a2a3;
padding-top:5px;
font-size:12px;
font-weight:bolder;
}
.coluna_esqbot3 p {
color: #333333;
font-size:11px;
}

.coluna_esqbot3 p a {
	color:#666666;
text-decoration: underline;
}


.coluna_esq_cont p a:hover {
text-decoration: underline;
}
.coluna_esqbot3 img {
float:left;
margin:26px 5px;
}




/* _____________________________________________________FIM Coluna esq da pagina admnass*_________________________________________ */



#coluna_dta {
width:167px;
height:382px;
padding: 5px;
float:left;
background-color: #FFFFFF;
}
.coluna_dta1 {
withh: 167px;
height: 382px;
background-image:url(Imagens/fundo%20copy.jpg);
background-repeat:no-repeat;
}
/*Formatação coluna dta 1*/

.coluna_dta1 h1 {
font-size:16px;
color:#999999;
}

.coluna_dta1 h2 {
font-size:13px;
color:#999999;
}
.coluna_dta1 h3 {
font-size:10px;
color:#999999;
font-stretch:narrower;
}	

.coluna_dta1 p {
font-size:12px;
color:#999999;
}


/* FORMATAÇÃO DAS Colunas PAG CONTACTOS */

.coluna_esq_cont {
width:438px;
height:350px;
background-repeat:no-repeat;
margin:14px 0 0 43px;
padding:10px 20px 10px;
_margin:13px 0 0 22px;
background-image: url(Imagens/contacto.gif);
float:left;
text-align:center;
}

/* Formatação da coluna esq cont  */

.coluna_esq_cont h1 {
color: #666666;
letter-spacing: 1px;
padding-bottom:5px;
font-size:15px;
font-weight:bolder;
text-align: left;


}
.coluna_esq_cont h2 {
color: #666666;
padding-top:5px;
font-size:12px;
font-weight:bolder;
text-decoration:underline;
}
.coluna_esq_cont h3 {
color: #666666;
font-size:12px;
font-weight:bolder;
text-align:left;

}

.coluna_esq_cont p {
color: #555555;
font-size:11px;
font-weight:bolder;
line-height: 25px;
}

.coluna_esq_cont p a {
color:#666666;
text-decoration: underline;
}
.coluna_esq_cont p a:hover {
text-decoration: underline;
}
.coluna_esq_cont img {
float:left;
margin:26px 5px;
}

.coluna_esq_cont1 {
width:398px;
height:190px;
background-repeat:no-repeat;
float: left;
text-align:left;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;

}

/*Formatação coluna esquerda cont1*/
/*sao as da coluna esquerda contactos*/




.coluna_esq_cont2 {
width:398px;
height:60px;
background-repeat:no-repeat;
float: left;
text-align:left;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}


/*Formatação coluna esquerda cont2*/
/*sao as da coluna esquerda contactos*/





/* FIM FORMATAÇÃO DAS Colunas PAG CONTACTOS */	

/*PAGINA FORMCALL*/
.coluna_formulario {
width:438px;
height:350px;
background-repeat:no-repeat;
margin:14px 0 0 43px;
padding:10px 20px 10px;
_margin:13px 0 0 22px;
background-image: url(Imagens/msn.gif);
float:left;
text-align:center;
}

/* Formatação da coluna esq contactos  */

.coluna_formulario h1 {
color: #666666;
letter-spacing: 1px;
padding-bottom:5px;
font-size:15px;
font-weight:bolder;
text-align: left;


}
.coluna_formulario h2 {
color: #666666;
padding-top:5px;
font-size:12px;
font-weight:bolder;
text-decoration:underline;
}
.coluna_formulario h3 {
color: #666666;
font-size:12px;
font-weight:bolder;
text-align:left;

}

.coluna_formulario p {
color: #555555;
font-size:11px;
font-weight:bolder;
line-height: 25px;
}

.coluna_formulario p a {
color:#666666;
text-decoration:none;
text-decoration: underline;
}
.coluna_formulario p a:hover {
text-decoration: underline;
}
.coluna_formulario img {
float:left;
margin:26px 5px;
}


.coluna_formulario_top {
width:410px;
height:300px;
background-repeat:no-repeat;
float: right;
text-align:left;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;

}

/*_______________________________________________________________________________________________________________
                                      Formatação da pagina instalações 
_______________________________________________________________________________________________________________*/




.coluna_esq_instalaçao {
width:438px;
height:350px;
background-repeat:no-repeat;
margin:14px 0 0 43px;
padding:10px 20px 10px;
_margin:13px 0 0 22px;
background-image: url(Imagens/instalacao.gif);
float:left;
text-align:center;
}

/* Formatação da coluna esq cont  */

.coluna_esq_instalaçao h1 {
color: #666666;
letter-spacing: 1px;
padding-bottom:5px;
font-size:15px;
font-weight:bolder;
text-align: left;


}
.coluna_esq_instalaçao h2 {
color: #666666;
padding-top:5px;
font-size:12px;
font-weight:bolder;
text-decoration:underline;
}
.coluna_esq_instalaçao h3 {
color: #666666;
font-size:12px;
font-weight:bolder;
text-align:left;

}

.coluna_esq_instalaçao p {
color: #555555;
font-size:11px;
font-weight:bolder;
line-height: 15px;
}

.coluna_esq_instalaçao p a {
color:#666666;
text-decoration:none;
text-decoration: underline;
}
.coluna_esq_instalaçao p a:hover {
text-decoration: underline;
}
.esq_instalaçao img {
float:left;
margin:26px 5px;
}



.coluna_instalaçao1 {
width:400px;
height:90px;
background-repeat:no-repeat;
float: left;
text-align:left;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;

}

.coluna_instalaçao2 {
width:393px;
height:150px;
background-repeat:no-repeat;
float: left;
text-align:left;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 30px;
}



/*_______________________________________________________________________________________________________________
                                      Formatação da pagina exames 
_______________________________________________________________________________________________________________*/




.coluna_esq_exame {
width:438px;
height:350px;
background-repeat:no-repeat;
margin:14px 0 0 43px;
padding:10px 20px 10px;
_margin:13px 0 0 22px;
background-image: url(Imagens/exames.gif);
float:left;
text-align:center;
}

/* Formatação da coluna esq cont  */

.coluna_esq_exame h1 {
color: #666666;
letter-spacing: 1px;
padding-bottom:5px;
font-size:15px;
font-weight:bolder;
text-align: left;


}
.coluna_esq_exame h2 {
color: #666666;
padding-top:5px;
font-size:12px;
font-weight:bolder;
text-decoration:underline;
}
.coluna_esq_exame h3 {
color: #666666;
font-size:12px;
font-weight:bolder;
text-align:left;

}

.coluna_esq_exame p {
color: #555555;
font-size:11px;
font-weight:bolder;
line-height: 15px;
}

.coluna_esq_exame p a {
color:#666666;
text-decoration:none;
text-decoration: underline;
}
.coluna_esq_exame p a:hover {
text-decoration: underline;
}
.esq_exame img {
float:left;
margin:26px 5px;
}



.coluna_exame1 {
width:409px;
height:90px;
background-repeat:no-repeat;
float: left;
text-align:left;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;

}

.coluna_exame2 {
width:398px;
height:150px;
background-repeat:no-repeat;
float: left;
text-align:left;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 30px;
}

E o meu codigo html:

<!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=utf-8" />
<title>Crb</title>
<link href="style2.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
<!--
.style8 {
font-size: 12
}
.style13 {
font-size: 9px;
color: #fbc970;
font-weight: bold;
}

-->
</style>
</head>
<body>
<div id="geral">
<div id="topo"><img src="Imagens/Topo.jpeg" /></div>
<div id="menus">
<ul>
<li>
  <h1><a href="index.html" >CRB</a></h1>
</li>
<li>
  <h1><a href="equipa.html">CRB</a></h1>
</li>
<li>
  <h1><a href="instalacao.html">CRB</a></h1>
</li>
<li>
  <h1><a href="exame.html">CRB</a></h1>
</li>
<li>
  <h1><a href="acordo.html">CRB</a></h1>
</li>
<li>
  <h1><a href="call.html">CRB</a></h1>
</li>
</ul>
</div>
<div id="conteudo">
<div id="coluna_esq">
<div class="coluna_esqtopindex"><img src="Imagens/477x104.jpg"/></div>
<div class="coluna_esqbotindex">
  <h1>CCB  </h1>
  <p>Este espaço destina-se a uma nota introdutória ao site.B</p>
</div>
</div>

<div id="coluna_dta">
<div class="coluna_dta1">
<p> </p>
<h1> </h1>
<p> </P>
<h3 class="style8"><strong>Rua ABC</strong></h3>
<h3 class="style8"><strong>B442 B</strong></h3>
<h3 class="style8"><strong>Telef: /1/2/3/4</strong></h3>
<h3><span class="style8">mail.telepac.p</span>t</h3>
<p> </p>
<p> </p>
<h1> </h1>
<p> </p>
<p> </p>
<p><strong>GPS</strong>: </p>
<p> </p>
<p> </p>
<p> </p>
<p align="center"><a href="http://maps.google.pt/maps/ms?ie=UTF8&hl=pt-PT&msa=0&msid=113805434940049411188.000465b694592de828756&ll=38.010408,-7.860192&spn=0.003474,0.006866&t=h&z=17" target="_blank"><img src="Imagens/localiz.jpg" alt="Carregue sobre a imagem" /></a> </p>
<div align="center"><span class="style13">Carregue Sobre a imagem</span></div>
<p align="center"> </p>
</div>
</div>
</div>
<div id="Rodape"> <strong>© CRB 2009 </strong>(JF)<em><br />
  </em></div>
</div>
</div>
</body>
</html>

Será qie me podem ajudar, nesta integração. mantendo a imagem de fundo da div menu.


T_E_E_M

Share this post


Link to post
Share on other sites
Battousai

<li> com <h1>?

Ai os básicos... <h1> é um elemento que não deve ser repetido numa página e é block. Portanto não vai fazer o que tu queres a não ser que lhe metas um float ou display:inline.

Mas teres vários h1 não é boa prática.

Share this post


Link to post
Share on other sites
t_e_e_m

Mas o que queria era tirar o menu do meu codigo e colocar o menu que encontrei e postei no link! sera que é possivel?


T_E_E_M

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.