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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Absolute positioning Images

    Hi,

    So on my website I am trying to have multiple images laid out in a certain area. Basically on my home page in the middle I want to have multiple little images and a few larger images laid out in a certain area. See attempted descriptive image:
    (x's represent background color) ([ # ] represent area where there would be an image)

    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    xxxxxxxx[1]xxxxxxxx[2]xxxxxxxxxxxx
    xxxxxxxx[3]xxxxxxxx[4]xxxxxxxxxxxx
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx


    So basically multiple images in one set area (the set area is not the complete width of the page)

    basic breakdown of what I've done so far:

    Created the division for the area that I want the images to show up (all the x's) (div=banner)

    Then I tried to create the separate divisions for each location of the images(div=button1,button2,etc), but they aren't working. This is what code I tried using:

    <div id="homebanner1">
    <div id="button1"><a href="URL"><img src="image.jpg"></div></a>
    </div>

    If I do that for the first image, it will put it in the right place, but if I try to do it with a button2 (I change the absolute position) it doesn't work. Can someone give me some advice on how I need to write the code to separate the multiple layouts of the images. I've tried this:

    <div id="homebanner1">
    <div id="button2"><a href="URL"><img src="image.jpg"></div></a>
    </div>

    But it just puts the image in the middle but not in the homebanner area but in a new area, same dimensions as the homebanner but farther down on the page.

    So how do I set up the different area spaces all in the same homebanner division?

    Thanks

  • #2
    New Coder
    Join Date
    May 2007
    Location
    MI USA
    Posts
    54
    Thanks
    18
    Thanked 1 Time in 1 Post
    Quote Originally Posted by guitaplaya69 View Post
    Hi,

    So on my website I am trying to have multiple images laid out in a certain area. Basically on my home page in the middle I want to have multiple little images and a few larger images laid out in a certain area. See attempted descriptive image:
    (x's represent background color) ([ # ] represent area where there would be an image)

    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    xxxxxxxx[1]xxxxxxxx[2]xxxxxxxxxxxx
    xxxxxxxx[3]xxxxxxxx[4]xxxxxxxxxxxx
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx


    So basically multiple images in one set area (the set area is not the complete width of the page)

    basic breakdown of what I've done so far:

    Created the division for the area that I want the images to show up (all the x's) (div=banner)

    Then I tried to create the separate divisions for each location of the images(div=button1,button2,etc), but they aren't working. This is what code I tried using:

    <div id="homebanner1">
    <div id="button1"><a href="URL"><img src="image.jpg"></div></a>
    </div>

    If I do that for the first image, it will put it in the right place, but if I try to do it with a button2 (I change the absolute position) it doesn't work. Can someone give me some advice on how I need to write the code to separate the multiple layouts of the images. I've tried this:

    <div id="homebanner1">
    <div id="button2"><a href="URL"><img src="image.jpg"></div></a>
    </div>

    But it just puts the image in the middle but not in the homebanner area but in a new area, same dimensions as the homebanner but farther down on the page.

    So how do I set up the different area spaces all in the same homebanner division?

    Thanks
    <div style=position:absolute;
    margin-left: xxpx;
    margin-top: xxpx;
    index=: 1;
    >

    Assigning index number will allow you to position imgs side by side.

  • Users who have thanked rob86 for this post:

    guitaplaya69 (02-21-2012)

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Can you give me more of the coding.

    So I have the main division element and the other images, what would the code look like with my divisions. And do I put the index on the CSS style sheet of the individual buttons or on the main homebanner section?

    Thanks

  • #4
    New Coder
    Join Date
    May 2007
    Location
    MI USA
    Posts
    54
    Thanks
    18
    Thanked 1 Time in 1 Post
    Quote Originally Posted by guitaplaya69 View Post
    Can you give me more of the coding.

    So I have the main division element and the other images, what would the code look like with my divisions. And do I put the index on the CSS style sheet of the individual buttons or on the main homebanner section?

    Thanks
    Try it this way in the body only. It positions each img exactly where you want it.

    <body>
    <img src="images/bobjosie.gif" longdesc="images/bobjosie.gif" align="top" border="0" width="367" height="154" style="
    position:relative;
    left:195px;
    top:20px;
    width:367px;
    height:154px;
    ">

    <img src="images/madhack_anm.gif" longdesc="images/madhack_anm.gif" alt="" align="top" border="0" width="67" height="67" style="
    position:absolute;
    left:100px;
    top:200px;
    width:67px;
    height:67px;
    ">

    For text:

    <div style="
    position:relative;
    top:135px;
    width:600px;
    height:40px;
    margin-left: auto;
    margin-right: auto;
    ">
    <p class="blocktext" >Our first web site was online in 1996. I created several sites of my own and a few for<br/>
    others. The web site went down in 1999. I put the site back up in 2000 and plans are<br/>
    to create new and interesting pages. Beginning in 2007, newer technology is being added as we go.
    <p></p>
    </div>
    Last edited by rob86; 02-22-2012 at 03:04 AM.

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by rob86 View Post
    Try it this way in the body only. It positions each img exactly where you want it.

    <body>
    <img src="images/bobjosie.gif" longdesc="images/bobjosie.gif" align="top" border="0" width="367" height="154" style="
    position:relative;
    left:195px;
    top:20px;
    width:367px;
    height:154px;
    ">

    <img src="images/madhack_anm.gif" longdesc="images/madhack_anm.gif" alt="" align="top" border="0" width="67" height="67" style="
    position:absolute;
    left:100px;
    top:200px;
    width:67px;
    height:67px;
    ">
    Why not post a link to your live test site or the code you've tried?

    Using positioning shouldn't be needed at allin this case. You can float images or elements and then use margins to tweak their position to your needs.
    Teed


  •  

    Tags for this Thread

    Posting Permissions

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