¿Usando: después del selector CSS para llenar un espacio?

On esta página Deseo que todo el espacio a la derecha de la navegación se llene de blanco.

Entonces, logré un bloque blanco de 5px de ancho usando el selector :after CSS, y espero que haya una manera de hacer que se ajuste al ancho disponible, ¡aunque estoy abierto a otras sugerencias!:

#menu-main-menu:after {
    content:"";
    display:block;
    background:#fff;
    width:5px;
    height:30px;
    float:right;
    }

Aquí está el HTML simplificado:

<div class="menu"><ul id="menu-main-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Courses &#038; prices</a></li>
<li><a href="#">Activities in Rio</a></li>
<li><a href="#">Accommodation</a></li>
<li><a href="#">News</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

Y todo el CSS relevante:

#primary-menu ul {
    overflow:hidden;
}
#primary-menu li {
    list-style:none;
    float:left;
}
#primary-menu a {
    color:#333;
    background: #fff;
    display:block;
}
#primary-menu .current-menu-item a, #primary-menu .current-page-parent a {
    color:#fff;
    background:none;
}
#menu-main-menu:before {
content:"";
display:block;
background:#fff;
width:20px;
height:30px;
float:left;
} 
#menu-main-menu:after {
content:"";
display:block;
background:#fff;
width:5px;
height:30px;
float:right;
}

¡Gracias por tomarse el tiempo para revisar mi pregunta!

Caroline

preguntado el 12 de junio de 12 a las 22:06

Si el ancho de la :before y el ancho de la :after ¿igualarse? Tal como están las cosas, si hago el :after Sea del ancho correcto, su menú no está centrado. ¿Se supone que debe estar centrado? -

Acabo de ver tu comentario ahora, lo siento, treinta puntos. No, se supone que el menú no debe estar centrado. -

3 Respuestas

Podrías agregar el ::after pseudoselector a la li.current-menu-item en lugar de #menu-main-menu y agregue un fondo blanco a partir de ese elemento.

.current-menu-item:after {
    background: none repeat scroll 0 0 #fff;
    content: "";
    height: 30px;
    position: absolute;
    right: -1000px;   /* these numbers are the same */
    top: 0;
    width: 1000px;    /* and need to be at least the width of the menu */
}

#primary-menu li {
    position: relative;  /* position the ::after element relative to the li */
}

#primary-menu ul {
    ....
    overflow: hidden;  /* you already have this to clear your floats */
    ....               /* but I thought I should emphasise that you need it */
}

Respondido el 12 de junio de 12 a las 23:06

¡Gracias! Aunque me temo que no puedo hacerlo funcionar. ¿Debo eliminar cualquier otro CSS que no sea #menu-main-menu:after? - carolina elisa

@CarolineElisa No has añadido position: relative a #primary-menu li - Me duele la cabeza

¡Vaya, creo que estaba mirando antes de tu edición y luego después y los arruiné! ¡¡¡Gracias!!! - carolina elisa

No hay problema, fue un problema interesante :) - Me duele la cabeza

El siguiente ejemplo funciona agregando un extra li para llenar, pero dado que la fuente se mostrará de forma diferente entre los navegadores, no puede predecir el ancho. La solución en este ejemplo crea un contenedor (#cen) para centrar el contenido y establecer el ancho, también el overflow la propiedad está configurada como oculta. Al hacer esto, puede agregar una cantidad significativamente más grande div envolviendo el ul y el relleno li con mucho más ancho de lo requerido. Lo que no causa ningún problema ya que parent.parent está ocultando desbordamientos.

http://jsfiddle.net/efortis/3YpDh/1/

<div id="cen">
  <div class="menu">
    <ul id="menu-main-menu">
       <li><a href="#">Home</a></li>
       <li><a href="#">About us</a></li>
       <li><a href="#">Courses &#038; prices</a></li>
       <li><a href="#">Activities in Rio</a></li>
       <li><a href="#">Accommodation</a></li>
       <li><a href="#">News</a></li>
       <li><a href="#">FAQs</a></li>
       <li><a href="#">Contact</a></li>
       <li class="filler">&nbsp;</li>
   </ul>
   </div>
</div>


#cen {
    width: 960px;
    margin: 0 auto;    
    overflow: hidden;
}
.menu {
    width: 1200px;
    float:left;
 }

li {
    padding: 10px 25px;
    float:left;
    background: white;
}

.filler {
    width: 200px;       
}

Respondido el 12 de junio de 12 a las 23:06

Gracias Eric, pero el relleno blanco no puede tener un ancho fijo ya que el menú debe ser flexible... - carolina elisa

@CarolineElisa Para evitar que la solución use anchos grandes para #menu y .filler. Puedes toparte con 3000px o más si quieres - eric fortis

Gracias de nuevo Eric. Traté de hacer eso en el violín, pero el relleno pasó a la siguiente línea. - carolina elisa

tienes que chocar los dos .menu y .filler - eric fortis

PD: he aceptado la otra respuesta, ya que solo implica editar CSS, no HTML. Pero agradezco tu ayuda! - carolina elisa

Deshacerse de float on li le permite simplemente definir display: block; background: white sobre su ul padre sin necesidad de :before y :after pseudos para llenar un espacio. Esta ul ya será 100% ancho debido a display: block.

Para ello, puede visualizar cada elemento como inline-block (display: inline y zoom: 1 para IE6/7) y cierre y apertura de stick </li><li> etiquetas para evitar espacios en blanco entre ellas.

Mira este violín

Bonificación en el violín: en un segundo ejemplo, los elementos ocupan todo el ancho disponible (no necesariamente bonito, depende de su diseño y menú) usando table-cell (el valor CSS, no el no semántico table>tr>td código HTML, por supuesto). Para IE6/7, el mismo respaldo que el anterior (y la misma representación).

Respondido el 17 de junio de 12 a las 08:06

Gracias Felipe, pero en concreto no quiero añadir background:#fff de las personas acusadas injustamente llamadas ul porque quiero el seleccionado li para ser transparente y mostrar la página debajo. - carolina elisa

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