Grow your CSS skills. Land your dream job.

Positioning Images

  • # June 25, 2008 at 8:23 pm

    Hello to everyone :oops:

    I am very new to css, I am learning as much as I can on my own but I appear to be stuck. What has me stuck is Absolute & Relative Positioning.

    Now what I am trying to move thumbnail images like say to the right of the screen. I have been be able to move the 1st images fine to the right with no issues, But now when I try to add the second image it would automaticlly go the right when I dont want it to.

    Can someone please help me. Here is like sample of what I have maybe someone can help that way. This is so embarassing.

    <head>
    <title>mobetter</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="mobetter.css" />
    </head>
    <body>
    </body>
    <div id="img1">
    <div id="img1"><img src="../Pictures/car1bugattiveyron164.jpg" width="420" height="310" alt="" /></div>
    <div id="img2">
    <div id="img2"><img src="../Pictures/7749-450x-saleen_1_JPG.jpg" width="450" height="338" alt="" /></div>
    </div>

    css
    #img1 {
    position: absolute;
    top: 25px;
    right: 25px;
    padding: 10px;
    margin: 5px;
    background-color: #003300;
    border: 1px solid: #000000;
    width: 420px;

    }

    #img2 {
    position: absolute;
    top: 70px;
    left: 70px;
    }

    # June 26, 2008 at 12:07 am

    well i am no expert but i do see a problem with your code. You didn’t close your divs correctly and you have put the code for the image2 into the image1 div wich i think is why image 2 is moving right. You have to many id also i think. you could do something like this.

    <div id="image1">your code here</div>
    <div id="image2">your code here</div>

    look what you did.
    <div id="img1"> //You started div with id="img1" here. then below you opened another div and closed it right away.
    <div id="img1"><img src="../Pictures/car1bugattiveyron164.jpg" width="420" height="310" alt="" /></div>
    <div id="img2"> // here you started another div but didn’t close the <div id="img1">
    <div id="img2"><img src="../Pictures/7749-450x-saleen_1_JPG.jpg" width="450" height="338" alt="" /></div>
    </div>

    so both images are inside the <div id="img1">

    following you code you should have something like this

    <div id="img1"> //opens the first div
    <div><img src="../Pictures/car1bugattiveyron164.jpg" width="420" height="310" alt="" /></div>
    </div> //closes the <div id="img1">

    <div id="img2"> //opens the second div
    <div><img src="../Pictures/7749-450x-saleen_1_JPG.jpg" width="450" height="338" alt="" /></div>
    </div> //closes <div id="img2">

    does that make any sense?

    # June 26, 2008 at 4:45 am

    Im sure the code you gave was from a bigger picture but the simple way to float 2 images to the right would have been to float them:

    Code:
    myimage
    myimage

    Code:
    #img1 {
    width:150px;
    height:150px;
    float:right;
    }
    #img2 {
    width:150px;
    height:150px;
    float:right;
    }
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".