Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    46
    Thanks
    9
    Thanked 2 Times in 2 Posts

    Fixed Elements next to eachother

    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:

    Code:
    <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
    Code:
    <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
    Code:
    #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())
    Code:
    	$('a.button').animate({
    			height: '+=5px',
    		  }, 20, function() {
    	$('a.button').animate({
    			opacity: 0.6,
    			height: '-=5px',
    		  }, 20);
    		  });
    Thanks

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,983
    Thanks
    56
    Thanked 557 Times in 554 Posts
    ... and this is not a css question why?

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    46
    Thanks
    9
    Thanked 2 Times in 2 Posts
    It is a CSS Question, sorry about that, must've selected the wrong section by mistake.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •