Buenos Dias !!!
Abri un post ya con esto pero no puedo re-abrirlo, y he creado este.
Estoy buscando hacer esto mismo en css:
https://d13yacurqjgara.cloudfront.ne.../dashboard.jpg
Solo pido lo que es el esquema o estructura, ya que me lio con las posiciones y todo eso. Aqui dejo el codigo completo que tengo, pero como veras no esta bien echo, necesito que alguien me lo deje bien los div, repito, solo el esqueleto, nada de colores ni fondos ni que me hagan el trabajo, dejo el codigo:
Código HTML:
<!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>Documento sin título</title>
<style type="text/css">
* { margin:0; padding:0; }
body{ background-color:#FFF; }
#wrap{
width: 100%;
height:100%;
position:absolute;
}
#sections{
width: 20%;
float:left;
}
.avaname{
background-image:url(bg-avaname.png);
background-repeat:repeat-x;
border-right: 1px solid #000;
border-bottom: 2px solid #000;
position:absolute;
padding: 5px;
width: 20%;
}
.avatar{
float:left;
margin-right:2px;
}
.name{
float:left;
margin-left:4px;
margin-top:10px;
font-weight:bold;
font-size:12px;
color:#FFF;
}
.ilogout{ float:right; border: 1px solid #000; margin:2px; }
.links{
background-image:url(bg-sections.png);
background-repeat:repeat-x;
position:relative;
}
#page{
width: 79.2%;
float:right;
}
.positions{
border-bottom: 2px solid #000;
height: 46px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="sections">
<div class="avaname">
<div class="avatar"><img src="avatar.png" width="35" height="35" /></div>
<div class="name">Nombre Usuario</div>
<div class="ilogout"><a href="#"><img src="logout.png" width="30" height="30" /></a></div>
</div>
<div class="links">Links Ul Li</div>
</div>
<div id="page">
<div class="positions">Position</div>
<div class="content">Content</div>
</div>
</div>
</body>
</html> Un Saludo y Gracias por adelantado !!!