Hey there, I'm working on a navigation bar and using Jquery to resize elements for better website aesthetics. Instead of a traditional horizontal list, each button is created individually with images:
<a href="#" class="button" id="home"><img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span></a>
(yes, they're image buttons for specific purposes)
The issue I'm facing is that these buttons are fixed to "top 0" and end up overlapping instead of sitting next to each other. Any ideas on how I can maintain the fixed position at the top while also aligning them horizontally?
Here's the HTML snippet:
<div id="top">
<a href="#" class="button" id="home"><img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span></a>
</div>
And here's the CSS:
#top a.button { position: fixed; top: 0; padding: 12px; background: url('glacial_ice.jpg'); text-decoration: none; color: black; border-radius: 0px 0px 25px 25px; }
#top { position: relative; top:0; padding-left: 25px; }
Additionally, here's the initialization function that runs on $(document).ready():
$('a.button').animate({
height: '+=5px',
}, 20, function() {
$('a.button').animate({
opacity: 0.6,
height: '-=5px',
}, 20);
});
Thank you!