Foros del Web » Creando para Internet » CSS »

Crear con html + css apartir de un diseño

Estas en el tema de Crear con html + css apartir de un diseño en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/12/2011, 03:46
 
Fecha de Ingreso: diciembre-2011
Mensajes: 20
Antigüedad: 10 años, 8 meses
Puntos: 0
Crear con html + css apartir de un diseño

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!~~
  #2 (permalink)  
Antiguo 05/12/2011, 03:52
Avatar de PedroDesing  
Fecha de Ingreso: octubre-2007
Ubicación: Barcelona, España
Mensajes: 202
Antigüedad: 14 años, 9 meses
Puntos: 18
Respuesta: Crear con html + css apartir de un diseño

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
__________________
pedrorodas.com próximamente! Permanezcan atentos
  #3 (permalink)  
Antiguo 05/12/2011, 05:08
 
Fecha de Ingreso: diciembre-2011
Mensajes: 20
Antigüedad: 10 años, 8 meses
Puntos: 0
Respuesta: Crear con html + css apartir de un diseño

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~~

Etiquetas: diseño, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:45.