Ejemplo practico, creación de espacio USER

**Hectorsito20** · 21-dic-2011

Hola que tal Intercambiosos, en esta ocación le muestro como hacer lo que es el espacio de los user en el foro, más bien se podría llamar espacio de mensajes de los usurios, como poder doctar y ponernos creativos a la hora de hacer cosas que nos inspiren... sin más preambulos al tutorial...

Código html
<style type="text/css">
#contenedor{
width:1024px;
height:100px;
background: rgba(204,204,204,0.6);
border: dashed 1px #333333;
padding:7px;
margin: auto;
}
#contenedor a{
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:13px;
float:right;
margin:0;
padding:56px 0 0 0;
color:#CC0000 !important;
}
.hola{
background: rgba(204,204,204,1);
border-top: solid 1px rgba(153,0,0,1);
width: 900px;
height: 30px;
padding:0 10px 0 0;
float: right;
}
.hola .nombre{
margin:0px;
line-height:30px;
padding: 0 0 0 8px;
color: rgba(255,153,51,1);
font-weight:bold;
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
float:left;
text-align:left;
display:block;
}
.hola .tiempo{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#000;
font-weight:normal;
text-align:right;
display:block;
margin:0px;
float:right;
padding:0 5px 0 0;
line-height:30px;
}
#avatar{
width:100px;
height:90px;
background: rgba(204,0,51,1);
margin:0px;
padding:0px;
float:left;
color:white;
border: solid 2px white;
}
#avatar .pAvatar{
-webkit-transform:rotate(-37deg);
-o-transform:rotate(-37deg);
-moztransform:rotate(-37deg);
transform:rotate(-37deg);
font-family:Tahoma, Geneva, sans-serif;
font-weight:bold;
font-size:13px;
padding: 20px 0 0 0px;
text-shadow: 0 0 20px #FFFFFF, 0 0 30px #FFFFFF, 0 0 10px #FFFFFF, 0 0 45px #FFFFFF;
}
.hola p{
color:#222;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin-top:35px;
}
</style>

Código html
<body>
<div id="contenedor">
<div id="avatar"><p class="pAvatar">Hectorsito20</p></div>
<div class="hola">
<span class="nombre">Hectorsito20</span><span class="tiempo">Hace 7 Minuto</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas at leo eget nisl porta viverra. Ut laoreet, dui at tempus vestibulum, eros leo egestas neque, id adipiscing odio eros et lectus. Vivamus pretium lorem sit amet nulla. Praesent nec dolor at augue ultrices blandit. Quisque aliquet ultrices mi. Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada.
</p>
</div>
<a href="#">Informar</a>
</div>
</body>

Resultado final!

baduser · 21-dic-2011

**Hunted** · 21-dic-2011

**VJEVans** · 21-dic-2011

Exelente .. gracias Hector

**cramercaba** · 22-dic-2011

**Eloy58** · 22-dic-2011

**Cat** · 25-dic-2011

Se ve util, gracias por la data.
Salu2.

21-dic-2011	#1
Hectorsito20 Desarrollador HTML5 & CSS3 Ingreso: octubre-2011 Ubicación: Republica Dominicana, Punta Cana Bávaro Mensajes: 157 Sexo: País: Signo: Agradecido: +445	Ejemplo practico, creación de espacio USER Hola que tal Intercambiosos, en esta ocación le muestro como hacer lo que es el espacio de los user en el foro, más bien se podría llamar espacio de mensajes de los usurios, como poder doctar y ponernos creativos a la hora de hacer cosas que nos inspiren... sin más preambulos al tutorial... Código html <style type="text/css"> #contenedor{ width:1024px; height:100px; background: rgba(204,204,204,0.6); border: dashed 1px #333333; padding:7px; margin: auto; } #contenedor a{ text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size:13px; float:right; margin:0; padding:56px 0 0 0; color:#CC0000 !important; } .hola{ background: rgba(204,204,204,1); border-top: solid 1px rgba(153,0,0,1); width: 900px; height: 30px; padding:0 10px 0 0; float: right; } .hola .nombre{ margin:0px; line-height:30px; padding: 0 0 0 8px; color: rgba(255,153,51,1); font-weight:bold; font-family:Tahoma, Geneva, sans-serif; font-size:14px; float:left; text-align:left; display:block; } .hola .tiempo{ font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#000; font-weight:normal; text-align:right; display:block; margin:0px; float:right; padding:0 5px 0 0; line-height:30px; } #avatar{ width:100px; height:90px; background: rgba(204,0,51,1); margin:0px; padding:0px; float:left; color:white; border: solid 2px white; } #avatar .pAvatar{ -webkit-transform:rotate(-37deg); -o-transform:rotate(-37deg); -moztransform:rotate(-37deg); transform:rotate(-37deg); font-family:Tahoma, Geneva, sans-serif; font-weight:bold; font-size:13px; padding: 20px 0 0 0px; text-shadow: 0 0 20px #FFFFFF, 0 0 30px #FFFFFF, 0 0 10px #FFFFFF, 0 0 45px #FFFFFF; } .hola p{ color:#222; font-family:Arial, Helvetica, sans-serif; font-size:12px; margin-top:35px; } </style> Código html <body> <div id="contenedor"> <div id="avatar"><p class="pAvatar">Hectorsito20</p></div> <div class="hola"> <span class="nombre">Hectorsito20</span><span class="tiempo">Hace 7 Minuto</span> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas at leo eget nisl porta viverra. Ut laoreet, dui at tempus vestibulum, eros leo egestas neque, id adipiscing odio eros et lectus. Vivamus pretium lorem sit amet nulla. Praesent nec dolor at augue ultrices blandit. Quisque aliquet ultrices mi. Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada. </p> </div> <a href="#">Informar</a> </div> </body> Resultado final!

22-dic-2011	#5
cramercaba Erudito Ingreso: noviembre-2009 Mensajes: 9.213 Sexo: País: Agradecido: +11.824	La vida es lo que pasa mientras se instalan las actualizaciones de Windows

22-dic-2011	#6
Eloy58 VIP ZONE Ingreso: abril-2009 Ubicación: Madrid (España) Mensajes: 18.695 Sexo: País: Signo: Agradecido: +48.486	Aprende lo que puedas y enseña lo que sepas, el conocimiento es patrimonio de TODOS

Temas Similares
Tema	Autor	Foro	Respuestas	Último mensaje
Manual fspassengers en español	Corbet	AudioLibros, Manuales, Libros & Revistas	4	30-mar-2011 23:57
Que es el HijackThis ????	jchierro	Tutoriales & Videos Tutoriales	7	10-oct-2010 17:58

Los siguientes 6 usuarios agradecen a Hectorsito20 por este mensaje:
baduser (21-dic-2011), Cat (25-dic-2011), cramercaba (22-dic-2011), Eloy58 (22-dic-2011), Hunted (21-dic-2011), nicol10 (03-ene-2012)

21-dic-2011	#2
baduser Banned Ingreso: julio-2009 Ubicación: Mexico City, Capital del Mundo Mensajes: 33.485 Sexo: País: Signo: Agradecido: +70.461

Los siguientes 2 usuarios agradecen a baduser por este mensaje:
cramercaba (22-dic-2011), Hectorsito20 (25-dic-2011)

21-dic-2011	#3
Hunted Erudito Ingreso: junio-2009 Ubicación: S.A. Mensajes: 2.952 Sexo: País: Signo: Agradecido: +6.875	Conocimiento: Máximo Poder

21-dic-2011	#4
VJEVans Erudito Ingreso: mayo-2010 Ubicación: Arequipa (Peru) Mensajes: 6.935 Sexo: País: Signo: Agradecido: +10.323	Exelente .. gracias Hector

Usuarios que han agradecido este mensaje de cramercaba
Hectorsito20 (25-dic-2011)

Los siguientes 2 usuarios agradecen a Eloy58 por este mensaje:
cramercaba (23-dic-2011), Hectorsito20 (25-dic-2011)

25-dic-2011	#7
Cat Novato Ingreso: diciembre-2011 Mensajes: 30 Sexo: País: Signo: Agradecido: +93	Se ve util, gracias por la data. Salu2.

Los siguientes 2 usuarios agradecen a Cat por este mensaje:
Hectorsito20 (25-dic-2011), Hunted (25-dic-2011)

(0 miembros y 1 visitantes)