Problema con la separación de imagenes en la web

**paxarin** · 16/03/2010, 20:00

Muy buenas he realizado unos cambios en la web.
He creado una serie de imagenes, que por un motivo que no consigo saber estan separadas.
Os dejo el html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Lista de espera sanitaria</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
</head>
<body>
<div id="logotipo">
[img]objetos/logoprohibido2.jpg[/img]
</div>
<div id="cuerpo">
<div id="navegacion">
<ul>
[*][img]objetos/inicio.jpg[/img]
[*][img]objetos/enlaces.jpg[/img]
[*][img]objetos/foro.jpg[/img]
[*][img]objetos/noticias.jpg[/img]
[/list]</div>
<div id="separador">
[img]objetos/separador.jpg[/img]
</div>
<div id="contenido">

Esta Web esta enfocada principalmente para la gente que se encuentre atrapada en alguna lista de espera sanitaria, bien sea para consultas, pruebas hospitalarias o intervenciones quirúrgicas</p>

Aquí encontrareis todo tipo de información sobre este tema, como la constitución española, ley de garantia de la sanidad publica, noticias publicadas en la prensa y un foro de discusión. En el que podreis valorar los temas de la web, asi como expresar vuestros casos y pensamientos sobre este tema. </p>

Amparándonos en la Constitución Española y haciendo uso del articulo 20, esta Web ve la luz con la esperanza de que sirva de ayuda a cualquier persona afectada por este moderno "mal" que recorre ya las principales arterias de nuestro sistema sanitario sin control ninguno.</p>

Espero que con vuestra ayuda y colaboración hagamos posible que este proyecto continué hacia delante.</p>
</div>
<div id="menu">
<ul>[*][img]objetos/contacto.jpg[/img][*][img]objetos/quien.jpg[/img][*][img]objetos/amigas.jpg[/img][*][img]objetos/diseno.jpg[/img][*][img]objetos/publicidad.jpg[/img][/list]</div>
<div id="pie">
[img]objetos/pie.jpg[/img]
</body>
</html>

y la hoja de estilos.

body{background-image:url(objetos/azul.jpg);background-repeat:repeat-x}
img {border-style: none}
#global{width:800px}
#cuerpo {width:800px; float:left; margin: 0px 0px 0px 175px; background:white}
#logotipo{margin:0px 0px 0px 175px}
#navegacion {}
#navegacion li {float:left ; list-style:none}
#navegacion ul {margin-left:0px}
#separador{width:800px}
#contenido{width:500px;float:left;margin:20px }
#menu{width:200px;float:right}
#menu li{float:right; list-style:none}
#menu ul{}
#pie {}

Espero que me podais esplicar el por que.
Un saludo y muchas gracias de antemano.

**paxarin** · 17/03/2010, 11:16

Resumiendo.
Mi problema es que por ejemplo entre la parte superior de la web y la barra de navegación existe una separación que no consigo eliminar.
Tambien existe en otras imagenes de la web, pero una vez solucione una solucionare todas.
Un saludo

**seba_academico** · 17/03/2010, 14:50

dejanos la url de tu web para que veamos nosotros tambien el problema y haci poder revisar el codigo

**paxarin** · 17/03/2010, 15:03

Iniciado por seba_academico

dejanos la url de tu web para que veamos nosotros tambien el problema y haci poder revisar el codigo

www.listadeespera.eu[/url]

**icocelebes** · 11/04/2010, 23:09

Hola paxarin: En la web jorgens explica el problema de la separación entre la cabezera y el menú, busca en "Curso paso a paso" y lo encontraras.

**Raulyure** · 12/04/2010, 13:16

Iniciado por paxarin

Muy buenas he realizado unos cambios en la web.
He creado una serie de imagenes, que por un motivo que no consigo saber estan separadas.
Os dejo el html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Lista de espera sanitaria</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
</head>
<body>
<div id="logotipo">
[img]objetos/logoprohibido2.jpg[/img]
</div>
<div id="cuerpo">
<div id="navegacion">
<ul>
[*][img]objetos/inicio.jpg[/img]
[*][img]objetos/enlaces.jpg[/img]
[*][img]objetos/foro.jpg[/img]
[*][img]objetos/noticias.jpg[/img]
[/list]</div>
<div id="separador">
[img]objetos/separador.jpg[/img]
</div>
<div id="contenido">

Esta Web esta enfocada principalmente para la gente que se encuentre atrapada en alguna lista de espera sanitaria, bien sea para consultas, pruebas hospitalarias o intervenciones quirúrgicas</p>

Aquí encontrareis todo tipo de información sobre este tema, como la constitución española, ley de garantia de la sanidad publica, noticias publicadas en la prensa y un foro de discusión. En el que podreis valorar los temas de la web, asi como expresar vuestros casos y pensamientos sobre este tema. </p>

Amparándonos en la Constitución Española y haciendo uso del articulo 20, esta Web ve la luz con la esperanza de que sirva de ayuda a cualquier persona afectada por este moderno "mal" que recorre ya las principales arterias de nuestro sistema sanitario sin control ninguno.</p>

Espero que con vuestra ayuda y colaboración hagamos posible que este proyecto continué hacia delante.</p>
</div>
<div id="menu">
<ul>[*][img]objetos/contacto.jpg[/img][*][img]objetos/quien.jpg[/img][*][img]objetos/amigas.jpg[/img][*][img]objetos/diseno.jpg[/img][*][img]objetos/publicidad.jpg[/img][/list]</div>
<div id="pie">
[img]objetos/pie.jpg[/img]
</body>
</html>

y la hoja de estilos.

body{background-image:url(objetos/azul.jpg);background-repeat:repeat-x}
img {border-style: none}
#global{width:800px}
#cuerpo {width:800px; float:left; margin: 0px 0px 0px 175px; background:white}
#logotipo{margin:0px 0px 0px 175px}
#navegacion {}
#navegacion li {float:left ; list-style:none}
#navegacion ul {margin-left:0px}
#separador{width:800px}
#contenido{width:500px;float:left;margin:20px }
#menu{width:200px;float:right}
#menu li{float:right; list-style:none}
#menu ul{}
#pie {}

Espero que me podais esplicar el por que.
Un saludo y muchas gracias de antemano.

Hola.
En este momento estoy en una biblioteca y las restricciones no me dejan acceder a su página, así que con los códigos que usted ha puesto en el mensaje me haré una idea de su problema.

Primero.- Veo que usted le ha dado en la hoja de estilo a la capa global un width:800px. pero esa capa no la tiene en su página.

Luego tiene una capa llamada cuerpo a la que le ha dado también 800px de ancho (width)

Pero las imagenes que usted ha puesto como enlaces en la capa navegación (inicio, visitas, enlaces, foros, noticias,contactos) al parecer tienen distinto ancho cada una y puede que la suma de todas ellas supere el ancho de la capa cuerpo (que es de 800px).

Creo que tiene que revisar eso.

Luego a la capa cuerpo usted le ha dado un margin por arriba de 0px, por la derecha de 0px, por abajo de 0px, pero por la izquierda de 175px.
eso haría que la pagina realmente quedara al visualizarla, cargada a la derecha.

Lo mismo le sucede con el logotipo.

Tampoco especifica qué es lo que va dentro de la capa cuerpo, porque si dentro de la capa cuerpo se incluye también la capa pie (que sería lo correcto) debiera de cerrar esa capa cuerpo con un </div> el cual tendría que poner justo debajo del cierre de la capa pie (cierre que tampoco ha puesto)

Yo lo que haría por el momento sería ir a la capa menu (en la hoja de estilo) e incluirle la siguiente directiva (text-align:center).

Luego iría a la capa cuerpo, (también en la hoja de estilo) y le pondría un ancho (width) de 900px (ya que las imagenes que tiene puesto en los enlaces de la capa navegación seguramente sumaran entre ellos casi unos 900px)
También en la capa cuerpo yo le pondría a continuación del width:900px,
un margin4px auto, cosa de que quede así.

body{text-align:center;background-image:url(objetos/azul.jpg);background-repeat:repeat-x}

#cuerpo {width:900px;margin:4px auto; float:left; background:white}

en otra ocasión veremos más detalles.
Saludos