Foros del Web » Creando para Internet » CSS »

Problemilla tonto en menu estatico

 Estas en el tema de Problemilla tonto en menu estatico en el foro de CSS en Foros del Web. Hola a todos: Tengo un problemilla mu tonto pero a la vez muy puñetero y es que estoy creando una web con 2 menus estaticos, ...
  #1 (permalink)  
Antiguo 27/02/2011, 14:31
Avatar de JaviCN  
Fecha de Ingreso: abril-2009
Ubicación: Huelva, España
Mensajes: 76
Antigüedad: 15 años
Puntos: 2
Problemilla tonto en menu estatico
Hola a todos:

Tengo un problemilla mu tonto pero a la vez muy puñetero y es que estoy creando una web con 2 menus estaticos, uno a la derecha y otro a la izquierda y le tengo puesto para los menus el position: fixed; y en google chorme me sale de lujo, en modzilla tambien y cuando pruebo en internet explorer casca y me pone los 2 menus juntos y las demas capas debajo, probe a poner tanto en el archivo del css como en el del html el fixed y solo sale como deberia quitandolo y al quitarlo el menu deja de ser estatico ¿que puedo hacer? me tiene bastante mareado y ya no se que hacer
Última edición por JaviCN; 27/02/2011 a las 14:45
  #2 (permalink)  
Antiguo 27/02/2011, 15:07
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 3 meses
Puntos: 36
Respuesta: Problemilla tonto en menu estatico
Comprueba que estés usando una etiqueta <!DOCTYPE> adecuada en la cabecera del documento HTML. Es necesaria para que IE muestre el contenido correctamente.
Si esa no fuese la causa incluye el código HTML y CSS para poder localizar el problema.
Sería buena idea que probases a validar el código en http://validator.w3.org/unicorn y corrigieses los posibles errores.
  #3 (permalink)  
Antiguo 27/02/2011, 15:52
Avatar de JaviCN  
Fecha de Ingreso: abril-2009
Ubicación: Huelva, España
Mensajes: 76
Antigüedad: 15 años
Puntos: 2
Respuesta: Problemilla tonto en menu estatico
Cita:
Iniciado por sanxuan Ver Mensaje
Comprueba que estés usando una etiqueta <!DOCTYPE> adecuada en la cabecera del documento HTML. Es necesaria para que IE muestre el contenido correctamente.
Si esa no fuese la causa incluye el código HTML y CSS para poder localizar el problema.
Sería buena idea que probases a validar el código en http://validator.w3.org/unicorn y corrigieses los posibles errores.
acabo de probar lo del <!DOCTYPE> y nada y en http://validator.w3.org/unicorn solo me salen errores sobre los colores el codigo del css es este:


body {
padding-left: 11em;

background-color: 708090; }

ul.navbar static-id {
position: fixed;
}
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
background: #f4a460;
position: absolute;
top: 12em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
margin: 0.5em 0;
padding: 0.3em;
}
ul.navbar a {
text-decoration: none }
a:link {
color: ffff00 }
a:visited {
color: ffffff }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }

ul.navbar2 static-id {
position: fixed;
}
ul.navbar2 {
list-style-type: none;
padding: 0;
margin: 0;
background: #f4a460;
position: absolute;
top: 12em;
right: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar2 li {

margin: 0.5em 0;
padding: 0.3em;
}
ul.navbar2 a {
text-decoration: none }
a:link {
color: ffff00 }
a:visited {
color: ffffff }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
#cabecera
{z-index:1;
margin-top:1;
margin-left:25;
position: absolute;
z-index: 1;
}
#contenido {
z-index:2;
font-family: Georgia, "Times New Roman",
Times, serif;
color:FDF5F5;
margin-left:200;
margin-top:195;
position: absolute;
z-index: 1;

}
y el del html este:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="navbar" style="position: fixed;">
<b><u> Ediciones Anteriores</u></b>
<li><a href="edI.html">I Edición</a>
<li><a href="edII.html">II Edición</a>
<li><a href="edIII.html">III Edición</a>
<li><a href="edIV.html">IV Edición</a>
<li><a href="index.html">V Edición</a>
</ul>
<ul class="navbar2" style="position: fixed;">
<li><a href="programav.html">Programa</a>
<li><a href="invitadosv.html">Invitados</a>
<li><a href="exposicionesv.html">Exposiciones</a>
<li><a href="fotosv.html">Fotos</a>
<li><a href="patrocinadoresv.html">Patrocinadores</a>
<li><a href="cartelv.html">Cartel</a>
<li><a href="notoiasv">Noticias</a>
<li><a href="mapacasacolon.html">Mapa Casa Colón</a>
</ul>
<div id="cabecera"><img src="cabecera.jpg" width="250" height="75"></img></div>
<div id="contenido">
<h1>Programaci&oacute;n:</h1>
<hr></hr>
</div>

</body>
</html>
  #4 (permalink)  
Antiguo 27/02/2011, 17:00
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 3 meses
Puntos: 36
Respuesta: Problemilla tonto en menu estatico
Prueba esta cabecera: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Debería ser suficiente para que IE mostrase bien el código. Hay pocos cambios con respecto a tu código original, incluir todos los elementos de <ul> dentro de una etiqueta <li> y algunos cambios en las etiquetas <img> y <hr>. El problema de los colores es muy simple. Hay bastantes propiedades donde usas la codificación decimal pero olvidas la almohadilla (#) delante a la hora de definir el color. Quedaría de la siguiente forma:

Código HTML: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.             "http://www.w3.org/TR/html4/loose.dtd">
  3. <head>
  4. <title>titulo</title> 
  5. <style type="text/css">
  6. body {
  7. padding-left: 11em;
  8. background-color: #708090; }
  9. ul.navbar static-id {
  10. position: fixed;
  11. }
  12. ul.navbar {
  13. list-style-type: none;
  14. padding: 0;
  15. margin: 0;
  16. background: #f4a460;
  17. position: absolute;
  18. top: 12em;
  19. left: 1em;
  20. width: 9em }
  21. h1 {
  22. font-family: Helvetica, Geneva, Arial,
  23. SunSans-Regular, sans-serif }
  24. ul.navbar li {
  25. margin: 0.5em 0;
  26. padding: 0.3em;
  27. }
  28. ul.navbar a {
  29. text-decoration: none }
  30. a:link {
  31. color: #ffff00 }
  32. a:visited {
  33. color: #ffffff }
  34. address {
  35. margin-top: 1em;
  36. padding-top: 1em;
  37. border-top: thin dotted }
  38.  
  39. ul.navbar2 static-id {
  40. position: fixed;
  41. }
  42. ul.navbar2 {
  43. list-style-type: none;
  44. padding: 0;
  45. margin: 0;
  46. background: #f4a460;
  47. position: absolute;
  48. top: 12em;
  49. right: 1em;
  50. width: 9em }
  51. h1 {
  52. font-family: Helvetica, Geneva, Arial,
  53. SunSans-Regular, sans-serif }
  54. ul.navbar2 li {
  55.  
  56. margin: 0.5em 0;
  57. padding: 0.3em;
  58. }
  59. ul.navbar2 a {
  60. text-decoration: none }
  61. a:link {
  62. color: #ffff00 }
  63. a:visited {
  64. color: #ffffff }
  65. address {
  66. margin-top: 1em;
  67. padding-top: 1em;
  68. border-top: thin dotted }
  69. #cabecera{
  70. z-index:1;
  71. margin-top:1px;
  72. margin-left:25px;
  73. position: absolute;
  74. }
  75. #contenido {
  76. z-index:2;
  77. font-family: Georgia, "Times New Roman",Times, serif;
  78. color:#FDF5F5;
  79. margin-left:200px;
  80. margin-top:195px;
  81. position: absolute;
  82. }
  83. </style>
  84. </head>
  85. <body>
  86. <ul class="navbar" style="position: fixed;">
  87. <li><b><u> Ediciones Anteriores</u></b>
  88. <li><a href="edI.html">I Edición</a>
  89. <li><a href="edII.html">II Edición</a>
  90. <li><a href="edIII.html">III Edición</a>
  91. <li><a href="edIV.html">IV Edición</a>
  92. <li><a href="index.html">V Edición</a>
  93. </ul>
  94. <ul class="navbar2" style="position: fixed;"> 
  95. <li><a href="programav.html">Programa</a>
  96. <li><a href="invitadosv.html">Invitados</a>
  97. <li><a href="exposicionesv.html">Exposiciones</a>
  98. <li><a href="fotosv.html">Fotos</a>
  99. <li><a href="patrocinadoresv.html">Patrocinadores</a>
  100. <li><a href="cartelv.html">Cartel</a>
  101. <li><a href="notoiasv">Noticias</a>
  102. <li><a href="mapacasacolon.html">Mapa Casa Colón</a>
  103. </ul>
  104. <div id="cabecera"><img src="cabecera.jpg" width="250" height="75" alt=""/></div>
  105. <div id="contenido">
  106. <h1>Programaci&oacute;n:</h1>
  107. <hr/>
  108. </div>
  109. </body>
  110. </html>
Otra posibilidad es usar XHTML. Obliga a cerrar las etiquetas <li> y poca cosa más.
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-US" lang="en-US" dir="ltr" >
  3. <head>
  4. <title>Sozo wordpress 3</title> 
  5. <style type="text/css">
  6. body {
  7. padding-left: 11em;
  8. background-color: #708090; }
  9. ul.navbar static-id {
  10. position: fixed;
  11. }
  12. ul.navbar {
  13. list-style-type: none;
  14. padding: 0;
  15. margin: 0;
  16. background: #f4a460;
  17. position: absolute;
  18. top: 12em;
  19. left: 1em;
  20. width: 9em }
  21. h1 {
  22. font-family: Helvetica, Geneva, Arial,
  23. SunSans-Regular, sans-serif }
  24. ul.navbar li {
  25. margin: 0.5em 0;
  26. padding: 0.3em;
  27. }
  28. ul.navbar a {
  29. text-decoration: none }
  30. a:link {
  31. color: #ffff00 }
  32. a:visited {
  33. color: #ffffff }
  34. address {
  35. margin-top: 1em;
  36. padding-top: 1em;
  37. border-top: thin dotted 
  38. }
  39. ul.navbar2 static-id {
  40. position: fixed;
  41. }
  42. ul.navbar2 {
  43. list-style-type: none;
  44. padding: 0;
  45. margin: 0;
  46. background: #f4a460;
  47. position: absolute;
  48. top: 12em;
  49. right: 1em;
  50. width: 9em 
  51. }
  52. h1 {
  53. font-family: Helvetica, Geneva, Arial,
  54. SunSans-Regular, sans-serif 
  55. }
  56. ul.navbar2 li {
  57. margin: 0.5em 0;
  58. padding: 0.3em;
  59. }
  60. ul.navbar2 a {
  61. text-decoration: none 
  62. }
  63. a:link {
  64. color: #ffff00 
  65. }
  66. a:visited {
  67. color: #ffffff }
  68. address {
  69. margin-top: 1em;
  70. padding-top: 1em;
  71. border-top: thin dotted 
  72. }
  73. #cabecera{
  74. z-index:1;
  75. margin-top:1px;
  76. margin-left:25px;
  77. position: absolute;
  78. }
  79. #contenido {
  80. z-index:2;
  81. font-family: Georgia, "Times New Roman",Times, serif;
  82. color:#FDF5F5;
  83. margin-left:200px;
  84. margin-top:195px;
  85. position: absolute;
  86. }
  87. </style>
  88. </head>
  89. <body>
  90. <ul class="navbar">
  91. <li style="text-decoration:underline; font-weight:bold;"> Ediciones Anteriores</li>
  92. <li><a href="edI.html">I Edición</a></li>
  93. <li><a href="edII.html">II Edición</a></li>
  94. <li><a href="edIII.html">III Edición</a></li>
  95. <li><a href="edIV.html">IV Edición</a></li>
  96. <li><a href="index.html">V Edición</a></li>
  97. </ul>
  98. <ul class="navbar2"> 
  99. <li><a href="programav.html">Programa</a></li>
  100. <li><a href="invitadosv.html">Invitados</a></li>
  101. <li><a href="exposicionesv.html">Exposiciones</a></li>
  102. <li><a href="fotosv.html">Fotos</a></li>
  103. <li><a href="patrocinadoresv.html">Patrocinadores</a></li>
  104. <li><a href="cartelv.html">Cartel</a></li>
  105. <li><a href="notoiasv">Noticias</a></li>
  106. <li><a href="mapacasacolon.html">Mapa Casa Colón</a></li>
  107. </ul>
  108. <div id="cabecera"><img src="cabecera.jpg" width="250" height="75" alt="" /></div>
  109. <div id="contenido">
  110. <h1>Programaci&oacute;n:</h1>
  111. <hr/>
  112. </div>
  113. </body>
  114. </html>
  #5 (permalink)  
Antiguo 27/02/2011, 18:09
Avatar de JaviCN  
Fecha de Ingreso: abril-2009
Ubicación: Huelva, España
Mensajes: 76
Antigüedad: 15 años
Puntos: 2
Respuesta: Problemilla tonto en menu estatico
voy a probar y en cuanto vea si tira o no aviso
  #6 (permalink)  
Antiguo 28/02/2011, 05:25
Avatar de JaviCN  
Fecha de Ingreso: abril-2009
Ubicación: Huelva, España
Mensajes: 76
Antigüedad: 15 años
Puntos: 2
Respuesta: Problemilla tonto en menu estatico
ahora esta igual en los 3 exploradores pero mi objetivo es que sea el menu estatico y en cuanto lo pongo ahora se acorta en internet explorer y en firefox
  #7 (permalink)  
Antiguo 28/02/2011, 14:03
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 3 meses
Puntos: 36
Respuesta: Problemilla tonto en menu estatico
Perdona, pero no entiendo el problema. Si pudieses expresarlo mejor quizás encontremos una solución.
En el código que nos proporcionas hay dos menús, no uno y los dos tienen posición fija, no estática, que en css es otra cosa distinta. ¿Qué se acorta y en qué dimensión? ¿A lo alto o a lo ancho?
  #8 (permalink)  
Antiguo 01/03/2011, 05:26
Avatar de JaviCN  
Fecha de Ingreso: abril-2009
Ubicación: Huelva, España
Mensajes: 76
Antigüedad: 15 años
Puntos: 2
Respuesta: Problemilla tonto en menu estatico
Cita:
Iniciado por sanxuan Ver Mensaje
Perdona, pero no entiendo el problema. Si pudieses expresarlo mejor quizás encontremos una solución.
En el código que nos proporcionas hay dos menús, no uno y los dos tienen posición fija, no estática, que en css es otra cosa distinta. ¿Qué se acorta y en qué dimensión? ¿A lo alto o a lo ancho?
me explique mal perdon, me explico, son 2 menús los cuales necesito que al moverte para arriba o abajo de la pagina los menus sigan al usuario, es decir que se muevan, el menu de la derecha al ser mas largo que el de la izquierda se me corta en las ultimas secciones en firefox, y en internet explorer se me desorganizan las capas y los menus poniendome uno debajo del otro, en google chrome me sale perfecto y necesitaria que en firefox no se corte y en internet explorer que el menu se mueva como el google chrome y que no se me desorganice como me pasa ahora

Etiquetas: estatico
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 23:13.