Alinear menu vertical

mcziel · #1 (**permalink**) 13/05/2012, 01:06

Como alinear este menu vertical para que quede al lado del contenido, osea de donde se postean las noticias?...

Este es el codigo css.

Cita:

body {
background-color:#c0c0c0;
}
*{
margin:0;
padding:0;
}
#cabecera{
background-color:#8F8FBD;
font-family:"Comic Sans";
font-size:20px;
text-align:center;
color:white;
margin-bottom:15px;
}
#menu ul {
margin:0 auto;
width:50%

}
#menu li{
display:inline;

}
#menu li a{
text-decoration:none;
font-size:15px;
font-family:"Comic Sans";
padding:10px;
background-color:#8F8FBD;
color:white;
}
#menu li a:hover{
background-color:#E47833;
}
#menuderecha ul{
padding-left:75%;
}
#menuderecha li a{
text-decoration:none;
margin:0 auto;
padding:0 auto;
width:200px;
font-family:"Times New Roman";
font-size:15px;
background-color:#8F8FBD;
color:white;
}
#menuderecha li a{
display:block;
padding: 10px 10px 10px 20px;
}
#menuderecha *{
margin: 10px 50px 10px 50;
}
#menuderecha li a:hover{
background-color:#E47833;
}
#contenido{
width:80%;
background-color: #CFB53B;
color:white;
margin: 0 auto 0 auto 150px;
margin-top:15px;
}
#contenido h2{
text-align:center;
font-family:Arial;
}
#contenido p{
font-family:Verdana;
margin-left:24px;
}

#pie{
background-color:#8F8FBD;
font-family:"Comic Sanas";
font-size:15px;
text-align:center;
color:white;
}

Este es el HTML

Cita:

Código HTML:

Ver original<html>
<head><link rel="stylesheet" type="text/css" href="css.css"><title></title></head>
<body>
<div id="cabecera">
<h1>Los 60 O&M</h1>
<p>Aqui el slogan</p>
</div>
<div id="menu">
<ul>
<li><a href="">Tutoriales</a></li>
<li><a href="">Sobre Nosotros</a></li>
<li><a href="">Contactos</a></li>
<li><a href="">Almacen de Tareas</a></li>
</ul>
</div>
<div id="menuderecha">
<ul>
<li><a href="">Tutoriales</a></li>
<li><a href="">Contactos</a></li>
<li><a href="">Sobre Nosotros</a></li>
<li><a href="">Descargas</a></li>
</ul>
</div>
<div id="contenido">
<h2>Titulo de la noticia o del contenido</h2>
<p>Nuestro amigo Oscar Gómez ha compartido una serie de videoTutoriales de Jquery con nosotros.Pueden ver su trabao en su blog www.oscar-gomez.net. 
 Hola a todos les traigo el videotutorial 12 del curso de jquery. En este video tutorial empezamos el trabajo con ajax utilizando la librería jquery, una de las manera de usar ajax más sencillas que hay, con solo unas líneas de código ya estamos haciendo uso de este método de trabajo, veremos los parámetros mínimos que recibe este método, cargaremos en un div un contenido html q recibimos desde el servidor, empezamos con el dataType "html" en el siguiente video veremos el dataType "json".</p>
<br><h2>Titulo de la noticia o del contenido</h2>
<p>Nuestro amigo Oscar Gómez ha compartido una serie de videoTutoriales de Jquery con nosotros.Pueden ver su trabao en su blog www.oscar-gomez.net. 
 Hola a todos les traigo el videotutorial 12 del curso de jquery. En este video tutorial empezamos el trabajo con ajax utilizando la librería jquery, una de las manera de usar ajax más sencillas que hay, con solo unas líneas de código ya estamos haciendo uso de este método de trabajo, veremos los parámetros mínimos que recibe este método, cargaremos en un div un contenido html q recibimos desde el servidor, empezamos con el dataType "html" en el siguiente video veremos el dataType "json".</p>
 </div>
<div id="pie">
<b>Andres Lora</b> <br>
<p>Todos los Derechos Reservados</p>
</div>
</body>
</html>

luna690 · #2 (**permalink**) 14/05/2012, 04:01

Hola!!

No se si ya lo habrás resuelto pero aqui tienes:

Pon éstas dos líneas :
#menuderecha { float:right;}
#menuderecha li {list-style:none; }

Y saca ésta :
#menuderecha ul{ padding-left:75%; }

mcziel · #3 (**permalink**) 16/05/2012, 00:55

Muchisisisimas gracias man, me funciono a la perfeccion y le agregue un margin-top:15px; para bajarlo un poco. De verdad gracias :D