Como poner una capa al lado de otra

lugargratis · #1 (**permalink**) 20/08/2013, 08:40

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>

<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>

<div id="navegacion">
<ul><li><a href="../index.html">Inicio</a></li><li><a href="../#">???</a></li><li><a href="../#">???</a></li></ul>
</div>

<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>


<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.

Rafael · #2 (**permalink**) 20/08/2013, 09:33

Bienvenido primero que nada.

Seguramente estás usando Dreamgüiver... Olvídate de ese concepto "capas" eso no existe más que en la absurda imaginación de los creadores del Dreamgüiver. Es realmente una maldición

En cuanto a tu código, no se entiende bien el problema ya que faltan las imágenes, o quizá hoy tengo medio apagada la cabeza. ¿Tendrás publicada la página por ahí?, ¿o una captura de pantalla de tu página?

lugargratis · #3 (**permalink**) 20/08/2013, 10:10

Gracias por la bienvenida... con el rollo de mi web se me paso presentarme.

No, estoy usando el HTML-kit... Ohh no sabia que no se llamaba de esa forma, lo que pasa es que tome un curso y el profesor lo llamaba "capa"... Entonces cual es el termino correcto?

Por lo de el codigo disculpa, pense que solo con el codigo bastaba (no uso mucho los foros), de cualquier manera te la pagina mira:

http://www.informacionweb.tuars.com/index.html

Nota: Tengo muy poco en esto de las web y se me hace un poco complicado todo esto, mi web es de "aprendizaje" pero en realidad el que esta aprendiendo soy yo, es como una web para poner todo en practica y entender todos estos conceptos, entonces ahí si podre enseñar... Acabo de subir la web y me veo con otro problema la barra de navegacion esta distorsionada :(. Si en tu navegador se le ve otro fallo me avisas y veré que hago.

Gracias.

Rafael · #4 (**permalink**) 20/08/2013, 10:53

entonces tu profesor es el que tiene la maldición

Capa es como ir al doctor y decirle me duele la "panza". El doctor necesita descartar ese término coloquial y saber si es la parte alta del abdomen, del lado izquierdo, si es con presión, si es dolor agudo...

Lo del código está super bien, buen inicio, solo que no se ve claro el problema. Ahora, tampoco veo claro el problema en tu página que pones, ya que no hay menú lateral.

¿A cual encimamiento te refieres?

lugargratis · #5 (**permalink**) 20/08/2013, 11:11

Ok, en vez de decir "capa" seria mas correcto decir el lugar en especifico ej: barra de navegación, contenido, etc. Cierto?

Fíjate ahora cuando puse el link faltaban algunas partes por subir... Entra en "curso de programación" o en "contacto" y veras lo que me refiero.

Ahh y fíjate en la barra de navegación. No te aparece separada del logo?

loncho_rojas · #6 (**permalink**) 21/08/2013, 13:53

No es relativo al tema, pero CAPA, LAYER o DIV son lo mismo...

Web, Sitio, Página son la misma cosa siempre que se encuentren en el mismo contexto, y dan a entender una idea general de lo que se quiere expresar y es entendible... si hablamos de cosas específicas, si... se puede ser más específico pero no es ningún invento de Dringuiver el término capa... saludos :)