Buenas tardes, tengo un problema con las capas de mi web en especifico con un banner y el menú lateral, pues bien lo que pasa es que al insertar la imagen del banner esta misma se "come" a la imagen superior del menu lateral. Ya e probado de todo pero aun no consigo hacerlo.
Aquí les dejo los códigos para ver si lograr ver que es lo que estoy haciendo mal :
CSS:
* {text-indent:0px; margin:0px; padding:0px; border:0px;}
p {text-align:justify}
h1 {font-size:1.2em; color:0099ff; font-weight:bold; text-decoration:none; text-align:center;}
h2 {font-size:1.1em; color:black; font-weight:bold; text-decoration:none; text-align:center;}
body {background-color:F0F8FF; text-align:center;}
#control {width:800px; margin:4px auto;}
#curva-superior {background-image:url(objetos/curva-superior.gif.gif); background-repeat:no-repeat; width:800px; height:12px; overflow:hidden;}
#cabecera {border-left:1px solid black; border-right:1px solid black; height:150px;}
#logotipo a {background-color:white;}
#navegacion {background-image:url(objetos/barra-navegacion.png.png);background-repeat:no-repeat; width:800px; height:25px}
#navegacion ul { margin: 5px 30px 10px 150px}
#navegacion li {float:left; list-style:none; margin:0px 50px 0px 50px;}
#contenido-top {background-image:url(objetos/contenido-superior.gif.gif);background-repeat:no-repeat; height:45px; width:788px;}
#contenido-background {background-color:F5F5F5; border-left:1px solid black; border-right:1px solid black; padding:4px 4px 4px 4px}
#contenido {background-image:url(objetos/contenido-inferior.gif.gif); background-position:bottom;}
#contenido p {padding:5px 10px 5px 10px; text-indent:15px;}
#banner a {background-color:white; float:center;}
#menu {width:150px; float:left; text-align:left; margin:5px 5px 5px 10px;padding-bottom:5px; background-image: url(objetos/menu-parte-inferior.gif.gif); background-position:bottom;}
#menu li {font-size:14px; list-style:none; margin:5px 8px 5px 6px;}
#menu h1 {text-decoration:none; font-size:15px; background-image:url(objetos/menu-parte-superior.gif.gif) padding-top:12px;}
#pie {background-color:white; border-top:1px solid black; border-left:1px solid black; border-right:1px solid black; height:65px;}
#pie a {background-color:white}
#pie li {list-style:none; font-size:12px}
#pie-izquierdo {float:left; width:150px;}
#pie-central{float:left; width:496px;}
#pie-derecho {float:left; width:150px;}
#curva-inferior {background-image:url(objetos/curva-inferior.gif.gif); background-repeat:no-repeat; width:800px; height:12px; overflow:hidden;}
.centrado {text-align:center}
a {color:#00688B; text-decoration:none; display:block;}
a:link {}
a:visited {}
a:hover {color:blue; text-decoration:none; background-color:silver;}
a:active {color:black; text-decoration:none;}
#navegacion a {color:white; text-decoration:none; display:block}
#navegacion a:link {}
#navegacion a:visited {}
#navegacion a:hover {color:white; text-decoration:none; background-color:transparent}
#navegacion a:active {}
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>???</title>
<link rel="stylesheet" href="../estilo-general.css" type="text/css" media="all">
</head>
<body>
<!-- CABECERA -->
<div id="control">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"><a href="#"><img alt="???" src="../objetos/logotipo.gif.gif" height="150px" width="798px" /></a></div>
</div>
<!-- NAVEGACION-->
<div id="navegacion">
<ul><li><a href="../index.html">Inicio</a></li><li><a href="../#">???</a></li><li><a href="../#">???</a></li></ul>
</div>
<!-- CONTENIDO-->
<div id="contenido-background">
<div id="contenido-top"><h1>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX </h1></div>
<div id="contenido">
<div id="banner"><a href="#"><img src="objetos/banner.png.png" alt="???" height:"150px" width:"500px"></a></div>
</br>
<div id="menu">
<ul><h1>Menu</h1><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a href="#">Enlace 3</a></li></ul>
</div>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXX</p>
</br>
</div>
</div>
<!-- PIE-->
<div id="pie">
<div id="pie-izquierdo">
<ul>
<li><a href="#">Contactos</a></li>
</ul>
</div>
<div id="pie-central">pie central</div>
<div id="pie-derecho">
<ul>
<li><a href="#">Mapa de la Web</a></li>
</ul>
</div>
</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
Le agradecería mucho si logran descifrarlo, tengo 2 días completos tratando de arreglarlo
y aun no lo descifro.
Saludos.