Quiere el menú de navegación sobre la imagen de fondo en la página de inicio, pero se mueve en varios monitores

Estoy bastante seguro de que esta es una solución fácil y simplemente tengo demasiada experiencia para resolverlo. Estoy construyendo un sitio usando WP, pero la página de inicio es simplemente una imagen de fondo con un menú de navegación vertical. No sé cómo hacer que el menú permanezca en el mismo lugar para todos los navegadores y ventanas. Se veía bien en mi pantalla, luego descubrí que el panel de navegación estaba en un lugar completamente diferente en el monitor de mi esposo. Creo que tiene que ver con la posición, la visualización y los márgenes, pero me estoy perdiendo más a medida que leo sobre estos y solo quiero que alguien me diga el código.

La página está en www.sydneyjanebaily.com

Hasta ahora, el código para toda la página es el siguiente:

cuerpo { imagen de fondo:url(http://www.sydneyjanebaily.com/wp-content/themes/twentyeleven/images/open-book.png); repetición de fondo: sin repetición; archivo adjunto de fondo: fijo; posición de fondo: centro;

} menú { pantalla: bloque; }

acceso div { pantalla: bloque; margen izquierdo: 890px; margen derecho: automático; margen superior: 200px; ancho: 235px; }

/************* Navegación **********/ nav#access ul, nav#access li.pagenav { display: block; estilo de lista: ninguno; }

nav#access ul li a span, nav#access ul li.page_item a span { posición: absoluta; derecha: 100%; arriba: 2px; ancho: 15px; altura: 100%; imagen de fondo: url(../images/nav-shadow.png); posición de fondo: arriba a la derecha; fondo-repetir: repetir-y; }

nav#access ul li a, nav#access ul li a:visitado, nav#access ul li.page_item a, nav#access ul li.page_item a:visited { display: block; relleno: 8px 10px 8px 30px; color blanco; fuente: 150% "EBGaramondSC", "Palatino", "Palatino Linotype","Book Antiqua", Georgia, serif; texto-decoración: ninguno; /*color de fondo:

aba000; */ margen: 5px 0 7px 0; posición: relativa; ancho: 235px; /variante de fuente: versalitas;/ }

nav#access ul li a:hover, nav#access ul li a:focus, nav#access ul li.page_item a:hover, nav#access ul li.page_item a:focus{ color:

FF0000; }

nav#access li a:hover span { color de fondo: #666; } nav#access ul li a em { tamaño de fuente: 87.50%; } nav#access ul li:nth-child(5n-4) a, nav#access ul li:nth-child(5n-4) a span { ; } nav#access ul li:nth-child(5n-3) a, nav#access ul li:nth-child(5n-3) a span { ; } nav#access ul li:nth-child(5n-2) a, nav#access ul li:nth-child(5n-2) a span { ; } nav#access ul li:nth-child(5n-1) a, nav#access ul li:nth-child(5n-1) a span { ; } nav#acceso ul li:nth-child(5n-5) a, nav#acceso ul li:nth-child(5n-5) a span {; } -->

nav#acceso ul li ul li span { posición: absoluto; derecha: 100%; superior: 0; ancho: 20px; altura: 100%; izquierda: 2px; margen derecho: 15px; desbordamiento: visible; } nav#access ul li ul li:nth-child(odd) a { background: none; color: #EEE8AA; tamaño de fuente: más pequeño; margen: 3px 20px 5px 20px; altura mínima: 20px; ancho: 210px; relleno: 2px 0 2px 20px; } nav#acceso ul li ul li:nth-child(odd) a:hover, nav#access ul li ul li:nth-child(odd) a:focus { background: none; color: #ADFF2F; tamaño de fuente: más pequeño; izquierda: 15px; relleno: 2px 30px 2px 25px; } nav#access ul li ul li:nth-child(odd) a span { background: url(../images/sub-menu2.png) -5px 0px no-repeat; ancho: 30px; }

nav#access ul li ul li:nth-child(even) a { background: none; color:

3B3C1D; tamaño de fuente: más pequeño; margen: 3px 20px 5px 20px; altura mínima: 20px; ancho: 210px; relleno: 2px 0 2px 20px; } nav#acceso ul li ul

li:nth-child(even) a:hover, nav#access ul li ul li:nth-child(even) a:focus { background: none; color: #FF4500; tamaño de fuente: más pequeño; izquierda: 15px; relleno: 2px 30px 2px 25px; } nav#access ul li ul li:nth-child(even) a span { background: url(../images/sub-menu2.png) -5px 0px no-repeat; ancho: 30px; }

nav#access ul li ul li ul li:nth-child(odd) a { background: none; color: #FFD700; tamaño de fuente: más pequeño; margen: 3px 20px 5px 30px; altura mínima: 20px; ancho: 200px; relleno: 2px 0 2px 20px; } nav#access ul li ul li ul li:nth-child(odd) a:hover, nav#access ul li ul li ul li:nth-child(odd) a:focus { background: none; color: #EEE8AA; tamaño de fuente: más pequeño; izquierda: 25px; relleno: 2px 30px 2px 25px; } nav#access ul li ul li ul li:nth-child(odd) a span { background: url(../images/sub-menu.png) -10px 0px no-repeat; ancho: 30px; }

nav#access ul li ul li ul li:nth-child(even) a { background: none; color: #3B3C1D; tamaño de fuente: más pequeño; margen: 3px 20px 5px 30px; altura mínima: 20px; ancho: 200px; relleno: 2px 0 2px 20px; } nav#access ul li ul li ul li:nth-child(even) a:hover, nav#access ul li ul li ul li:nth-child(even) a:focus { background: none; color: #7FFFD4; tamaño de fuente: más pequeño; izquierda: 25px; relleno: 2px 30px 2px 25px; } nav#access ul li ul li ul li:nth-child(even) a span { background: url(../images/sub-menu.png) -10px 0px no-repeat; ancho: 30px; }

nav#acceso ul li a:hover:activo, nav#acceso ul li ul li a:hover:activo, nav#acceso ul li ul li ul li a:hover:activo, nav#acceso ul li a:focus:active, nav#acceso ul li ul li a:enfoque:activo, nav#acceso ul li ul li ul li a:enfoque:activo { color:

00CCFF; izquierda: 1px; arriba: 1px;}

/* Navegación singular */

nav-single { float: derecha; posición: relativa; superior: -0.3em; alineación de texto: derecha; índice z: 1; }

nav-single .nav-anterior,

nav-single .nav-next { float: none; ancho: automático; }

nav-single .nav-next { padding-left: .5em; }

    img.book {  
        /* Set rules to fill background */  
        min-height: 100%;  
        min-width: 1000px;  

        /* Set up proportionate scaling */  

        height: auto;  

        /* Set up positioning */  

        top: 0;  
        left: 0;  

      display: block;   
      margin-left: auto;  
      margin-right: auto; 
      text-align: center;
    } 

    </style>  

  <!-- <img class="book"src="<?php bloginfo('template_directory');?>/images/open-book.png" alt="xxx"

ancho="880" altura="xxx" /> -->

          <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
          <!-- <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content',

'dosmil once' ); ?>"> "> --> 'primario' ) ); ?>

Me sorprende que cuando inspecciono un elemento con la herramienta de desarrollo de Firefox, todavía dice elemento en línea para las cosas que he marcado como bloque.

Básicamente, puedo colocar el panel de navegación donde quiero usar px, pero solo se ve bien en mi pantalla. Creo que necesito porcentajes, pero eso está más allá de mí. Por favor ayuda.

gracias, sydney

preguntado el 22 de mayo de 12 a las 19:05

1 Respuestas

Intente reemplazar esto:

#access div {
    display: block;
    margin-left:890px;
    margin-right:auto;
    margin-top:200px;
    width: 235px;  
    }

con este:

#access div {
   position: absolute;
   top: 20%;
   left: 50%;
}

Funciona bien en mi monitor sin importar cómo aplasto o estiro la pantalla, y también debería funcionar para usted. ¡Buena suerte!

contestado el 22 de mayo de 12 a las 19:05

Hola Ryan, gracias por eso. ¡En realidad! Qué alivio. Una pregunta más si no te importa. Funcionó bien en Firefox, Chrome y Safari, pero en IE (al menos cualquier versión anterior que haya en la computadora de mi esposo, aunque nunca se usó), la navegación no tenía estilo, solo palabras con viñetas en la parte superior izquierda de la pantalla como si no hubiera CSS. lo impactó. ¿Alguna sugerencia para los usuarios de IE? - Sídney Baily-Gould

Además, si no quiero volver a arruinarlo todo, ¿hay alguna manera de hacerlo más pequeño fácilmente? Lo que quiero decir es que tengo una pantalla grande, como de 24 pulgadas, pero todos los demás monitores de mi casa son más pequeños, de 17 y más pequeños, y veo que la imagen de este libro se ve muy difuminada y el marcador está un poco recortado en la parte superior y fondo. Así que estoy pensando que un poco más pequeño funcionaría para la mayoría de las personas. ¿Hay alguna manera de hacer que se ajuste o debería decirle que haga la imagen más pequeña? Muchas gracias. Sídney - Sídney Baily-Gould

Si su esposo está usando IE 6 o anterior, lamentablemente no hay garantías de que CSS funcione en él. Sin embargo, con respecto a su pregunta sobre la imagen de fondo, el método más directo para solucionar esto sería cambiar el tamaño de la imagen. De lo contrario, puede convertirlo en su propio div y cambiar su tamaño dinámicamente, pero eso podría ser más trabajo de lo que vale para usted. - ryan casey

Revisé y es IE8 pero nunca lo usamos. Todavía me imagino que mucha gente lo hace. Así que supongo que necesito descubrir cómo hacer que mi navegación simple aparezca en IE. En cuanto a la otra pregunta, ¿mi libro le pareció demasiado grande en su pantalla? Gracias de nuevo. - Sídney Baily-Gould

No, el libro se veía bien en mi monitor (1440x900). El menú sin estilo también ocurre en IE 9 (lo acabo de comprobar). La hoja de estilo es muy compleja, y veo muchos estilos -webkit, que no funcionarán en IE en absoluto. Esté atento a esos (y reemplácelos con estilos más genéricos), limpie un poco sus estilos (se puede hacer, si dedica un poco de tiempo) y siga con el buen trabajo :) - ryan casey

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.