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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Posts
    264
    Thanks
    8
    Thanked 1 Time in 1 Post

    How to label images that you plan on moving

    Hi,
    Im trying to move some images on my webpage. I tried position: absolute and position: relative and used padding but my images were moving together.
    Heres my HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="Level1_Arial.css" rel="stylesheet" type="text/css" />
    <link href="data.css" rel="stylesheet" type="text/css" />
    </head>

    <body bgcolor="#006600">
    <div class="movielink"><img src="movie.gif"</div>
    <div class="gamelink"><img src="controller.gif"</div>
    <blockquote>&nbsp;</blockquote>
    </body>
    </html>
    My CSS

    body
    {
    background-image:url('blackbar.jpg');
    background-repeat:repeat-x;
    }
    .movielink {position:absolute};
    .movielink {left:800px}


    .gamelink
    {
    position:relative;
    padding-left:950px;
    }

    Is it because Im creating div classes to identify my images???

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,912
    Thanks
    15
    Thanked 227 Times in 227 Posts
    If you just want the images to be on a certain part of the page you don't need the divs to do that. And you're not specifying nearly enough about the divs to locate them properly. They are block level items so they extend all the way across the page unless you specify a width, for instance.

  • #3
    Regular Coder
    Join Date
    Oct 2010
    Posts
    264
    Thanks
    8
    Thanked 1 Time in 1 Post
    If i dont need divs then how would you identify an image that you want to move around????? What would you of done????

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,912
    Thanks
    15
    Thanked 227 Times in 227 Posts
    Quote Originally Posted by andynov123 View Post
    If i dont need divs then how would you identify an image that you want to move around????? What would you of done????
    Just give them separate IDs, the same as you might for divs. Since the images have a natural height and width there is less you have to specify.

  • #5
    Regular Coder
    Join Date
    Oct 2010
    Posts
    264
    Thanks
    8
    Thanked 1 Time in 1 Post
    Do you mean like <h1 id="movielink"><img src="movielink.gif"></h1>

  • #6
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,912
    Thanks
    15
    Thanked 227 Times in 227 Posts
    Code:
    <img id="movielink" src="movielink.gif" />

  • #7
    Regular Coder
    Join Date
    Oct 2010
    Posts
    264
    Thanks
    8
    Thanked 1 Time in 1 Post
    I can move the gamelink image but not the movielink image.
    Whats wrong with my css?



    body
    {
    background-image:url('blackbar.jpg');
    background-repeat:repeat-x;
    }
    #movielink {position:absolute};
    #movielink {left:700px}


    #gamelink
    {
    position:absolute;
    padding-left:800px;
    }

  • #8
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,912
    Thanks
    15
    Thanked 227 Times in 227 Posts
    You have a spurious ; at the end of your #movielink css.


  •  

    Posting Permissions

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