Databases
StackOverflow2013
Postsdbo
POcss for phonegap-How do I make three list items share the page equally?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POcss for phonegap-How do I make three list items share the page equally?
    text
    copied!<p>I am trying to make a PhoneGap app and the main menu has the title and three buttons, like this:</p> <pre><code> &lt;body&gt; &lt;div class="app"&gt; &lt;div class="headerOne"&gt; &lt;h1&gt;&lt;/h1&gt; &lt;/div&gt; &lt;div class="menu"&gt; &lt;ul&gt; &lt;li&gt; &lt;a class="shop"&gt;Shop&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a class="login"&gt;Login&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a class="account"&gt;New Account&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>I want these buttons to fill the page but be able to change for different phone screens how do I do this? Here's my CSS:</p> <pre><code>&lt;!-- language:lang-css --&gt; * { -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */ } body { -webkit-touch-callout: none; -webkit-text-size-adjust: none; -webkit-user-select: none; background-color:#E4E4E4; background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%); background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%); background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%); background-image:-webkit-gradient( linear, left top, left bottom, color-stop(0, #A7A7A7), color-stop(0.51, #E4E4E4) ); background-attachment:fixed; font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif; font-size:12px; height:100%; margin:0px; padding:0px; text-transform:uppercase; width:100%; } /* Portrait layout (default) */ .app { height:100%; /* text area height */ width:100%; /* text area width */ text-align:center; } /* Landscape layout (with min-width) */ @media screen and (min-aspect-ratio: 1/1) { .app { background-position:left center; width:100%; height:100%; } } .headerOne{ border: 1px solid black; background: -webkit-linear-gradient(top, #000000, #333333); width:100%; height:30px; border-radius: 2px; font-size:24px; font-weight:normal; text-align:center; color:white; margin-bottom:30px; } .menu li{ margin-top:30px; min-height:30px; min-width:60px; } .shop{ border:1px solid black; border-radius:2px; background:black; color:white; -webkit-box-shadow:rgb(110,110,110) 2px 2px; } .login{ border:1px solid black; border-radius:2px; background:black; color:white; -webkit-box-shadow:rgb(110,110,110) 2px 2px; -webkit-box-flex:1; } .account{ border:1px solid black; border-radius:2px; background:black; color:white; -webkit-box-shadow:rgb(110,110,110) 2px 2px; -webkit-box-flex:1; } @keyframes fade { from { opacity: 1.0; } 50% { opacity: 0.4; } to { opacity: 1.0; } } @-webkit-keyframes fade { from { opacity: 1.0; } 50% { opacity: 0.4; } to { opacity: 1.0; } } </code></pre> <p>i also have a standard format css file, thought i would would put it on to see if its affecting it:</p> <pre><code> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } </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