Foros del Web » Creando para Internet » CSS »

Problema con la posición del menú

 Estas en el tema de Problema con la posición del menú en el foro de CSS en Foros del Web. 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 ...
Página 1 de 2 1 2

  #1 (permalink)  
Antiguo 22/02/2009, 10:05
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 9 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.
  #2 (permalink)  
Antiguo 22/02/2009, 10:32
 
Fecha de Ingreso: febrero-2009
Mensajes: 44
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Problema con la posición del menú
#dropline {position:absolute; left:0; top:139px;}

Por eso aparece "fuera de lugar"
  #3 (permalink)  
Antiguo 22/02/2009, 10:44
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 9 meses
Puntos: 23
Respuesta: Problema con la posición del menú
Jeje, que casualidad, ¿también aquí Eseceve?.

Pues ahora se me ha corregido mas o menos, he eliminado eso que me has dicho, pero ahora está así:



¿Ves lo que ha pasado? El menú se ha ido a la izquierda y el desplegable se despliega arriba :

¿Qué ha pasado?

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.
  #4 (permalink)  
Antiguo 22/02/2009, 11:27
 
Fecha de Ingreso: febrero-2009
Mensajes: 44
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Problema con la posición del menú
#dropline {position:relative;background:#f00;left:100px;top: 100px;}

despues para posicionarlo donde quieres vas jugando con los valores de left y top. Y si puedes muestra una imagen con el menu desplegado.
  #5 (permalink)  
Antiguo 22/02/2009, 11:31
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 9 meses
Puntos: 23
Respuesta: Problema con la posición del menú
Ok, muchas gracias Eseceve, ya te diré como me ha quedado y si tengo mas problemas.

Ahora me tengo que ir, así que ya te contaré las cosas mas tarde.

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.
  #6 (permalink)  
Antiguo 22/02/2009, 13:32
Avatar de jomaruro
Colaborador
  
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 22 años, 6 meses
Puntos: 361
Respuesta: Problema con la posición del menú
Hola:

He copiado tu HTML y tu CSS para probar en mi PC, y la verdad no encuentro ninguna referencia del menu (nada del dropline) en todo el HTML.

Saludos.
  #7 (permalink)  
Antiguo 22/02/2009, 14:13
Avatar de jomaruro
Colaborador
  
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 22 años, 6 meses
Puntos: 361
Respuesta: Problema con la posición del menú
Hola de nuevo:

Prueba con esto a ver si te sirve, logicamente tendrás que adaptarlo a tus necesidades:

Código: 
        <div id="contenido">
            <div id="cabecera">
                <h1>Bienvenido a Betaconsolas.com</h1>
                <h2>:D:D:D</h2>
                <ul id="dropline">
                    <li><a href="#">Dropdown</a></li>
                    <li><a href="#">Dropline</a></li>
                    <li><a href="#">Flyout</a></li>
                    <li><a href="#">Support</a></li>
                </ul>
            </div>
Saludos.
  #8 (permalink)  
Antiguo 23/02/2009, 09:16
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 9 meses
Puntos: 23
Respuesta: Problema con la posición del menú
Si escogo ese codigo si se queda en la cabecera, pienso que lo modificaré.

Muchas gracias Jomaruro, ya os contaré como me fue y todo eso.

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.
  #9 (permalink)  
Antiguo 23/02/2009, 09:52
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 9 meses
Puntos: 23
Respuesta: Problema con la posición del menú
Hola de nuevo, he echo lo que ha dicho Eseceve y he jugado con los valores y me ha dado, creo, un buen resultado, así ha quedado el codigo:

Código html: 
Ver original
  1. <div id="contenido">
  2.             <div id="cabecera">
  3.                 <h1>Bienvenido a Betaconsolas.com</h1>
  4.                 <h2>:D:D:D</h2>
  5.                 <ul id="dropline">
  6.                     <li><a class="sub" href="dropdown.html"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
  7.             <!--[if lte IE 6]><table><tr><td><![endif]-->
  8.             <div>
  9.                 <ul>
  10.                     <li><a href="#url">Dropdown One</a></li>
  11.                     <li><a href="#url">Dropdown Two</a></li>
  12.                     <li><a href="#url">Dropdown Three</a></li>
  13.                     <li><a href="#url">Dropdown Four</a></li>
  14.                     <li><a class="last" href="#url">Dropdown Five</a></li>
  15.                 </ul>
  16.             </div>
  17. <li><a class="sub" href="#"><b>URL</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
  18.             <!--[if lte IE 6]><table><tr><td><![endif]-->
  19.             <div>
  20.                 <ul>
  21.                     <li><a href="#url">URL One</a></li>
  22.                     <li><a href="#url">URL Two</a></li>
  23.                     <li><a href="#url">URL Three</a></li>
  24.                     <li><a href="#url">URL Four</a></li>
  25.                     <li><a class="last" href="#url">URL Five</a></li>
  26.                 </ul>
  27.             </div>
  28. </div>

Así ha quedado el CSS:

Código css: 
Ver original
  1. /* ================================================================ 
  2. This copyright notice must be untouched at all times.
  3.  
  4. The original version of this stylesheet and the associated (x)html
  5. is available at [url]http://www.cssmenus.co.uk[/url]
  6. Copyright (c) 2009 Stu Nicholls. All rights reserved.
  7. This stylesheet and the associated (x)html may be modified in any 
  8. way to fit your requirements.
  9. =================================================================== */
  10. /* style the outer div to give it width */
  11.  
  12.  
  13. #dropline {
  14.     font-family : arial, sans-serif;
  15.     font-size : 12px;
  16.     height : 41px;
  17.     left : 0px;
  18.     list-style-image : none;
  19.     list-style-type : none;
  20.     margin-bottom : 0;
  21.     margin-left : auto;
  22.     margin-right : auto;
  23.     margin-top : 0;
  24.     padding-bottom : 0;
  25.     padding-left : 0;
  26.     padding-right : 0;
  27.     padding-top : 0;
  28.     position : relative;
  29.     text-align : center;
  30.     top : 0px;
  31.     width : 1000px;
  32.   }
  33.  
  34.  
  35. #dropline div {
  36.     padding:0;
  37.     margin:0 auto;
  38.     list-style:none;
  39.     position:absolute;
  40.     left:-9999px;
  41.     width:1000px;
  42.     text-align:center;
  43.     background:url(trans.gif);
  44.   }
  45.  
  46.  
  47. #dropline table {
  48.     border-collapse:collapse;
  49.     font-size:1em;
  50.     float:left;
  51.     margin:0px;
  52.   }
  53.  
  54.  
  55. #dropline ul li {
  56.     display:inline;
  57.     margin:0;
  58.     text-align:left;
  59.   }
  60.  
  61.  
  62. #dropline ul li a {
  63.     display:inline-block;
  64.     height:30px;
  65.     line-height:30px;
  66.     margin:0;
  67.     padding:0px;
  68.     background:transparent;
  69.     font-weight:bold;
  70.     font-size:11px;
  71.   }
  72.  
  73.  
  74. #dropline li {
  75.     display:inline;
  76.     margin:0 -2px;
  77.     text-align:left;
  78.   }
  79.  
  80.  
  81. #dropline li a {
  82.     display:inline-block;
  83.     height:36px;
  84.     margin:5px 0 0 0;
  85.     padding:0px 0 0;
  86.     line-height:30px;
  87.     text-decoration:none;
  88.     color:#000;
  89.   }
  90.  
  91.  
  92. #dropline li a.sub {
  93.     background:url(button-arrow.gif) right top;
  94.   }
  95.  
  96.  
  97. html>/**/body #dropline li {
  98.     display:inline-block;
  99.     padding:0;
  100.   }
  101.  
  102.  
  103. * html #dropline li a {
  104.     margin-bottom:-4px;
  105.     margin-right:0px;
  106.   }
  107.  
  108.  
  109. #dropline li a b {
  110.     display:block;
  111.     height:36px;
  112.     float:left;
  113.     padding:0 0 0 25px;
  114.     cursor:pointer;
  115.   }
  116.  
  117.  
  118. #dropline li a:hover {
  119.     background-position:right bottom;
  120.     color:#fff;
  121.   }
  122.  
  123.  
  124. #dropline li a:hover b {
  125.     background-position:left bottom;
  126.   }
  127.  
  128.  
  129. #dropline li:hover > a {
  130.     background-position:right bottom;
  131.     color:#fff;
  132.   }
  133.  
  134.  
  135. #dropline li:hover > a b {
  136.     background-position:left bottom;
  137.   }
  138.  
  139.  
  140. #dropline :hover div {
  141.     left:0;
  142.     top:41px;
  143.   }
  144.  
  145.  
  146. #dropline :hover ul li a:hover {
  147.     text-decoration:underline;
  148.     color:#800;
  149.   }

Y así quedo en una imagen:



¿Qué os parece?

Ahora lo que intento es que se alineen a la derecha, que pienso que con un poco de investigación en el codigo, me las puedo arreglar.

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.
  #10 (permalink)  
Antiguo 23/02/2009, 17:04
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 9 meses
Puntos: 23
Respuesta: Problema con la posición del menú
Bueno, tengo mas problemas con la posición del menú.

Estoy intentado colocar el menu en lo mas alto de la cabecera, pero cuando coloco el codigo me sale así:



Cuando debería de salir así, sino que en vez de tener el menú al final de la cabecera, lo tendría arriba, pero no, sale mal.

El codigo HTML es este:

Código HTML:
<div id="contenido">
            <div id="cabecera">

<ul id="dropline">
                    <li><a class="sub" href="dropdown.html"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<div>
				<ul>
					<li><a href="#url">Dropdown One</a></li>
					<li><a href="#url">Dropdown Two</a></li>
					<li><a href="#url">Dropdown Three</a></li>
					<li><a href="#url">Dropdown Four</a></li>
					<li><a class="last" href="#url">Dropdown Five</a></li>
				</ul>
			</div>
<li><a class="sub" href="#"><b>URL</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<div>
				<ul>
					<li><a href="#url">URL One</a></li>
					<li><a href="#url">URL Two</a></li>
					<li><a href="#url">URL Three</a></li>
					<li><a href="#url">URL Four</a></li>
					<li><a class="last" href="#url">URL Five</a></li>
				</ul>
			</div>

                <h1>Bienvenido a Betaconsolas.com</h1>
                <h2>:D:D:D</h2>
</div>
El CSS no lo he tocado, es decir, es el del anterior mensaje.

¿Qué puede haberle pasado?

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.
  #11 (permalink)  
Antiguo 27/02/2009, 17:24
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años, 2 meses
Puntos: 280
Respuesta: Problema con la posición del menú
Con tu código no puedo ver nada que se parezca remotamente a tu imagen.
¿Puedes subirlo a algún sitio para verlo, y de paso poner dónde quieres exactamente que quede el menú superior?
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 28/02/2009, 17:20
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 9 meses
Puntos: 23
Respuesta: Problema con la posición del menú
Hola Mik, esta es la web cuando situo el menu en la parte inferior de la cabecera:

Probando 1

El HTML:

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=UTF-8" >
		<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>

<ul id="dropline">
                    <li><a class="sub" href="dropdown.html"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<div>
				<ul>
					<li><a href="#url">Dropdown One</a></li>
					<li><a href="#url">Dropdown Two</a></li>
					<li><a href="#url">Dropdown Three</a></li>
					<li><a href="#url">Dropdown Four</a></li>
					<li><a class="last" href="#url">Dropdown Five</a></li>
				</ul>
			</div>
<li><a class="sub" href="#"><b>URL</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<div>
				<ul>
					<li><a href="#url">URL One</a></li>
					<li><a href="#url">URL Two</a></li>
					<li><a href="#url">URL Three</a></li>
					<li><a href="#url">URL Four</a></li>
					<li><a class="last" href="#url">URL Five</a></li>
				</ul>
			</div>

</div>
<div class="borde-inferior"

    <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 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.     margin-bottom: 5px;
  10.   }
  11.  
  12. #cabecera borde-superior {
  13. background-image:url(images/superior-contenido.png)
  14. }
  15.  
  16. #contenido {
  17.     width: 800px ;
  18.     margin-left: 300px ;
  19.     margin-right: 300px ;
  20.     background-color: #E2F0DC ;
  21.   }
  22.  
  23.  
  24. #sidebar-izquierda {
  25.     width: 110px ;
  26.     float: left ;
  27.     padding: 25px ;
  28.     background-color: #FFF200;
  29.   }
  30.  
  31.  
  32. #sidebar-derecha {
  33.     width: 110px ;
  34.     float: right ;
  35.     padding: 25px ;
  36.     background-color: #FFF200;
  37.   }
  38.  
  39.  
  40. #centro {
  41.     width: 450px ;
  42.     background-color: #5100FF ;
  43.     float: left ;
  44.     text-align: center;
  45.     margin-left: 15px ;
  46.     margin-right: 15px ;
  47.     margin-bottom: 15px;
  48.   }
  49.  
  50.  
  51. #footer {
  52.     background-color : #FF0004;
  53.     border-left-color : #090909;
  54.     border-left-width : 5px;
  55.     clear : both;
  56.     font-style : italic;
  57.     text-align : center;
  58.   }
  59.  
  60. /* ================================================================ 
  61. This copyright notice must be untouched at all times.
  62.  
  63. The original version of this stylesheet and the associated (x)html
  64. is available at [url]http://www.cssmenus.co.uk[/url]
  65. Copyright (c) 2009 Stu Nicholls. All rights reserved.
  66. This stylesheet and the associated (x)html may be modified in any 
  67. way to fit your requirements.
  68. =================================================================== */
  69. /* style the outer div to give it width */
  70.  
  71.  
  72. #dropline {
  73.     font-family : arial, sans-serif;
  74.     font-size : 12px;
  75.     height : 41px;
  76.     left : 0px;
  77.     list-style-image : none;
  78.     list-style-type : none;
  79.     margin-bottom : 0;
  80.     margin-left : auto;
  81.     margin-right : auto;
  82.     margin-top : 0;
  83.     padding-bottom : 0;
  84.     padding-left : 0;
  85.     padding-right : 0;
  86.     padding-top : 0;
  87.     position : relative;
  88.     text-align : center;
  89.     top : 0px;
  90.     width : 1000px;
  91.   }
  92.  
  93.  
  94. #dropline div {
  95.     padding:0;
  96.     margin:0 auto;
  97.     list-style:none;
  98.     position:absolute;
  99.     left:-9999px;
  100.     width:1000px;
  101.     text-align:center;
  102.     background:url(trans.gif);
  103.   }
  104.  
  105.  
  106. #dropline table {
  107.     border-collapse:collapse;
  108.     font-size:1em;
  109.     float:left;
  110.     margin:0px;
  111.   }
  112.  
  113.  
  114. #dropline ul li {
  115.     display:inline;
  116.     margin:0;
  117.     text-align:left;
  118.   }
  119.  
  120.  
  121. #dropline ul li a {
  122.     display:inline-block;
  123.     height:30px;
  124.     line-height:30px;
  125.     margin:0;
  126.     padding:0px;
  127.     background:transparent;
  128.     font-weight:bold;
  129.     font-size:11px;
  130.   }
  131.  
  132.  
  133. #dropline li {
  134.     display:inline;
  135.     margin:0 -2px;
  136.     text-align:left;
  137.   }
  138.  
  139.  
  140. #dropline li a {
  141.     display:inline-block;
  142.     height:36px;
  143.     margin:5px 0 0 0;
  144.     padding:0px 0 0;
  145.     line-height:30px;
  146.     text-decoration:none;
  147.     color:#000;
  148.   }
  149.  
  150.  
  151. #dropline li a.sub {
  152.     background:url(button-arrow.gif) right top;
  153.   }
  154.  
  155.  
  156. html>/**/body #dropline li {
  157.     display:inline-block;
  158.     padding:0;
  159.   }
  160.  
  161.  
  162. * html #dropline li a {
  163.     margin-bottom:-4px;
  164.     margin-right:0px;
  165.   }
  166.  
  167.  
  168. #dropline li a b {
  169.     display:block;
  170.     height:36px;
  171.     float:left;
  172.     padding:0 0 0 25px;
  173.     cursor:pointer;
  174.   }
  175.  
  176.  
  177. #dropline li a:hover {
  178.     background-position:right bottom;
  179.     color:#fff;
  180.   }
  181.  
  182.  
  183. #dropline li a:hover b {
  184.     background-position:left bottom;
  185.   }
  186.  
  187.  
  188. #dropline li:hover > a {
  189.     background-position:right bottom;
  190.     color:#fff;
  191.   }
  192.  
  193.  
  194. #dropline li:hover > a b {
  195.     background-position:left bottom;
  196.   }
  197.  
  198.  
  199. #dropline :hover div {
  200.     left:0;
  201.     top:41px;
  202.   }
  203.  
  204.  
  205. #dropline :hover ul li a:hover {
  206.     text-decoration:underline;
  207.     color:#800;
  208.   }

Ahora, si situo el menú en la parte superior, pasa esto:

Probando 2. (¿Veis? Se va para abajo lo que se supone que debe de estar en el div :.

El HTML es este:

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=UTF-8" >
		<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">

<ul id="dropline">
                    <li><a class="sub" href="dropdown.html"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<div>
				<ul>
					<li><a href="#url">Dropdown One</a></li>
					<li><a href="#url">Dropdown Two</a></li>
					<li><a href="#url">Dropdown Three</a></li>
					<li><a href="#url">Dropdown Four</a></li>
					<li><a class="last" href="#url">Dropdown Five</a></li>
				</ul>
			</div>
<li><a class="sub" href="#"><b>URL</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<div>
				<ul>
					<li><a href="#url">URL One</a></li>
					<li><a href="#url">URL Two</a></li>
					<li><a href="#url">URL Three</a></li>
					<li><a href="#url">URL Four</a></li>
					<li><a class="last" href="#url">URL Five</a></li>
				</ul>
			</div>


                <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 el CSS es el mismo.

Y si el menú lo pongo arriba y abajo como quiero llegar a hacer, me sale mas horrendo aun :, miren:

http://betaconsolas.com/probando/index3.html

El HTML os lo podeis descargar de aquí, ya que en este mensaje no me cambian mas caracteres

Y el CSS es el mismito.

¿Qué le pasa a mi codigo?

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.
  #13 (permalink)  
Antiguo 28/02/2009, 17:29
Avatar de tonito  
Fecha de Ingreso: julio-2004
Ubicación: En una Nació
Mensajes: 249
Antigüedad: 20 años, 5 meses
Puntos: 2
Respuesta: Problema con la posición del menú
Porque no subes un Wordpress y te dejas de historias.?
__________________
Recursos humanos
  #14 (permalink)  
Antiguo 28/02/2009, 17:31
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 9 meses
Puntos: 23
Respuesta: Problema con la posición del menú
Cita:
Iniciado por tonito Ver Mensaje
Porque no subes un Wordpress y te dejas de historias.?
Perdona, pero me gustaría que si no es para ayudar, no contestes ni nada.

El Wordpress ya se usará en el blog .

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.
  #15 (permalink)  
Antiguo 28/02/2009, 17:36
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años, 2 meses
Puntos: 280
Respuesta: Problema con la posición del menú
Perdoname pero lo que yo no alcanzo a comprender es cómo quieres que se vea:
- ¿el título "Bienvenido a Betaconsolas.com" debe estar en la zona verde?
- ¿centrado?
- ¿los dos elementos del menú arriba a la izquierda?
- ¿dónde debe aparecer la parte desplegable?

De verdad, no imagino cómo lo quieres hacer.

Tienes además todo el conjunto con una anchura de 800px pero con un margen a izquierda y derecha de 300px, por lo que en 1024 sale un enorme scroll horizontal del todo innecesario.
__________________
Visita mi nueva web idplus.org
  #16 (permalink)  
Antiguo 28/02/2009, 17:49
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 9 meses
Puntos: 23
Respuesta: Problema con la posición del menú
Veamos:
  • El titulo está remplazando momentaneamente el logotipo.
  • Si, de momento lo quiero así, centrado.
  • De momento no me he dedicado a colocarlo todo.
  • La parte desplegable, me gustaría al estilo de Cristalab, en cambio, en el de abajo, me gustaría si se desplegase por arriba.
Estoy echo un rollo

De todas formas, tenía pensado poner un menú abajo donde la gente pueda elegir la resolución perfecta para su web, había elejido un menú para ello ya, mira, el primero o el segundo.

¿Mas claro todo?

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.
  #17 (permalink)  
Antiguo 28/02/2009, 18:23
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años, 2 meses
Puntos: 280
Respuesta: Problema con la posición del menú
El de cristalab está hecho con javascript (cualquier comportamiento en línea temporal no se puede reproducir con CSS).
Si quieres hacerlo sólo con CSS, mira este ejemplo a ver si te da una idea de cómo lo hago yo.

Y si no ya mirar con javascript.
__________________
Visita mi nueva web idplus.org
  #18 (permalink)  
Antiguo 28/02/2009, 18:28
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años, 2 meses
Puntos: 280
Respuesta: Problema con la posición del menú
En tu código, busca este selector y ponlo así:
Cita:
#dropline *:hover div {
left:-280px;
top:20px;
}
Eso de momento en FF hará que el menú desplegable salga junto al principal, de todas maneras sigo sin tener claro cómo lo quieres hacer.
__________________
Visita mi nueva web idplus.org
  #19 (permalink)  
Antiguo 01/03/2009, 12:06
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 9 meses
Puntos: 23
Respuesta: Problema con la posición del menú
Cita:
Iniciado por Mikmoro Ver Mensaje
El de cristalab está hecho con javascript (cualquier comportamiento en línea temporal no se puede reproducir con CSS).
Si quieres hacerlo sólo con CSS, mira este ejemplo a ver si te da una idea de cómo lo hago yo.

Y si no ya mirar con javascript.
Me encanta ese menú echo por ti, es sencillo, y muy bonito. Veré el codigo.

Cita:
Iniciado por Mikmoro Ver Mensaje
En tu código, busca este selector y ponlo así:

Código: 
#dropline *:hover div {
left:-280px;
top:20px;
}
Eso de momento en FF hará que el menú desplegable salga junto al principal, de todas maneras sigo sin tener claro cómo lo quieres hacer.
Creo que mejor me voy a concentrar en tu menú, me concentraré en el, perdonad el que os esté volviendo loco con tanto menú , pero es que tengo muchos nervios por hacer la web bien.

Bueno, ya os contaré como me va con el menú este.

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.
  #20 (permalink)  
Antiguo 01/03/2009, 13:29
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 9 meses
Puntos: 23
Respuesta: Problema con la posición del menú
Hola Mik, he echo lo que te dije, apliqué el menú de ejemplo tuyo, pero tengo un problemilla (no paro de tener problemas). La opción 5 se va para abajo, mira en la web, lo he intentado corregir corrigiendo la posición pero no me sale

El codigo HTML es exactamente el de tu menú, aquí te dejo el DIV de la cabecera con el del menú dentro:

Código HTML:
<div id="cabecera">

<div id="menu">

<ul>
  <li class="nivel1"><a href="http://www.forosdelweb.com" class="nivel1">Opción 1</a>
<!--[if lte IE 6]><a href="http://www.forosdelweb.com" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
    <ul class="uno">
        <li><a href="#">Opción 1.1</a></li>
        <li><a href="#">Opción 1.2</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>

  <li class="nivel1"><a href="#" class="nivel1">Opción 2</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
    <ul class="dos">
        <li><a href="#">Opción 2.1</a></li>
        <li><a href="http://www.google.es">Opción 2.2</a></li>
        <li><a href="#">Opción 2.3</a></li>
        <li><a href="#">Opción 2.4</a></li>

        <li><a href="#">Opción 2.5</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 3</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
    <ul class="tres">
        <li><a href="#"></a></li>
        <li><a href="#">Opción 3.1</a></li>

        <li><a href="#">Opción 3.2</a></li>
        <li><a href="#">Opción 3.3</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
    <ul class="cuatro">
        <li><a href="#"></a></li>

        <li><a href="#">Opción 4.1</a></li>
        <li><a href="#">Opción 4.2</a></li>
        <li><a href="#">Opción 4.3</a></li>
        <li><a href="#">Opción 4.4</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
    <ul class="cinco">
        <li><a href="#"></a></li>

        <li><a href="#">Opción 4.1</a></li>
        <li><a href="#">Opción 4.2</a></li>
        <li><a href="#">Opción 4.3</a></li>
        <li><a href="#">Opción 4.4</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</div>

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

</div>
Y al CSS le he modificado el atributo Width para acoplarla al menú y agrandar el DIV Centro, mira como ha quedado:

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.     margin-bottom: 5px;
  10.   }
  11.  
  12. #contenido {
  13.     width: 940px ;
  14. margin: 0 auto 0 auto ;
  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: 590px ;
  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. #menu {  text-align: center;
  57. font-size: 0.7em;
  58. width: 820px;
  59. margin: 20px auto;
  60. position: relative;
  61. }
  62. #menu ul { list-style-type: none;}
  63.  
  64. #menu ul li.nivel1 { float: left;
  65. width: 162px;
  66. margin-right: 2px;
  67. position: relative;
  68. }
  69. #menu ul li { float: left;}
  70.  
  71. #menu ul li a {display: block;
  72. text-decoration: none;
  73. color: #fff;
  74. background-color: #399;
  75. border: solid 1px #fff;
  76. padding: 8px;
  77. position: relative;
  78. }
  79. #menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
  80. color: #000;
  81. position: relative;
  82. border-bottom: solid 1px #6CC;
  83. }
  84. #menu ul li a.nivel1 {display: block!important;display: none;
  85. }
  86. #menu ul li ul {display: none;
  87. }
  88. #menu ul li a:hover ul, #menu ul li:hover ul {display: block;
  89. position: absolute;width: 816px;border: solid 1px #fff;border-top: none;background-color: #6CC;
  90. }
  91. #menu ul li ul li a {width: 160px;
  92. padding: 6px 0px 8px 0px;
  93. border: none;
  94. background-color: #6CC;
  95. }
  96. #menu ul li ul li a:hover {
  97. position: relative;
  98. text-decoration: underline;
  99. border-bottom: none;
  100. }
  101. table.falsa {border-collapse:collapse;
  102. border:0px;
  103. float: left;
  104. position: relative;
  105. }
  106. ul.uno {left: 0px;}
  107. ul.dos {left: -164px;}
  108. ul.tres {left: -328px;}
  109. ul.cuatro {left: -492px;}
  110. ul.cinco {left: -656px;}

¿Qué tendría que modificarle para que el menú se quede acoplado correctamente?

Por cierto, me podrías explicar para que sirve ese atributo table.falsa, se que es para la etiqueta <table class="falsa">, ¿pero para que sirve esa etiqueta?

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.
  #21 (permalink)  
Antiguo 01/03/2009, 14:17
Avatar de jomaruro
Colaborador
  
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 22 años, 6 meses
Puntos: 361
Respuesta: Problema con la posición del menú
Hola:

Da la impresión de que los botones del menú no caben dentro del div que los contiene <div id="menu">. Prueba a hacerlo un poco más ancho o reducir un poco los botones.

De todas formas, por lo menos en el código HTML en el foro, te falta cerrar el <ul> del principio del menu.

Saludos.
  #22 (permalink)  
Antiguo 01/03/2009, 16:22
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años, 2 meses
Puntos: 280
Respuesta: Problema con la posición del menú
Sí, una solución sería reducir los LI:
#menu ul li.nivel1 {float:left;
margin-right:2px;
position:relative;
width:150px;
}

Recuerda también reducir los ul del segundo nivel.

La tabla falsa es para que IE6 permita utilizar los vínculos del desplegable, porque como todo está en un enlace (cada lista de segundo nivel de enlaces), si estuvieran directamente ahí sin más no permitiría meter otros enlaces, pero estando estos dentro de una tabla cada lista de segundo nivel se desvincula del enlace principal que le corresponde.
La clase falsa es por si tienes otras tablas en tu HTML, para que la CSS no afecte a todas.
__________________
Visita mi nueva web idplus.org
  #23 (permalink)  
Antiguo 02/03/2009, 10:01
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 9 meses
Puntos: 23
Respuesta: Problema con la posición del menú
Cita:
Iniciado por Mikmoro Ver Mensaje
Sí, una solución sería reducir los LI:
Código: 
#menu ul li.nivel1 {float:left;
margin-right:2px;
position:relative;
width:150px;
}
Recuerda también reducir los ul del segundo nivel.

La tabla falsa es para que IE6 permita utilizar los vínculos del desplegable, porque como todo está en un enlace (cada lista de segundo nivel de enlaces), si estuvieran directamente ahí sin más no permitiría meter otros enlaces, pero estando estos dentro de una tabla cada lista de segundo nivel se desvincula del enlace principal que le corresponde.
La clase falsa es por si tienes otras tablas en tu HTML, para que la CSS no afecte a todas.
Vale, el menú se ha colocado correctamente , pero cuando se despliega, el despliege es muy grande, y el problema es que se ve feo, feo, seguramente sea el ul de nivel 2, pero no está en el CSS.

¿Ahora? ¿Qué pasa?

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.
  #24 (permalink)  
Antiguo 02/03/2009, 11:30
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años, 2 meses
Puntos: 280
Respuesta: Problema con la posición del menú
¿Cómo no va a estar en la CSS?:
Cita:
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;width: 816px;border: solid 1px #fff;border-top: none;background-color: #6CC;
}
__________________
Visita mi nueva web idplus.org
  #25 (permalink)  
Antiguo 02/03/2009, 11:55
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 9 meses
Puntos: 23
Respuesta: Problema con la posición del menú


No me lo puedo creer, estoy mal, ultimamente estoy mal, muy mal, que me pasa .

Bueno, muchas gracias Mik, cuando termine los deberes lo pobraré .

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.
  #26 (permalink)  
Antiguo 02/03/2009, 11:59
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años, 2 meses
Puntos: 280
Respuesta: Problema con la posición del menú
Eso es que en tu tierra ya empieza a pegar el sol, viene el calorcito...
__________________
Visita mi nueva web idplus.org
  #27 (permalink)  
Antiguo 02/03/2009, 12:01
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 9 meses
Puntos: 23
Respuesta: Problema con la posición del menú
Soy Canario

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.
  #28 (permalink)  
Antiguo 02/03/2009, 12:23
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años, 2 meses
Puntos: 280
Respuesta: Problema con la posición del menú
Sí, sí, lo sabía, y sabía que casi todo el año hace solito, pero ahora ya empezará a apretar, ¿no?
__________________
Visita mi nueva web idplus.org
  #29 (permalink)  
Antiguo 02/03/2009, 12:26
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 9 meses
Puntos: 23
Respuesta: Problema con la posición del menú
Hola Mik, de nuevo estoy aquí, me he escaqueado un poquito, mira, esto es lo que he modificado:

Código: 
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;width: 715px;border: solid 1px #fff;border-top: none;background-color: #6CC;
}
Así aparece.

¿Qué tiene mal? ¿La posición del menú?

Respondiendo a lo del sol:

Aquí si suele hacer sol todo el año aunque hoy mismo estamos en tormenta , pero, nosotros vamos a la playa hasta con el día nublado y cogemos olas (al menos yo y mi familia), yo me meto en el agua hasta lloviendo, yo amo el mar , el surf es mi pasión .

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.
  #30 (permalink)  
Antiguo 02/03/2009, 12:55
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años, 2 meses
Puntos: 280
Respuesta: Problema con la posición del menú
Mira, en esta parte de la CSS, al haber reducido el tamaño tienes que ir reduciendo esos números hasta que cada submenú quede en su sitio exacto:

Cita:
ul.uno {left: -0px;}
ul.dos {left: -164px;}
ul.tres {left: -328px;}
ul.cuatro {left: -492px;}
ul.cinco {left: -656px;}
P.D.: Conozco algo tu pueblo (en realidad Tenerife y Lanzarote). Para quien es ciego al mar como tú, una de las mejores zonas del mundo para vivir, ¿no?
__________________
Visita mi nueva web idplus.org
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 21:56.