Autor Tema: [JUEGO] Desafio HTML + CSS + Lo que quieras  (Leído 9851 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado janito24

  • Usuario constante
  • ***
  • Mensajes: 222
  • Karma: +7/-0
  • Booooooo!
    • Ver Perfil
    • SkyDrive.cl
[JUEGO] Desafio HTML + CSS + Lo que quieras
« : diciembre 05, 2009, 02:17:49 pm »
Bueno estaba pensando y se me ocurrio algo que tal vez les parezca entretenido. Para que no nos oxidemos voy a dejar una imagen con algo simple y el que responde lo hace poniendo el codigo de un documento html que sea igual (o lo mas parecido posible) a la imagen y deja una imagen nueva para que el siguiente la realice :)

Cada cual es libre de hacerlo como quiera (Con divs, tablas, CSS o como quiera o pueda :D)

He aqui la primera imagen:


Se que es ultra complicado ( ¬¬ ) pero a ver quien lo hace xD ahi el siguiente sube el nivel, yo solo empiezo para que se animen jajaja

EDITO: Todo vale, si ven una pagina que tiene lo que se pide pues copien y peguen, eso tambien sirve para saber, si saben adaptar codigo reinaran el mundo ahorrando tiempo...

PD: No se vayan al porcino xDDDDDDD
« Última Modificación: diciembre 05, 2009, 03:03:30 pm por janito24 »
Si has encontrado útil este articulo recuerda que puedes ayudarnos con tu donación voluntaria la cual ayudará al staff y a la mantención del foro.

Masato

  • Visitante
Re: [JUEGO] Desafio HTML + CSS + Lo que quieras
« Respuesta #1 : diciembre 05, 2009, 03:32:28 pm »
Código: html4strict [Seleccionar]

<style>
#div1 {
border: 1px solid black;
width: 600px;
}
#div2 {
border: 1px solid black;
width: 200px;
}
#div3 {
position: absolute;
width: 390px;
top: 92px;
left: 220px;
}
font {
font-family:Sans-serif;
}
</style>
<font size='6'><b>HOLA</b></font>
<div><div id='div1'><i>Webcomparte.com</i></div>
<br>
<div id='div2'><img src='http://4.bp.blogspot.com/_DYHzOGdo6U0/ScHYjXXjKPI/AAAAAAAAA5g/rRyIehSXdrE/s400/paisaje.jpg' width='100%'></div>
<div id='div3'>TEXTO PARA OCUPAR TODO EL ESPACIO - TEXTO PARA OCUPAR TODO EL ESPACIO - TEXTO PARA OCUPAR TODO EL ESPACIO - TEXTO PARA OCUPAR TODO EL ESPACIO - TEXTO PARA OCUPAR TODO EL ESPACIO - TEXTO PARA OCUPAR TODO EL ESPACIO - TEXTO PARA OCUPAR TODO EL ESPACIO - TEXTO PARA OCUPAR TODO EL ESPACIO - TEXTO PARA OCUPAR TODO EL ESPACIO - TEXTO PARA OCUPAR TODO EL ESPACIO</div><br>
<hr width='61%' align='left'>
<div id='div1'><center>Fin de la pagina xD</center></div></div>


Hay lo tenes

[EDIT]

Me olvide de la imagen:


Este tiene 3 columnas, un banner y una barrita de créditos
« Última Modificación: diciembre 05, 2009, 03:39:22 pm por Masato »

Desconectado janito24

  • Usuario constante
  • ***
  • Mensajes: 222
  • Karma: +7/-0
  • Booooooo!
    • Ver Perfil
    • SkyDrive.cl
Re: [JUEGO] Desafio HTML + CSS + Lo que quieras
« Respuesta #2 : diciembre 05, 2009, 03:37:18 pm »
¬¬ mmm esta bien... peroooooooooo se acabo el juego? donde esta la imagen que hay que hacer ahora? si escribes el codigo debes dejar tu desafio sino muere el super ultra entretenido y bien pensado juego... Las horas ocupadas por el equipo creativo de WebComparte.com se veran destruidas igual que sus sueños... :'(

PD: Por cierto el hr queda siempre del mismo tamaño si le asignas el width en pixeles ;)

<hr width='600px' align='left'>

en ves de

<hr width='61%' align='left'>
« Última Modificación: diciembre 05, 2009, 03:44:00 pm por janito24 »

Masato

  • Visitante
Re: [JUEGO] Desafio HTML + CSS + Lo que quieras
« Respuesta #3 : diciembre 05, 2009, 03:45:23 pm »
Ya agregue la imagen, y bueno, no estoy muy bien que digamos, ayer borre todo mi disco duro por accidente >.<

Desconectado WHK

  • 吴阿卡
  • Administrador
  • Aportador
  • *****
  • Mensajes: 555
  • Karma: +15/-3
  • Coder
    • Yahoo Instant Messenger - yan_uniko_102
    • Ver Perfil
    • WHK
    • Email
Re: [JUEGO] Desafio HTML + CSS + Lo que quieras
« Respuesta #4 : diciembre 05, 2009, 06:41:42 pm »
Ahi va  :D
Código: html4strict [Seleccionar]
<style>
.tabla{
 width: 100%;
}
.cabecera{
 text-align: center;
 vertical-align: middle;
 border: 1px solid rgb(0,0,0);
 height: 90px;
 font-weight: bold;
 font-size: 24px;
}
.columna_central{
 text-align: left;
 vertical-align: top;
 border: 1px solid rgb(0,0,0);
 height: 300px;
 width: 600px;
 font-size: 12px;
}
.columna{
 text-align: left;
 vertical-align: top;
 border: 1px solid rgb(0,0,0);
 height: 300px;
 width: 200px;
 font-size: 11px;
}
.footer{
 text-align: center;
 vertical-align: middle;
 border: 1px solid rgb(0,0,0);
 height: 30px;
 font-size: 11px;
}
</style>
<table class="tabla" cellpadding="0" cellspacing="8">
 <tbody>
  <tr>
   <td class="cabecera" colspan="3">WebComparte.com<br></td>
  </tr>
  <tr>
   <td class="columna">&nbsp;</td>
   <td class="columna_central">texto</td>
   <td class="columna">&nbsp;</td>
  </tr>
  <tr>
   <td class="footer" colspan="3">webcomparte.com 2009<br></td>
  </tr>
 </tbody>
</table>



Acá va mi modelo :P:


Aver si alguien puede hacerlo en una sola tabla.
« Última Modificación: diciembre 05, 2009, 06:45:08 pm por WHK »
Mi WEB - The Hacktivism is not a crime - Si no lo hago yo, que lo hagan otros -

Desconectado janito24

  • Usuario constante
  • ***
  • Mensajes: 222
  • Karma: +7/-0
  • Booooooo!
    • Ver Perfil
    • SkyDrive.cl
Re: [JUEGO] Desafio HTML + CSS + Lo que quieras
« Respuesta #5 : diciembre 05, 2009, 07:02:00 pm »
PD: No se vayan al porcino xDDDDDDD


mmm




no entendiste verdad? xDDDDDDDDDDDDDDD

A ver si resulta ¬¬

Masato

  • Visitante
Re: [JUEGO] Desafio HTML + CSS + Lo que quieras
« Respuesta #6 : diciembre 05, 2009, 09:13:05 pm »
Yo no lo veo tan complicado, ahora si me da tiempo trato de hacerlo

Desconectado janito24

  • Usuario constante
  • ***
  • Mensajes: 222
  • Karma: +7/-0
  • Booooooo!
    • Ver Perfil
    • SkyDrive.cl
Re: [JUEGO] Desafio HTML + CSS + Lo que quieras
« Respuesta #7 : diciembre 06, 2009, 10:01:55 am »
Listo, cumplida la imagen de WHK en una sola tabla :)

Código: html4strict [Seleccionar]

<table width="100%" align="center" cellspacing="2" cellpadding="2" border="1" >
<tr>
    <td height="200px" colspan="7" align="center"><h1>Imagen con logo acá</h1></td>
    <td colspan="2" align="center">datos User</td>
</tr>
<tr>
    <td width="25%" height="130px" colspan="2" align="center">&nbsp;</td>
    <td width="50%" colspan="5" rowspan="5" valign="top" ><h2>Titulo</h2><em>Texto del cuerpo xD</em></td>
    <td width="25%" colspan="2" align="center">&nbsp;</td>
</tr>
<tr>
    <td  colspan="2" height="130px" align="center">&nbsp;</td>
    <td  colspan="2" align="center">&nbsp;</td>
</tr>
<tr>
    <td  colspan="2" height="130px" align="center">&nbsp;</td>
    <td  colspan="2" align="center">&nbsp;</td>
</tr>
<tr>
    <td  colspan="2" height="130px" align="center">&nbsp;</td>
    <td  colspan="2" align="center">&nbsp;</td>
</tr>
<tr>
    <td  colspan="2" height="130px" align="center">&nbsp;</td>
    <td  colspan="2" align="center">&nbsp;</td>
</tr>
<tr>
    <td  colspan="1" height="130px" align="center">ADS1</td>
    <td  colspan="1" align="center">ADS2</td>
    <td  colspan="5" align="center">ADS3</td>
<td  colspan="1" align="center">ADS4</td>
    <td  colspan="1" align="center">ADS5</td>
</tr>
<tr>
    <td  colspan="9" height="30px" align="center">Creditos</td>
</tr>
</table>


Aprendi bastante nunca habia hecho una distribucion asi usando tablas ;D ni siquiera sabia que se podia asi que cualquier correccion es bienvenida  :P

yyyyyyyyyyyyyyy al porcino al tirooooooooo!!!!!!

xD


jajajaja a lo mejor fue demasiado pero es algo asi como "megaupload" si no entienden el dibujo traten de hacer algo similar a megaupload

Desconectado Enfermin

  • Usuario regular
  • **
  • Mensajes: 54
  • Karma: +5/-1
    • Ver Perfil
Re: [JUEGO] Desafio HTML + CSS + Lo que quieras
« Respuesta #8 : diciembre 07, 2009, 10:04:53 pm »
abuu  :'( yo quisiera dar mis respuestas usando div's pero mi pc se malogro y aun no lo reparo.. solo tengo pocos segundos para tocar un ordenador q no sea mio  :'(
pero volvere  ;D

Desconectado janito24

  • Usuario constante
  • ***
  • Mensajes: 222
  • Karma: +7/-0
  • Booooooo!
    • Ver Perfil
    • SkyDrive.cl
Re: [JUEGO] Desafio HTML + CSS + Lo que quieras
« Respuesta #9 : diciembre 07, 2009, 10:27:09 pm »
vamos si quieren simplifiquenlo pero no estanquen el juego  :'(

¬¬ vamos nakp JQuery xDDDDDDDD

Desconectado nakp

  • Moderador
  • Usuario regular
  • *****
  • Mensajes: 79
  • Karma: +5/-1
    • Ver Perfil
Re: [JUEGO] Desafio HTML + CSS + Lo que quieras
« Respuesta #10 : diciembre 08, 2009, 08:26:15 pm »
jaja lo haría con un poco mas de tiempo... en estos dias cierro ciclo en la U y estoy un poco saturado

por cierto... usen divs xD hasta el momento nadie ha usado css

Masato

  • Visitante
Re: [JUEGO] Desafio HTML + CSS + Lo que quieras
« Respuesta #11 : diciembre 10, 2009, 01:32:48 pm »
HE!!, yo si usé CSS :P

Desconectado janito24

  • Usuario constante
  • ***
  • Mensajes: 222
  • Karma: +7/-0
  • Booooooo!
    • Ver Perfil
    • SkyDrive.cl
Re: [JUEGO] Desafio HTML + CSS + Lo que quieras
« Respuesta #12 : diciembre 13, 2009, 12:08:17 pm »
Bueno continuemos :D

No quedo muy cuadrado pero en fin ;)

Código: html4strict [Seleccionar]

<!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>WebComparte.com - Maquetando con divs</title>
<style type="text/css">
<!--
/* Domingo 13 de diciembre 2009
   janito24 (www.SkyDrive.cl)
   Sin limitaciones en cualquier tipo de uso
 */


/* cabecera */

#header {
position:absolute;
left:11px;
top:18px;
width:884px;
height:147px;
z-index:1;
border: black 1px solid;
}
/* Menu (abajo de la cabecera) */
#menu_h {
position:absolute;
left:11px;
top:175px;
width:884px;
height:34px;
z-index:2;
border: black 1px solid;
}
/* Cuadro que engloba el contenido principal */
#princ {
position:absolute;
left:11px;
top:221px;
width:575px;
height:306px;
z-index:3;
border: black 1px solid;
}
/* Bloque superior derecho */
#right_1 {
position:absolute;
left:596px;
top:221px;
width:303px;
height:102px;
z-index:4;
border: black 1px solid;
}
/* Bloque inferior izquierdo */
#right_2 {
position:absolute;
left:596px;
top:333px;
width:303px;
height:103px;
z-index:5;
border: black 1px solid;
}
/* Pie de pagina */
#footer {
position:absolute;
left:10px;
top:535px;
width:892px;
height:32px;
z-index:6;
border: black 1px solid;
text-align:right;
font-size: 25px;
}
/* Primer cuadrado dentro del cuadro principal */
#princ_a {
position:absolute;
left:56px;
top:262px;
width:522px;
height:252px;
z-index:7;
border: black 1px solid;
}
/* Cuadro dentro de princ_a */
#princ_b {
position:absolute;
left:74px;
top:284px;
width:497px;
height:224px;
z-index:8;
border: black 1px solid;
}
-->
</style>
</head>

<body>
<div id="header"></div>
<div id="menu_h"></div>
<div id="princ"></div>
<div id="right_1"></div>
<div id="right_2"></div>
<div id="footer">Powered by janito24 para webcomparte.com</div>
<div id="princ_a"></div>
<div id="princ_b">
<!-- Uso un parrafo en blanco para dar el espacio aunque
se puede hacer con css o con tablas -->
<p>&nbsp;</p>
<!-- Una linea simple para evitar usar tablas :D -->
<hr>
</div>
<!-- Para Webcomparte.com por janito24 cualquier otro uso esta
totalmente permitido -->
</body>
</html>


Una facil a ver si se animan ¬¬

Sin usar tablas y respetando el centrado de la pagina, esta es la siguiente:



. . . . . . . .