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!