Results 1 to 3 of 3

Thread: Getting buttons side by side

  1. #1
    Join Date
    Aug 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow Getting buttons side by side

    Hi guys,

    I have the following piece of code:

    Code:
    <div class="tabs" id="welcome"><img border="0" src="./bset/home.gif" width="62" height="35"></div><div class="tabs" id="tab2"><img border="0" src="./bset/cars.gif" width="100" height="35"></div><div class="tabs" id="tab3"><img border="0" src="./bset/limoscene.gif" width="140" height="35"></div><div class="tabs" id="tab4"><img border="0" src="./bset/contact.gif" width="100" height="35"></div>
    and it makes the buttons (varios .gif's) become like this:
    item1
    item2
    item3

    I'd like it sideways like:
    item1 item2 item3

    The class code for 'tabs' is just:
    Code:
    .tabs {
    	
    	cursor:pointer;
    }
    How can I achieve the sideways alignment. I've tried what I knew and nothing seems to be working. Thank you.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    If you have javascript and/or styles tied to the id's of the divisions, they will probably need to be changed:

    HTML Code:
    <div class="tabs"><img
    id="welcome" border="0" alt="" src="./bset/home.gif" width="62" height="35"><img
    id="tab2" border="0" alt="" src="./bset/cars.gif" width="100" height="35"><img
    id="tab3" border="0" alt="" src="./bset/limoscene.gif" width="140" height="35"><img
    id="tab4" border="0" alt="" src="./bset/contact.gif" width="100" height="35"></div>
    Alternatively, you could leave things essentially as they are, add container and clear divisions:

    HTML Code:
    <div>
    <div class="tabs" id="welcome"><img
    border="0" alt="" src="./bset/home.gif" width="62" height="35"></div>
    <div class="tabs" id="tab2"><img
    border="0" alt="" src="./bset/cars.gif" width="100" height="35"></div>
    <div class="tabs" id="tab3"><img
    border="0" alt="" src="./bset/limoscene.gif" width="140" height="35"></div>
    <div class="tabs" id="tab4"><img
    border="0" alt="" src="./bset/contact.gif" width="100" height="35"></div>
    <div style="clear:left;"></div>
    </div>
    and float the .tabs selector left:

    Code:
    .tabs {
    	float:left;
    	cursor:pointer;
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you,
    I opted for the second one and it worked like a charm.

Bookmarks

Posting Permissions

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