Jump to content

Menu


doxy
 Share

Recommended Posts

Boa tarde,

fiz um menu, mas queria que o menu seja até parecido com o do forum no facto de ter dois links no canto.

O que estou a tentar fazer é:

<--Margem---> <Menu> <--Margem-->

E o Menu algo deste tipo:

<Home Bio Noticias Galeria Links Contacto>

Não sei se estao a ver a ideia...

usei dois divs mas nao consigo meter .. nem sei se a forma como estou a fazer está correcta...

deem me uma ajuda por favor e vejam ja agora se o que esta feito está muito mal..

Obrigado

código:

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>menu</title>
<style type="text/css">

 body {
  //padding:10px;
 //position:absolute;
 margin-left: 200px;
margin-right: 220px;

 }
 #menu ul {
  padding:0px;
  margin:0px;
  float: left;
  width: 100%;
  background-color:#EDEDED;
  list-style:none;
  font:80% Tahoma;
 }

 #menu ul li { display: inline; }

 #menu2 ul li { display: inline; }

 #menu ul li a {
  background-color:#EDEDED;
  color: #333;
  text-decoration: none;
  border-bottom:3px solid #EDEDED;
  padding: 2px 10px;
  float:left;
 }

 #menu2 ul li a {
  background-color:#EDEDED;
  color: #333;
  text-decoration: none;
  border-bottom:3px solid #EDEDED;
  padding: 2px 10px;
  float:right;
  top: 0;

 }

 #menu ul li a:hover {
  background-color:#D6D6D6;
  color: #6D6D6D;
  border-bottom:3px solid #EA0000;
 }
 #menu2 ul li a:hover {
  background-color:#D6D6D6;
  color: #6D6D6D;
  border-bottom:3px solid #EA0000;
 }

</style>
</head>
<body>
<div id="menu">
 <ul>
  <li><a href="">Home</a></li>
  <li><a href="">Sobre</a></li>
  <li><a href="">Artigos</a></li>
  <li><a href="">Estudos</a></li>
  <li><a href="">Diretório</a></li>
 </ul>
</div>
<div id="menu2">
 <ul>
  <li><a href="">Links</a></li>
  <li><a href="">Contato</a></li>
 </ul>
</div>


</body>
Edited by softklin
Adicionado GeSHi
Link to comment
Share on other sites

Desde já o meu obrigado...

Mas não terei aqui muito lixo no meu css?

consegui meter.. mas agora o da esquerda fica para cima e o da direita está mais par abaixo... grrr:(

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>menu</title>
<style type="text/css">

 body {
  //padding:10px;
 //position:absolute;
 margin-left: 200px;
margin-right: 220px;

 }
 #menu ul {
  padding:0px;
  margin:0px;
  float: left;
  width: 100%;
  background-color:#EDEDED;
  list-style:none;
  font:80% Tahoma;
 }


 #menu ul li { display: inline; }

 #menu2 ul li { display: inline; }

 #menu ul li a {
  background-color:#EDEDED;
  color: #333;
  text-decoration: none;
  border-bottom:3px solid #EDEDED;
  padding: 2px 10px;
  float:left;
 }

 #menu2 ul li a {
  background-color:#EDEDED;
  color: #333;
  text-decoration: none;
  border-bottom:3px solid #EDEDED;
  padding: 2px 10px;
  float:right;
  top: 0;

 }

 #menu ul li a:hover {
  background-color:#D6D6D6;
  color: #6D6D6D;
  border-bottom:3px solid #EA0000;
 }
 #menu2 ul li a:hover {
  background-color:#D6D6D6;
  color: #6D6D6D;
  border-bottom:3px solid #EA0000;
 }

</style>
</head>
<body>
<div id="menu">
 <ul>
  <li><a href="">Home</a></li>
  <li><a href="">Sobre</a></li>
  <li><a href="">Artigos</a></li>
  <li><a href="">Estudos</a></li>
  <li><a href="">Diretório</a></li>
  <li><a href="">CURSO</a></li>
 </ul>
 <div id="menu2">
  <ul>
<li><a href="">Links</a></li>
<li><a href="">Contato</a></li>
  </ul>
 </div>
</div>


</body>
</html>
Edited by softklin
Adicionado GeSHi
Link to comment
Share on other sites

tens bastante coisa estranha. Repara, o width:100% é para por numa div exterior aos dois ul, depois cada ul é que poes com float left e right. Outra coisa, cada regra css pode ser atribuida a mais do que um elemento, só tens de separar por virgulas. O teu html é algo do genero


<div id="menus">
<ul id="menu_left">
</ul>
<ul id="menu_right">
</ul>
</div>

Edited by softklin
Adicionado GeSHi
Link to comment
Share on other sites

Obrigado amigo... mas agora estou com outro problema na pagina.

entao é assim tenho a pagina estruturada da seguinte forma (ou seja dividida por 4 seccoes)

MENU

--------------------------------------

Conteudo | Destaques

---------------------------------------

Rodape

o meu problema esta que o meu div que tem o conteudo e destaques ta muito grande nao sei porque e o rodape esta no fim.

esta algo dste tipo:

Conteudo |

|

|

|

|

|

--->Nesta zona aqui tambem queria ter o border que estou ai a desenhar... fogo

rodape

_____________________________________________________________________________

//css:

// GERAL CSS

html
{
font-family:arial,sans-serif;
width:100%;
height:100%;
margin:0;
padding:0;

}
body
{
float:left;
margin:0;
padding:0;

}
#pagina
{
float:left;
margin-left:15%;
margin-right:15%;
height:100%;
width: 1024px;
padding:0;
background-color: #EFEFEF;

}
#menu
{
float:left;
width: 100%;
//height:100%;
//margin:0;
//padding:0;

}
#rodape
{
margin-top: 500px;
float:left;
width: 100%;
//height: 55px;
//background-color: red;
border-top: 1px solid gray;
border-left: 1px solid gray;
}
#meio
{
float: left;
width: 100%;
height: 400px;
margin-top: 2%;border-right: 1px solid gray;
}
#conteudo
{
float: left;
width: 72%;
//height: 100%;
}
#destaques
{
float: right;
width: 24%;
//margin-left: 5%;
//margin-right: 5%;
//height: 100%;
border-left: 1px solid gray;
border-top: 1px solid gray;
}
//CONTEUDO CSS
#conteudo1
{
float: left;
margin-top: 5%;
width: 100%;
}
#tituloConteudo
{
color: #C49C2A;
line-height: 20px;
font-family: Helvetica,"Arial sans-serif";
font-size: 18px;
letter-spacing: 3px;
line-height: 20px;
}
#tituloConteudo2
{
color: #000000;
font-family: Helvetica,"Arial sans-serif";
font-size: 18px;
letter-spacing: 3px;
line-height: 20px;
}
.conteudoTitulo
{
float: left;
margin-top: 2%;

}
.textoConteudo
{
color: #666666;
font-family: Arial,Helvetica,sans-serif;
font-size: 15px;
line-height: 20px;
// text-align: left;
text-align: justify;
float: left;
}

//DESTAQUES CSS

#destaqueMargem
{
padding: 30px;


}


#newslater
{
line-height: 30px;
height: 30px;
float: left;
width: 100%;
height: 118%;
border-top: 1px solid gray;
font-family: arial;
font: bold;
color: white;
background-color: black;


}

#player
{
float: left;
margin-top: 10%;
//margin-left: 8%;
width: 100%;
//position: relative;
// z-index: -1;
}

#destaque_1
{
float: left;
width: 100%;
//margin-left: 8%;
margin-top: 10%;

}

#destaque_Texto
{
float: left;
width: 100%;
//margin-left: 8%;
margin-top: 1%;

}

#destaque_2
{
margin: auto;
float: left;
width: 100%;
//display: inline-block;
}

#destaque_3
{
margin-top: 10%;
//margin-left: 8%;
float: left;
width: 100%;

}

#destaque_4
{
float: left;
width: 100%;
//height: 100%;
}

#destaque_5
{
float: left;
width: 100%;
//height: 100%;
}

#destaque_6
{
float: left;
width: 100%;
margin-top: 0%;
//margin-left: 8%;
//height: 100%;
}


.tituloDestaque
{
float: left;
margin-top: 2%;
color: #000000;
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
line-height: 24px;
}

.destaqueDescricao
{
margin-top: 1%;
float: left;
color: #666666;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
line-height: 17px;
text-align: justify;
//width: 80%;
}

e o corpo esta assim:

<body>
    <div id="pagina"> 
        <div id="menu">
             <?php
                  include_once 'menuTop.php';
                      menuTop($paginasEsq, $paginasDir);
                ?>
           </div>

           <div id="meio">
                  <div id="conteudo">
                       <?php include_once 'conteudo.php'; ?>

                   </div>


                   <div id="destaques">
                            <?php include_once 'destaques.php'; ?>
                    </div>

            </div>

           <div id="rodape">

       </div>
</div>


</body>
Edited by doxy
Adicionado GeSHi
Link to comment
Share on other sites

^

Sem código colorido e sem indentação eu n consigo perceber.

"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Link to comment
Share on other sites

Eu indentei... Mas quando copio ocodigo aqui a indentação vai à vida...

FU IP.B modified CKE! (*censurado* CKE modificado pelo IP.B)

Acho que a unica hipotese é desligar o modo WYSIWYG e colar o código nessa altura.

Tens um botão à esquerda no topo que se parece com um interruptor. Isso desativa e ativa o modo de editor.

Se tens preguiça para escrever as tags code podes usar o botão com o símbolo "<>" (na linha de baixo) e ele escreve as tags code por ti.

nem mete as corzinhas.... peço desculpa

As cores como está, está bem. Nada a reclamar. No teu editor pode aparecer as cores mas elas não são copiadas quando copias para a area de transferência (por predefinição, em qq programa para programar).

Edited by brunoais

"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Link to comment
Share on other sites

Não foi copiado por ninguem...

E essas cores foi alguem que editou para ficar em modo css.... pois quando meto o código e envio o post não ficou.. e ate perdeu a indentação... enfim

eu usei o <>e colei o meu codigo e na altura nao ficou bem.. mas ja esta compreensivel e gostaria de ajuda no meu problema e nao sobre indentações... com todo o respeito..

Obrigado e obrigado pela explicação

FU IP.B modified CKE! (*censurado* CKE modificado pelo IP.B)

Eu escrevi esse css todo por mim...

Acho que a unica hipotese é desligar o modo WYSIWYG e colar o código nessa altura.

Tens um botão à esquerda no topo que se parece com um interruptor. Isso desativa e ativa o modo de editor.

Se tens preguiça para escrever as tags code podes usar o botão com o símbolo "<>" (na linha de baixo) e ele escreve as tags code por ti.

As cores como está, está bem. Nada a reclamar. No teu editor pode aparecer as cores mas elas não são copiadas quando copias para a area de transferência (por predefinição, em qq programa para programar).

Edited by doxy
Link to comment
Share on other sites

//css:

// GERAL CSS

html
{
font-family:arial,sans-serif;
width:100%;
height:100%;
margin:0;
padding:0;

}
body
{
float:left;
margin:0;
padding:0;

}
#pagina
{
float:left;
margin-left:15%;
margin-right:15%;
height:100%;
width: 1024px;
padding:0;
background-color: #EFEFEF;

}
#menu
{
float:left;
width: 100%;
//height:100%;
//margin:0;
//padding:0;

}
#rodape
{
margin-top: 500px;
float:left;
width: 100%;
//height: 55px;
//background-color: red;
border-top: 1px solid gray;
border-left: 1px solid gray;
}
#meio
{
float: left;
width: 100%;
height: 400px;
margin-top: 2%;border-right: 1px solid gray;
}
#conteudo
{
float: left;
width: 72%;
//height: 100%;
}
#destaques
{
float: right;
width: 24%;
//margin-left: 5%;
//margin-right: 5%;
//height: 100%;
border-left: 1px solid gray;
border-top: 1px solid gray;
}
//CONTEUDO CSS
#conteudo1
{
float: left;
margin-top: 5%;
width: 100%;
}
#tituloConteudo
{
color: #C49C2A;
line-height: 20px;
font-family: Helvetica,"Arial sans-serif";
font-size: 18px;
letter-spacing: 3px;
line-height: 20px;
}
#tituloConteudo2
{
color: #000000;
font-family: Helvetica,"Arial sans-serif";
font-size: 18px;
letter-spacing: 3px;
line-height: 20px;
}
.conteudoTitulo
{
float: left;
margin-top: 2%;

}
.textoConteudo
{
color: #666666;
font-family: Arial,Helvetica,sans-serif;
font-size: 15px;
line-height: 20px;
// text-align: left;
text-align: justify;
float: left;
}

//DESTAQUES CSS

#destaqueMargem
{
padding: 30px;


}


#newslater
{
line-height: 30px;
height: 30px;
float: left;
width: 100%;
height: 118%;
border-top: 1px solid gray;
font-family: arial;
font: bold;
color: white;
background-color: black;


}

#player
{
float: left;
margin-top: 10%;
//margin-left: 8%;
width: 100%;
//position: relative;
// z-index: -1;
}

#destaque_1
{
float: left;
width: 100%;
//margin-left: 8%;
margin-top: 10%;

}

#destaque_Texto
{
float: left;
width: 100%;
//margin-left: 8%;
margin-top: 1%;

}

#destaque_2
{
margin: auto;
float: left;
width: 100%;
//display: inline-block;
}

#destaque_3
{
margin-top: 10%;
//margin-left: 8%;
float: left;
width: 100%;

}

#destaque_4
{
float: left;
width: 100%;
//height: 100%;
}

#destaque_5
{
float: left;
width: 100%;
//height: 100%;
}

#destaque_6
{
float: left;
width: 100%;
margin-top: 0%;
//margin-left: 8%;
//height: 100%;
}


.tituloDestaque
{
float: left;
margin-top: 2%;
color: #000000;
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
line-height: 24px;
}

.destaqueDescricao
{
margin-top: 1%;
float: left;
color: #666666;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
line-height: 17px;
text-align: justify;
//width: 80%;
}

Estás a ver esses // no inicio da linhas? Suponho que pensas que isso comenta a linha, mas não, em css só funcionam os comentarios /* */, logo na tua div conteudo tens um height: 100%, tira isso, e os restantes comentarios mal feitos e já deve funcionar.

Link to comment
Share on other sites

Estás a ver esses // no inicio da linhas? Suponho que pensas que isso comenta a linha, mas não, em css só funcionam os comentarios /* */, logo na tua div conteudo tens um height: 100%, tira isso, e os restantes comentarios mal feitos e já deve funcionar.

Meus amigos... o meu grande obrigado... vou então testar e experimentar...

E já vos digo algo..

um abraço

Amigo 118 fiz isso que disseste e tirei todos os comentários... Mas infelizmente ficou igual.. continuo com o rodapé em baixo e o div chamado meio que contem o conteudo e os destaques está demasiado grande.. não compreendo.. pois com heigth a 100% devia estar proporcional ao texto escrito..

:S

obrigado

Link to comment
Share on other sites

pois com heigth a 100% devia estar proporcional ao texto escrito..

height a 100% significa que o tamanho, em altura, ocupa 100% do parent node (do nó pai).

http://www.w3.org/wiki/CSS/Properties/height#Values

"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Link to comment
Share on other sites

Meus amigos... o meu grande obrigado... vou então testar e experimentar...

E já vos digo algo..

um abraço

Amigo 118 fiz isso que disseste e tirei todos os comentários... Mas infelizmente ficou igual.. continuo com o rodapé em baixo e o div chamado meio que contem o conteudo e os destaques está demasiado grande.. não compreendo.. pois com heigth a 100% devia estar proporcional ao texto escrito..

:S

obrigado

Tu tens de fazer uma class no css ou id:

Com os parametros correctos que queres o tamanho do teu div do meio, por exemplo:

CSS:

#caixam{
width: 480px;
height: 640px;
position:fixed;
left:120px;
}

Depois no html metes:

<html>
  <head>
 ..............
  </head>
 <body>
  ....................
   <div id="caixam">
	  .............
   </div>
	 ..................
 </body>
</html>

O Código CSS editas de acordo com os parametros que precisares.

Espero ter ajudado 🙂

  • Vote 1
Link to comment
Share on other sites

é melhor colocares aqui um link para se ver melhor. Mas tens de estudar melhor esse css xD poe online e mete aqui um link que já se vê, a melhor maneira de estares css é userares o firebug no firefox ou o cenas que ja vem no chrome e podes testar css e ver as alterações no momento. E podes fazer um mouse hover nos divs e ver o espaço ocupado por cada um e já dá para ver o que está fora de sitio.

  • Vote 1
Link to comment
Share on other sites

Boas caros amigos..

ja descobri o problema..

então não é que tinha aqui um margin-top no rodapé que estava a enviar tudo para baixo... fogo..

Agradeço a todos as vossas explicações e as vossas dicas..

Tenho é uma nova questão que ninguém me consegue ajudar... tenho um player em flash que fiz o download aqui:

flash-mp3-player.net/players/multi/download/

Mas o que se passa é que o player fica sempre por cima... se tiver uma galeria de imagens com slideshow.. fica sempre por cima o player..

Experimentei um positio: absolute; e um z-index: -1; e mesmo assim não dá..

obrigado a todos

Link to comment
Share on other sites

Mas o que se passa é que o player fica sempre por cima... se tiver uma galeria de imagens com slideshow.. fica sempre por cima o player..

Experimentei um positio: absolute; e um z-index: -1; e mesmo assim não dá..

obrigado a todos

Faz ao contrário. O que queres que fique em cima indica um z-index superior.

"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Link to comment
Share on other sites

Desde já obrigado pela dica...

eu tenho

<div id=meio>
 <div id="esq"> </div>
 <div id="direita"> </div>
</div>

O player do site que mostrei está no div da direita e a Galeria de Imagens do Minigal está na esquerda..

Quando clico para ver o slideshow o player mesmo com z-index: +1; no div esquerda continua o player por cima fogo 😞

Link to comment
Share on other sites

Quando clico para ver o slideshow o player mesmo com z-index: +1; no div esquerda continua o player por cima fogo 😞

Tens aqui

.;;..!!!??..,.;

.

Agora usa-os para tornar a tua frase legível.

"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Link to comment
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
 Share

×
×
  • Create New...

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.