SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)

    Floating a block of buttons

    Is it possible to display a number of buttons as a block and "float" that block the same way as an image without using a table i.e. when the pages is zoomed in or out the text adjusts around the group of buttons instead around each button individually?
    Thanks to the help found on this forum I now have some nice buttons working wonderfully, but when zoomed, the page looks hideous.

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,411
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    If I've understood your question correctly, then you could wrap the group of buttons in a <div> and float that. As ever, a link or the relevant code would help.

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    This is my testpage; it is far from finished though it is readable so I've uploaded it and made it live. I don't thing Google mind if a page is altered 4 times a day, and with a bit of luck it will be indexed by the time it is finished. Sort of.
    http://www.boiler-breakdown-repair-l...st-london.html

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Presumably you mean the Home, waterleaks, gasleaks buttons ... As TB said, wrap 'em in a div a float it.

  5. #5
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Following the advice below, I added a quick inline div to experiment and see what it looked like. test page

    After two hours of searching, reading and experimenting, I am still no closer to understanding why the home and email button are below eachother, and the other two next to each other.
    I could understand if they were all juxtaposed or all superposed, but only the first and the last vertically?


    Ralph, indeed the 4 at the top "home, gas, water, email".

  6. #6
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,411
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    You haven't added a width to your floated <div>, so it takes up the full widthof the parent container. Your links are also set to float:left, but you have a 55px margin on them, so there is only enough space for three horizontally, then the fourth one starts a new row, under the first one. Set a width on your <div> e.g. 200px, which will constrain each of your buttons to start on a new line and appear vertically. Better still, use a <ul> for your links.

    Code:
    <div style="float:clear-left ;width: 200px; ">
    <ul>
    <li><a class="button"  href="index.html">homepage</a></li>
    <li><a class="button" href="http://www.boiler-breakdown-repair-london.co.uk/emergency-waterleak-repairs-southeast-london.html">waterleaks</a></li>
    <li><a class="button"  href="http://www.boiler-breakdown-repair-london.co.uk/emergency-gas-leak-repairs-bromley-south-east-london.html">gasleaks</a></li>
    <li><a class="button" href="mailto:info@boiler-breakdown-repair-london.co.uk">Email A Question</a></li>
    <ul>
    </div>
    The <li> is a block element and each one will therefore start a new line naturally. You'll need to add list-style-type: none in your CSS to prevent bullet points displaying.

  7. #7
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Many thanks again.


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
  •