Problema con diseño

layker · #1 (**permalink**) 18/05/2008, 04:08

Hola tengo un problema muy gordo.. he creado un diseño para mi pagina con photoshop, lo he recortado y tal y he insertado cada trozo un su correspodiente celda de una tabla... tola que con firefox se me ve perfectamente pero luego con IExplorer se ve muy mal, todo descuadrado... me han dicho que se soluciona con hojas de stilo CSS, alguien m podria dcir que tngo k añadirle para solucinar ste problema?? ske me tiene ya desesperao... gracias de antemano, un saludo

PD: dejo el codigo x si sirve:

Cita:

<body topmargin="0" bgcolor=#996633>
<table width="728" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="34" height="748" rowspan="6" valign="top" background="images/es1.gif"><img src="images/l1.gif" width="34" height="748" /></td>
<td width="850" height="26" colspan="8" valign="top"><img src="images/top.gif" width="850" height="26" /></td>
<td width="38" height="748" rowspan="6" valign="top" background="images/es4.gif"><img src="images/l2.gif" width="38" height="748" /></td>
</tr>
<tr>
<td width="850" height="162" colspan="8" valign="top"><img src="images/top2.gif" width="850" height="162" /></td>
</tr>
<tr>
<td width="850" height="32" colspan="8" valign="top"><img src="images/top3.gif" width="850" height="32" /></td>
</tr>
<tr>
<td width="132" height="254" background="images/fo1.gif" align="center" valign="top"> </td>
<td width="32" height="528" rowspan="3" valign="top" background="images/es2.gif"><img src="images/m1.gif" width="32" height="528" /></td>
<td width="400" colspan="4" rowspan="3" align="center" valign="top" background="images/fo3.gif"><p>Prueba</p>

<p> </p>

</td>
<td width="31" height="528" rowspan="3" valign="top" background="images/es3.gif"><img src="images/m2.gif" width="31" height="528" /></td>
<td rowspan="3" width="128" background="images/fo3.gif" valign="top" align="center"> </td>
</tr>

<tr>
<td width="132" height="27" valign="top"><img src="images/cel1.gif" width="132" height="27" /></td>
</tr>
<tr>
<td width="132" background="images/fo2.gif" valign="top" align="center"> </td>
</tr>

<tr>
<td width="922" height="52" colspan="10" valign="top"><img src="images/footer.gif" width="922" height="52" /></td>
</tr>
</table>

layker · #2 (**permalink**) 18/05/2008, 16:40

Por favor necesito ayuda, alguna opinion o algo

layker · #3 (**permalink**) 20/05/2008, 12:22

Nadie puede orientarme k debo acer???

NightDark · #4 (**permalink**) 20/05/2008, 13:04

Te ayudaría pero no puedo ver como queda con imagenes :) puedes subir una copia a algun server web?

y otra cosa, deberías aprender a maquetar con CSS y xHTML.

layker · #5 (**permalink**) 20/05/2008, 13:16

Cita:

Iniciado por NightDark

Te ayudaría pero no puedo ver como queda con imagenes :) puedes subir una copia a algun server web?

y otra cosa, deberías aprender a maquetar con CSS y xHTML.

De CSS se lo basico pero xHTML nose que es, yo he diseñado la tabla como siempre he hecho y no he tnido problemas pero pasa eso.. con IE se vefatal y con firefox en cambio perfectamente. de todas formas aqui dejo un link

http://layker89.iespana.es/

daPhyre · #6 (**permalink**) 21/05/2008, 09:26

Cita:

Iniciado por layker

yo he diseñado la tabla como siempre he hecho y no he tnido problemas pero pasa eso.. con IE se vefatal y con firefox en cambio perfectamente. de todas formas aqui dejo un link

http://layker89.iespana.es/

Ahora ya veo el problema... ¡Terrible en verdad lo que te sucede! Primero que nada, usa CSS para tu página, comienza con un

Código:

*{margin:0; padding:0;}

Eso comenzaría a corregir un par de detalles, luego veríamos el resto... Veo que usas un area específica para tu diseño, por lo que tendríamos que usar pixeles para posicionar todo, y de preferencia no usar tablas que es lo que no está creando este efecto.

Cita:

Iniciado por layker

De CSS se lo basico pero xHTML nose que es

XTHML es casi lo mismo que HTML, solo un par de detalles, como cerrar las etiquetas individuales, y muy importante, la cabezera que especifica que usas xhtml. Creo que a lo que se refería nuestro compañero, era que separaras el diseño (CSS) de la página (XHTML o HTML). Otra recomendación: Usa mejor divs en lugar de tablas, por tu diseño será más óptimo, así como logrará que la página cargue en menor tiempo... Suerte!

Mikmoro · #7 (**permalink**) 21/05/2008, 10:44

Una pregunta:

Y si el ancho de la página va a ser estático ( <table width="728"), es decir, que no se va a adaptar al tamaño ni resolución de pantalla sino que siempre quedará igual... ¿por qué no coges la imagen original de photoshop y la usas de fondo? al fin y al cabo, trocearla te serviría de algo si fuera que vas a permitir que se adapte al tamaño de pantalla. pero para mantener la imagen estática, ¿para qué trocearla?

Mikel.

layker · #8 (**permalink**) 21/05/2008, 13:39

Muchas gracias pero no he conseguido solucionarlo con lo del CSS, en cuanto a lo de xHML alguien conoce algun manual que este bien? ske no se lo de los divs. yo siempre he usado tablas.

monokote · #9 (**permalink**) 21/05/2008, 14:15

Te recomiendo la pagina illasaron.com, tiene un curso de xhtml, css y javascript donde te lo explica todo perfectamente. El curso es un poco largo, 64 vidotutoriales de 1 hora aprox, pero puedes seleccionar los que te interesen.

Es fundamental que aunque no dejes las tablas del todo, aprendas a maquetar con divs, son mucho más versátiles

Un saludo

NUCKLEAR · #10 (**permalink**) 21/05/2008, 19:09

www.librosweb.es

Ahora esto no lo vas a aprender en 2 dias... advertencia.... a leer a leer y a releer.
Saludos