Ajustes no menu

PatrickPC · Julho 8, 2011

Boa tarde a todos,

Bom, estou precisando de dar uns ajustes no menu deste site: Clique aqui

O que preciso: Centralizar os links no meio do retangulo vermelho, como pode ver o nome HOME está mais para a direita do que para esquerda, preciso centraliza-lo.

Outra coisa, preciso que o botão que for acionado fique marcado. EX.: O botão home está em vermelho, quando o botão Saúde for clicado ele ficar em vermelho e não mais o botão home.

Aguardo contato

Att.

Patrickpc

crf_h0m3r · Julho 8, 2011

Poste o código CSS, fica mais fácil de lhe ajudar.

PatrickPC · Julho 8, 2011

Poste o código CSS, fica mais fácil de lhe ajudar.

Segue o codigo CSS.

body {
margin: 0;
padding: 0;
background: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #525252;
}

h1, h2, h3 {
margin: 0;
padding: 0;
font-weight: normal;
color: #2C2723;
}

h1 {
font-size: 2em;
}

h2 {
font-size: 2.4em;
}

h3 {
font-size: 1.6em;
}

p, ul, ol {
margin-top: 0;
line-height: 180%;
}

ul, ol {
}

a {
text-decoration: none;
color: #FF2929;
}

a:hover {
text-decoration: underline;
}

img.border {
border: 6px solid #E1F1F6;
}

img.alignleft {
float: left;
margin-right: 25px;
}

img.alignright {
float: right;
}

img.aligncenter {
margin: 0px auto;
}

#wrapper {
background: url(images/img01.jpg) repeat-x left top;
}

/* Header */

#header {
width: 980px;
height: 100px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 8px;
}

#logo {
float: left;
width: 660px;
height: 100px;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: left top;
}

#logo h1 {
margin: 0;
padding: 5px 0px 0px 30px;
}

#logo h1 {
float: left;
letter-spacing: -1px;
text-transform: lowercase;
text-shadow: #FFFFFF -1px 1px 2px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 42px;
color: #2D2722;
}

#logo a {
text-decoration: none;
color: #2D2722;
}

#search {
float: right;
width: 320px;
height: 63px;
}

#search form {
padding: 18px 0px 0px 80px;
}

#search fieldset {
margin: 0;
padding: 0;
border: none;
}

#search-text {
width: 195px;
padding: 6px 10px;
border: 1px solid #E5E5E5;
background: #FFFFFF;
text-transform: lowercase;
font: normal 11px Arial, Helvetica, sans-serif;
color: #7F7F81;
}

#search-submit {
display: none;
}

/* Menu */

#menu {
width: 980px;
height: 46px;
margin: 0 auto;
padding: 15px 0px 0px 0px;
}

#menu ul {
margin: 0;
list-style: none;
line-height: normal;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 4px;
}

#menu li {
float: left;
}

#menu a {
display: block;
float: left;
height: 24px;
padding: 4px 4px 0px 30px;
text-decoration: none;
text-transform: capitalize;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #181818;
border: none;
}

#menu li.current_page_item {
background: #FF2929;
}

#menu .current_page_item a {
background: #FF2929;
color: #FFFFFF;
}

#menu a:hover {
text-decoration: none;
text-align: left;
}

#splash {
width: 980px;
height: 310px;
background: url(images/img06.jpg) no-repeat left top;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

/* Page */

#page {
width: 1000px;
margin: 0 auto;
padding: 0;
}

#page-bgtop {
}

#page-bgbtm {
margin: 0px;
padding: 20px 30px 0px 30px;
}

/* Content */

#content {
float: left;
width: 540px;
padding: 0px 0px 0px 20px;
}

.post {
padding-top: 20px;
padding-bottom: 10px;
}

.post .title {
margin: 0px;
padding-bottom: 10px;
letter-spacing: -1px;
}

.post .title a {
color: #242424;
text-decoration: none;
border: none;
}

.post .meta {
border-top: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
padding: 5px 0px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: italic;
}

.post .meta a {
}

.post .entry {
text-align: justify;
margin-bottom: 25px;
padding: 10px 0px 10px 0px;
}

.links {
display: block;
width: 96px;
padding: 2px 0px 2px 0px;
background: #A53602;
text-align: center;
text-transform: uppercase;
font-size: 10px;
color: #FFFFFF;
}

/* Sidebar */

#sidebar {
float: right;
width: 330px;
padding: 20px 0px 0px 0px;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

#sidebar li {
margin: 0;
padding: 0;
}

#sidebar li ul {
margin: 0px 15px;
padding-bottom: 30px;
}

#sidebar li li {
padding-left: 15px;
line-height: 35px;
border-bottom: 1px solid #E5E5E5;
}

#sidebar li li span {
display: block;
margin-top: -20px;
padding: 0;
font-size: 11px;
font-style: italic;
}

#sidebar h2 {
height: 38px;
margin-bottom: 20px;
padding: 12px 0px 0px 15px;
letter-spacing: -1px;
font-size: 28px;
color: #2C2723;
}

#sidebar p {
margin: 0 0px;
padding: 0px 20px 20px 20px;
text-align: justify;
}

#sidebar a {
border: none;
}

#sidebar a:hover {
text-decoration: underline;
}

/* Calendar */

#calendar {
}

#calendar_wrap {
padding: 20px;
}

#calendar table {
width: 100%;
}

#calendar tbody td {
text-align: center;
}

#calendar #next {
text-align: right;
}

/* Footer */

#footer-wrapper {
overflow: hidden;
padding: 0px 0px 0px 0px;
background: #2D2722 url(images/img02.jpg) repeat-x left top;
}

#footer {
clear: both;
width: 980px;
height: 100px;
margin: 20px auto 0px auto;
font-family: Arial, Helvetica, sans-serif;
}

#footer p {
margin: 0;
padding: 30px 0px 0px 0px;
line-height: normal;
font-size: 10px;
text-transform: uppercase;
text-align: center;
color: #61544B;
}

#footer a {
color: #61544B;
}


#three-columns {
width: 900px;
margin: 0px auto 30px auto;
padding: 50px 0px 30px 0px;
}

#three-columns ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#three-columns li {
padding: 4px 0px 6px 0px;
border-bottom: 1px solid #29231F;
}

#three-columns h2 {
	padding: 0px 0px 20px 0px;
font-size: 28px;
color: #B0A792;
}

#column1 {
float: left;
width: 280px;
margin-right: 30px;
}

#column2 {
float: left;
width: 280px;
}

#column3 {
float: right;
width: 280px;
}

Marcos Xavier · Julho 8, 2011

Uma solução seria,por exemplo, na pagina moda.htm você fazer o seguinte:

<ul>
		<li ><a href="#">Home</a></li>
		<li class="current_page_item"><a href="#">Moda</a></li>
		<li><a href="#">Saúde</a></li>
		<li><a href="#">Geral</a></li>
		<li><a href="#">Eventos</a></li>
		<li><a href="#">Tecnologia</a></li>
                       <li><a href="#">Rota</a></li>
		<li><a href="#">Sobre Rodas</a></li>
		<li><a href="#">Imóveis</a></li>
		<li><a href="#">Sexo</a></li>
		<li><a href="#">Economia</a></li>

	</ul>

...e assim por diante.

PatrickPC · Julho 8, 2011

Uma solução seria,por exemplo, na pagina moda.htm você fazer o seguinte:

<ul>
		<li ><a href="#">Home</a></li>
		<li class="current_page_item"><a href="#">Moda</a></li>
		<li><a href="#">Saúde</a></li>
		<li><a href="#">Geral</a></li>
		<li><a href="#">Eventos</a></li>
		<li><a href="#">Tecnologia</a></li>
                       <li><a href="#">Rota</a></li>
		<li><a href="#">Sobre Rodas</a></li>
		<li><a href="#">Imóveis</a></li>
		<li><a href="#">Sexo</a></li>
		<li><a href="#">Economia</a></li>

	</ul>

...e assim por diante.

Bacama cara ... fui até mais além, usei imagens ...

Agora a questão do posicionamento do nome no menu que perguntei anterio, repare que o nome HOME não está no centro do retangulo vermelho.

Oque poderia ultilizar?

No aguardo

crf_h0m3r · Julho 8, 2011

#menu a {
display: block;
float: left;
height: 24px;
padding: 4px 4px 0px [b]30px[/b];

Tenta diminuir esse valor :ermm:

PatrickPC · Julho 8, 2011

#menu a {

display: block;

float: left;

height: 24px;

padding: 4px 4px 0px 30px;

Tenta diminuir esse valor :ermm:

Então,

Eu diminui anteriormente, porem o menu encurtou e os botoes-links ficaram muito pertos uns dos outros. veja: http://www.folhadevilavelha.com.br/

Preciso um pouco mais de espaço entre eles

No aguardo

crf_h0m3r · Julho 9, 2011

Tenta aumentar o margin da lista. Faz um #menu ul li {margin:0 5px;} vê se melhora.

PatrickPC · Julho 9, 2011

Tenta aumentar o margin da lista. Faz um #menu ul li {margin:0 5px;} vê se melhora.

beleza, ficou bom ...

Agora se eu precisar de usar drop down neste menu.

Como e onde modifico o css e o html da pagina?

crf_h0m3r · Julho 9, 2011

Dá uma olhada nesse artigo: http://maujor.com/tutorial/ddownmenu.php

PatrickPC · Julho 9, 2011

Dá uma olhada nesse artigo: http://maujor.com/tutorial/ddownmenu.php

Certo, partindo deste tutorial, o que posso ultilizar do meu css, e oque devo inserir???

Sendo que no menu insiro um UL no link desejado como fiz abaixo em negrito:

O que pega mais pra mim é a montagem do CSS, teria como me ajudar amigo?

<div id="menu">

	<ul>
		<li class="current_page_item"><span><a href="#">Home</a></span></li>
		<li><a href="#">Moda</a></li>
		[b]<li><a href="#">Saúde</a>
                          <ul>
                           <li><a href="#">Saúde A</a></li>
                           <li><a href="#">Saúde B</a></li>
                           <li><a href="#">Saúde C</a></li>
                          </ul> 
                       </li>[/b]
		<li><a href="#">Geral</a></li>
		<li><a href="#">Eventos</a></li>

		<li><a href="#">Tecnologia</a></li>
                       <li><a href="#">Rota</a></li>
		<li><a href="#">Sobre Rodas</a></li>
		<li><a href="#">Imóveis</a></li>
		<li><a href="#">Sexo</a></li>
		<li><a href="#">Economia</a></li>

	</ul>
</div>

crf_h0m3r · Julho 9, 2011

PatrickPC, primeiro, antes de colocar qualquer código HTML ou CSS, coloque-os entre as tags code (que tem o símbolo <>). Segundo, cara, o artigo do Majour explica desde como formatar o diagrama HTML, com os subitens e até esconder eles com CSS. E caso seu menu seja horizontal, no próprio artigo ele dá um link para uma formatação horizontal (Aqui) É só ler, estudar, sem preguiça.

Vá postando seus resultados e seus avanços. Boa sorte! ^_^

Marcos Xavier · Julho 11, 2011

Modifiquei uma parte do seu css deixando conforme abaixo, acho que é o que voce precisa.

#menu a {
display: block;
height: 24px;
padding: 4px 4px 1px 5px;
text-decoration: none;
text-transform: capitalize;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #181818;
border: none;
}

Voce vai alterar a propriedade padding

#menu a {...;	padding: 4px 4px 1px 5px;}

padding : ^ > v <; // top value,right value,down value,left value

Giovani · Julho 11, 2011

Exatamente isso, tentando e tentando mais ainda, quando surgirem dúvidas ai fala com o pessoal :)

Vá postando seus resultados e seus avanços. Boa sorte! ^_^

Esse link também pode ajudar: http://forum.imasters.com.br/topic/354140-repente-css-menus/

PatrickPC · Julho 11, 2011

PatrickPC, primeiro, antes de colocar qualquer código HTML ou CSS, coloque-os entre as tags code (que tem o símbolo <>). Segundo, cara, o artigo do Majour explica desde como formatar o diagrama HTML, com os subitens e até esconder eles com CSS. E caso seu menu seja horizontal, no próprio artigo ele dá um link para uma formatação horizontal (Aqui) É só ler, estudar, sem preguiça.

Vá postando seus resultados e seus avanços. Boa sorte! ^_^

Então,

Dei uma lida e tentei organizar o menu ok ... porem ele está desse jeito: Clique aqui

O que será que fiz de errado ou que derrepente esteje faltando???

crf_h0m3r · Julho 11, 2011

Patrick, dando uma olhada no código-fonte do site, na parte do HTML, o menu, está construído de maneira incorreta. Vamos à elas:

(...)
<div id="menu">
<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Moda</a>
      <ul>
 	<li><a href="#">Desfiles</a></li>
 	<li><a href="#">Tendências</a></li>
 	<li><a href="#">Modelos</a></li>
      </ul>
</li>
	<li><a href="#">Saúde</a></li>
	<li><a href="#">Geral</a></li>
	(...)

</ul>
</div>
(...)

No começo podemos ver que você fechou uma lista </li> mas não abriu ela, ou se abriu, a mesma está 'duas vezes' fechada.

Nessa parte: <li><a href="#">Modelos</a></li></ul></li> (Abre LI/Abre A/Nome/Fecha A/Fecha LI/Fecha UL/Fecha LI :!: )

Talvez isso possa estar causando o seu erro. ^_^

PatrickPC · Julho 11, 2011

Então, acho que o menu está OK, acompanhe:

<div id="menu">
	<ul>
		<li class="current_page_item"><span><a href="#">Home</a></span></li>
		[b]<li>[/b]<a href="#">Moda</a>
                           <ul>
                              <li><a href="#">Desfiles</a></li>
                              <li><a href="#">Tendências</a></li>
                              <li><a href="#">Modelos</a></li>
                           </ul>
                       [b]</li>[/b]
		<li><a href="#">Saúde</a></li>
		<li><a href="#">Geral</a></li>
		<li><a href="#">Eventos</a></li>
		<li><a href="#">Tecnologia</a></li>
           <li><a href="#">Rota</a></li>
		<li><a href="#">Sobre Rodas</a></li>
		<li><a href="#">Imóveis</a></li>
		<li><a href="#">Sexo</a></li>
		<li><a href="#">Economia</a></li>
	</ul>
</div>

A Li que abre no botão moda, está sendo fechada la em baixo após o </ul>. Coloquei a Li em negrito.

Link do site: Clique aqui

crf_h0m3r · Julho 12, 2011

Cara, fiz um exemplo pra ti com JQuery, estude ele e implemente no seu código:

HTML

<div id="menu">
       <ul id="navbar">
               <li><a href="#">Home</a></li>
               <li><a href="#">Moda</a>
             <ul>
               <li><a href="#">Desfiles</a></li>
               <li><a href="#">Tendências</a></li>
               <li><a href="#">Modelos</a></li>
             </ul>
       		</li>
               <li><a href="#">Saúde</a></li>
               <li><a href="#">Geral</a></li>
       </ul>
</div>

CSS

#menu a {padding:20px;}
ul li {text-decoration:none; list-style:none;}
ul#navbar ul li {font-size:12px; margin:0; padding:0;}
ul#navbar li ul li {width:100px; padding:10px;}
ul#navbar li {float:left; position:relative;}
ul#navbar li ul {margin:0; position:absolute; display:none; background:#BABABA;}
ul#navbar li li {padding:0;}
ul#navbar li li:hover {background:#939393;}

JQuery

$(document).ready(function(){
$("ul#navbar li").hover(function(){
	$(this).children(":hidden").fadeIn();
},function(){
	$(this).parent().find("ul").fadeOut();
});
});

Na animação fadeIn() e fadeOut(), pode ser trocada por slideDown() e slideUp(), respectivamente

PatrickPC · Julho 12, 2011

[quote name='crf_h

No Forum tem algo sobre jQuery?

Excecutei oq mandou e deu erro

crf_h0m3r · Julho 12, 2011

Qual foi o erro?

Ah, pode ver o fórum de Javascript http://forum.imasters.com.br/forum/6-javascript-dhtml/

Arquivado

Ajustes no menu

Recommended Posts

PatrickPC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

crf_h0m3r 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

PatrickPC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Xavier 189

Compartilhar este post

Link para o post

Compartilhar em outros sites

PatrickPC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

crf_h0m3r 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

PatrickPC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

crf_h0m3r 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

PatrickPC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

crf_h0m3r 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

PatrickPC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

crf_h0m3r 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Xavier 189

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

PatrickPC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

crf_h0m3r 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

PatrickPC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

crf_h0m3r 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

PatrickPC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

crf_h0m3r 5