Alinhar Navigation Menu

LN10 · April 26, 2013 at 12:49 PM

Boa Tarde,

Estou a construir um site em C#, .NET Framework 4.0 e tenho um NavigationMenu.

Gostaria de saber como posso alinha-lo no centro da página.

Algo do genero Align="Center"

NavigationMenu:

yoda · April 26, 2013 at 03:35 PM

Se o menu tiver dimensões fixas (pixels) :

#menu {
   clear: both;
   margin: 0 auto;
}

LN10 · April 26, 2013 at 06:18 PM

Yoda, obrigado pela ajuda, só que sou um pouco noob e ainda estou a aprender, só que ao por o codigo, ele nao faz nada.

Vou-te enviar o css, para ver onde tenho de por:

CSS
/* DEFAULTS
----------------------------------------------------------*/
body  
{
   background: #b6b7bc;
   font-size: .80em;
   font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
   margin: 0px;
   padding: 0px;
   color: #696969;
}
a:link, a:visited
{
   color: #034af3;
}
a:hover
{
   color: #1d60ff;
   text-decoration: none;
}
a:active
{
   color: #034af3;
}
p
{
   margin-bottom: 10px;
   line-height: 1.6em;
}

/* HEADINGS  
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
   font-size: 1.5em;
   color: #666666;
   font-variant: small-caps;
   text-transform: none;
   font-weight: 200;
   margin-bottom: 0px;
}
h1
{
   font-size: 1.6em;
   padding-bottom: 0px;
   margin-bottom: 0px;
}
h2
{
   font-size: 1.5em;
   font-weight: 600;
}
h3
{
   font-size: 1.2em;
}
h4
{
   font-size: 1.1em;
}
h5, h6
{
   font-size: 1em;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
   margin-top: 0px;
}

/* PRIMARY LAYOUT ELEMENTS  
----------------------------------------------------------*/
.page
{
   width: 960px;
   background-color: #fff;
   margin: 20px auto 0px auto;
   border: 1px solid #496077;
}
.header
{
   position: relative;
   margin: 0px;
   padding: 0px;
   background: #4b6c9e;
   width: 100%;
}
.header h1
{
   font-weight: 700;
   margin: 0px;
   padding: 0px 0px 0px 20px;
   color: #f9f9f9;
   border: none;
   line-height: 2em;
   font-size: 2em;
}
.main
{
   padding: 0px 12px;
   margin: 12px 8px 8px 8px;
   min-height: 420px;
}
.leftCol
{
   padding: 6px 0px;
   margin: 12px 8px 8px 8px;
   width: 200px;
   min-height: 200px;
}
.footer
{
   color: #4e5766;
   padding: 8px 0px 0px 0px;
   margin: 0px auto;
   text-align: center;
   line-height: normal;
}

/* TAB MENU  
----------------------------------------------------------*/
div.hideSkiplink
{
   background-color:#FFFFFF;
   width:100%;
}
div.menu
{
   padding: 4px 0px 4px 8px;
}
div.menu ul
{
   list-style: none;
   margin: 0px;
   padding: 0px;
   width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
   background-color: #465c71;
   border: 1px #4e667d solid;
   color: #dde4ec;
   display: block;
   line-height: 1.35em;
   padding: 4px 20px;
   text-decoration: none;
   white-space: nowrap;
}
div.menu ul li a:hover
{
   background-color: #bfcbd6;
   color: #465c71;
   text-decoration: none;
}
div.menu ul li a:active
{
   background-color: #465c71;
   color: #cfdbe6;
   text-decoration: none;
}
/* MISC 
----------------------------------------------------------*/
.clear
{
   clear: both;
}
.title
{
   display: block;
   float: left;
   text-align: left;
   width: auto;
}

yoda · April 26, 2013 at 06:58 PM

Tens de usar o clear e margin na classe / ID que identifica o teu menu. Vê no html qual é a classe / ID respectivo.

LN10 · April 29, 2013 at 04:27 PM

Yoda, estive a pesquisar e experimentar e sou sincero.

Não consigo por isto a centrar.

Já procurei a classe /ID e diz que é "menu", mas não faz nada ao por os dados que me deste. Até mudei valores.

Sei que é uma maçada, mas será que me poderias corrigir o erro?

HTML
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" BackColor="White" EnableViewState="false"
			 IncludeStyleBlock="false" Orientation="Horizontal">
			 <Items>
				 <asp:MenuItem NavigateUrl="~/Inicio.aspx" Text="Início" Value="Início" />
				 <asp:MenuItem NavigateUrl="~/Historia.aspx" Text="História" Value="Historia" />
				 <asp:MenuItem Text="Eventos" Value="Eventos" NavigateUrl="~/Eventos.aspx"></asp:MenuItem>
				 <asp:MenuItem Text="Eventos Futuros" Value="Eventos Futuros" NavigateUrl="~/Ev_Fut.aspx">
				 </asp:MenuItem>
				 <asp:MenuItem Text="Repertório" Value="Repertório" NavigateUrl="~/Repertorio.aspx">
				 </asp:MenuItem>
				 <asp:MenuItem Text="Galeria" Value="Galeria" NavigateUrl="~/Galeria.aspx"></asp:MenuItem>
				 <asp:MenuItem Text="Contactos" Value="Contactos" NavigateUrl="~/Contactos.aspx">
				 </asp:MenuItem>
				 <asp:MenuItem NavigateUrl="~/AR.aspx" Text="Área Reservada" Value="Área Reservada">
				 </asp:MenuItem>
			 </Items>
		 </asp:Menu>
CSS
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}

/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}

/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}

/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:#FFFFFF;
width:100%;
}
div.menu
{
padding: 4px 0px 4px 8px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.title
{
display: block;
float: left;
text-align: left;
width: auto;
}

Edited April 29, 2013 at 06:17 PM by yoda

HappyHippyHippo · April 29, 2013 at 04:28 PM

disponibiliza um link para o site para ser possível verificar o que se está a passar

LN10 · April 29, 2013 at 05:02 PM

disponibiliza um link para o site para ser possível verificar o que se está a passar

Happy, aqui tens o projeto (informações foram removidas por motivos de segurança): https://www.dropbox.com/s/e86vm6ita0lrt6x/Site_Coro%20%28pap%29.rar

yoda · April 29, 2013 at 06:17 PM

Não o consegues colocar online, nem que seja num servidor grátis?

LN10 · April 29, 2013 at 06:19 PM

Yoda, não consigo, porque ainda não tenho o servidor grátis

Eu uso um servidor local (localhost) no pc

Sign In

Alinhar Navigation Menu

Recommended Posts

LN10

yoda

LN10

yoda

LN10

HappyHippyHippo

LN10

yoda

LN10

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information