Jump to content


Photo

relative positioning?


  • Please log in to reply
4 replies to this topic

#1 michaellunsford

michaellunsford
  • Members
  • PipPipPip
  • Advanced Member
  • 1,023 posts
  • LocationLouisiana, USA

Posted 31 May 2006 - 02:54 AM

I have a grasp of CSS basics, but I'm still green. Just trying to migrate away from tables.

First step: 800x600 background image centered with CSS. Works great. Now, I want to position a div on top of the background image on a very specific spot. Since the background is centered, can I make something relative to center?

#2 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 31 May 2006 - 11:16 AM

Either that or you can make a div that surrounds everything else in the page code, which you then assign the width of the background image, and then give margin: auto; within it's style declaration.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#3 michaellunsford

michaellunsford
  • Members
  • PipPipPip
  • Advanced Member
  • 1,023 posts
  • LocationLouisiana, USA

Posted 31 May 2006 - 02:00 PM

I just need to figure out how to make a div show up 250px right and 100px higher than center.

thanks!

#4 seanlim

seanlim
  • Members
  • PipPipPip
  • Advanced Member
  • 355 posts
  • LocationLondon, United Kingdom

Posted 03 June 2006 - 04:23 PM

Hi there,

You could do what moberemk suggested and use a div to surround everything else and use margin:auto You should also use text-align:center for it to work in IE. To make it show up 250 px right, i suppose you can set position:relative and set right:250px

The problem is the vertical-alignment. if i am not wrong, css at the moment still lacks support for vertical alignment of elements in a div. There are several workarounds for this which can be easily googled.

I have never liked these workarounds and hacks and so have, (sadly) returned to the table method once in a while.

#5 michaellunsford

michaellunsford
  • Members
  • PipPipPip
  • Advanced Member
  • 1,023 posts
  • LocationLouisiana, USA

Posted 05 June 2006 - 06:46 PM

This seems to work:

position:relative; top:-160px; margin-left:auto; margin-right:auto; right:250px; width:320px;




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users