Hola amigos tengo la siguiente estructurta de página os la defino y dejo código:
Primero hay una caja con un margen desde el ancho de la pagina, luego un menú horizontal con una separación vertical de la caja y el mismo margen desde el ancho de la página, despues otra caja con una pequeña separacion lateral del final del menú y vertical, al final un pie de página.
Desde ya gracias.
Dejo código:
Código:
* {
margin:0; padding:0;
}
#general
{
width:800px;
}
#cabezera
{
margin-left:55px;
width:400px;
height:250px;
border:3px solid #333333;
background-color: #FF0000;
text-align:left;
}
#nav
{
list-style-type: none;
text-align: center;
}
#nav li
{
height:50px;
width: 70px;
text-align:center;
margin: 8px;
border: 1px solid #333333;
padding: 0px 0px 0px 0px;
float:left;
border-radius: 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
/*prueba foro*/
#nav li a
{
display: block;
width:100%;
padding: 20px 0;
text-decoration: none;
font-family: Verdana;
font-size: 13px;
color: #00FF66;
}
#nav li:hover
{
background-color: #c3c3c3;
}
/*cuerpo de la pagina*/
#cajon
{
width:90px;
height:100px;
margin-top:70px;
background-color: #FF33FF;
}
/*pie de pagina*/
#pie
{
margin: 100px;
margin-left:500px;
background-color: #33CCFF;
height:60px;
width:900px;
}
Código HTML:
<body>
<!--contenedor general -->
<div id="general">
<!--cabezera -->
<div id="cabezera"></div>
<!--menu principal debajo cabezera -->
<div id="conme">
<ul id="nav">
<li><a href="">perros</a></li>
<li><a href="">razas</a></li>
<li><a href="">cuidados</a></li>
<li><a href="">adiestramientos</a></li>
<li><a href="">articulos</a></li>
</ul>
</div>
<!--cuerpo -->
<div id="cajon"></div>
<!--pie -->
<div id="pie">
</div>
</div>
</body>
</html>