Jump to content

Menu

doxy

By doxy
in CSS

 Share

Recommended Posts

doxy boolean user

doxy

Posted
Posted (edited)

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
118 boolean user

118

Posted
Posted

O que queres fazer é meter os dois menus dentro de um div, esse div tem de ter um width definido. Depois no menu da direita fazes float:right e no da esquerda fazes floa:left

doxy boolean user

doxy

Posted
  • Author
Posted (edited)

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
118 boolean user

118

Posted
Posted (edited)

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
doxy boolean user

doxy

Posted
  • Author
Posted (edited)

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
brunoais try-catch user

brunoais

Posted
Posted

^

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%.

brunoais try-catch user

brunoais

Posted
Posted (edited)

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%.

doxy boolean user

doxy

Posted
  • Author
Posted (edited)

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
Rui Carlos unsigned user

Rui Carlos

Posted
Posted

Foi introduzido um bug no IPB na última versão que faz com que a indentação seja perdida.

Para que tal não aconteça, podem também introduzir as tags code, com a linguagem, manualmente, e colar o código. Por exemplo:

[ code=css ]body {

...

}[/code]

(Remover os espaço à volta de code=css.)

Rui Carlos Gonçalves

118 boolean user

118

Posted
Posted 

//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.

doxy boolean user

doxy

Posted
  • Author
Posted

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

brunoais try-catch user

brunoais

Posted
Posted

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%.

Joel Luis boolean user

Joel Luis

Posted
Posted

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
118 boolean user

118

Posted
Posted

é 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
doxy boolean user

doxy

Posted
  • Author
Posted

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

brunoais try-catch user

brunoais

Posted
Posted

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%.

doxy boolean user

doxy

Posted
  • Author
Posted

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 😞

brunoais try-catch user

brunoais

Posted
Posted

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%.

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
Go to topic listing
×
×
  • 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.