How can I evenly distribute three list items on a PhoneGap webpage using CSS?

My goal is to create a PhoneGap app with a main menu featuring a title and three buttons. Here is the layout:

  <body>
        <div class="app">
            <div class="headerOne">
                <h1></h1>
            </div>  
            <div class="menu">
                <ul>
                    <li>
                        <a class="shop">Shop</a>
                    </li>
                    <li>
                        <a class="login">Login</a>
                    </li>
                    <li>
                        <a class="account">New Account</a>
                    </li>
                </ul>
            </div>  
        </div>
    </body>

I'm looking to make these buttons fill the page while adjusting for different phone screens. How can I achieve this? Here's my CSS code:

<!-- language:lang-css -->
* {
    -webkit-tap-highlight-color: rgba(0,0,0,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%;
}

.app {
    height:100%;                   
    width:100%;                   
    text-align:center;  
}

@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; }
}

In addition, I have included a standard format CSS file in case it could be affecting the layout:

 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;
    }

    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;
    }

Answer №1

Have you considered using

height: 33.3% 

for each individual item?

PS. If they don't align properly, try using height: 100% on html and body

PPS. Implement absolute layout. For example, set headerOne to

top:0; left: 0; right: 0; height: 30px
, and menu to
top: 30px; left:0; right: 0; bottom: 0;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JS | How can we make an element with style=visibility:hidden become visible?

HTML: <div id="msg-text"><p><b id="msg" name="msg" style="visibility:hidden; color:#3399ff;">This is a hidden message</b></p></div> JS: $('#url').on('change keyup paste', function() { $('# ...

What is causing my server to mysteriously alter the style of index.html?

After setting up a node, express, react app, I realized that when express serves static content like my CSS file, the source of the index.html shows an additional style tag in the head section: <style type="text/css">* {}</style> I confirme ...

Is there a way to calculate the height of a component that is only rendered conditionally?

I have a scenario where I need to dynamically adjust the height of a component that is conditionally rendered without explicitly setting it. The height should automatically match the size of its content. To achieve this, I am using a reference to determin ...

Encountering a "Cannot modify" error in wp-admin while using inspect element

It seems like there is a slight error appearing in the Inspect Element Source Tab of Google Chrome (also checked in Firefox). I have searched extensively for a solution but haven't found anything helpful. My Wordpress theme displays wp-admin in inspec ...

displaying an image that has been uploaded inside a div element

Is it possible to display the uploaded image within a red box? Here is the code snippet: http://codepen.io/anon/pen/ZWXmpd <div class="upload-image"> <div class="upload-image-preview"></div> <input type="file" name="file" val ...

Surprising behavior of translateZ in Framer Motion

Trying to position elements in a circular layout has led to unexpected behavior when using framer motion's translateZ. By applying styles with a template literal without shorthand for transforms, the desired effect is achieved: transform: ` rotateY( ...

The CSS for the ajax call functions correctly on desktop devices but is not displaying properly on mobile devices

My ajax call is facing an issue where the CSS classes for a loader and overlay are only being applied in desktop view, not mobile view. I am unsure of what mistake I may be making. Can someone help me resolve this problem? Here is the ajax call: function ...

Getting rid of padding in Material UI SwipeableViews in React

Seeking assistance with the React Tabs/SwipeableViews component. I used the MaterialUI Tabs as a reference and it mostly works fine. However, I am facing a minor issue with padding in the content section. Current outcome: Current Outcome The button ...

The upper margin is ineffective

Apologies, I am new to CSS. Here is the HTML code I have: <div class="box-A" >Box A content goes here</div> <div class="box-B" >Box B content goes here</div> I attempted to apply the following CSS to it: .box-A{ background-c ...

Refresh HTML5 Canvas Drawing

Is it possible to create a meta code that efficiently toggles the visibility of a chart and grid by using checkboxes? Currently, I am redrawing the whole canvas whenever the 'Show Grid' setting is changed, but I'm hoping for a more optimized ...

How can ListSubheader in Material-UI be customized to match the style of iOS UITableView?

Here is the current appearance of my ListSubheader. https://i.stack.imgur.com/HAzTA.png Currently, it is just aligned to the left. However, the default header view in UITableView on iOS looks like this: https://i.stack.imgur.com/F9Amv.png It features ...

Crashes within an HTML5 Canvas

Having recently started to explore Javascript and working with canvas elements, I've encountered a roadblock when trying to implement collision detection for the canvas walls. Typically, I have a small square drawn on the canvas that I can move aroun ...

VueJS Error: Unable to access the 'className' property of an undefined variable

I'm currently working on a menu design project where I need to highlight the active tab/page that the user is on by adding a color class and utilizing JavaScript to update the active link. Here's a snippet of my template: <div class="menu ...

Struggling with rendering an HTML element utilizing jQuery's attribute functionality, encountering issues exclusively in Internet Explorer version

I need assistance with generating and inserting an HTML element using jQuery. In my code, I am including a class attribute for the element as shown below: jQuery('<li></li>', { class: "myClass" }); However, when testing in IE ...

Is there a way to attach a CSS class to a BoundField in order to locate it using jQuery?

I need to assign a specific class name to certain BoundFields within the GridView control. This way, after the GridView has been populated with data and displayed, I would like to have something similar to the following: <td class="Tag1">Some data c ...

outdoor checkboxes indicate completion

Whenever I click on the email address example [email protected], my first checkbox gets checked inexplicably... I have created a fiddle to demonstrate this issue... http://jsfiddle.net/pZ8jY/ <table class="checkboxes"> <tr> <td ...

"Converting an angular date-picker into a popup-date-picker: A step-by-step

I am currently working on a project in Plunker and I would like to implement an Angular date-picker-popup similar to the one in my design. Any suggestions or ideas on how to achieve this? Thank you in advance! ...

To include a slash or not before the assets path in HTML - that is the question

Should the use of / in front of paths in HTML pages be considered a good practice? If using / for paths, is it necessary to configure a <base url=""> in the page? An issue arises with a generated CSS file that includes the following: background-ima ...

The process of executing a PHP file from JavaScript using XMLHttpRequest is experiencing issues on a XAMPP local server

I'm attempting to execute a PHP file using JavaScript. I have my XAMPP server set up and all files saved in the htdocs folder. The PHP file is also stored in the htdocs folder and works correctly when accessed via http://localhost/php_test.php in Chro ...

Searching for tables data by employing the Curl command

Seeking assistance with parsing data from a website. The JSON request runs successfully in the command line but encounters issues when attempting to execute it on Android: The request: "curl '' -H 'Host: billetterie.ctm.ma' -H &apo ...