Databases
StackOverflow2013
Postsdbo
POCSS full-page-width horizontal menu and horizontal submenu
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS full-page-width horizontal menu and horizontal submenu
    primarykey
    data
    text
    <p>I am trying to create a solution for a website I am working on in which menus and sub-menus are horizontally centred, but the divs extend to full page width. </p> <p>First off, here is a sample HTML:</p> <pre><code>&lt;div id="menu-container" class="full-width"&gt; &lt;nav id="nav1" class="normal-width"&gt; &lt;ul class="main-menu"&gt; &lt;li id="item1"&gt; &lt;a href="#"&gt;item 1&lt;/a&gt; &lt;ul class="sub-menu"&gt; &lt;li id="item11"&gt; &lt;a href="#"&gt;item 1.1&lt;/a&gt; &lt;/li&gt; &lt;li id="item12"&gt; &lt;a href="#"&gt;item 1.2&lt;/a&gt; &lt;/li&gt; &lt;li id="item13"&gt; &lt;a href="#"&gt;item 1.3&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li id="item2"&gt; &lt;a href="#"&gt;item 2&lt;/a&gt; &lt;ul class="sub-menu"&gt; &lt;li id="item21"&gt; &lt;a href="#"&gt;item 2.1&lt;/a&gt; &lt;/li&gt; &lt;li id="item22"&gt; &lt;a href="#"&gt;item 2.2&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li id="item3"&gt; &lt;a href="#"&gt;item 3&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/div&gt; </code></pre> <p>The CSS for this menu is:</p> <pre><code>.full-width { width: 100%; } .normal-width { width: 1024px; margin: 0 auto 0 auto; } a { color: black; text-decoration: none; } .clear { clear: both; } .main-menu { list-style-type: none; margin: 0; padding: 0; position: relative; background-color: red; } .main-menu &gt; li { float:left; margin-right:2em; } .sub-menu { list-style-type: none; margin: 0; padding: 0; display:none; background-color: orange; } .sub-menu li { float:left; margin-right:2em; } .main-menu &gt; li.selected { background-color:orange; } .main-menu &gt; li.selected .sub-menu { display:block; position:absolute; left:0; right:0; } </code></pre> <p>And the jQuery associated is:</p> <pre><code>// Add a clear div to allow adding background color to main-menu $(".main-menu").append("&lt;div class='clear'&gt;&lt;/div&gt;"); // Make the first class selected $(".main-menu &gt; li:first").addClass("selected"); // Switch the selected class $(".main-menu &gt; li").click(function() { $(".selected").removeClass("selected"); $(this).addClass("selected"); }); // Disable menu links $(".main-menu &gt; li &gt; a").click(function(e) { e.preventDefault(); }); </code></pre> <p>All that is nice and dandy, and a proper horizontal menu is created. What I am struggling with and I am unable to create is what you can see in this picture: <img src="https://i.stack.imgur.com/bdAeT.jpg" alt="enter image description here"></p> <p>Note the following about the picture:</p> <ol> <li><p>The black thick border around the picture is the webpage full size and width (i.e, the browser window borders)</p></li> <li><p>The thin vertical purple lines in the middle are not visible, they are in the picture to show you where the content would be, i.e, no content will go over to the far left or far right sides of the purple lines</p></li> <li><p>The top level menu items have the red background</p></li> <li><p>The sub menues will appear in the area with the orange background</p></li> </ol> <p>Now, to the problem:</p> <p><strong>Notice how the red and yellow backgrounds extend to the webpage edges, yet the items of those pages appear within the content area inside the purple lines</strong>. This is what I am trying to achieve but unable to. I am unable to extend the backgrounds to the edges of the web browser (i.e., full-page width). <strong>My solutoin centres the red and orange backgrounds in the middle.</strong></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USGreeso
    1. USGreeso
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCSS full-page-width horizontal menu and horizontal submenu
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POCSS full-page-width horizontal menu and horizontal submenu
      1. This table or related slice is empty.
      1. VTDownMod
    3. VO
      singulars
      1. POCSS full-page-width horizontal menu and horizontal submenu
      1. This table or related slice is empty.
      1. VTModeratorReview
    1. COHow do you want the menu to extend to the edges of the page when you give the menu a width of 1024px? Also, please attach your existing css or a fiddle
      singulars
      1. POCSS full-page-width horizontal menu and horizontal submenu
      1. USDanield
    2. COGreat point, I missed adding the container, let me fix that.
      singulars
      1. POCSS full-page-width horizontal menu and horizontal submenu
      1. USGreeso
    3. COI just fixed that and added a wrapper div. However, this might affect the submenu, and therefore there might be a need for another div after the main div just for illusion of a container, but again, this is just a thought.
      singulars
      1. POCSS full-page-width horizontal menu and horizontal submenu
      1. USGreeso
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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