...

View Full Version : Fixed Elements next to eachother



GreenFanta
09-26-2012, 12:00 AM
Hello Friends!

Basically I'm making a navigation bar and due to Jquery doing a lot of resizing to make a website look 'pretty' I don't want to use a horizontal list and so each button is created like so:


<a href="#" class="button" id="home"><img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span></a>
(yes they're all image buttons for good reason)

but the only problem is they're fixed and set to "top 0" at the top of the page and as a result cannot sit next to each other but rather overlap, any idea on how I can I still keep the position to fixed and they top to 0 yet keep them next to each other?

HTML

<div id="top">
<a href="#" class="button" id="home"><img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span></a>
</div>

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

Init function (runs on $(document).ready())


$('a.button').animate({
height: '+=5px',
}, 20, function() {
$('a.button').animate({
opacity: 0.6,
height: '-=5px',
}, 20);
});


Thanks

xelawho
09-26-2012, 12:02 AM
... and this is not a css question why?

GreenFanta
09-26-2012, 12:07 AM
It is a CSS Question, sorry about that, must've selected the wrong section by mistake. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum