Comunidad de diseño web y desarrollo en internet online

Ayuda con Tabla

Ir a página 1, 2  Siguiente

Foros de discusión > Javascript y jQuery

Citar            
MensajeEscrito el 08 Dic 2007 08:49 pm
Hola!
Mi problema es el siguiente: En una Web que estoy haciendo, utilizaba un iframe, que ahora con ayuda de integrantes de este foro, estoy eliminando gracias a plantillas en php, con includes, divs y todo eso.
Pero me surgió lo siguiente: algunos sectores de la Página tienen la necesidad, indispensable desde mi punto de vista, de usar tablas, como por ejemplo la siguiente:

de la que les dejo el código:

Código :

<body>
<table width="590" border="0" cellpadding="0" cellspacing="0" class="center">
  <tr>
    <td><div align="center">
      <h1>Cuadrado</h1>
    </div>
      <p><strong>Empleo</strong>: Amarre de dos troncos con una sogu&iacute;n en forma perpendicular. Sirve para realizar la gran mayor&iacute;a de las construcciones scouts.</p>
      <p>&nbsp;</p>
      <table width="100%" border="1" cellspacing="0" cellpadding="5">

        <tr>
          <td colspan="2"><div align="center"><strong>Ejecuci&oacute;n</strong></div></td>
        </tr>
        <tr>
          <td width="50%">Se realiza un nudo ballestrinque dejando un peque&ntilde;o chicote libre, sobre el tronco que se encuentra afirmado (soporte).</td>
          <td width="50%"><div align="center"><img src="imagenes/cuadrado1.jpg" alt="Cuadrado 1" width="129" height="200" /></div></td>
        </tr>
        <tr>
          <td width="50%"><div align="center"><img src="imagenes/cuadrado2.jpg" alt="Cuadrado 2" width="140" height="200" /></div></td>
          <td width="50%">Se pasa el soguín por delante del tronco horizontal (soportado) y por detrás del soporte.</td>
        </tr>
        <tr>
          <td width="50%">Se vuelve a pasar el sogu&iacute;n por delante del tronco soportado y por detr&aacute;s del vertical, repitiendo esta operaci&oacute;n al menos tres veces. </td>
          <td width="50%"><div align="center"><img src="imagenes/cuadrado3.jpg" alt="Cuadrado 3" width="204" height="200" /></div></td>
        </tr>
        <tr>
          <td width="50%"><div align="center"><img src="imagenes/cuadrado4.jpg" alt="Cuadrado 4" width="188" height="200" /></div></td>
          <td width="50%">Luego se dan al menos tres vueltas entre el soporte y el soportado, esta operación se llama estrangulación y debe realizarse suficiente presión para que el nudo sea firme y resistente.</td>
        </tr>
        <tr>
          <td width="50%">Por &uacute;ltimo, con el extremo libre y el peque&ntilde;o chicote que se dej&oacute; al inicio (paso 1) realizar un nudo llano.</td>
          <td width="50%"><div align="center"><img src="imagenes/cuadrado5.jpg" alt="Cuadrado 5" width="191" height="200" /></div></td>
        </tr>
      </table>
<div id="menu" align="center">
  <p>&nbsp;</p>
  <p><a href="amarres.html">Amarres</a>
           |
             <a href="../cabuyeria.html">Cabuyería</a>

    </p>
</div>
    </td>
  </tr>
</table>
</body>


¿Es correcto usar tablas aquí? ¿Qué alternativas se les ocurren? (Tal vez más vistosas)
Yo lo que tengo pensado también, es usar LightBox para poder achicar un poco más las imágenes y que se puedan abrir, sin popups ni nada muy intrusivo a un mayor tamaño. Hay alguna forma de hacer que se creen automáticamente Thumbnails para esas imágenes? O de hacer que las imágenes grandes se achiquen para ajustarse a la tabla, y se abran a su tamaño real con LightBox?

Desde ya, muchísimas gracias, y perdón por el bombardeo de preguntas.
Saludos!

Por ClickyMouse

52 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 08 Dic 2007 10:59 pm
No se, pero viendo el contenido de lo que quieres maquetar yo diria que lo mas apropiado seria utilizar una lista ordenada, al fin y al cabo el contenido no son mas que instrucciones que siguen un orden predeterminado.

Por Pitxon

38 de clabLevel



Genero:Masculino  

Envíale un mensaje privado   Email   Web

Madrid

firefox
Citar            
MensajeEscrito el 08 Dic 2007 11:09 pm
Buenas ClickyMouse:
Acabo de llegar al foro, porque he visto ya bastantes cosas interesantes. Siguiendo con las corrientes que corren, te recomiendo este código, respetuoso con los estándares (osea, que he pasado del Explorer al probarlo, vaya :cool:)
Ahí va:

Código :

<html>
<head><title>Cuadrado</title>
      <!--
      ... Los estilos los pondria en una css externa
      ... Y no me gusta cómo he resuelto el alineamiento de las imágenes
      -->
<style type="text/css">
   body,div,ul,li,h1,h3,p { margin:0; padding:0;}
   ul,ol,li{list-style=none;display:inline;}
   li{margin:0; padding:0;border:1px solid #999999; }
   h1{margin:auto;}
   
   #contenedor{width:610px;margin:auto;}
   #titulo{margin:auto}
   
   .con_texto{width:300px; height:200px; float:left;}
   .sin_texto{width:300px; height:200px; float:left;}
      .sin_texto img{margin:0 40px}
   #tabla_dummy{border:1px #999999 solid;height:65px}
</style>
</head>
<body>
<div id="titulo"></div>
<div id="contenedor">
   <h1>Cuadrado</h1>
   <strong>Empleo</strong>: Amarre de dos troncos con una sogu&iacute;n en forma perpendicular. Sirve para realizar la gran mayor&iacute;a de las construcciones scouts.
   <div id="tabla_dummy">
      <div id="thead_dummy"><h2>Ejecuci&oacute;n</h2></div>
            <!--
            ... Ahora viene lo bueno...
            -->
      <ul>
         <li class="con_texto"><p>Se realiza un nudo ballestrinque dejando un pequeño chicote libre, sobre el tronco que se encuentra afirmado (soporte).</p></li>
         <li class="sin_texto"><img src="" width="200" height="100"/></li>
         <li class="sin_texto"><img src="" width="200" height="100"/></li>
         <li class="con_texto"><p>Se pasa el soguín por delante del tronco horizontal (soportado) y por detrás del soporte.</p></li>
         <li class="con_texto"><p>Se vuelve a pasar el soguín por delante del tronco soportado y por detrás del vertical, repitiendo esta operación al menos tres veces.</p></li>
         <li class="sin_texto"><img src="" width="200" height="100"/></li>
         <li class="sin_texto"><img src="" width="200" height="100"/></li>
         <li class="con_texto"><p>Luego se dan al menos tres vueltas entre el soporte y el soportado, esta operación se llama estrangulación y debe realizarse suficiente presión para que el nudo sea firme y resistente.</p></li>
         <li class="con_texto"><p>Por último, con el extremo libre y el pequeño chicote que se dejó al inicio (paso 1) realizar un nudo llano.</p></li>
         <li class="sin_texto"><img src="" width="200" height="100"/></li>
      </ul>
         <!--
            ... No ha quedado mal no?...
            ... Hecho con NotePad++
            ... Quien lo quiera que lo use!!
            -->
   </div>
   </div>
</body>
</html>


Como ves, pitxon, no hace falta tampoco una tabla ordenada, pudiendo usar una desordenada. :wink:
Bueno pues eso mismo.

Por CrystalWorX

11 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

Barcelona

firefox
Citar            
MensajeEscrito el 08 Dic 2007 11:37 pm
Me gusta... Con algunos retoques podría andar eso...
Ahora sí, tiene algunas pequeñas diferencias entre FF e IE:

FF:


IE:


Cómo se podría solucionar eso?

Por ClickyMouse

52 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 09 Dic 2007 12:05 am
Ya bueno, es que no tengo el eclipse a mano... estoy en un ordenador que no es el mio. Y lo he hecho con lo poco que tenía el colega. Tampoco tengo el debugger del IE ni del Firefox, así que bueno, creo que ya te respondo mañana o el lunes porque estoy que me caigo. De todas maneras, ya te digo que las imágenes no están todo lo bien colocadas que podrían, y ya dije que había pasado del explorer porque el colega lo tiene hecho unos zorros, lleno de barritas de google, de softonic, de ebay... buffff qué locura. XD XD XD
En fin que me voy a dormir, mañana lo pruebo de nuevo y te digo algo.

Ciao!

Por CrystalWorX

11 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

Barcelona

firefox
Citar            
MensajeEscrito el 09 Dic 2007 12:21 am
Jajajjajajjaja, nooo, ningún problema, al contrario... Muchas gracias por molestarte en ayudarme desde un PC ajeno.
Igualmente tengo ya la base, que no es poco; le estuve haciendo unas modificaciones, y alineé las imágenes valiéndome de <divs>, porque me gusta como queda y no tengo que andar "jugando" con márgenes y esas cosas.
Acá te dejo el código, si querés echarle un vistazo mañana, igualmente lo seguiré modificando.

cuadrado.html:

Código :

<!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><title>Cuadrado</title>
      <!--
      ... Los estilos los pondria en una css externa
      ... Y no me gusta cómo he resuelto el alineamiento de las imágenes
      -->
<style type="text/css">
   body,div,ul,li,h1,h3,p { margin:0; padding:0;}
   ul,ol,li{list-style=none;display:inline;}
   li{margin:0; padding:0;border:1px solid #999999; }
   h1{margin:auto;}
   
   #contenedor{width:610px;margin:auto;}
   #titulo{margin:auto}
   .imagen{text-align:center}
   .con_texto{width:300px; height:200px; float:left; text-align:justify;}
   .sin_texto{width:300px; height:200px; float:left;}
   #tabla_dummy{border:1px #999999 solid;height:65px}
</style>
</head>
<body>
<div id="titulo"></div>
<div id="contenedor">
   <h1>Cuadrado</h1>
   <p><strong>Empleo</strong>: Amarre de dos troncos con una sogu&iacute;n en forma perpendicular. Sirve para realizar la gran mayor&iacute;a de las construcciones scouts. </p>
   <p>&nbsp;</p>
<div id="tabla_dummy">
      <div id="thead_dummy"><h2>Ejecuci&oacute;n</h2></div>
            <!--
            ... Ahora viene lo bueno...
            -->
      <ul>
         <li class="con_texto"><p>Se realiza un nudo ballestrinque dejando un pequeño chicote libre, sobre el tronco que se encuentra afirmado (soporte).</p></li>
         <li class="sin_texto"><div class="imagen"><img src="cuadrado1.jpg" alt="Cuadrado 1" width="129" height="200"/></div>
         </li>
         <li class="sin_texto"><div class="imagen"><img src="cuadrado2.jpg" alt="Cuadrado 2" width="140" height="200"/></div>
         </li>
         <li class="con_texto"><p>Se pasa el soguín por delante del tronco horizontal (soportado) y por detrás del soporte.</p></li>
         <li class="con_texto"><p>Se vuelve a pasar el soguín por delante del tronco soportado y por detrás del vertical, repitiendo esta operación al menos tres veces.</p></li>
         <li class="sin_texto"><div class="imagen"><img src="cuadrado3.jpg" alt="Cuadrado 3" width="204" height="200"/></div>
         </li>
         <li class="sin_texto"><div class="imagen"><img src="cuadrado4.jpg" alt="Cuadrado 4" width="188" height="200"/></div>
         </li>
         <li class="con_texto"><p>Luego se dan al menos tres vueltas entre el soporte y el soportado, esta operación se llama estrangulación y debe realizarse suficiente presión para que el nudo sea firme y resistente.</p></li>
         <li class="con_texto"><p>Por último, con el extremo libre y el pequeño chicote que se dejó al inicio (paso 1) realizar un nudo llano.</p></li>
         <li class="sin_texto"><div class="imagen"><img src="cuadrado5.jpg" alt="Cuadrado 5" width="191" height="200"/></div>
         </li>
      </ul>
         <!--
            ... No ha quedado mal no?...
            ... Hecho con NotePad++
            ... Quien lo quiera que lo use!!
            -->
   </div>
   </div>
</body>
</html>

Por ClickyMouse

52 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 09 Dic 2007 11:45 am
En el código hay algo mal:

Código :

ul,ol,li{list-style=none;display:inline;}
De dónde sale este igual?

Código :

ul,ol,li{list-style:none;display:inline;}

Creo que andar "jugando" con márgenes y esas cosas te evita precisamente tener que usar divs, y así tienes menos código HTML. Y más en tu caso, porque lo de los divs era innecesario. Has creado un div para cada imagen para que esta de centre mediante text-align:center;. Hará el mismo efecto si el text-align:center; se lo pones a .sin_texto, y te ahorras los divs.

Y para que quede más bonito yo pondría esta parte así:

Código :

.con_texto, .sin_texto {width:300px; height:200px; float:left; text-align:justify;}
.sin_texto{text-align:center;}

Por ryuz

350 de clabLevel

2 tutoriales

 

Envíale un mensaje privado     Web

firefox
Citar            
MensajeEscrito el 09 Dic 2007 01:15 pm
Muchas Gracias!
Ahora quedó mejor ya, se "parece" un poco más lo que se ve en IE y FF.
Ahora lo único que faltaría, sería lograr que en IE no se encime el div "thead_dummy" sobre el resto del contenido.
Creo que falta algo de estilo, porque tiene definido un id, pero sin embargo en la css no está presente.

Saludos!

Por ClickyMouse

52 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 10 Dic 2007 11:26 am
La verdad es que no creo que de igual que sea una lista desordenada ya que el contenido tiene un orden intrinseco, asaber, son una serie de intrucciones, para poder realizar el paso 5 primero he tenido que realizar el paso 4, el 3... Para que quedase perfecto yo utilizaria ol en vez de ul.

Por Pitxon

38 de clabLevel



Genero:Masculino  

Envíale un mensaje privado   Email   Web

Madrid

firefox
Citar            
MensajeEscrito el 10 Dic 2007 02:27 pm

Pitxon escribió:

La verdad es que no creo que de igual que sea una lista desordenada ya que el contenido tiene un orden intrinseco, asaber, son una serie de intrucciones, para poder realizar el paso 5 primero he tenido que realizar el paso 4, el 3... Para que quedase perfecto yo utilizaria ol en vez de ul.
\Pero es que en lo que él quiere, aunque sean datos que pueden ser numerados, no es útil ya que el primer texto sería lo primero y la imagen del primer texto sería lo segundo, y siguiendo, la imagen del segundo texto sería el tercer campo, y el segundo texto iría en la posición 4, lo cual, como puedes intuir, no le es útil. Y aunque cada paso, con su imagen, fuesen dentro de un li que a la vez van dentro de un ol, sería mucho más incómodo en la estructuración de las etiquetas.
Que a lo mejor se puede con una lista ordenada: no te lo discuto. Que sea lo mejor, sí porque no lo es: él quiere que quede de una determinada manera. Que los datos son susceptibles de poder ser ordenados en pasos es lógico. Pero como webmaster, probablemente no quiera que las instrucciones para hacer un nudo sean una simple lista con pasos: tal vez quiere darle cierto formato para evitar que el diseño sea aburrido.
En cualquier caso, al formatear los tags de lista (ul,ol,li{list-style=none;display:inline;}), pongo ambos casos porque daría igual. Pero al elegir entre ul y ol, me decanto por ul. Si elimino el formato a estos tags, es lo mismo usar uno que otro, con la incomodidad en el caso de ol de que hay un orden establecido del que prescindo usando css, por tanto, el concepto de ol resulta inútil. Es mucho más cómodo, a nivel de organización, usar un ul.
Si quiere que vaya numerado, puede poner los números como texto sin necesidad de que sea una lista ordenada. Además, la cuestión es la maquetación, no la condición de los datos que ha de maquetar: si él quiere que parezca una tabla, el mejor método para no usar una tabla, que quede parecido, y el navegador lo renderice rápido, es este.
Pitxon, la perfección es un concepto muy subjetivo, sobre todo en informática. Y sobre todo, que ClickyMouse no quiere poner números, o al menos, no lo ha pedido.

Por CrystalWorX

11 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

Barcelona

firefox
Citar            
MensajeEscrito el 10 Dic 2007 02:51 pm
La verdad en que en ningun momento he hablado de la representacion de la lista, es decir, del CSS.
Lo unico que digo es que me parece bastante obvio que la etiqueta html que mas se acerca a la semantica de su contenido es sin duda ol antes que ul. El W3C define tres tipos de listas en HTML,
las listas ordenadas, las desordenadas y las listas de definicion. Como puedes ver aqui
http://www.w3.org/TR/html401/struct/lists.html

Pues bien, lo que dice sobre las listas ordenadas es lo siguiente: las lstas ordenadas contienen informacion en la que el orden es relevante, y lo explican con un ejemplo en el que la lista ordenada es una receta, no se, pero creo que esta receta se parece mucho mas al ejemplo del lazo que a cualquier otra cosa.
Creo que el saber aplicar bien los elementos html es fundamental para conseguir bunas estructuras en los documentos y poder dotar a la web de un lenguaje mucho mas humano, ¿no es esta la razon de todo el marcado semantico?.

Por ultimo, decir que estoy de acuerdo con tu vision de la perfeccion y sobre todo como bien dices, en la informatica, pero lo que si que es cierto es que las especificaciones sirven y se utilizan por algo.

Por Pitxon

38 de clabLevel



Genero:Masculino  

Envíale un mensaje privado   Email   Web

Madrid

firefox
Citar            
MensajeEscrito el 10 Dic 2007 03:18 pm
Estoy de acuerdo contigo en lo de las especificaciones, no obstante, son las pequeñas excepciones las que alegran el trabajo, y esta es un buen caso, ya que no creo que, eliminando el formato con css, sirva de algo utilizar ol. Tú dices que prefieres ols, pero es que no has leido lo que pongo al principio del mensaje. De existir un orden visual concreto e igual en todos los pasos, sí que sería apropiado utilizar un ol, pero es que no existe: él agrupa cada dos li con un paso en el desarrollo del nudo, y cada uno de esos pasos alterna el orden en que están el li de imagen y el li de texto. por lo tanto una lista ordenada es irrelevante porque el contenido está desordenado.
Me encanta esta discusión XD
Sin acritudes Pitxon!

Por CrystalWorX

11 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

Barcelona

firefox
Citar            
MensajeEscrito el 10 Dic 2007 03:31 pm

CrystalWorX escribió:

Me encanta esta discusión XD
Sin acritudes Pitxon!


La verdad estaba por decir exactamente lo mismo... Si hay algo que me gusta del diseño, y en especial del Web, es la pasión que todos le ponen a lo que hacen... Cada página es como un hijo en el que uno busca esa 'perfección' que significa tantas cosas diferentes, como personas la interpreten.

Además son muchas, y muy ricas, las cosas que se aprenden en este tipo de 'discusiones', los puntos de vistas que se ven... Me encanta...

Ahora, volviendo al tema, luego de leer minuciosamente las explicaciones de cada uno, me quedo (si bien me son útiles, y mucho, las dos; y si me permiten la expresión ) con la de CrystalWorX, ya que como el dice, en realidad cada paso de mi 'explicación' sobre ese amarre (nudo es otra cosa, así de paso les puedo 'enseñar' algo yo también :P) está formado por 2 li, que necesariamente son el mismo paso, no son consecutivos, y deben ser interpretados al mismo momento, uno es el texto, y el otro la imagen que lo explica.

Saludos! Y no tengo más que agradecer esta hermosa 'discución' que lo único que logra (y no es poco) es que todos crezcamos en esta belleza que es el diseño Web, y más aún, el diseño semántico, favoreciendo la experiencia del usuario por sobre todas las cosas.

Por ClickyMouse

52 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 10 Dic 2007 04:06 pm
Jeje, pues sí clickyMouse.
En cualquier caso, te diré que coincido con ryuz en que no deberías usar el div class="imagen" que colocaste dentro de los li. En mi equipo de trabajo, a eso le llamamos cariñosamente 'divitis', que es un error común cuando controlas un poco de css. Hay que llevarse cuidado con eso, porque los divs tampoco son la panacea. La solución que aporta ryuz es bastante buena, y te la recomiendo (Gracias Ryuz!).
Intenta evitar los divs redundantes. Si poner tabla dentro de tabla, dentro de tabla... no es recomendable, usar divs dentros de divs etc... a lo tonto no lo es menos. Sé que muchos estáis acostumbrados a ver lo de <div align="center"> por ejemplo, y eso es culpa del dreamweaver. ¡¡El DreamWeaver es un foco de divitis!!
XD XD XD

Por CrystalWorX

11 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

Barcelona

firefox
Citar            
MensajeEscrito el 10 Dic 2007 04:35 pm
Si, si... la recomendación de ryuz ya la seguí, ya modifiqué el código... y efectivamente es porque aún no controlo nada bien el tema de css, divs y eso, pero bueno, por algo se empieza.

Con respecto a la 'tabla' necesito que alguien me ayude a hacer coincidir el div que dice "Ejecución" con la parte de los pasos:


Disculpenme si les parece que soy demasiado perfeccionista, pero no me gustan las cosas que quedan así... :crap:

Saludos!

Por ClickyMouse

52 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 10 Dic 2007 04:51 pm
En teoría, poniendo el doble del tamaño de los li (es decir, 300, por lo que sería 600px), se solucionaría el problema. Coloqué 610 porque al principio le puse un margin:5px para ver cómo actuaba. ¿De todas maneras: tienes una url donde tengas este código puesto, y le hecho un ojo?

Por CrystalWorX

11 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

Barcelona

firefox
Citar            
MensajeEscrito el 10 Dic 2007 04:53 pm
No se, en definitiva yo haria algo asi:

<li><img src="cuadrado1.jpg" alt="Cuadrado 1" />Se realiza un nudo ballestrinque dejando un pequeño chicote libre, sobre el tronco que se encuentra afirmado (soporte).</li>

Con dos clases para las imagenes:

.float-left

.float-right

Por Pitxon

38 de clabLevel



Genero:Masculino  

Envíale un mensaje privado   Email   Web

Madrid

firefox
Citar            
MensajeEscrito el 10 Dic 2007 05:02 pm
Así está ahora:

Código :

<!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><title>Cuadrado</title>
      <!--
      ... Los estilos los pondria en una css externa
      ... Y no me gusta cómo he resuelto el alineamiento de las imágenes
      -->
<style type="text/css">
   body,div,ul,li,h1,h3,p { margin:0; padding:0;}
   ul,ol,li{list-style:none;display:inline;}
   li{margin:0; padding:0;border:1px solid #999999; }
   h1{margin:auto;}
   
   #contenedor{width:606px;margin:auto;}
   #titulo{margin:auto}
   .imagen{text-align:center}
   .con_texto, .sin_texto {width:300px; height:200px; float:left; text-align:justify;}
   .sin_texto{text-align:center;}
   #tabla_dummy{border:1px #999999 solid;height:65px}
</style>
</head>
<body>
<div id="titulo"></div>
<div id="contenedor">
   <h1>Cuadrado</h1>
   <p><strong>Empleo</strong>: Amarre de dos troncos con una sogu&iacute;n en forma perpendicular. Sirve para realizar la gran mayor&iacute;a de las construcciones scouts.</p>
   <p>&nbsp;</p>
<div id="tabla_dummy">
      <div id="thead_dummy"><h2>Ejecuci&oacute;n</h2></div>
            <!--
            ... Ahora viene lo bueno...
            -->
      <ul>
         <li class="con_texto"><p>Se realiza un nudo ballestrinque dejando un pequeño chicote libre, sobre el tronco que se encuentra afirmado (soporte).</p></li>
         <li class="sin_texto"><div class="imagen"><img src="cuadrado1.jpg" alt="Cuadrado 1" width="129" height="200"/></div>
         </li>
         <li class="sin_texto"><div class="imagen"><img src="cuadrado2.jpg" alt="Cuadrado 2" width="140" height="200"/></div>
         </li>
         <li class="con_texto"><p>Se pasa el soguín por delante del tronco horizontal (soportado) y por detrás del soporte.</p></li>
         <li class="con_texto"><p>Se vuelve a pasar el soguín por delante del tronco soportado y por detrás del vertical, repitiendo esta operación al menos tres veces.</p></li>
         <li class="sin_texto"><div class="imagen"><img src="cuadrado3.jpg" alt="Cuadrado 3" width="204" height="200"/></div>
         </li>
         <li class="sin_texto"><div class="imagen"><img src="cuadrado4.jpg" alt="Cuadrado 4" width="188" height="200"/></div>
         </li>
         <li class="con_texto"><p>Luego se dan al menos tres vueltas entre el soporte y el soportado, esta operación se llama estrangulación y debe realizarse suficiente presión para que el nudo sea firme y resistente.</p></li>
         <li class="con_texto"><p>Por último, con el extremo libre y el pequeño chicote que se dejó al inicio (paso 1) realizar un nudo llano.</p></li>
         <li class="sin_texto"><div class="imagen"><img src="cuadrado5.jpg" alt="Cuadrado 5" width="191" height="200"/></div>
         </li>
      </ul>
         <!--
            ... No ha quedado mal no?...
            ... Hecho con NotePad++
            ... Quien lo quiera que lo use!!
            -->
   </div>
   </div>
</body>
</html>


Y acá la podés ver:
http://gruposcout508.com.ar/cuadrado.html

Por ClickyMouse

52 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 10 Dic 2007 05:03 pm

Pitxon escribió:

No se, en definitiva yo haria algo asi:

<li><img src="cuadrado1.jpg" alt="Cuadrado 1" />Se realiza un nudo ballestrinque dejando un pequeño chicote libre, sobre el tronco que se encuentra afirmado (soporte).</li>

Con dos clases para las imagenes:

.float-left

.float-right


Ah, eso podría ser interesante también... Voy a probarlo a ver qué tal...
Saludos y Gracias!

Por ClickyMouse

52 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 10 Dic 2007 05:08 pm
Fe de Erratas: los divs esos de id "imagen", ya no están más... Se me colaron de un archivo viejo...
Saludos!

Por ClickyMouse

52 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 10 Dic 2007 05:18 pm
Bueno, he solucionado tu problema y he arreglado el código en general porque creo que sufría de divitis. Creo que lo mejor es que lo repases y campares los cambios que he hecho.

Código :

<!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>
<title>Cuadrado</title>
<style type="text/css">
<!--
body,div,ul,li,h1,h3,p { margin:0; padding:0;}
ul {list-style:none;display:block;width:100%;}
li {margin:0;padding:0;border:1px solid #999;display:inline;}
h1 {margin:auto;}
h2 {border:1px solid #999;margin:0;height:65px;line-height:65px;}
#contenedor {width:610px;margin:0 auto;}
#titulo {margin:auto}
.con_texto, .sin_texto {width:303px;height:200px; float:left; text-align:justify;}
.sin_texto {text-align:center;}
-->
</style>
</head>
<body>
<div id="titulo"></div>
<div id="contenedor">
   <h1>Cuadrado</h1>
   <p><strong>Empleo</strong>: Amarre de dos troncos con una sogu&iacute;n en forma perpendicular. Sirve para realizar la gran mayor&iacute;a de las construcciones scouts. </p>
   <h2>Ejecuci&oacute;n</h2>
   <ul>
      <li class="con_texto"><p>Se realiza un nudo ballestrinque dejando un pequeño chicote libre, sobre el tronco que se encuentra afirmado (soporte).</p></li>
      <li class="sin_texto"><img src="cuadrado1.jpg" alt="Cuadrado 1" width="129" height="200"/></li>
      <li class="sin_texto"><img src="cuadrado2.jpg" alt="Cuadrado 2" width="140" height="200"/></li>
      <li class="con_texto"><p>Se pasa el soguín por delante del tronco horizontal (soportado) y por detrás del soporte.</p></li>
      <li class="con_texto"><p>Se vuelve a pasar el soguín por delante del tronco soportado y por detrás del vertical, repitiendo esta operación al menos tres veces.</p></li>
      <li class="sin_texto"><img src="cuadrado3.jpg" alt="Cuadrado 3" width="204" height="200"/></li>
      <li class="sin_texto"><img src="cuadrado4.jpg" alt="Cuadrado 4" width="188" height="200"/></li>
      <li class="con_texto"><p>Luego se dan al menos tres vueltas entre el soporte y el soportado, esta operación se llama estrangulación y debe realizarse suficiente presión para que el nudo sea firme y resistente.</p></li>
      <li class="con_texto"><p>Por último, con el extremo libre y el pequeño chicote que se dejó al inicio (paso 1) realizar un nudo llano.</p></li>
      <li class="sin_texto"><img src="cuadrado5.jpg" alt="Cuadrado 5" width="191" height="200"/></li>
   </ul>
</div>
</body>
</html>

Y sobre la discusión sobre que sería mejor, yo digo que lo mejor, para algo que quiere imitar una tabla, son las definition list.

Por ryuz

350 de clabLevel

2 tutoriales

 

Envíale un mensaje privado     Web

firefox
Citar            
MensajeEscrito el 10 Dic 2007 05:34 pm
Wow :o
Es impresionante como mejoró...
Ahora hasta se ve bien en IE... Eso por qué es? Porque sacaste los divs que estaban de más?

Gracias!!!

PD: Ahora tengo el siguiente problema, yo estoy construyendo las páginas con includes de php y se ve que tiene algún conflicto con mi hoja de estilos original:


Les adjunto la hoja de estilos, con los estilos de "cuadrado.html":

Código :

body {
   background: #333333 url('../navegacion/fondo.png') repeat-x;
   text-decoration: none;
   font-family: 'Trebuchet MS', Tahoma, Verdana, sans-serif;
   font-size: 14px;
   margin: 10 10 10 10px;
   text-align: center;
}

#contenedor{
      text-align: left;
      width: 780px;
      margin: auto;
   background: #FFFFFF;
}

#cabeza{
   padding: 3 3 3 10px;
   background: #FFFFFF;
}

#header{
   background: url('../navegacion/header.png');
   height: 80px;
}

#shadow{
   background: url('../navegacion/sombra.png');
   height: 20px;
   vertical-align: top;
}

#cuerpo{
      margin: 10 0 10 0px;
      background: #FFFFFF;
}

#lateral{
   background: #FFFFFF;
   width: 160px;
   float: right;
   text-align: center;
}

ul.menu{
   list-style:none;
   margin:0;
   padding:0;
}

ul,li.menu{
   height:20px;
   background-image:url('../navegacion/menu.png');
}

ul,li:hover.menu{
   background-position: bottom;
}

#principal{
      background-color: #FFFFFF;
      padding: 4 4 4 4px;
      margin-right: 170px;
} 

#pie{
      padding: 0 10 3 10px;
}

#footer{
   background: url('../navegacion/footer.png');
   height: 20px;
   font-family: Georgia, 'Times New Roman', Times, serif;
   text-align: center;
}

a:link {
   color: #000000;
   text-decoration: none;
}
a:visited {
   color: #000000;
   text-decoration: none;
}
a:hover {
   color: #000000;
   text-decoration: none;
}
a:active {
   color: #000000;
   text-decoration: none;
}

.box_title{
   width: 150px;
   font-weight: bold;
   background: url('../navegacion/tit.png') no-repeat;
   height:20px;
}

.box_content {
   width: 150px;
   border: thin solid #d2d000;
   border-width: 0px 1px 1px 1px;
   text-align: justify;
}

.separa_horiz {
      height: 10px;
}

.separa_vert {
      width: 10px;
}

<!--
body,div,ul,li,h1,h3,p { margin:0; padding:0;}
ul {list-style:none;display:block;width:100%;}
li {margin:0;padding:0;border:1px solid #999;display:inline;}
h1 {margin:auto;}
h2 {border:1px solid #999;margin:0;height:65px;line-height:65px;}
#contenedor {width:610px;margin:0 auto;}
#titulo {margin:auto}
.con_texto, .sin_texto {width:303px;height:200px; float:left; text-align:justify;}
.sin_texto {text-align:center;}
-->


Y esa página la pueden ver en http://gruposcout508.com.ar/index2.php.
Gracias!

Por ClickyMouse

52 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 10 Dic 2007 05:58 pm
Dale a ul un id:

Código :

<ul id="explicacion">
por ejemplo. Quita el CSS que has puesto, el que está entre <!-- --> (y también quita los <!-- -->). y pon este:

Código :

#explicacion {list-style:none;display:block;margin:0;padding:0;width:100%;}
#explicacion li {border:1px solid #999;display:inline;}
h2 {border:1px solid #999;margin:0;height:65px;line-height:65px;}
#contenedor {width:610px;margin:0 auto;}
.con_texto, .sin_texto {width:303px;height:200px; float:left; text-align:justify;}
.sin_texto {text-align:center;}

Hay dos div con id contenedor, y solo puede haber uno. Cambia alguno de los dos. Yo cambiaría el que hemos estado haciendo aquí, llámalo explicacion_contenedor, por ejemplo tanto en HTML como en el CSS.

También, dale a #pie {clear:both;}.

Creo que todo eso soluciona varios problemas.

Por ryuz

350 de clabLevel

2 tutoriales

 

Envíale un mensaje privado     Web

firefox
Citar            
MensajeEscrito el 10 Dic 2007 06:05 pm
Gracias, ahora lo pruebo..
Con respecto a {clear:both;}, qué es? Porque vi que se usa mucho, pero no se qué es lo que hace concretamente.

Gracias!

Por ClickyMouse

52 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 10 Dic 2007 06:38 pm
Ahí va quedando, cada vez toma más forma...
Lo que quería saber también, son esos tips (creo que se llaman 'hacks' o algo por el estilo), para que la página se vea igual (o lo más cercano posible) en FF y en IE.
Creo que es una especie de problema en como interpreta cada uno el padding y eso... porque si abren http://gruposcout508.com.ar/index2.php con FF e IE, pueden ver que hay unas pequeñas diferencias entre el margen del menu con el borde (a la derecha) y del padding de los divs de las instrucciones, entre otros.

Saludos!

Por ClickyMouse

52 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 11 Dic 2007 06:40 am
bien, yo lo hise de una manera diferente
creo que esto le puede servir a varios
veamos:

  • Esto si es una lista ordenada, pues se estan enumerando pasos a seguir, peeero, el texto y la imagen van en el mismo item <li> pues son parte de un mismo paso.
  • Para cada elemento se pueden usar varias clases como notaran en el codigo, esto no ahorrara codigo.
  • Las imagenes las encerre en la etiqueta <span>, esta etiquetano tiene ningún valor semantico y esta diseñada especificamente para añadir estilo a un objeto.
  • La etiqueta span es un elemento de linea, no viene mucho al caso pero hay que tener en cuenta de que no puedes encerrar un elemento de bloque (h1, div, p, etc...) con un elemento de linea(font, a, span)
  • Como notaran yo dejo las imagenes en una carpeta llamada img, es cuestion de gustos y costumbre :D


el codigo:

Código :

<html>
   <head>
   <style type="text/css" title="">
      #noTabla li{
         border: solid 1px #000;   
         list-style: none;
         height: 210px;
         width: 441px !important;
         width: 459px;
         padding:10px;
         margin-top:-1px;
      }
      .img{
         border: solid 1px #000;   
         width: 230px;
         height: 230px;
         text-align: center;
         margin: -11px auto;
      }
      .right{
         margin-right: -11px;
         margin-left: 10px;
         float: right;   
      }
      .left{   
         margin-left: -11px;   
         margin-right: 10px;
         float: left;   
      }
   </style>
   </head>
   <body>
      <div>
         <h1>Amarre Cuadrado</h1>
         <p>
            <strong>Empleo</strong>: Amarre de dos troncos con una sogu&iacute;n en forma perpendicular. Sirve para realizar la gran mayor&iacute;a de las construcciones scouts. 
         </p>
         <h2>Ejecuci&oacute;n</h2>
         <ol id="noTabla">
            <li>
               <span class='right img'><img src="img/cuadrado1.jpg" alt="Cuadrado 1"/></span>
               Se realiza un nudo ballestrinque dejando un peque&ntilde;o chicote libre, sobre el tronco que se encuentra afirmado (soporte).
            </li>     
            <li>
               <span class="left img"><img src="img/cuadrado2.jpg" alt="Cuadrado 2"/></span>
               Se pasa el sogu&iacute;n por delante del tronco horizontal (soportado) y por detr&aacute;s del soporte.
            </li>   
            <li>
               <span class='right img'><img src="img/cuadrado3.jpg" alt="Cuadrado 3"/></span>
               Sevuelve a pasar el sogu&iacute;n por delante del tronco soportado y por detr&aacute;s del vertical, repitiendo esta operaci&oacute;n al menos tres veces.
            </li>     
            <li>
               <span class="left img"><img src="img/cuadrado4.jpg" alt="Cuadrado 4"/></span>
               Luego se dan al menos tres vueltas entre el soporte y el soportado, esta operaci&oacute;n se llama estrangulaci&oacute;n y debe realizarse suficiente presi&oacute;n para que el nudo sea firme y resistente.
            </li>      
            <li>
               <span class='right img'><img src="img/cuadrado5.jpg" alt="Cuadrado 5"/></span>
               <span class="texto">Por &uacute;ltimo, con el extremo libre y el peque&ntilde;o chicote que se dej&aacute; al inicio (paso 1) realizar un nudo llano.</span>
            </li>
         </ol>
      </div>
   </body>
</html>


[/list]

Por Inyaka

Claber

3176 de clabLevel

9 tutoriales
2 articulos

Genero:Masculino   Desarrollador de GAIA

Envíale un mensaje privado    

Programador y fotógrafo

firefox
Citar            
MensajeEscrito el 11 Dic 2007 11:03 am
Ah, es una buena opción esta también, me gusta el tema de tener en un mismo li, la imagen y el texto instructivo, me parece que está más acercado al tipo de explicación, y por supuesto de esta manera, estaríamos hablando de una lista ordenada, porque ahora sí están paso por paso.

Quiero opiniones... A ver? ^^

Por ClickyMouse

52 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 11 Dic 2007 11:50 am
Pues para eso mejor usar definition list y así se ahorran los span.

Por ryuz

350 de clabLevel

2 tutoriales

 

Envíale un mensaje privado     Web

firefox
Citar            
MensajeEscrito el 11 Dic 2007 11:52 am
Ole esa gente!
En este caso el uso de lista ordenada sí que sería más apropiado. Yo tenía entendido que querías colocarlo en un sistema de cuadros dobles, como la tabla que diste al principio, con la barra que aparecía en medio, entre el texto y la imagen relacionada.
Con floats se podía solucionar, está claro. A mí me parece que las dos soluciones que aportan Ryuz, y Pitxon e Inyaka están bien, además de la ventaja de eliminar cuatro <li>, lo cual gana en efectividad.
En fin. No te quejarás, ClickyMouse, te hemos hecho un apaño curioso no? XD

Por CrystalWorX

11 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

Barcelona

firefox
Citar            
MensajeEscrito el 11 Dic 2007 01:10 pm
Si, la verdad que no me puedo quejar, no se cómo agradecer toda la ayuda que me están dando, de a poco me voy metiendo en el mundo de los divs y me doy cuenta que es mucho más fácil y lógico maquetar con ellas que con tables.

Les pido mil disculpas si a veces fui muy preguntón o pesado, pero quédense tranquilos que fue solo por curiosidad y ganas de aprender, no es por dinero, ya que no gano ni ganaré nada con esta página, más que una valiosísima experiencia para próximos emprendimientos.

CrystalWorX escribió:

Ole esa gente!
En este caso el uso de lista ordenada sí que sería más apropiado. Yo tenía entendido que querías colocarlo en un sistema de cuadros dobles, como la tabla que diste al principio, con la barra que aparecía en medio, entre el texto y la imagen relacionada.


Ahora volviendo al tema, realmente me es indiferente que estén separados las imágenes del texto y mucho más ahora, que me parece que es más "semánticamente correcto" hacerlo con un <li> por instrucción.

Voy a intentar hacerlo, y se los muestro a ver qué les parece.

Saludos!

Por ClickyMouse

52 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

firefox
Ir a página 1, 2  Siguiente
Foros de discusión > Javascript y jQuery

   Página 1 de 2

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.