Ver Mensaje Individual
  #9 (permalink)  
Antiguo 23/02/2009, 09:52
Avatar de Distriker
Distriker
 
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 1 mes
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.