CSS Image positioning

  • Shauny_B
  • Newbie
  • Newbie
  • Shauny_B
  • Posts: 5
  • Loc: Wigan

Post 3+ Months Ago

Hello guys/girls,
I was wondering if you could help me out on this one I've come across, I'm creating a college project and got a couple images loaded in CSS for positioning etc... but I've been working with my resolution, soon as they're loaded up on other resolutions they're screwed up.

In my resolution: http://img258.imageshack.us/img258/9093/mainwq4.jpg

In another resolution: http://img527.imageshack.us/img527/5294/boxyboxxd1.jpg

I take it to be the right and left settings in CSS to be screwing it up:

Code: [ Select ]
  #leftpicture {
    background-color: #ded3b9;
    background-image: url('images/menu.jpg');
    width: 200px;
    height: 300px;
    position: absolute;
    left: 220px;
    top: 225px;
    }

  #centerpicture {
    background-color: #ded3b9;
    background-image: url('images/text.jpg');
    width: 400px;
    height: 300px;
    position: absolute;
    left: 420;
    top: 225px;
    }

  #rightpicture {
    background-color: #ded3b9;
    background-image: url('images/scroll.jpg');
    width: 240px;
    height: 500px;
    position: absolute;
    right: 220px;
    top: 225px;
    }

  #bottompicture {
    background-color: #ded3b9;
    background-image: url('images/text3.jpg');
    width: 600px;
    height: 200px;
    position: absolute;
    left: 220px;
    top: 525px;
    }
  1.   #leftpicture {
  2.     background-color: #ded3b9;
  3.     background-image: url('images/menu.jpg');
  4.     width: 200px;
  5.     height: 300px;
  6.     position: absolute;
  7.     left: 220px;
  8.     top: 225px;
  9.     }
  10.   #centerpicture {
  11.     background-color: #ded3b9;
  12.     background-image: url('images/text.jpg');
  13.     width: 400px;
  14.     height: 300px;
  15.     position: absolute;
  16.     left: 420;
  17.     top: 225px;
  18.     }
  19.   #rightpicture {
  20.     background-color: #ded3b9;
  21.     background-image: url('images/scroll.jpg');
  22.     width: 240px;
  23.     height: 500px;
  24.     position: absolute;
  25.     right: 220px;
  26.     top: 225px;
  27.     }
  28.   #bottompicture {
  29.     background-color: #ded3b9;
  30.     background-image: url('images/text3.jpg');
  31.     width: 600px;
  32.     height: 200px;
  33.     position: absolute;
  34.     left: 220px;
  35.     top: 525px;
  36.     }


PS: I'm pretty new to CSS as we've only started studying it at college so i apologise if this is making you repeat old tricks/tips.
  • Fabinator
  • Proficient
  • Proficient
  • Fabinator
  • Posts: 467

Post 3+ Months Ago

Wooo those pictures take long to load :o
Well you shouldn't use absolute positioning, for example 500px is half the screen on one resolution but covers maybe one third on a greater one.

Well a first thing that you can try is replacing the amounts of pixels by percentages. For example 800x600 screen. A width of 120px can be replaced by 20%. That way it fits every resolution.

Another thing you can try is using a container div to wrap the divs and position those with float:left or float:right. I'll explain that more thoroughly when the first thing doesn't seem to work
  • Shauny_B
  • Newbie
  • Newbie
  • Shauny_B
  • Posts: 5
  • Loc: Wigan

Post 3+ Months Ago

Fabinator wrote:
Wooo those pictures take long to load :o
Well you shouldn't use absolute positioning, for example 500px is half the screen on one resolution but covers maybe one third on a greater one.

Well a first thing that you can try is replacing the amounts of pixels by percentages. For example 800x600 screen. A width of 120px can be replaced by 20%. That way it fits every resolution.

Another thing you can try is using a container div to wrap the divs and position those with float:left or float:right. I'll explain that more thoroughly when the first thing doesn't seem to work


Just tried that and the images just got scattered about everywhere without a trace so had change it back to the way i had it, but thanks for your fast reply, what was the other option?
  • Fabinator
  • Proficient
  • Proficient
  • Fabinator
  • Posts: 467

Post 3+ Months Ago

Well do you use div's to design your site?

If you decide that the width of your complete design is 850px, you can use a container div to wrap all the others in. You can let the menu float left in that structure, the release float right and the other content be in the middle.

CSS:
Code: [ Select ]
div.wrapper{
margin: 0 auto; /*center it */
width:850px;
}

div.left {
background-color: #ded3b9;
background-image: url('images/menu.jpg');
width: 200px;
float:left;
}

div.center{
background-color: #ded3b9;
background-image: url('images/text.jpg');
width: 400px;
}

div.right {
background-color: #ded3b9;
background-image: url('images/scroll.jpg');
width: 240px;
height: 500px;
float:right;
}
  1. div.wrapper{
  2. margin: 0 auto; /*center it */
  3. width:850px;
  4. }
  5. div.left {
  6. background-color: #ded3b9;
  7. background-image: url('images/menu.jpg');
  8. width: 200px;
  9. float:left;
  10. }
  11. div.center{
  12. background-color: #ded3b9;
  13. background-image: url('images/text.jpg');
  14. width: 400px;
  15. }
  16. div.right {
  17. background-color: #ded3b9;
  18. background-image: url('images/scroll.jpg');
  19. width: 240px;
  20. height: 500px;
  21. float:right;
  22. }

Now you have a 850px wide container with a menu on the left, a centered div in the middle and another div on the right.

Succes!
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Another thing you could do is leave the images as absolutely positioned and just put them inside a wrapper like the one Fabinator made above.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 48 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.