Crear con html + css apartir de un diseño

efrencitopool · #1 (**permalink**) 05/12/2011, 03:46

Hola, tengo el siguiente diseño "cutre", espero que se entienda..

Estoy intentado separar el Logotipo del menu, pero no hay manera.. ¿alguna ayuda o pistas para poder hacerlo? Se agradece cualquier ayuda, gracias!

Saludos!~~

PedroDesing · #2 (**permalink**) 05/12/2011, 03:52

Hola, pues necesitas un <div> contenedor, con el ancho que tu elijas (por ejemplo, 960px).

Una vez hecho esto, colocas tu img con el logotipo con un float:left y el div que contiene el menu, con un float:right. De esta forma el logotipo se ajustará al margen izquierdo del contenedor y el menu al derecho.

el margen de separación entre el logotipo y el menu será el siguiente:

margen = (ancho_logotipo + ancho_menu) - ancho_del_contenedor

Saludos

efrencitopool · #3 (**permalink**) 05/12/2011, 05:08

Lo tengo de está manera y me sale mal..

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejercicio 1</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>

<body>

<div id=estructura>

<div id=contenedor>
<img src="logo.jpg" width="300" height="200" />
<div id="leftNav">
<div>Mi menu vertical</div>
<ul>
<li ><a href="#">Contenido 1</a></li>
<li><a href="#">Contenido 2</a></li>
<li><a href="#">Contenido 3</a></li>
<li ><a href="#">Contenido 4</a></li>
<li><a href="#">Contenido 5</a></li>
<li><a href="#">Contenido 6</a></li>
<li><a href="#">Contenido 7</a></li>
<li style="border-bottom:none;"><a href="#">Contenido 8</a></li>
</ul>
</div>
</div>
</div>
</div>

<div id=separador>
Separador
</div>

</div>

</body>
</html>

---> CS.CSS <----

Cita:

div#contenedor {
background-color: blue;
display: table-cell;
padding: 5px;
width: 200px;
margin-right: 300px;
}

#leftNav {float: right; width: 231px; border: 1px solid #c9c9c7; margin-bottom: 10px; font-family:Geneva, Arial, Helvetica, sans-serif;}
#leftNav .header{float:left; width:231px; height:20px; padding-top:4px; background:url(Images/leftMenu-header-bg.gif) repeat-x; text-align:center; color:#344f6f; font-size:13px; font-weight:bold; border-bottom:1px solid #a7b4c3;}
#leftNav ul{margin:0px; padding:0px; width:231px;}
#leftNav ul li{margin:0px; padding:0px; font-size:11px; height:24px; width:231px; color:#364e70; border-bottom:1px solid #a7b4c3; float:left; list-style-type:none;background:#cad2df; border-top:1px solid #dbe3ec;}
#leftNav ul li a{ text-decoration:none;padding-top:5px; height:19px; width:226px; text-indent:14px; background:#cad2df; color:#364e70; list-style-type:none; position:absolute;border-left:5px solid #828fa6;}
#leftNav ul li a:hover{text-decoration:underline; font-weight:bold; padding-top:5px; height:19px; width:226px; background:#394a63; color:#cad2df; border-left:5px solid #1c3552;}

div#contenedor img{
float:left;
}

div#separador {
background-color: orange;
margin-left: 10px;
margin-right: 10px;
padding: 5px;
}

¿te sabe mal decirme como lo harías tu? Es que me sale de la siguiente manera y el menú lo he pillado de una web es cutre.. ¿me recomiendas alguno?

Saludos~~