Back To Website Design Forum

CSS Image positioning

  • Shauny_B
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Dec 07, 2007
  • Posts: 5
  • Loc: Wigan
  • Status: Offline

Post December 7th, 2007, 9:23 am

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.     }
  11.   #centerpicture {
  12.     background-color: #ded3b9;
  13.     background-image: url('images/text.jpg');
  14.     width: 400px;
  15.     height: 300px;
  16.     position: absolute;
  17.     left: 420;
  18.     top: 225px;
  19.     }
  21.   #rightpicture {
  22.     background-color: #ded3b9;
  23.     background-image: url('images/scroll.jpg');
  24.     width: 240px;
  25.     height: 500px;
  26.     position: absolute;
  27.     right: 220px;
  28.     top: 225px;
  29.     }
  31.   #bottompicture {
  32.     background-color: #ded3b9;
  33.     background-image: url('images/text3.jpg');
  34.     width: 600px;
  35.     height: 200px;
  36.     position: absolute;
  37.     left: 220px;
  38.     top: 525px;
  39.     }


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.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post December 7th, 2007, 9:23 am

  • Fabinator
  • Proficient
  • Proficient
  • No Avatar
  • Joined: May 05, 2007
  • Posts: 467
  • Status: Offline

Post December 7th, 2007, 9:37 am

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
  • No Avatar
  • Joined: Dec 07, 2007
  • Posts: 5
  • Loc: Wigan
  • Status: Offline

Post December 7th, 2007, 9:48 am

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
  • No Avatar
  • Joined: May 05, 2007
  • Posts: 467
  • Status: Offline

Post December 7th, 2007, 10:06 am

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. }
  6. div.left {
  7. background-color: #ded3b9;
  8. background-image: url('images/menu.jpg');
  9. width: 200px;
  10. float:left;
  11. }
  13. div.center{
  14. background-color: #ded3b9;
  15. background-image: url('images/text.jpg');
  16. width: 400px;
  17. }
  19. div.right {
  20. background-color: #ded3b9;
  21. background-image: url('images/scroll.jpg');
  22. width: 240px;
  23. height: 500px;
  24. float:right;
  25. }

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
  • Joined: Oct 02, 2007
  • Posts: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Post December 7th, 2007, 10:47 am

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.
phoenix web design

Page 1 of 1

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 126 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.