Descuadre en maquetación CSS

wesdakss · #1 (**permalink**) 18/08/2011, 12:14

Buenas tardes, desde mi inexperiencia llevo 3 horas rompiendome la cabeza para que me cuadre la web, os explico:

He maquetado una imagen a partir de Fireworks y la he exportado a Dreamweaver CS 5.5, hasta ahí todo normal.

El problema viene cuando inserto texto mediante etiqueta Div, seleccionando una de las capas, borrándola, e insertando un nuevo fondo css (precisamente esa parte de la imagen). En Dreamweaver se muestra normal, pero en cuanto cambio la vista a "vista en vivo" se me descuadra la web entera.

Así es cómo debería verse la web:

http://www.ecosportgranada.com/eventos/

Y así es como se me queda al agregarle texto:

http://www.ecosportgranada.com/eventos/mal/

¿¿¿¿Alguna soluciónnn????

MUCHAS GRACIAS!!!!

wesdakss · #2 (**permalink**) 18/08/2011, 12:24

Código:

Cita:

<!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>playa-con-dunas libre.gif</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="estilos.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-color: #000;
}
</style>
</head>
<body>
<div align="center">
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="1024">

<tr>
<td><img src="images/spacer.gif" width="41" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="395" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="209" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="326" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="53" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>

<tr>
<td colspan="5"><img name="parte_superior" src="images/parte_superior.gif" width="1024" height="57" border="0" id="parte_superior" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="57" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="5"><img name="encabezado" src="images/encabezado.jpg" width="1024" height="46" border="0" id="encabezado" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="46" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="5"><img name="superior" src="images/superior.jpg" width="1024" height="73" border="0" id="superior" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="73" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="3"><img name="playacondunaslibre_r4_c1" src="images/playa-con-dunas%20libre_r4_c1.jpg" width="41" height="523" border="0" id="playacondunaslibre_r4_c1" alt="" /></td>
<td rowspan="2" align="left" valign="top"><div id="texto">http://www.ecosportgranada.com/eventos/</div></td>
<td rowspan="2"><img name="centro" src="images/centro.jpg" width="209" height="493" border="0" id="centro" alt="" /></td>
<td><img name="menu" src="images/menu.jpg" width="326" height="352" border="0" id="menu" alt="" /></td>
<td><img name="playacondunaslibre_r4_c5" src="images/playa-con-dunas%20libre_r4_c5.jpg" width="53" height="352" border="0" id="playacondunaslibre_r4_c5" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="352" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="contacta" src="images/contacta.jpg" width="326" height="141" border="0" id="contacta" alt="" /></td>
<td><img name="playacondunaslibre_r5_c5" src="images/playa-con-dunas%20libre_r5_c5.jpg" width="53" height="141" border="0" id="playacondunaslibre_r5_c5" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="141" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="4"><img name="playacondunaslibre_r6_c2" src="images/playa-con-dunas%20libre_r6_c2.jpg" width="983" height="30" border="0" id="playacondunaslibre_r6_c2" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="30" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="5"><img name="parte_inferior" src="images/parte_inferior.gif" width="1024" height="69" border="0" id="parte_inferior" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="69" border="0" alt="" /></td>
</tr>
</table>
</div>
</body>
</html>

Tedel · #3 (**permalink**) 18/08/2011, 14:46

1. Quita el DIV texto que no sé qué (@#!) hace allí y al párrafo siguiente dale margen superior de cero.

2. Deja de usar DreamWeaver, en serio.

IEKK · #4 (**permalink**) 18/08/2011, 17:35

Cita:

Iniciado por Tedel

1. Quita el DIV texto que no sé qué (@#!) hace allí y al párrafo siguiente dale margen superior de cero.

2. Deja de usar DreamWeaver, en serio.

El dreamweaver no tiene nada de malo si se utiliza correctamente.
La porquería de más que añade aparece cuando los usuarios crean las páginas al estilo FrontPage, desde vista diseño y sin crear ellos el código.

wesdakss · #5 (**permalink**) 19/08/2011, 08:12

Gracias por vuestras respuestas, al final la solución estaba en añadirle al css:

p {
margin: 0;
}