www.webdeveloper.com
Results 1 to 6 of 6

Thread: Need code for relative positioning

  1. #1
    Join Date
    Apr 2004
    Posts
    3

    Cool Need code for relative positioning

    I have a main image that I need to put other images on. THis image has to be in the middle of the page so I have used a table to put it there. I have played around with relative positioning to get the images to stay with the main image when the page is resized and so on, but am presently unsuccessful. Can someone please help with some code? Thanks

  2. #2
    Join Date
    Jan 2004
    Location
    Alabama, United States
    Posts
    833
    umm, do you mean 'Apsolute Positioning'? Relitive pos doesn't require code...

  3. #3
    Join Date
    Jan 2004
    Location
    Alabama, United States
    Posts
    833
    Allow me to explain. When you use '<img>' w/o any styling or additional properties, its going to display relitively ( arond everything else ) this is why I am a bit confused by your request, as there is no code for relitive positioning b/c it is default.

  4. #4
    Join Date
    Apr 2004
    Posts
    3
    Maybe I'm barking up the wrong tree. What I'm trying to accomplish is to have an image that will stay in the middle of the screen regardless to screen resolution or browser size, and I need to position images on top of it that will stay with that image as it moves due to different screen resolutions or browser sizes. I tried absolute positioning, but that could only fix the image in the middle of the screen for one, specific screen resolution.

  5. #5
    Join Date
    Jan 2004
    Location
    Alabama, United States
    Posts
    833
    Ok, I see what your saying now Basically, you need divs. One to center the container, One to contain all of the images, and another to center the main image.

    Here's the code:
    Code:
      <div align="center">
            <div>
                  <img src="whatever">
                  <img src="whatever">
                  <img src="whatever">
                  <div align="center">
                       <img src="whatever">
                  </div>
             </div>
      </div>
    That'll do what you want. Look into CSS, it's an extremely powerful tool when it comes to presentational markup

  6. #6
    #container {
    position:absolute;
    left:50%;
    top:50%;
    left-margin:-100px; // (replace 100 with half the picture size)
    }
    </style>
    </head>
    <body>

    <div id="container">
    <img src="blah.jpg" alt="blah">
    </div>
    - God

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles