Databases
StackOverflow2013
Postsdbo
POCSS on window resize, list items getting out of menu
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS on window resize, list items getting out of menu
    text
    copied!<p><a href="http://gyazo.com/63259876590cdf2353e3b9e759f9f8bf.png" rel="nofollow noreferrer">img http://gyazo.com/63259876590cdf2353e3b9e759f9f8bf.png</a>;</p> <p>This is what happens if I will resize my screen or go on a little computer screen.</p> <p>And this is how it should be (100% size on my Desktop screen):</p> <p><a href="http://gyazo.com/dad037d3f638e5d98de61e34b5c363de.png" rel="nofollow noreferrer">img2 http://gyazo.com/dad037d3f638e5d98de61e34b5c363de.png</a>;</p> <p>Why is it happening? Probably needs auto checking for width and using percent instead? I am not sure..</p> <p>This is my code though.</p> <p>HTML:</p> <pre><code> &lt;div id="menu"&gt; &lt;ul id="menuitems"&gt; &lt;li id="menu-active"&gt;&lt;a href="#" &gt;HOMEPAGE&lt;/a&gt;&lt;/li&gt;&lt;/a&gt; &lt;li&gt;&lt;a href="#"&gt;PLAY NOW&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;COMMUNITY&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;HUNGER WIKI&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;HIGHSCORES&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;HELP&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;div id="login"&gt;&lt;/div&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>body { background-color: #1e1e1e; /*background-image: url("../img/background.png");*/ background-repeat: no-repeat; background-position: center top; color: #fff; font-size: 14px; } #logo { background-image: url("../img/logo.png"); background-repeat: no-repeat; width: 465px; height: 126px; margin-left: 24%; margin-top: 3%; } #menu { background-image: url("../img/gradient-header.png"); background-repeat: repeat; width: 100%; height: 56px; border: solid 1px #000; font-weight: bold; } #menuitems { padding: 0; margin: 0; float: left; } #menuitems li { background-image: url("../img/gradient-header.png"); background-repeat: repeat; display: inline-block; width: 140px; height: 56px; background-color: white; float: left; border-right: solid 1px #44acbf; border-left: solid 1px #114a56; line-height: 56px; text-align: center; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } #menuitems li:hover { background-image: url("../img/gradient-1.png"); background-repeat: repeat; border-right: solid 1px #2b6e81; cursor: pointer; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } #menuitems li:active { background-image: url("../img/gradient-onClick-menu.png"); background-repeat: repeat; } #menuitems li:last-child { width: 88px; border-right: solid 0px transparent; } #menu-active { background-image: url("../img/gradient-1.png") !important; background-repeat: repeat !important; border-right: solid 1px #2b6e81 !important; } #menuitems li:first-child { border-left: solid 0px transparent; } #login { background-image: url("../img/icon.png"); background-repeat: no-repeat; margin-left: 32%; margin-top: 20%; width: 25px; height: 21px; } #menuitems a { width: 140px; height: 56px; color: #fff; } </code></pre> <p>I am using <code>.container</code> by bootstrap framework as a container.</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