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

Question

En this page Deseo tener todo el espacio a la derecha de la navegación llena de blanco.

Por lo tanto, he conseguido 5px bloque blanco de ancho con el: después de selector CSS, y estoy esperando que hay una forma de 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 código HTML simplificada:

<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 verificar mi pregunta!

Caroline

Answer 1

Se podría añadir el selector de pseudo ::after a la li.current-menu-item en lugar de #menu-main-menu y añadir el fondo blanco de ese elemento en adelante.

.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 */ 
} 

Answer 2

El siguiente ejemplo funciona añadiendo un extra li para llenar, pero desde la fuente hará que dirrentely entre los navegadores que no puede predecir el ancho. La solución temporal en este ejemplo crea un contenedor (#cen) para centrar el contenido y establecer el ancho, también la propiedad overflow está configurada como oculta. Al hacerlo, puede agregar un div significativamente más grande envolviendo el ul y el relleno li con mucho más ancho de lo requerido. Lo cual 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;  
} 

Answer 3

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

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

See this fiddle

de experiencia en el violín: en un segundo ejemplo, los elementos ocupan todo el ancho disponible (no necesariamente bonita, depende de su diseño y el menú) mediante el uso de table-cell (el valor CSS, no el unsemantic table>tr>td código HTML, por supuesto). Para IE6/7, la misma alternativa que la anterior (y la misma representación).