paginas para cualquier resolucion

Citar

Escrito el 02 Abr 2008 03:33 pm

Hola, solo una duda, como puedo hacer q mis paginas se vean en cualquier resolucion???
Una ves vi una pagina la cual si tu ventana la haces pequeña la pag tmb, como hao eso? con etiqteas div? y estilos?

gracias!!!

Por geadark_7

30 de clabLevel

Genero:Femenino

Envíale un mensaje privado Email

Citar

Escrito el 02 Abr 2008 03:36 pm

Generalmente eso sucede cuando hablamos de diseño líquido en el cual el ancho y los componentes de la página no son estáticos sino que están dados por porcentajes, para hacerlo debes usar XHTML y CSS.

Por Zarzamora

BOFH

3056 de clabLevel

3 tutoriales
12 articulos

Envíale un mensaje privado

Citar

Escrito el 02 Abr 2008 03:44 pm

Como puede centrar la etiqueta div?

Por geadark_7

30 de clabLevel

Genero:Femenino

Envíale un mensaje privado Email

Citar

Escrito el 02 Abr 2008 03:53 pm

Código :

<center>
<div></div>
</center>

Solo bromeaba, ahora si de verdad. Una de las maneras es:

Código :

<style type="text/css">
div#idDelDiv{
   margin:0 auto;
}
</style>
<div id="idDelDiv">
</div>

Otra forma es colocando algo así

Código :

div#idDelDiv {
width: 720px;/*suponiendo que mide 720px*/
position: relative;
left: 50%;
margin-left: -360px;/*la mitad del width*/
}

Pero veo a la primera manera mucho más fácil

Por Morgoth

13 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 02 Abr 2008 03:58 pm

en el segundo codigo tenrdia q hacer un css?

Por geadark_7

30 de clabLevel

Genero:Femenino

Envíale un mensaje privado Email

Citar

Escrito el 02 Abr 2008 04:01 pm

En el segundo código tienes que hacer un archivo CSS externo lo cual es más recomendable que meterlo directamente en el XHTML.

Por otro lado es mejor hacerlo con margin: 0 auto;

Por Zarzamora

BOFH

3056 de clabLevel

3 tutoriales
12 articulos

Envíale un mensaje privado

Ultima edición por Zarzamora el 02 Abr 2008 04:03 pm, editado 1 vez

Citar

Escrito el 02 Abr 2008 04:02 pm

eso va antes del contenido del div?
porq tengo una tabla dentro

Por geadark_7

30 de clabLevel

Genero:Femenino

Envíale un mensaje privado Email

Citar

Escrito el 02 Abr 2008 04:05 pm

No trabajes con tablas y como te dije eso va en un documento aparte, un archivo .css que luego llamas desde el XHTML.
Te recomiendo que si aún no tienes muy claras las cosas te pases por los tutoriales de CSS y así empieces. Tutoriales de CSS

Por Zarzamora

BOFH

3056 de clabLevel

3 tutoriales
12 articulos

Envíale un mensaje privado

Citar

Escrito el 02 Abr 2008 04:09 pm

pero las imagenes q exporto c ponen en una tabla, las tendria q poner en etiquetas div?

Por geadark_7

30 de clabLevel

Genero:Femenino

Envíale un mensaje privado Email

Citar

Escrito el 02 Abr 2008 04:10 pm

Por eso te digo que te pases por los tutoriales o muestres lo que llevas del código para ver mejor el problema ya que aquí te dimos las posibles soluciones a tu problema ya depende como quieras implementarlas mejor.

Por Zarzamora

BOFH

3056 de clabLevel

3 tutoriales
12 articulos

Envíale un mensaje privado

Citar

Escrito el 02 Abr 2008 04:12 pm

geadark_7 escribió:

pero las imagenes q exporto c ponen en una tabla, las tendria q poner en etiquetas div?

¿Por qué tiene que ser así? Hazlo a mano, no uses el código exportado.

Por Freddie

BOFH

53 tutoriales
597 articulos
43 ejemplos

Genero:Masculino Admin

Envíale un mensaje privado Web

Conserje de Cristalab

@freddier

Citar

Escrito el 02 Abr 2008 04:16 pm

ok ok pero no m regañen

Por geadark_7

30 de clabLevel

Genero:Femenino

Envíale un mensaje privado Email

Citar

Escrito el 02 Abr 2008 04:18 pm

esto es lo q esta

Código :

<body>
<div align="center">
  <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
    <!-- fwtable fwsrc="Sin t&iacute;tulo" fwbase="banner7.gif" fwstyle="Dreamweaver" fwdocid = "1538285532" fwnested="0" -->
    <tr>
      <td><img src="imágenes/spacer.gif" width="19" height="1" border="0" alt="" /></td>
      <td><img src="imágenes/spacer.gif" width="37" height="1" border="0" alt="" /></td>
      <td><img src="imágenes/spacer.gif" width="388" height="1" border="0" alt="" /></td>
      <td><img src="imágenes/spacer.gif" width="32" height="1" border="0" alt="" /></td>
      <td><img src="imágenes/spacer.gif" width="45" height="1" border="0" alt="" /></td>
      <td><img src="imágenes/spacer.gif" width="126" height="1" border="0" alt="" /></td>
      <td><img src="imágenes/spacer.gif" width="64" height="1" border="0" alt="" /></td>
      <td><img src="imágenes/spacer.gif" width="10" height="1" border="0" alt="" /></td>
      <td><img src="imágenes/spacer.gif" width="53" height="1" border="0" alt="" /></td>
      <td><img src="imágenes/spacer.gif" width="10" height="1" border="0" alt="" /></td>
      <td><img src="imágenes/spacer.gif" width="68" height="1" border="0" alt="" /></td>
      <td><img src="imágenes/spacer.gif" width="89" height="1" border="0" alt="" /></td>
      <td><img src="imágenes/spacer.gif" width="45" height="1" border="0" alt="" /></td>
      <td><img src="imágenes/spacer.gif" width="14" height="1" border="0" alt="" /></td>
      <td><img src="imágenes/spacer.gif" width="1" height="1" border="0" alt="" /></td>
    </tr>
    <tr>
      <td rowspan="9"><img name="der" src="imágenes/der.gif" width="19" height="900" border="0" id="der" alt="" /></td>
      <td rowspan="2" colspan="6"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="692" height="105">
        <param name="movie" value="fla/top.swf" />
        <param name="quality" value="high" />
        <embed src="fla/top.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="692" height="105"></embed>
      </object></td>
      <td colspan="6"><img name="banner7_r1_c8" src="imágenes/banner7_r1_c8.gif" width="275" height="68" border="0" id="banner7_r1_c8" alt="" /></td>
      <td rowspan="9"><img name="izq" src="imágenes/izq.gif" width="14" height="900" border="0" id="izq" alt="" /></td>
      <td><img src="imágenes/spacer.gif" width="1" height="68" border="0" alt="" /></td>
    </tr>
    <tr>
      <td colspan="2"><img src="imágenes/banner7_r2_c8.gif" alt="" name="banner7_r2_c8" width="63" height="37" border="0" usemap="#banner7_r2_c8Map" id="banner7_r2_c8" /></td>
      <td colspan="2"><img src="imágenes/banner7_r2_c10.gif" alt="" name="banner7_r2_c10" width="78" height="37" border="0" usemap="#banner7_r2_c10Map" id="banner7_r2_c10" /></td>
      <td colspan="2"><img name="banner7_r2_c12" src="imágenes/banner7_r2_c12.gif" width="134" height="37" border="0" id="banner7_r2_c12" alt="" /></td>
      <td><img src="imágenes/spacer.gif" width="1" height="37" border="0" alt="" /></td>
    </tr>
    <tr>
      <td colspan="12"><img name="banner7_r3_c2" src="imágenes/banner7_r3_c2.gif" width="967" height="41" border="0" id="banner7_r3_c2" alt="" /></td>
      <td><img src="imágenes/spacer.gif" width="1" height="41" border="0" alt="" /></td>
    </tr>
    <tr>
      <td colspan="12"><img name="banner7_r4_c2" src="imágenes/banner7_r4_c2.gif" width="967" height="11" border="0" id="banner7_r4_c2" alt="" /></td>
      <td><img src="imágenes/spacer.gif" width="1" height="11" border="0" alt="" /></td>
    </tr>
    <tr>
      <td colspan="2"><img name="banner7_r5_c2" src="imágenes/banner7_r5_c2.gif" width="425" height="27" border="0" id="banner7_r5_c2" alt="" /></td>
      <td colspan="2"><img name="banner7_r5_c4" src="imágenes/banner7_r5_c4.gif" width="77" height="27" border="0" id="banner7_r5_c4" alt="" /></td>
      <td><img name="banner7_r5_c6" src="imágenes/banner7_r5_c6.gif" width="126" height="27" border="0" id="banner7_r5_c6" alt="" /></td>
      <td colspan="2"><img name="banner7_r5_c7" src="imágenes/banner7_r5_c7.gif" width="74" height="27" border="0" id="banner7_r5_c7" alt="" /></td>
      <td colspan="2"><img name="banner7_r5_c9" src="imágenes/banner7_r5_c9.gif" width="63" height="27" border="0" id="banner7_r5_c9" alt="" /></td>
      <td><img name="banner7_r5_c11" src="imágenes/banner7_r5_c11.gif" width="68" height="27" border="0" id="banner7_r5_c11" alt="" /></td>
      <td><img name="banner7_r5_c12" src="imágenes/banner7_r5_c12.gif" width="89" height="27" border="0" id="banner7_r5_c12" alt="" /></td>
      <td><img name="banner7_r5_c13" src="imágenes/banner7_r5_c13.gif" width="45" height="27" border="0" id="banner7_r5_c13" alt="" /></td>
      <td><img src="imágenes/spacer.gif" width="1" height="27" border="0" alt="" /></td>
    </tr>
    <tr>
      <td colspan="12"><img name="banner7_r6_c2" src="imágenes/banner7_r6_c2.gif" width="967" height="35" border="0" id="banner7_r6_c2" alt="" /></td>
      <td><img src="imágenes/spacer.gif" width="1" height="35" border="0" alt="" /></td>
    </tr>
    <tr>
      <td rowspan="2"><img name="banner7_r7_c2" src="imágenes/banner7_r7_c2.gif" width="37" height="648" border="0" id="banner7_r7_c2" alt="" /></td>
      <td colspan="2"><img name="banner7_r7_c3" src="imágenes/banner7_r7_c3.gif" width="420" height="310" border="0" id="banner7_r7_c3" alt="" /></td>
      <td colspan="8"><img name="banner7_r7_c5" src="imágenes/banner7_r7_c5.gif" width="465" height="310" border="0" id="banner7_r7_c5" alt="" /></td>
      <td rowspan="2"><img name="banner7_r7_c13" src="imágenes/banner7_r7_c13.gif" width="45" height="648" border="0" id="banner7_r7_c13" alt="" /></td>
      <td><img src="imágenes/spacer.gif" width="1" height="310" border="0" alt="" /></td>
    </tr>
    <tr>
      <td colspan="2"><img name="banner7_r8_c3" src="imágenes/banner7_r8_c3.gif" width="420" height="338" border="0" id="banner7_r8_c3" alt="" /></td>
      <td colspan="8"><img name="banner7_r8_c5" src="imágenes/banner7_r8_c5.gif" width="465" height="338" border="0" id="banner7_r8_c5" alt="" /></td>
      <td><img src="imágenes/spacer.gif" width="1" height="338" border="0" alt="" /></td>
    </tr>
    <tr>
      <td colspan="12"><img name="down" src="imágenes/down.gif" width="967" height="33" border="0" id="down" alt="" /></td>
      <td><img src="imágenes/spacer.gif" width="1" height="33" border="0" alt="" /></td>
    </tr>
  </table>
</div>

[la próxima vez utiliza las etiquetas code :bofh:

]

Por geadark_7

30 de clabLevel

Genero:Femenino

Envíale un mensaje privado Email

Citar

Escrito el 02 Abr 2008 04:22 pm

La reomendación es que dejes de usar tablas, mira los tutoriales, allí te dicen como hacer tu página con divs y el div principal lo puedes centrar poniéndole

Código :

#div_principal{
margin: 0 auto;
text-align: center; /*esto es para IE*/
}

Por Zarzamora

BOFH

3056 de clabLevel

3 tutoriales
12 articulos

Envíale un mensaje privado

Citar

Escrito el 02 Abr 2008 04:24 pm

bueno leo el tutorial q m diste, para ver si asi puedo, y si no los estare molestando

Por geadark_7

30 de clabLevel

Genero:Femenino

Envíale un mensaje privado Email

Citar

Escrito el 02 Abr 2008 04:33 pm

Si ya me qedó!!!! ya lo pude centrar,

ahora en cuanto a las imagenes las voy poniendo igual en etiquetas div? para que ya no use las tablas

Por geadark_7

30 de clabLevel

Genero:Femenino

Envíale un mensaje privado Email

Citar

Escrito el 02 Abr 2008 04:52 pm

¿Leíste los tutoriales? Claro que puedes armar la página con sólo divs y poner algunas imágenes de fondo, ya eso depende de lo que necesites específicamente.

P.D. Por favor escribe correctamente, ésto es un foro por lo tanto no uses palabras abreviadas y que no se entienden.

Por Zarzamora

BOFH

3056 de clabLevel

3 tutoriales
12 articulos

Envíale un mensaje privado

Citar

Escrito el 02 Abr 2008 04:59 pm

si, lei el turorial de centrar div horizontal en css, y perdon por las palabras

Por geadark_7

30 de clabLevel

Genero:Femenino

Envíale un mensaje privado Email

Citar

Escrito el 02 Abr 2008 05:06 pm

Mira éste tutorial para lo que dices de las imágenes que tienes en las tablas, igual como te digo, todo depende del uso que les vayas a dar, eso si va exclusivamente en lo que tú quieras hacer.

El modelo de caja de CSS

Por Zarzamora

BOFH

3056 de clabLevel

3 tutoriales
12 articulos

Envíale un mensaje privado

Citar

Escrito el 02 Abr 2008 05:15 pm

ok, gracias!!!!, otra pregunta mas.

lo q tengo del div ya centrado, sirve para todas las resoluciones? asi sea de 800*600
ps mi pag es de 1000*900

Por geadark_7

30 de clabLevel

Genero:Femenino

Envíale un mensaje privado Email

Citar

Escrito el 02 Abr 2008 05:17 pm

No, no sirve... mira la primera respuesta que te puse en éste hilo.

Por Zarzamora

BOFH

3056 de clabLevel

3 tutoriales
12 articulos

Envíale un mensaje privado

Citar

Escrito el 02 Abr 2008 05:24 pm

a q t refieres con diseño liquido?

Por geadark_7

30 de clabLevel

Genero:Femenino

Envíale un mensaje privado Email

Citar

Escrito el 02 Abr 2008 05:31 pm

Tienes alguna cuenta, donde podamos platicar?, esque tengo que hacer, otras cosas sobre una pagina pero no se como hacerlo y creo seria mas factible si platicamos

Por geadark_7

30 de clabLevel

Genero:Femenino

Envíale un mensaje privado Email

Citar

Escrito el 02 Abr 2008 05:33 pm

Que crece y disminuye con el tamaño de la ventana.
Cuando pones los tamaños de los objetos con medidas porcentuales, todo refiere al tamaño de la ventana, con lo que su tamaño se ajusta "liquidamente" a su contenedor.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

paginas para cualquier resolucion

Escribe una respuesta rapida