Foros del Web » Creando para Internet » CSS »

problema con capa de menu

Estas en el tema de problema con capa de menu en el foro de CSS en Foros del Web. ola amigos bueno es que tengo un menu para mi web echo con css y html. el cual tiene estos codigos @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: ...
  #1 (permalink)  
Antiguo 18/01/2010, 20:19
(Desactivado)
 
Fecha de Ingreso: diciembre-2009
Mensajes: 110
Antigüedad: 8 años
Puntos: 3
Pregunta problema con capa de menu

ola amigos bueno es que tengo un menu para mi web echo con css y html.
el cual tiene estos codigos
Código HTML:
Ver original
  1. <div id="navegador">
  2.   <ul>
  3.   <li><a href="index.html" title="Home"  class="current">Home</a></li>
  4.   <li><a href="blog.html" title="Blog">Blog</a></li>
  5.   <li><a href="foro.html" title="Foro">Foro</a></li>
  6.   <li><a href="tutoriales.html" title="Tutoriales">Tutoriales</a></li>
  7.   <li><a href="about.html" title="Sobre Nosotros">Sobre Nosotros</a></li>
  8.   </ul>
  9. </div>
Código CSS:
Ver original
  1. #navegador ul{
  2.    list-style-type: disc;
  3.    text-align: center;
  4.     border-radius: 10 px;
  5.     -moz-border-radius:10px;
  6.     -webkit-border-radius:10px;
  7. }
  8.    
  9. #navegador li{
  10.    display: inline;
  11.    text-align: center;
  12.    margin: 0 10px 0 0;
  13.     float: none;
  14.     clear: both;
  15.     list-style-type:circle;
  16.     padding-top: 50%;
  17.     padding-bottom: 50%;
  18. border-radius: 10 px;
  19. -moz-border-radius:10px;
  20. -webkit-border-radius:10px;
  21. }
  22. #navegador li a {
  23.    padding: 2px 7px 2px 7px;
  24.    color: #ffffff;
  25.    text-decoration: none;
  26.     float: none;
  27.     clear: both;
  28.     background-image: url(imagenes/menu%20inactivo.jpg);
  29.  
  30.     list-style-type:circle;
  31.     border-radius: 10 px;
  32.     -moz-border-radius:10px;
  33.     -webkit-border-radius:10px;
  34.  
  35.    
  36. }
  37. #navegador li a:hover{
  38.    color: #58cdfd;
  39.     float: none;
  40.     clear: both;
  41.     background-image: url(imagenes/menu%20activo.jpg);
  42.     list-style-type:circle;
  43.     border-left-color: url(imagenes/menu%20inactivo.jpg);
  44.     border-left:  10px solid;
  45.     border-radius: 10 px;
  46.     -moz-border-radius:10px;
  47.     -webkit-border-radius:10px;
  48. }
  49.  
  50. #navegador  .current {
  51.     color: #58cdfd;
  52.     clear: both;
  53.     background-image: url(imagenes/menu%20activo.jpg);
  54.     list-style-type:circle;
  55.     border-radius: 10 px;
  56.     -moz-border-radius:10px;
  57.     -webkit-border-radius:10px;
  58. }

bueno ahora el problema es que mi menu se auto ajusta cuando me modifica le vetana del navegador y yo no quiero eso quiero que la capa se quede en el centro

¿Como hago esto?
  #2 (permalink)  
Antiguo 18/01/2010, 21:40
(Desactivado)
 
Fecha de Ingreso: octubre-2009
Mensajes: 109
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: problema con capa de menu

¿quieres sentrar toda tu web o solo el menu?
  #3 (permalink)  
Antiguo 18/01/2010, 21:54
(Desactivado)
 
Fecha de Ingreso: diciembre-2009
Mensajes: 110
Antigüedad: 8 años
Puntos: 3
Respuesta: problema con capa de menu

Cita:
Iniciado por web_master7 Ver Mensaje
¿quieres sentrar toda tu web o solo el menu?
mejor si es toda
  #4 (permalink)  
Antiguo 18/01/2010, 22:01
(Desactivado)
 
Fecha de Ingreso: octubre-2009
Mensajes: 109
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: problema con capa de menu

coloca todo el codigo del xhtml y el css,
  #5 (permalink)  
Antiguo 19/01/2010, 03:21
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: problema con capa de menu

Añade esto al código

Código:
#navegador {
margin: 0 auto;
}
__________________
Revisa las FAQ's antes de disparar.
  #6 (permalink)  
Antiguo 19/01/2010, 17:20
(Desactivado)
 
Fecha de Ingreso: diciembre-2009
Mensajes: 110
Antigüedad: 8 años
Puntos: 3
Respuesta: problema con capa de menu

miren los codigos de mi web
CSS
Código CSS:
Ver original
  1. #adress{
  2.     margin-top: 1em;
  3.     padding-top: 1em;
  4.     border-top: thin dotted;
  5.     border-width: 1px;
  6. }
  7.  
  8. img {
  9.     border:none;
  10. }
  11.  
  12. a img {
  13. border:none;
  14. }
  15.    
  16.  
  17.  
  18.  
  19. body {
  20.     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif, Mazda, Zapfino, "Tekton Pro";
  21.     color: gray;
  22.     border-color: #fff;
  23.     background: url(imagenes/10062.gif) repeat;
  24.    
  25. }
  26.  
  27. a:hover {
  28.     color: gray;
  29.     text-decoration: underline;
  30. }
  31.  
  32. a:link {
  33.     color: gray;
  34.     text-decoration: none;
  35.    
  36. }
  37.  
  38. a:link , a:visited{
  39.     color: gray;
  40.     text-decoration: none;
  41. }
  42.  
  43.  
  44. .mensaje_blog {
  45.     direction: ltr;
  46.     font-size: 12px;
  47. }
  48.  
  49. #textos_inicio {
  50.     direction: ltr;
  51.     text-align: justify;
  52.     margin-left: 15em;
  53.     font: bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif, Mazda, Zapfino, "Tekton Pro";
  54.    
  55. }
  56.  
  57.  
  58. .titulos {
  59.     background-attachment: fixed;
  60.     font: bold 15px Georgia, "Times New Roman", Times, serif;
  61.     text-align: center;
  62.  
  63. }
  64.  
  65. h1 {
  66.     font: bold 18pt "Comic Sans MS", Georgia, "Times New Roman", Times, serif;
  67. }
  68.  
  69. h2 {
  70.     font: bold 15pt "Comic Sans MS", Geordia, "Time New Roman", Times, serif;
  71.  
  72. }
  73.  
  74. h5 {
  75. font: 12pt;
  76. }
  77.  
  78. .tutoriales {
  79.     text-align: justify;
  80.     text-transform: capitalize;
  81.     font: italic bold 12px "Comic Sans MS";
  82. }
  83.  
  84. #barra{
  85. border-radius: 10 px;
  86. -moz-border-radius:10px;
  87. -webkit-border-radius:10px;
  88.     background-color: #c0c0c0;
  89.     width:160px;
  90.     padding-top: 0.5px;
  91.     padding-left: 2px;
  92.     padding-right: 2px;
  93.     padding-bottom: 0px;
  94.     position: absolute;
  95.     border: 5px solid #c0c0c0;
  96.     margin-bottom: auto;
  97.     margin-top: 1px;
  98.     left: 8px;
  99.    
  100. }
  101.  
  102. /* comienza footer */
  103.  
  104.  
  105. #footer { width: 100%; height: 50px;
  106.     text-align: justify;
  107.     font-size: 12px;
  108.     margin: auto;
  109.  
  110.     color: #fff;
  111.     bottom: 0;
  112.     list-style-image: url(imagenes/footer.png);
  113.     position: absolute;
  114. }
  115.  
  116. /* termina footer */
  117.  
  118.  
  119. #enlases {
  120.    
  121. }
  122.  
  123. /* @end */
  124.  
  125.  
  126.  
  127. /* Comienza menu */
  128.  
  129. #navegador {
  130. margin: 0 auto;
  131. }
  132.  
  133.  
  134. #navegador ul{
  135.    list-style-type: disc;
  136.    text-align: center;
  137.     border-radius: 10 px;
  138.     -moz-border-radius:10px;
  139.     -webkit-border-radius:10px;
  140. }
  141.    
  142. #navegador li{
  143.    display: inline;
  144.    text-align: center;
  145.    margin: 0 10px 0 0;
  146.     float: none;
  147.     clear: both;
  148.     list-style-type:circle;
  149.     padding-top: 50%;
  150.     padding-bottom: 50%;
  151. border-radius: 10 px;
  152. -moz-border-radius:10px;
  153. -webkit-border-radius:10px;
  154. }
  155. #navegador li a {
  156.    padding: 2px 7px 2px 7px;
  157.    color: #ffffff;
  158.    text-decoration: none;
  159.     float: none;
  160.     clear: both;
  161.     background-image: url(imagenes/menu%20inactivo.jpg);
  162.  
  163.     list-style-type:circle;
  164.     border-radius: 10 px;
  165.     -moz-border-radius:10px;
  166.     -webkit-border-radius:10px;
  167.  
  168.    
  169. }
  170. #navegador li a:hover{
  171.    color: #58cdfd;
  172.     float: none;
  173.     clear: both;
  174.     background-image: url(imagenes/menu%20activo.jpg);
  175.     list-style-type:circle;
  176.     border-left-color: url(imagenes/menu%20inactivo.jpg);
  177.     border-left:  10px solid;
  178.     border-radius: 10 px;
  179.     -moz-border-radius:10px;
  180.     -webkit-border-radius:10px;
  181. }
  182.  
  183. #navegador  .current {
  184.     color: #58cdfd;
  185.     clear: both;
  186.     background-image: url(imagenes/menu%20activo.jpg);
  187.     list-style-type:circle;
  188.     border-radius: 10 px;
  189.     -moz-border-radius:10px;
  190.     -webkit-border-radius:10px;
  191. }
  192.  
  193.  
  194.    
  195.  
  196.  
  197.  
  198.  
  199. #nav {
  200.  
  201.         border-left-color: url(imagenes/menu%20inactivo.jpg);
  202.  
  203.         border-width: 1px 1px 0 1px;
  204.  
  205.         width: 150px;
  206.  
  207.         font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
  208.         background-image: url(imagenes/menu%20inactivo.jpg);
  209.         border-radius: 10 px;
  210.         -moz-border-radius:10px;
  211.         -webkit-border-radius:10px;
  212.  
  213. }
  214.  
  215. #nav ul, li {
  216.  
  217.         list-style-type: none;
  218.  
  219. }
  220.  
  221.  
  222.  
  223. #nav ul {
  224.  
  225.         margin: 0;
  226.  
  227.         padding: 0;
  228.  
  229. }
  230.  
  231.  
  232.  
  233. #nav li {
  234.  
  235.         border-bottom: 1px solid #ACCFE8;
  236.  
  237. }
  238.  
  239.  
  240.  
  241. #nav a {
  242. background-image: url(imagenes/menu%20inactivo.jpg);
  243. border-radius: 10 px;
  244. -moz-border-radius:10px;
  245. -webkit-border-radius:10px;
  246.  
  247.         text-decoration: none;
  248.  
  249.         color: #3366CC;
  250.  
  251.  
  252.         display: block;
  253.  
  254.         padding: 3px 6px;
  255.  
  256.         width: 138px;
  257.  
  258. }
  259.  
  260.  
  261.  
  262. #nav a:hover {
  263.  
  264.         background: #DBEBF6;
  265.  
  266. }
  267.  
  268. /* termina menu */
  269.  
  270.  
  271.  
  272.  
  273.  
  274. /* comienza slider */
  275.  
  276. #container-slider{
  277.     display: block;
  278.     top: 50%;
  279.     left: 50%;
  280.     right: 50%;
  281. }
  282.  
  283. #slider ul, #slider li,
  284.     #slider2 ul, #slider2 li{
  285.     margin: 0;
  286.         padding:0;
  287.         list-style:none;
  288.     position: relative;
  289. }
  290.     #slider2{margin-top:1em;}
  291.     #slider li, #slider2 li{
  292.         /*
  293.             define width and height of list item (slide)
  294.             entire slider area will adjust according to the parameters provided here
  295.         */
  296.         width:400px;
  297.         height:300px;
  298.         overflow:hidden;
  299.         }  
  300.     #prevBtn, #nextBtn,
  301.     #slider1next, #slider1prev{
  302.         display:block;
  303.         width:30px;
  304.         height:77px;
  305.         left:300px;
  306.         top:100px;
  307.     position: absolute;
  308. }  
  309.     #nextBtn, #slider1next{
  310.         left:400px;
  311.         }                                                      
  312.     #prevBtn a, #nextBtn a,
  313.     #slider1next a, #slider1prev a{  
  314.         display:block;
  315.         position:absolute;
  316.         width:30px;
  317.         height:77px;
  318.         background:url(../imagenes/btn_prev.gif) no-repeat 0 0;
  319.         }  
  320.     #nextBtn a, #slider1next a{
  321.         background:url(../imagenes/btn_next.gif) no-repeat 0 0;
  322.         }  
  323.        
  324.     /* numeric controls */ 
  325.  
  326.     ol#controls{
  327.         margin:1em 0;
  328.         padding:0;
  329.         height:28px;   
  330.         }
  331.     ol#controls li{
  332.         margin:0 10px 0 0;
  333.         padding:0;
  334.         float:left;
  335.         list-style:none;
  336.         height:28px;
  337.         line-height:28px;
  338.         }
  339.     ol#controls li a{
  340.         float:left;
  341.         height:28px;
  342.         line-height:28px;
  343.         border:1px solid #ccc;
  344.         background:#DAF3F8;
  345.         color:#555;
  346.         padding:0 10px;
  347.         text-decoration:none;
  348.         }
  349.     ol#controls li.current a{
  350.         background:#5DC9E1;
  351.         color:#fff;
  352.         }
  353.     ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
  #7 (permalink)  
Antiguo 19/01/2010, 17:21
(Desactivado)
 
Fecha de Ingreso: diciembre-2009
Mensajes: 110
Antigüedad: 8 años
Puntos: 3
Respuesta: problema con capa de menu

y el XHTML
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <link rel="shortcut icon" href="imagenes/favicon.ico"/>
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
  5. <title>Home Pilopiart</title>
  6. <link href="foro.css" rel="stylesheet" type="text/css"/>
  7. <link rel="stylesheet" href="foro.css" type="text/css" />
  8. <link rel="alternate" type="application/rss+xml" title="RSS" href="http://pilopiart.com/pilopi.rss"/>
  9. <meta name="keywords" content="pilopi123.com,pilopi,pilopi123,tuoriales,luis salas,tutoriales gratis,webhosting,mac-ination,por pilopi123,flash facilito"/>
  10. <meta name="description" content="La web de Pilopi123 antes era pilopi123.com ahora tengo un nuevo diseño y esta totalmente echa desde cero por mi Luis Felipe Salas Noguera"/>
  11. <meta name="copyright" content="Luis Felipe Salas"/>
  12. <meta name="classification" content="Tutoriales"/>
  13. <meta http-equiv="reply-to" content="[email protected]"/>
  14. <meta name="language" content="Spanish"/>
  15. <meta name='resource-type' content="document"/>
  16. <meta name="robots" content="ALL"/>
  17. <meta name="distribution" content="Global"/>
  18. <meta name="revisit-after" content="1 days"/>
  19. <meta name="google-site-verification" content="fv-OfLGjrT235fh-bvAIilTgLJLHh8Us8eOGKbzXoic" />
  20. <link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
  21.         <script src="scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
  22.         <script src="scripts/mootools-1.2-more.js" type="text/javascript"></script>
  23.         <script src="scripts/jd.gallery.js" type="text/javascript"></script>
  24.         <link rel="stylesheet" href="foro.css" type="text/css" />
  25.         <meta name="alexaVerifyID" content="7e77jXUaVIsDYUqNqOwZyQetpHE" />
  26. </head>
  27.  
  28.  
  29.  
  30.  
  31. <div id="logo"><img src="imagenes/logo-pilo-final.png" alt="Logo de Pilopi123"/></div>
  32.  
  33. <div id="navegador">
  34.   <ul>
  35.   <li><a href="index.html" title="Home"  class="current">Home</a></li>
  36.   <li><a href="blog.html" title="Blog">Blog</a></li>
  37.   <li><a href="foro.html" title="Foro">Foro</a></li>
  38.   <li><a href="tutoriales.html" title="Tutoriales">Tutoriales</a></li>
  39.   <li><a href="about.html" title="Sobre Nosotros">Sobre Nosotros</a></li>
  40.   </ul>
  41. </div>
  42.  
  43.  
  44. <div id="barra">
  45.   <p class="titulos"> Pr&oacute;ximos Tutoriales</p>
  46.   <a href="http://youtube.com/user/pilopiart"><img  src="imagenes/css-edit-webslider.png" alt="tutorial de css" width="160" height="120" /></a>
  47.  
  48.   <ul>
  49.   <li><p class="tutoriales">rss</p></li>
  50.   <li><p class="tutoriales">creaci&oacute;n de webs</p></li>
  51.   </ul>
  52.  <a href="http://youtube.com/user/pilopiart"><img  src="imagenes/youtube.png"  alt="visita el canal de Pilopi123" width="160" height="100" /></a>
  53.   <a href="http://twitter.com/pilopiart"><img  src="imagenes/twitter.png" width="128" height="128" alt="Visita nuestro twitter" /></a>
  54. </div>
  55.  
  56. <div id="textos_inicio">
  57. <h1>Ya est&aacute;n listos nuestro tutoriales de css </h1>
  58.  
  59. <script type="text/javascript">
  60.             function startGallery() {
  61.                 var myGallery = new gallery($('myGallery'), {
  62.                     timed: true
  63.                 });
  64.             }
  65.             window.addEvent('domready',startGallery);
  66.         </script>
  67.         <div class="content">
  68.             <div id="myGallery">
  69.                 <div class="imageElement">
  70.                     <h3>Tutorial el primer tutorial de esta serie de CSS</h3>
  71.                     <p>Ya esta la introducción de este tema m&iacute;rala en nuestro canal Youtube </p>
  72.                     <a href="http://youtube.com/pilopiart" title="open image" class="open"></a>
  73.                     <img src="imagenes/css-edit-slide.png" alt="tutoriales de css proximamente" class="full" />
  74.                     <img src="imagenes/css-edit-slide.mini.png" alt="mini" class="thumbnail" />
  75.                 </div>
  76.                 <div class="imageElement">
  77.                     <h3>nueva web de Pilopi123</h3>
  78.                     <p>visita nuestros tutoriales de youtube</p>
  79.                     <a href="#content" title="open image" class="open"></a>
  80.                     <img src="imagenes/logo-pilo-final.png" alt="visita nuestros tutoriales" class="full" />
  81.                     <img src="imagenes/logo-pilo-final.canalyoutube.png" alt="mini" class="thumbnail" />
  82.                 </div>
  83.         </div>
  84. </div>
  85. </div>
  86.  
  87. <script type="text/javascript">
  88. var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  89. document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
  90. <script type="text/javascript">
  91. try {
  92. var pageTracker = _gat._getTracker("UA-12363377-1");
  93. pageTracker._setDomainName(".pilopiart.com");
  94. pageTracker._trackPageview();
  95. } catch(err) {}</script>
  96. </body>
  97. </html >
  #8 (permalink)  
Antiguo 20/01/2010, 10:56
(Desactivado)
 
Fecha de Ingreso: diciembre-2009
Mensajes: 110
Antigüedad: 8 años
Puntos: 3
Respuesta: problema con capa de menu

web master ayuda
  #9 (permalink)  
Antiguo 24/01/2010, 08:40
(Desactivado)
 
Fecha de Ingreso: diciembre-2009
Mensajes: 110
Antigüedad: 8 años
Puntos: 3
Respuesta: problema con capa de menu

hello como estan si me ayuda???
  #10 (permalink)  
Antiguo 24/01/2010, 10:59
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: problema con capa de menu

Hola:

Debes incluir toda tu página en un div contenedor y poner en ese div contenedor margin:0 auto;

Saludos.

  #11 (permalink)  
Antiguo 24/01/2010, 16:27
(Desactivado)
 
Fecha de Ingreso: diciembre-2009
Mensajes: 110
Antigüedad: 8 años
Puntos: 3
Respuesta: problema con capa de menu

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:

Debes incluir toda tu página en un div contenedor y poner en ese div contenedor margin:0 auto;

Saludos.

gracias por fin una respuesta muchas gracias amigo
  #12 (permalink)  
Antiguo 24/01/2010, 17:51
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: problema con capa de menu

Hola:

Respuesta que ya te habían dado aquí.

Saludos.

  #13 (permalink)  
Antiguo 24/01/2010, 18:03
(Desactivado)
 
Fecha de Ingreso: diciembre-2009
Mensajes: 110
Antigüedad: 8 años
Puntos: 3
Respuesta: problema con capa de menu

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:

Respuesta que ya te habían dado aquí.

Saludos.

no es que lo habia probado pero no sirve

Etiquetas: capas
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




La zona horaria es GMT -6. Ahora son las 12:22.