StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Since the width for <code>#menu</code> is set as <code>100%</code>, it takes up the whole width of the parent element, i.e <code>#container</code>, whose <code>width</code> is <code>auto</code>, i.e the width of the window.</p> <p>So, you need to set the width of <code>#menu</code> and align it to the center, by getting rid of the float and the following changes :</p> <pre><code>#container #menu { width: 755px; /* 151px x 5 elements */ margin:0 auto; /* Instead of padding */ position:relative; overflow:hidden; } </code></pre> <p>and for the yellow background, just wrap your <code>#menu</code> around with a <code>#menuWrapper</code> div, and also as <a href="https://stackoverflow.com/users/1947677/itay">Italy</a> specified, <code>id</code> should be unique on a page. Use <code>class</code> instead.</p> <p>HTML : </p> <pre><code><div id="menuWrapper"> <div id="menu"> <div class="menu_button"> <a href="#"> HOME </a> </div> <div class="menu_button"> <a href="#"> PRODUCTS </a> </div> <div class="menu_button"> <a href="#"> GALLERY </a> </div> <div class="menu_button"> <a href="#"> INFO </a> </div> <div class="menu_button"> <a href="#"> ABOUT US </a> </div> </div> </div> </code></pre> <p>CSS : </p> <pre><code>#menuWrapper { background:#ffc341; } </code></pre> <p>Also, it's better to use <code>ul-li</code> elements for the menu items instead of <code>div</code></p> <p>Full HTML + CSS : <a href="http://jsfiddle.net/rduKf/" rel="nofollow noreferrer">JSFiddle</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload