Problemas con el titulo y el menu

elmiiiing · #1 (**permalink**) 04/09/2013, 13:58

Hola, estoy empezando en esto del Html y Css. Hoy estoy intentando hacer una web desde cero y voy super perdido pero bueno entre los foros, video y artículos que circulas por la red espero poder aprender poco a poco jeje.

El tema es que hoy llevo todo el dia buscando la solución al dichoso header, lo que quiero hacer es poner el titulo de la pagina a la izquierda y el menú a la derecha, también me gustaría que quedasen centrados verticalmente.

Aquí os dejo una captura de como lo tengo ahora, no consigo poner el menu a la derecha sin que se me descentre todo.

Tambien hos dejo el HTML y CSS

HTML

Código:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title>Hola Mundo!</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        
    </head>
    <body>
        <div id="container">
            <div id="menu">
                <h1 class="logo"><a href="#">NOVATOWEB</a></h1>
                <ul>
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">ABOUT</a></li>
                    <li><a href="#">WORKS</a></li>
                    <li><a href="#">CONTACT</a></li>
                </ul>
            </div> <!--menu-->
        </div><!--container-->
    </body>
</html>

CSS

Código:

*{
    margin: 0;
    padding: 0;
    font-family: helvetica, arial, sans-serif;
}

body{
    background-color: #2A363B;
}

#container{
    margin: 0 auto;
    width: 1140px;
}

#container #menu ul, .logo{
    display: inline-block;
}

#menu{
    background-color: #E84A5F;
    display: block;
}

#menu ul{
    margin-left: 1000px;
    margin: 0;
    padding: 0;
}

#menu ul li{
    list-style: none;
    display: inline-block;
    padding: 40px 10px;
    margin-left: -25px
}

#menu ul li a{
    color: #fff;
    text-decoration: none;
    padding: 40px 10px;
    font-size: 1,5em;
}

#menu ul li a:hover{
    background-color: #FECEA8;

}

.logo a{
    text-align: left;
    color: #fff;
    font-size:1,8em;
    background-color: #E84A5F;
    text-decoration: none
}

El empastre que habrá ahi metido... jajaj

Espero vuestra ayuda, gracias!

pzin · #2 (**permalink**) 04/09/2013, 14:08

Sólo tendrías que flotar la lista hacia la derecha:

Código CSS:

Ver originaldiv#menu ul {
  float: right;
}

codeams · #3 (**permalink**) 04/09/2013, 17:37

Para el centrado vertical:

Código CSS:

Ver original#menu{
      margin:0 auto; /* Con esto tendrás el centrado horizontal de #menu */
      display: table;
}
#menu ul{
     display: table-cell;
     vertical-align: middle;
}

Espero sea de ayuda, saludos.

ArturoGallegos · #4 (**permalink**) 04/09/2013, 20:58

display:table para centrar en vertical? y no es mas sencillo utilizar line-height para igualar la altura entre el titulo y la lista?

veo como mejor practica alinearlos con line-height, ya que ambos son textos.... si fuera una imagen de logo y el menú optaría por usar margenes y padding para alinearlos.