Jump to content

Alinhar Navigation Menu


LN10
 Share

Recommended Posts

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:image.jpg

Link to comment
Share on other sites

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;
}
Link to comment
Share on other sites

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 by yoda
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.