8 replies [Last post]
CSScrazy
CSScrazy's picture
Offline
newbie
Last seen: 8 years 38 weeks ago
Timezone: GMT-4
Joined: 2007-07-11
Posts: 10
Points: 12

Hi,

Best solution wins $50

I need to resize and reposition text relative to a background image that resizes according to the browser's size and width.

FYI: This is for an app which is going to run off Chrome which allows resizing of background images using width and height.

I've put a test link here for you to see where I'm at so far:
http://www.xsprotemplates.com/test/test.html

I'll PayPal $50 to anyone who offers the best solution.

Any takers?

Thanks!

PJ

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 6 weeks 6 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

%

Use percentages. Measure the percentage of the background image to where you want the text to start and change the text's margins accordingly.

The link really doesn't show anything resizing at all are you sure you posted it correctly?

CSScrazy
CSScrazy's picture
Offline
newbie
Last seen: 8 years 38 weeks ago
Timezone: GMT-4
Joined: 2007-07-11
Posts: 10
Points: 12

Verschwindende wrote: Use

Verschwindende wrote:

Use percentages. Measure the percentage of the background image to where you want the text to start and change the text's margins accordingly.

The link really doesn't show anything resizing at all are you sure you posted it correctly?

Thank you. Percentage is what I've tried, but I must be using it wrong.

I double checked the link and it's loading fine.

PJ

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 6 weeks 6 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

CSScrazy wrote: ... I double

CSScrazy wrote:

... I double checked the link and it's loading fine. ...

What part is supposed to be resizing?? Puzzled

JOLO253
Offline
newbie
Tacoma, WA
Last seen: 8 years 39 weeks ago
Tacoma, WA
Timezone: GMT-7
Joined: 2010-08-22
Posts: 1
Points: 1

The Easiest Way

If I understand your question correctly, your wondering how to position the three elements/divs independantly? if so, the easiest way to position your images and text is to uses the Absolute positioning from your CSS to position your Images and text by the number of pixels from the top of the window and from the left of the window. For example(a crude one at best).. in your CSS

#h1 {
position: absolute;
top: 120px;
left: 120px;
}
#headerBar {
position: absolute;
top: 117px;
left: 120px;
}

#image {
position: absolute;
top: 200px;
left: 120px;
}
If this is not what you are asking please clarify so that I can assist you...

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 6 weeks 6 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

JOLO253 wrote:... the

JOLO253 wrote:

... the easiest way to position your images and text is to uses the Absolute positioning ...

Easiest does not equal correct. I'd never suggest positioning a text container (or anything scalable) with absolute positioning. Besides pixel values measured from the top and left do not address the resizing background issue.

I really wish the OP would remove the $50 prize. It's unnecessary, distracting and will attract bad advice.

I'm still not seeing anything resizing in the link. I guess I just don't really know what you're after. Personally, I'd just center everything horizontally and not allow the background to scale.

CSScrazy
CSScrazy's picture
Offline
newbie
Last seen: 8 years 38 weeks ago
Timezone: GMT-4
Joined: 2007-07-11
Posts: 10
Points: 12

Verschwindende

Verschwindende wrote:
JOLO253 wrote:

... the easiest way to position your images and text is to uses the Absolute positioning ...

Easiest does not equal correct. I'd never suggest positioning a text container (or anything scalable) with absolute positioning. Besides pixel values measured from the top and left do not address the resizing background issue.

I really wish the OP would remove the $50 prize. It's unnecessary, distracting and will attract bad advice.

I'm still not seeing anything resizing in the link. I guess I just don't really know what you're after. Personally, I'd just center everything horizontally and not allow the background to scale.

Absolute positioning is not going to work for this.

As for resizing the image... if you check the last information in the url you will see &width= and &height= change these values to reflect a browser size, hit enter, and watch the image resize..

But that's where I'm stuck. Would like to know of a good way to resize the text as well and reposition it to stay relative to the background image.

Thoughts anyone?

Thanks.

PJ

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 1 year 44 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

All I see is Warning:

All I see is

Warning: imagecreatefromjpeg(illustration/images/1eye_bolt_markings.jpg) [function.imagecreatefromjpeg]: failed to open stream: No such file or directory in /home/xsprotem/public_html/test/index.php on line 256
 
Warning: imagesx(): supplied argument is not a valid Image resource in /home/xsprotem/public_html/test/index.php on line 259
 
Warning: imagesy(): supplied argument is not a valid Image resource in /home/xsprotem/public_html/test/index.php on line 260
 
Warning: Division by zero in /home/xsprotem/public_html/test/index.php on line 265
 
Warning: Division by zero in /home/xsprotem/public_html/test/index.php on line 266
 
Warning: include(illustration/1eye_bolt_markings.html) [function.include]: failed to open stream: No such file or directory in /home/xsprotem/public_html/test/index.php on line 276
 
Warning: include(illustration/1eye_bolt_markings.html) [function.include]: failed to open stream: No such file or directory in /home/xsprotem/public_html/test/index.php on line 276
 
Warning: include() [function.include]: Failed opening 'illustration/1eye_bolt_markings.html' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/xsprotem/public_html/test/index.php on line 276

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

CSScrazy
CSScrazy's picture
Offline
newbie
Last seen: 8 years 38 weeks ago
Timezone: GMT-4
Joined: 2007-07-11
Posts: 10
Points: 12

Thanks all for your help and

Thanks all for your help and time.

I finally figured this out.

For the text it was a matter of starting with a text size that fits over the original image size and then resizing the text with the same percentage I am resizing the image.

As for positioning the content the solution was similar.

Once again thanks all for your help.

PJ