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 10 of 10
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How to align images like this...

    Hey,

    I currently am floating two images left in a div container 1091px in width.
    I need the images to be like this:

    IMAGE
    IMAGE

    When I float both left, they go like this:

    IMAGE IMAGE

    How can I do this?

    Cheers

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    The simplest way:
    <img><br><img>

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey, I've tried this:

    Code:
    <div><img src="./_images/facebook_home.png" style="margin-top: 20px; float:left"></div>
    <br>
    <div><img src="./_images/twitter_home.png" style="float: left;"/></div>
    It's showing like this:



    Cheers

  • #4
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    851
    Thanks
    11
    Thanked 79 Times in 77 Posts
    Why use floats? You have options to use the images as backgrounds of two divs or set the div width just wide enough to force images vertically by not butting the image tags back to back. Or, add add a break tag after the first image tag if div container has to be wider than both images because of other content.
    ☠ ☠RON☠ ☠

  • #5
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Major Payne View Post
    Why use floats? You have options to use the images as backgrounds of two divs or set the div width just wide enough to force images vertically by not butting the image tags back to back. Or, add add a break tag after the first image tag if div container has to be wider than both images because of other content.
    Cheers - i've got them vertical now, the only problem is there in a container so that there inline with the other elements, how do I get rid of the space on the right - when I inspected the element it said it was container.



    HTML:
    Code:
    <div id="facebook"></div>
    <div id="twitter"></div>
    CSS:
    Code:
    #twitter {
    background: url('../_images/twitter_home.png');
    height: 137px;
    width: 351px;
    }
    
    #facebook {
    background: url('../_images/facebook_home.png');
    height: 136px;
    width: 351px;
    }
    Thanks

  • #6
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    851
    Thanks
    11
    Thanked 79 Times in 77 Posts
    Maybe try:

    Code:
    #wrap {
    width: 351px;
    float: left;
    margin-left: Y%; /* if needed */
    clear: both; ?8 check if needed */
    }
    
    #twitter {
    background: url('../_images/twitter_home.png');
    height: 137px;
    width: 351px;
    }
    
    #facebook {
    background: url('../_images/facebook_home.png');
    height: 136px;
    width: 351px;
    }
    Code:
    <div id="wrap">
    <div id="facebook"></div>
    <div id="twitter"></div>
    </div>
    If you need positioning without a float:
    Code:
    #wrap {
    width: 351px;
    position: relative;
    top: y%
    left: X%;
    }
    Tweak into position. Could include a fixed height for wrapper div for both images. Hope that works. :P Hard to do partial coding without testing locally.

    CSS 3 allows multiple background images which could simplify coding. Browser support may be an issue though.
    Last edited by Major Payne; 06-23-2012 at 10:30 AM.
    ☠ ☠RON☠ ☠

  • Users who have thanked Major Payne for this post:

    Vernier (06-23-2012)

  • #7
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Major Payne View Post
    Maybe try:

    Code:
    #wrap {
    width: 351px;
    float: left;
    margin-left: Y%; /* if needed */
    clear: both; ?8 check if needed */
    }
    
    #twitter {
    background: url('../_images/twitter_home.png');
    height: 137px;
    width: 351px;
    }
    
    #facebook {
    background: url('../_images/facebook_home.png');
    height: 136px;
    width: 351px;
    }
    Code:
    <div id="wrap">
    <div id="facebook"></div>
    <div id="twitter"></div>
    </div>
    If you need positioning without a float:
    Code:
    #wrap {
    width: 351px;
    position: relative;
    top: y%
    left: X%;
    }
    Tweak into position. Could include a fixed height for wrapper div for both images. Hope that works. :P Hard to do partial coding without testing locally.

    CSS 3 allows multiple background images which could simplify coding. Browser support may be an issue though.


    That worked perfectly! Thanks so much!

    One quick question, how could I change the twitter and facebook divs into <a> elements? I need to use href, i've tried adding a#twitter { } etc to the css, and changed the divs to <a> elements, but then they don't show

    Thanks again!

  • #8
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    851
    Thanks
    11
    Thanked 79 Times in 77 Posts
    These are examples of making a background image a link:

    http://pastebin.com/u1QCjPBT
    http://pastebin.com/Dy6sKwUJ

    Should work with proper changes for yours.
    ☠ ☠RON☠ ☠

  • #9
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Working perfectly - thanks again for all your help!

  • #10
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    851
    Thanks
    11
    Thanked 79 Times in 77 Posts
    Welcome again. :P
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

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