Considering the image of the navigation bar above, which was applied in the footer, is fixed at the bottom of the page, I would like to get help in the following:
- Format the icons above each button so that they are neatly centered (using CSS, ideally, but jQuery / jQuery Mobile is available)
- CLEAN UP MY CODE . I am sure there are shorter versions in HTML and CSS that do what I do, if this is not cryptic, I would appreciate help in clearing the code inserted below.
The icons are 24x24, and the following code is used for HTML:
<div data-role="footer" data-position="fixed" data-tap-toggle="false"> <div id="navigation" data-role="controlgroup" data-type="horizontal" class="center"> <a href="#" data-role="button" data-iconpos="top" id="home" data-icon="custom">Home</a> <a href="#" data-role="button" data-iconpos="top" id="powerSource" data-icon="custom">Power Sources</a> <a href="#" data-role="button" data-iconpos="top" id="storage" data-icon="custom">Storage</a> <a href="#" data-role="button" data-iconpos="top" id="tripAnalysis" data-icon="custom">Trip Analysis</a> <a href="#" data-role="button" data-iconpos="top" id="tripManager" data-icon="custom">Trip Manager</a> <a href="#" data-role="button" data-iconpos="top" id="warning" data-icon="custom">Warnings & Alarms</a> <a href="#" data-role="button" data-iconpos="top" id="powerSys" data-icon="custom">Power Systems</a> <a href="#" data-role="button" data-iconpos="top" id="settings" data-icon="custom">Settings</a> </div> </div>
Below is the CSS that I applied (dropped it from here and edited a bit there):
.ui-icon-custom { width:30px !important; height:25px !important; margin-left:-15px !important; } .center { text-align: center; } #home .ui-icon { background-image: url(/images/icons/home.png); background-repeat: no-repeat; } #powerSource .ui-icon { background-image: url(/images/icons/powerSource.png); background-repeat: no-repeat; } #storage .ui-icon { background-image: url(/images/icons/storage.png); background-repeat: no-repeat; } #tripAnalysis .ui-icon { background-image: url(/images/icons/tripAnalysis.png); background-repeat: no-repeat; } #tripManager .ui-icon { background-image: url(/images/icons/tripManager.png); background-repeat: no-repeat; } #warning .ui-icon { background-image: url(/images/icons/warning.png); background-repeat: no-repeat; } #powerSys .ui-icon { background-image: url(/images/icons/powerSys.png); background-repeat: no-repeat; } #settings .ui-icon { background-image: url(/images/icons/settings.png); background-repeat: no-repeat; }
source share