Foros del Web - diseño de página horizontal

Foros del Web (http://www.forosdelweb.com/)

- Diseño web (http://www.forosdelweb.com/f91/)

- - diseño de página horizontal (http://www.forosdelweb.com/f91/diseno-pagina-horizontal-420779/)

diseño de página horizontal

Hola de nuevo

como alguien habrá leido en otro hilo, resulta que quiero hacer una web; quiero que una página en la que se muestran bastantes imágenes, sea horizontal (aparecerá un scroll horizontal, consecuencia que no solo no me desagrada sino que busco), pero como no tengo idea de muchas cosas, y no sé el orden en que se irán cargando las imágenes, pués no sé si será un problema poner demasiadas imagenes una al lado de otra en horizontal, en vertical creo q no hay mucho problema pero al revés no lo sé...quizás debo repartir las imágenes en varias páginas en lugar de ponerlas todas en la misma???

no sé si me entendereis :'(

Aunque la página esté en horizontal, -con las imágenes metidas en una tabla, por ejemplo- las irás llenando en orden (de arriba a abajo y de izquierda a derecha), y ese debería ser el orden en que se carguen.

sobre el código... puedes hacerlo con tablas, con div, ...

Aqui un ejemplo con tabla:

Código:

<body>

<table width="500%">

  <tr>

    <td width="3%" align="center">1</td>

    <td width="3%" align="center">2</td>

    <td width="3%" align="center">3</td>

    <td width="3%" align="center">4</td>

    <td width="3%" align="center">5</td>

    <td width="3%" align="center">6</td>

    <td width="3%" align="center">7</td>

    <td width="3%" align="center">8</td>

    <td width="3%" align="center">9</td>

    <td width="3%" align="center">10</td>

    <td width="3%" align="center">11</td>

    <td width="3%" align="center">12</td>

    <td width="3%" align="center">13</td>

    <td width="3%" align="center">14</td>

    <td width="3%" align="center">15</td>

    <td width="3%" align="center">16</td>

    <td width="3%" align="center">17</td>

    <td width="3%" align="center">18</td>

    <td width="3%" align="center">19</td>

    <td width="3%" align="center">20</td>

    <td width="3%" align="center">21</td>

    <td width="3%" align="center">22</td>

    <td width="3%" align="center">23</td>

    <td width="3%" align="center">24</td>

    <td width="3%" align="center">25</td>

    <td width="3%" align="center">26</td>

    <td width="3%" align="center">27</td>

    <td width="3%" align="center">28</td>

    <td width="3%" align="center">29</td>

    <td width="3%" align="center">30</td>

    <td width="3%" align="center">31</td>

    <td width="3%" align="center">32</td>

    <td width="3%" align="center">33</td>

  </tr>

  <tr>

    <td width="3%" align="center">34</td>

    <td width="3%" align="center">35</td>

    <td width="3%" align="center">36</td>

    <td width="3%" align="center">37</td>

    <td width="3%" align="center">38</td>

    <td width="3%" align="center">39</td>

    <td width="3%" align="center">40</td>

    <td width="3%" align="center">41</td>

    <td width="3%" align="center">42</td>

    <td width="3%" align="center">43</td>

    <td width="3%" align="center">44</td>

    <td width="3%" align="center">45</td>

    <td width="3%" align="center">46</td>

    <td width="3%" align="center">47</td>

    <td width="3%" align="center">48</td>

    <td width="3%" align="center">49</td>

    <td width="3%" align="center">50</td>

    <td width="3%" align="center">51</td>

    <td width="3%" align="center">52</td>

    <td width="3%" align="center">53</td>

    <td width="3%" align="center">54</td>

    <td width="3%" align="center">55</td>

    <td width="3%" align="center">56</td>

    <td width="3%" align="center">57</td>

    <td width="3%" align="center">58</td>

    <td width="3%" align="center">59</td>

    <td width="3%" align="center">60</td>

    <td width="3%" align="center">61</td>

    <td width="3%" align="center">62</td>

    <td width="3%" align="center">63</td>

    <td width="3%" align="center">64</td>

    <td width="3%" align="center">65</td>

    <td width="3%" align="center">66</td>

  </tr>

</table>

</body>

:adios:

gracias:arriba: aunque mi idea es crear la página directamente por medio de CSS, lo he comenzado a aprender hace poco y no me desagrada, además de que está mejor visto que el uso de tablas actualmente...

Dices que está mejor visto que el uso de tablas actualmente...

Lo primero: no te dejes llevar por modas y/o comentarios de principiantes que van de listillos por la vida.

Lo segundo: "un sitio para cada cosa y cada cosa en su sitio". Las tablas tienen un sentido: presentar datos de forma tabulada. Y para eso deben usarse. En tu caso concreto, para distribuir contenido, sí que es mejor que uses CSS, pero si por ejemplo vas a poner una tabla de valores, lo lógico es usar una tabla.

:adios:

<body><div id="capa" name="capa" style="position:absolute; left:0px; top:0px; width:300%; height:100%; z-index:3"> contenido de la pagina</div></body>

gracias a todos!

solo una cosa Azrael, lo que no entiendo es por qué el z-index es de 3, tiene que ser ese número o podría ser cualquiera? imagino que lo has puesto al azar no? (más que nada pa' entender un poco la cosa y no hacerla así de "memorieta" :no: )

quizás te de alguna buena idea bluevertigo, que también es una "página horizontal"..

Cita:

es por qué el z-index

z-index es para saber que capas están "más arriba" si hay capas superpuestas... cuanto "más grande" el número, más "cerca de la superficie" está (pensá como si fuera una cebolla)

PD: en el ejemplo de Azrael666 el z-index es inecesario porque hay una sola capa ;-)