Tema: Problema con la posición del menú
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 22/02/2009, 10:05
Avatar de Distriker
Distriker
 
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 10 meses
Puntos: 23
Problema con la posición del menú
Hola a todos, tengo un menú HTML y CSS. Este menú lo inserto en el Div Cabecera, pero tengo un problema, ese menú no se queda en la posición de la cabecera, es mas, es como si no tubiese ningún Div, miren, este es el codigo HTML de mi web:

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
<link rel="StyleSheet" href="style.css" type=text/css>

		<title>index</title>
		<meta name="author" content="Distriker" >
		<meta name="generator" content="screem 0.16.1" >
		<meta name="description" content="" >
		<meta name="keywords" content="" >
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" >
		<meta http-equiv="Content-Script-Type" content="text/javascript" >
		<meta http-equiv="Content-Style-Type" content="text/css" >


</head>
	<body>
	
<div id="contenido">

   <div id="cabecera">

 <h1>Bienvenido a Betaconsolas.com</h1>
   <h2>:D:D:D</h2>

</div>

    <div id="sidebar-izquierda">

        <h3>Sección</h3>
        <p>Bla bla ...</p>

    </div>

    <div id="centro">

        <h3>Vacio</h3>
        <p>Vacio</p>
<p>dsd</p>
<p>dsa</p>
<p>asas</p>

    </div>

<div id="sidebar-derecha">

<h3>Seccion 2</h3>
<p>Bla bla ....</p>

</div>


    <div id="footer">

        Pie - Datos aquí

    </div>

</div>
	</body>
</html>
y este es el CSS:

Código css: 
Ver original
  1. body {
  2.     text-align: center ;
  3.     background-color: #C9D0E9;
  4.   }
  5.  
  6.  
  7. #cabecera {
  8.     background-color: #00C40D ;
  9.   }
  10.  
  11. #contenido {
  12.     width: 800px ;
  13.     margin-left: 300px ;
  14.     margin-right: 300px ;
  15.     background-color: #E2F0DC ;
  16.   }
  17.  
  18.  
  19. #sidebar-izquierda {
  20.     width: 110px ;
  21.     float: left ;
  22.     padding: 25px ;
  23.     background-color: #FFF200;
  24.   }
  25.  
  26.  
  27. #sidebar-derecha {
  28.     width: 110px ;
  29.     float: right ;
  30.     padding: 25px ;
  31.     background-color: #FFF200;
  32.   }
  33.  
  34.  
  35. #centro {
  36.     width: 450px ;
  37.     background-color: #5100FF ;
  38.     float: left ;
  39.     text-align: center;
  40.     margin-left: 15px ;
  41.     margin-right: 15px ;
  42. margin-bottom: 15px
  43.   }
  44.  
  45.  
  46. #footer {
  47.     background-color : #FF0004;
  48.     border-left-color : #090909;
  49.     border-left-width : 5px;
  50.     clear : both;
  51.     font-style : italic;
  52.     text-align : center;
  53.   }
  54.  
  55.  
  56. /* ================================================================ 
  57. This copyright notice must be untouched at all times.
  58.  
  59. The original version of this stylesheet and the associated (x)html
  60. is available at [url]http://www.cssmenus.co.uk[/url]
  61. Copyright (c) 2009 Stu Nicholls. All rights reserved.
  62. This stylesheet and the associated (x)html may be modified in any 
  63. way to fit your requirements.
  64. =================================================================== */
  65. /* style the outer div to give it width */
  66. #dropline {padding:0; list-style:none ; text-align:center; margin:0 auto; font-size:12px; font-family:arial, sans-serif; height:41px; width:1000px; position:absolute; left:0; top:139px;}
  67. #dropline div {padding:0; margin:0 auto; list-style:none; position:absolute; left:-9999px; width:1000px; text-align:center; background:url(trans.gif);}
  68. #dropline table {border-collapse:collapse; font-size:1em; float:left; margin:0px;}
  69.  
  70. #dropline ul li {display:inline; margin:0; text-align:left;}
  71. #dropline ul li a {display:inline-block; height:30px; line-height:30px; margin:0; padding:0px; background:transparent; font-weight:bold; font-size:11px;}
  72.  
  73. #dropline li {display:inline; margin:0 -2px; text-align:left;}
  74. #dropline li a {display:inline-block; height:36px; margin:5px 0 0 0;padding:0px 0 0; line-height:30px; text-decoration:none; color:#000;}
  75.  
  76. #dropline li a.sub {background:url(button-arrow.gif) right top;}
  77.  
  78. html>/**/body #dropline li {display:inline-block; padding:0;}
  79.  
  80. * html #dropline li a {margin-bottom:-4px; margin-right:0px;}
  81.  
  82. #dropline li a b {display:block; height:36px; float:left; padding:0 0 0 25px; cursor:pointer;}
  83.  
  84. #dropline li a:hover {background-position:right bottom; color:#fff;}
  85. #dropline li a:hover b {background-position:left bottom;}
  86.  
  87. #dropline li:hover > a {background-position:right bottom; color:#fff;}
  88. #dropline li:hover > a b {background-position:left bottom;}
  89.  
  90. #dropline :hover div {left:0; top:41px;}
  91.  
  92. #dropline :hover ul li a:hover {text-decoration:underline; color:#800;}

¿Qué le pasa? No entiendo el problema. aunque cambie de Div, siempre está ahí, en la misma posición incorrecta :.

Miren una imagen:


El menú es lo que pone DropLine, DropDown, Flyout y todo eso de ahí, es decir, lo de negro.


Espero que me puedan ayudar.

Saludos
__________________
Si no te quejas, nunca conseguiras nada, pero si te quejas siempre lo perderás todo.
Una mala acción da fruto a un mal Karma.