Wed, 2010-08-25 15:10
Hi,
I'm working on a desktop application project that passes parameters which I must echo/position over a background image, but I'm struggling to keep the content positioned correctly.
Here's why.
All 5 parameters are not all always passed, so sometimes I must position 4 parameters, sometimes less, sometimes more.
So when 1 of the parameters isn't displayed the other positioned parameters don't display correctly.
Here's a link to the image and how the parameters must be positioned:
NOTE: this is a private application and will be using CHROME. The CSS must work for CHROME. So it's best to view this URL in CHROME.
http://www.xsprotemplates.com/test/r/
I need help to keep the parameters positioned correctly over the image regardless if only 1 or all 5 parameters are displayed.
The current CSS is a mess as I've tried so many combination to make this work. So if someone can offer a simple, clean rewrite of the CSS I would great appreciate it.
Many many thanks!
PJ
Wed, 2010-08-25 20:58
#1
Give each one a class (don't
Give each one a class (don't use inline style) and make each class position:absolute and then use top, right, bottom & left coordinates to position them (making sure the container is position: relative so that the other elements are placed in relation to the container). Being pos:abs the elements will have no awareness of the other elements so it won't matter if one is missing or not.
Fri, 2010-08-27 20:22
#2
Tyssen wrote: Give each one a
Give each one a class (don't use inline style) and make each class position:absolute and then use top, right, bottom & left coordinates to position them (making sure the container is position: relative so that the other elements are placed in relation to the container). Being pos:abs the elements will have no awareness of the other elements so it won't matter if one is missing or not.
The problem with using absolute positioning for this particular project is that the image gets resized on the fly depending on the browser's width and height.
So I'm not sure absolute positioning is the answer.
Any thoughts?
PJ
Sat, 2010-08-28 02:42
#3
Try using percentages instead
Try using percentages instead of pixels then.
Sat, 2010-08-28 03:03
#4
Tyssen wrote:Try using
Try using percentages instead of pixels then.
Déjà vu, eh?
I'm still waiting to see the "resizing on the fly" thing. So far, nada.
Sat, 2010-08-28 04:09
#5
Hi, To resize change the
Hi,
To resize change the height width value in the last part of the URL.
Percentage is what I'll do.
Thanks.
PJ
Sat, 2010-08-28 06:29
#6
Verschwindende wrote: Déjà
Déjà vu, eh?
Er... no. Got no idea what you're referring to.
Sat, 2010-08-28 12:38
#7
Tyssen wrote: Verschwindende
Er... no. Got no idea what you're referring to.
After clicking on : http://www.xsprotemplates.com/test/r/ check the URL. I'm passing the parameters that must be 'echoed' and positioned over the background image.
In the last portion of the URL you can see the height and width parameters. If you change these values and hit enter the page we reload with the image will resize to the newly specified size.
Of course this is for test purposes. The application will auto generate these values on the fly every time.
PJ
Sat, 2010-08-28 12:41
#8
Tyssen wrote: Try using
Try using percentages instead of pixels then.
I tried using percentages using absolute positioning but no luck. When the image is resized the content's positions are off.
Any ideas?
PJ
Sat, 2010-08-28 16:30
#9
Tyssen wrote:Verschwindende
Déjà vu, eh?
Er... no. Got no idea what you're referring to.
Sat, 2010-08-28 16:54
#10
I got it! First I use
I got it!
First I use position: relative for the first DIV.
Then I use position: absolute with percentages for the other DIVs.
Worked like charm!
Thank you everyone.
PJ
Sat, 2010-08-28 19:11
#11
So, I get the $50?
So, I get the $50? 
Sun, 2010-08-29 03:20
#12
Verschwindende wrote: Tyssen
Déjà vu, eh?
Er... no. Got no idea what you're referring to.
http://csscreator.com/topic/best-solution-wins-50-paypal
Ah right. Didn't see that one.
Sun, 2010-08-29 03:38
#13
Tyssen wrote: Ah right.
Ah right. Didn't see that one.
I'll split the fifty bucks with you. 
Sun, 2010-08-29 07:28
#14
Nah, you can have it.
Nah, you can have it.
Sun, 2010-08-29 13:23
#15
Tyssen wrote: Nah, you can
Nah, you can have it.
Make checks payable to CSS Creator. Thank you. 