CODEWITHSUNDEEP
csscss-selectors
Caroline Elisa
Caroline Elisa

Reputation: 1246

Using :after CSS selector to fill a space?

On this page I wish to have the entire space to the right of the navigation filled in white.

So, I achieved 5px wide white block using the :after CSS selector, and am hoping there is a way to make it fit the available width, although I am open to other suggestions!:

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

Here is the simplified HTML:

<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>

And all the relevant CSS:

#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;
}

Thanks for taking the time to check out my question!

Caroline

Upvotes: 7

Views: 3264

Answers (3)

FelipeAls
FelipeAls

Reputation: 22181

Getting rid of float on li allows you to simply define display: block; background: white on their ul parent without any need for :before and :after pseudos to fill a space. This ul will already be 100% width because of display: block.

To do this, you can display each item as inline-block (display: inline and zoom: 1 for IE6/7) and stick closing and opening </li><li> tags to avoid whitespace between them.

See this fiddle

Bonus in the fiddle: in a second example, items occupy all available width (not necessarily pretty, depends of your design and menu) by using table-cell (the CSS value, not the unsemantic table>tr>td HTML code, of course). For IE6/7, same fallback as above (and same rendering).

Upvotes: 0

Eric Fortis
Eric Fortis

Reputation: 17370

The example below works by adding an extra li to fill, but since the font will render dirrentely among browsers you cannot predict the width. The workaround in this example creates a container (#cen) for centering the content and setting the width, also the overflow property is set to hidden. Doing this you are able to add a significantly bigger div wrapping the ul and the filler li with a lot more width than required. Which causes no problem since the parent.parent is hidding overflows.

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;       
}

Upvotes: 1

My Head Hurts
My Head Hurts

Reputation: 37685

You could add the ::after pseudo selector to the li.current-menu-item instead of #menu-main-menu and add white background from that element onwards.

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

Upvotes: 5

Related Questions