Foros del Web
Página 1 de 2 1 2
Mostrar 50 mensajes desde este tema en una página

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   Problema con la posición del menú (http://www.forosdelweb.com/f53/problema-con-posicion-del-menu-673468/)

Distriker 22/02/2009 10:05
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 :neurotico:.

Miren una imagen:

http://www.rcalero.net/images/10f77ab88e.png
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

eseceve 22/02/2009 10:32
Respuesta: Problema con la posición del menú
 
#dropline {position:absolute; left:0; top:139px;}

Por eso aparece "fuera de lugar"

Distriker 22/02/2009 10:44
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í:

http://www.rcalero.net/images/574bce20c2.png


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

¿Qué ha pasado?

Saludos

eseceve 22/02/2009 11:27
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.

Distriker 22/02/2009 11:31
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

jomaruro 22/02/2009 13:32
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.

:adios:

jomaruro 22/02/2009 14:13
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.

:adios:

Distriker 23/02/2009 09:16
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

Distriker 23/02/2009 09:52
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:

http://www.rcalero.net/images/9c3d6f71a9.png


¿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

Distriker 23/02/2009 17:04
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í:

http://www.rcalero.net/images/cb8d31899a.png

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

Mikmoro 27/02/2009 17:24
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?

Distriker 28/02/2009 17:20
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 :neurotico:.

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 :neurotico:, 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 :borracho:

Y el CSS es el mismito.

¿Qué le pasa a mi codigo?

Saludos

tonito 28/02/2009 17:29
Respuesta: Problema con la posición del menú
 
Porque no subes un Wordpress y te dejas de historias.?

Distriker 28/02/2009 17:31
Respuesta: Problema con la posición del menú
 
Cita:
Iniciado por tonito (Mensaje 2802518)
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

Mikmoro 28/02/2009 17:36
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.

Distriker 28/02/2009 17:49
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

Mikmoro 28/02/2009 18:23
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.

Mikmoro 28/02/2009 18:28
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.

Distriker 01/03/2009 12:06
Respuesta: Problema con la posición del menú
 
Cita:
Iniciado por Mikmoro (Mensaje 2802570)
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 (Mensaje 2802576)
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ú :borracho:, pero es que tengo muchos nervios por hacer la web bien.

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

Saludos

Distriker 01/03/2009 13:29
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

jomaruro 01/03/2009 14:17
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.

:adios:

Mikmoro 01/03/2009 16:22
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.

Distriker 02/03/2009 10:01
Respuesta: Problema con la posición del menú
 
Cita:
Iniciado por Mikmoro (Mensaje 2803298)
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 :-D, 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

Mikmoro 02/03/2009 11:30
Respuesta: Problema con la posición del menú
 
:risa: ¿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;
}
;-)

Distriker 02/03/2009 11:55
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

Mikmoro 02/03/2009 11:59
Respuesta: Problema con la posición del menú
 
Eso es que en tu tierra ya empieza a pegar el sol, viene el calorcito... :risa:

Distriker 02/03/2009 12:01
Respuesta: Problema con la posición del menú
 
Soy Canario :risa::risa::risa::risa:

Saludos

Mikmoro 02/03/2009 12:23
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?

Distriker 02/03/2009 12:26
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 :borracho:, 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 :corazon:, el surf es mi pasión :corazon:.

Saludos

Mikmoro 02/03/2009 12:55
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?


La zona horaria es GMT -6. Ahora son las 07:11.
Página 1 de 2 1 2
Mostrar 50 mensajes desde este tema en una página

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.