Databases
StackOverflow2013
Postsdbo
POHow can I take my navigation to the right of screen?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I take my navigation to the right of screen?
    text
    copied!<p>I can't put my navigation menu to the right of screen. I used a lot of CSS but so it's a bit hard to find where is my mistake.</p> <p>This is my html code:</p> <pre><code>&lt;div id="main-container"&gt; &lt;div id="content"&gt; &lt;div id="header"&gt; &lt;ul id="nav"&gt; &lt;li &gt;&lt;a href="#"&gt;Nav 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Nav 2&lt;/a&gt;&lt;/li&gt; &lt;li class="selected"&gt;&lt;a href="#"&gt;Nav 3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Nav 4&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="pictures"&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>This is the CSS i have trouble with:</p> <pre><code> #main-container { } #content { background-color: #FFAA00; background: url(images/table-surface-2-resized.jpg) repeat-x #000000; width: 800px; height: 600px; border-radius: 5px; } #header { background-color: #FFD200; width: 800px; height: 26px; } #pictures { background-color: #A64D00; width: 760px; height: 540px; border: 2px solid white; border-radius: 15px; margin-left: auto; margin-right: auto; margin-top: 14px; } /* TABS WITH ROUND, OUT BORDERS */ #nav { text-align: center; list-style: none; margin: 0; padding: 0; line-height: 24px; height: 26px; overflow: hidden; font-size: 12px; font-family: verdana; position: relative; } #nav li { border: 1px solid #AAA; background: #D1D1D1; background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); display: inline-block; position: relative; z-index: 0; border-top-left-radius: 6px; border-top-right-radius: 6px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF; text-shadow: 0 1px #FFF; margin: 0 -5px; padding: 0 20px; } #nav li.selected { background: #FFF; color: #333; z-index: 2; border-bottom-color: #FFF; } #nav:before { position: absolute; content: " "; width: 100%; bottom: 0; left: 0; border-bottom: 1px solid #AAA; z-index: 1; } #nav li:before, #nav li:after { border: 1px solid #AAA; position: absolute; bottom: -1px; width: 5px; height: 5px; content: " "; } #nav li:before { left: -6px; border-bottom-right-radius: 6px; border-width: 0 1px 1px 0; box-shadow: 2px 2px 0 #D1D1D1; } #nav li:after { right: -6px; border-bottom-left-radius: 6px; border-width: 0 0 1px 1px; box-shadow: -2px 2px 0 #D1D1D1; } #nav li.selected:before { box-shadow: 2px 2px 0 #FFF; } #nav li.selected:after { box-shadow: -2px 2px 0 #FFF; } #nav a { color: black; text-decoration: none; } /* END TABS WITH ROUND, OUT BORDERS */ </code></pre>
 

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