[SOLUCIONADO] Pido Una Mano Con Esto

#1 (**permalink**) 10/04/2015, 06:34

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

AngelKrak · #2 (**permalink**) 10/04/2015, 06:56

amigo pon el codigo completo con imagenes o subelo en rar para poder ver lo que llevas y de k son las imagenes mencionadas en CSS >_<

o si tienes la web subida pasa link ;)

#3 (**permalink**) 10/04/2015, 07:55

Si ahi mando el link de deacarga de lo que pido, las imagenes las voy cogiendo de la imagen principal, solo para comprobar como queda, dejo el link para descargar http://adfsl.tk/x.rar

pzin · #4 (**permalink**) 10/04/2015, 09:20

Angel tiene la extraña manía de pedir archivos comprimidos, pero no es desde luego ese el funcionamiento del foro. El código, si se queda en el foro, mejor que mejor, así le puede valer a otra gente.

Respecto al problema no entiendo muy bien qué pides. ¿Hacer la estructura del menú? Eso lo haces con una lista, no tiene mayor misterio. Luego ya ajustas colores y demás. ¿Qué es lo que no sabes hacer?

superweb360 · #5 (**permalink**) 10/04/2015, 09:48

en esta web tienes bastantes menus que hacen lo que pides

http://exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns

#6 (**permalink**) 10/04/2015, 10:36

A ver.... solo es la estructura, es decir..... ponerme los div en sus posiciones.... por lo demas ya me encargo yo, necesito que los div se vean como en la foto principal, y como ves en mi codigo, se ve uno encima de otro, en fin tampoco es tan dificil lo que pido, mi intencion es diseñar algo parecido a la foto que he puesto arriba, yo no se ni me aclaro con las posiciones de los div por eso estoy pidiendo ayuda de alguien que sepa bastante de css que me lo haga sol eso, lo del posicionamiento con sus medidas para que se vea bien, despues yo colocare dentro del div de la fotom pues su foto despues en el texto que me pongais, cambiare yo el nombre del nick etc... y sobre los colores y fondo de los div, pues ya los colocaria yo "para que no me hagan el trabajo completo".

#7 (**permalink**) 10/04/2015, 10:41

Sobre lo de poner los archivos en un zip comprimido no me importa, ademas si a alguien le sirve, mejor que mejor..... es una ayuda, auqnue debera de saber de css porque como comprobara, jeje yo aun no lo controlo muy bien, soy mas de programacion php + mysql

AngelKrak · #8 (**permalink**) 10/04/2015, 11:40

@pzin nose pero siempre me gusta pedirlos para asi hacer yo las propias pruebas y mostrar que funcionan y no dar codigos solo que se me ocurren pero k no servirian jejeje >_<

pueden hacerlo de 2 formas...

1.- Codigo completo de tu proyecto aki en el foro.
2.- Archivos completos en .rar o Url de Pagina Web

#9 (**permalink**) 10/04/2015, 15:03

Muchas Gracias por la ayuda !!! Cierro el post.

NueveReinas · #10 (**permalink**) 10/04/2015, 16:40

¿Cómo lo resolviste?