Bueno amigos le he estado dando duro a ello y he logrado hacer lo siguiente pero no muy bien:
boceto:
codigo html5
Código HTML:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="#"/>
<title>Nombre de la pagina</title>
<link href="css/estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">boton1</a> </li>
<li><a href="#">boton2</a> </li>
<li><a href="#">boton3</a></li>
<li><a href="#">boton4 </a></li>
</ul>
</nav>
<div id="centrar">
<IMG SRC="imagen.png" WIDTH=# HEIGHT=# ALT="Nombre de imagen">
</div>
<h1>
<a href="#" title="nombre"><img class="fade" title="Nombre" alt="Nombre" src="img/logo.png"/></a>
</h1>
</header>
<footer>
<p><strong>Contacto</strong></p>
<p>CLL 42 No. 14 - 33 Centro</p>
<p>Tel y celular</p>
<p>pais </p>
</footer>
</body>
</html> y el ccs
Código HTML:
@charset "utf-8";
/* CSS Document */
*{
margin: 0;
padding: 0;
}
a{
color:#FFF;
text-decoration: none;
}
a:hover{
color: #EFEFEF;
}
body {
background-color: #FFF;
color: #000;
font-family:Arial, Helvetica, sans-serif;
font-size: 1em;
}
nav ul{
text-align: center;
background: -webkit-linear-gradient(#004B75, #2A7CA0);
background: -moz-linear-gradient(#004B75, #2A7CA0);
background: -o-linear-gradient(#004B75, #2A7CA0);
background: linear-gradient(#004B75, #2A7CA0);
margin: 40px auto;
padding: 2px;
vertical-align: middle;
}
nav ul{
list-style: none;
}
nav li{
display:inline-block;
padding:0.1em;
vertical-align: top;
}
nav a {
display:block;
padding: 15px;
}
h1{
text-align: left;
font-size:12px;
margin: auto;
padding: 280px 20px 20px 20px;
text-align: left;
}
footer{
text-align: right;
font-size:14px;
margin: auto;
padding: 280px 20px 20px 20px;
text-align: right;
}
#centrar{
text-align: center;
}
1) el primer problema que tengo es que la barra de la botonera me sale de lado a lado y no se como cuadrar para que tenga una medida como la del boceto.
2) el segundo problema es que el footer y el h1 no se me alinian como en el boceto...cuando cuadro el padding no me queda en la misma linea, sino el logo debajo de la imagen y el contacto debajo a mano derecha del logo, asi le deje en ceros el padding...que hago o como hago pa cuadrar eso?
soy novato!
muchas gracias