WHK Security

Programación => Desarrollo WEB => HTML => Mensaje iniciado por: janito24 en diciembre 05, 2009, 02:17:49 pm

Título: [JUEGO] Desafio HTML + CSS + Lo que quieras
Publicado por: janito24 en 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:

(http://img230.imageshack.us/img230/3280/plantillac.png)

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
Título: Re: [JUEGO] Desafio HTML + CSS + Lo que quieras
Publicado por: Masato en 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:

(http://img515.imageshack.us/img515/238/esquema.gif)
Este tiene 3 columnas, un banner y una barrita de créditos
Título: Re: [JUEGO] Desafio HTML + CSS + Lo que quieras
Publicado por: janito24 en 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'>
Título: Re: [JUEGO] Desafio HTML + CSS + Lo que quieras
Publicado por: Masato en 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 >.<
Título: Re: [JUEGO] Desafio HTML + CSS + Lo que quieras
Publicado por: WHK en 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:
(http://img43.imageshack.us/img43/1275/56044196.png)

Aver si alguien puede hacerlo en una sola tabla.
Título: Re: [JUEGO] Desafio HTML + CSS + Lo que quieras
Publicado por: janito24 en diciembre 05, 2009, 07:02:00 pm
PD: No se vayan al porcino xDDDDDDD


mmm

(http://img43.imageshack.us/img43/1275/56044196.png)


no entendiste verdad? xDDDDDDDDDDDDDDD

A ver si resulta ¬¬
Título: Re: [JUEGO] Desafio HTML + CSS + Lo que quieras
Publicado por: Masato en diciembre 05, 2009, 09:13:05 pm
Yo no lo veo tan complicado, ahora si me da tiempo trato de hacerlo
Título: Re: [JUEGO] Desafio HTML + CSS + Lo que quieras
Publicado por: janito24 en 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

(http://img39.imageshack.us/img39/6909/paginaf.png)

jajajaja a lo mejor fue demasiado pero es algo asi como "megaupload" si no entienden el dibujo traten de hacer algo similar a megaupload
Título: Re: [JUEGO] Desafio HTML + CSS + Lo que quieras
Publicado por: Enfermin en 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
Título: Re: [JUEGO] Desafio HTML + CSS + Lo que quieras
Publicado por: janito24 en diciembre 07, 2009, 10:27:09 pm
vamos si quieren simplifiquenlo pero no estanquen el juego  :'(

¬¬ vamos nakp JQuery xDDDDDDDD
Título: Re: [JUEGO] Desafio HTML + CSS + Lo que quieras
Publicado por: nakp en 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
Título: Re: [JUEGO] Desafio HTML + CSS + Lo que quieras
Publicado por: Masato en diciembre 10, 2009, 01:32:48 pm
HE!!, yo si usé CSS :P
Título: Re: [JUEGO] Desafio HTML + CSS + Lo que quieras
Publicado por: janito24 en 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:

(http://img442.imageshack.us/img442/2871/plant.png)