In my web app, I have a bottom navigation bar with 9 buttons, each represented by a Sprite Image having 3 different states.
The challenge I'm facing is aligning all the images at the bottom of the nav bar or div. The icons vary slightly in size, and there is text underneath each icon within the PNG file.
To ensure that all the text aligns properly, I need to align all the buttons at the bottom. Is there a CSS or HTML solution for achieving this?
Any assistance would be greatly appreciated.
Thank you,
D
Please see the code snippet below:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lobster&v2' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Lobster+Two&v2' rel='stylesheet' type='text/css' />
<style type="text/css">
body {
background: #000;
color: #ffffff;
font-family: 'Lobster', cursive;
font-family: 'Lobster Two', cursive;
background:#ffffff url('../Background1.png');
}
/* Styling for Boxes */
.box
{
width: 1700px;
height: 100px;
margin: 0;
padding: 0;
}
.box a
{
float: left;
margin-right:20px;
}
/* Logo Buttons Styling */
.sprite-Bunches-small-normalcopy {
background-image: url('../Images/Sprites/giantsprite.png');
background-position: 0 -94px;
width: 139px;
height: 44px;
display: block;
text-indent: -9999px;
vertical-align: bottom;
}
...
/* JavaScript Toggle Functionality */
$(document).ready(function(){
$('.sprite-chat-normal').click(function() {
$(this).toggleClass('sprite-chat-normal').toggleClass('sprite-chat-normal1').toggleClass('chat-active');
});
});
...
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<div class="box">
<a class="sprite-camera-normal" href="#"></a>
<a class="sprite-chat-normal" href="#"></a>
<a class="sprite-invite-normal" href="#"></a>
<div style="float:right;">
<a class="sprite-mic-normal" href="#"></a>
...
</div>
</body>
</html>