[Resolvido] Alinhar Menu no Canto Direto da Tela

[paulo_roll 0]

Boa tarde, pessoal.

 

Deixar o menu alinhado no rodapé no canto esquerdo foi moleza. Agora

alinhar no canto direito do Header está dando trabalho, erro com resoluções diferentes.

Gostaria de deixar correto em todos os navegadores e resoluções.

 

Estou usando o Grid 960 CSS. O Logo eu deixei no canto esquerdo usando posição absoluta.

O MenuLink, gostaria de saber as propriedades para ficar no canto direito do "container_12"

que tem 960px de width. Float: right não está indo.

 

<div id="Header">
       	<div class="container_12">

                   <div class="logo">
           		    <img src="img/logotipo.png" alt="Logotipo" />
                   </div>

              	    <div id='MenuLink' class="menuHeader">
           		    <ul>
                   	        <li><a class="menuItem" href="index.html">Página Inicial</a></li>
               	        <li><a class="menuItem" href="sobre.html">Sobre</a></li>
                   	        <li><a class="menuItemLast" href="contato.html">Contato</a></li>
               	    </ul>
 		    </div>

                   <div id="Slideshow">
                       <div class="grid_12">
                           <div class="border">

                               <div id="example_1_container" class="easy_slides_container"></div> 

                           </div>
                       </div>
      		    </div><!--FIM DO SLIDESHOW-->

       	</div><!--FIM DO CONTAINER-->
       </div><!--FIM DO HEADER-->

 

 

.logo {
position: absolute; 
top:20px;
}

#Header {
background: url(../img/bg_header.jpg);
height: 520px;
}

#MenuLink {
position: absolute;
top: 50px;
left: 885px;
}

.menuHeader ul{
	margin: 0; 
	padding: 0;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
}

.menuHeader ul li{
	display: inline;
}

.menuHeader ul li a{
	float: left; 
	text-decoration: none;
	color: #FFFFFF;
	padding-right: 11px; 
}

.menuHeader ul li a:hover{
	float: left; 
	text-decoration: underline;
	color: #E0835A;
	padding-right: 11px; 
}

.menuItem {
	border-right: 1px solid #FFFFFF;
	padding-left: 10px; 
}

.menuItemLast{
	padding-left: 10px;
}

#Slideshow{
position:absolute;
top: 70px;
}

[NetBoy16 72]

Talvez você deva mudar deixando assim:

 

#MenuLink {

position: absolute;

top: 50px;

left: 885px;

float:right

}

 

Caso nao de certo, tente com margin-left.

[paulo_roll 0]

Consegui resolvendo assim no xhtml.

 

<div class="logo grid_3">

 

e o outro

 

<div id='MenuLink' class="menuHeader grid_8 push_5">

 

o prórpio framework se encarrega de posicionar, bastando colocar as classes.

960.gs recomendado!

 

Obrigado pela dica acima também.