Text over a JPEG - Absolute positioning

S

Sixbells

Good Day,
I have a *.jpg and want to place test over it and keep the text in an
absolute position relative to the picture within the page.
 
M

Murray

Show us your page, please. You realize that if the text is resized it will
become out of register with the image, right?
 
S

Sixbells

Thanks Murry;
Here is the link to the page, I think I got it right except it shifts a bit
to the left with 3rd party browsers, Firefox, Opera and Netscape.
http://www.mwncov.com/csm2.htm

Also, if you get a chance and look at it in Opera (or any of the browsers
above) note the white space at the top and bottom of the page. I have been
able to correct the problem on the Home and Contact Us Page, but if I clear
the white space on the Lawyers page, the button bar is repositioned and
appears to 'jump' when going from Home to any of the Lawyers pages. How
would I make the table containing the toolbar stay 'absolute' as well, set
the height the same for the table above?
--
Many Regards and Thank You,
Sixbells


Murray said:
Show us your page, please. You realize that if the text is resized it will
become out of register with the image, right?
Click to expand...
 
M

Murray

OPen that page in any browser, grab the right margin of the browser viewport
and move the mouse left/right. Watch the page. See how the text remains
fixed in the display? That's how absolutely positioned elements work.

Where do you want the text to appear relative to the image?

--
Murray
MVP Expression Web


Sixbells said:
Thanks Murry;
Here is the link to the page, I think I got it right except it shifts a
bit
to the left with 3rd party browsers, Firefox, Opera and Netscape.
http://www.mwncov.com/csm2.htm

Also, if you get a chance and look at it in Opera (or any of the browsers
above) note the white space at the top and bottom of the page. I have been
able to correct the problem on the Home and Contact Us Page, but if I
clear
the white space on the Lawyers page, the button bar is repositioned and
appears to 'jump' when going from Home to any of the Lawyers pages. How
would I make the table containing the toolbar stay 'absolute' as well, set
the height the same for the table above?
Click to expand...
 
M

Murray

Some additional suggestions:

1. Change this -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

to this -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

(there's something goofy about the doctype you have used on those pages)

2. On the page with more space before the menu, you have this -

<img width="390" style="border: 1px solid #D17B07; "
src="images/NBar390x706-photo.jpg"></td>
<td></td>
<td colspan="2" rowspan="2">
<p class="firmNameHeader">Meredith,
Weinstein &amp; Numbers</p>

<p class="attorneyAtLawNameHeader">
Attorneys at Law</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="3">

while on the other pages, you have this -

<img width="390" style="border: 1px solid #9B3E00; "
src="images/MBar390x706-photo.jpg"></td>
<td>&nbsp;</td>
<td colspan="3" rowspan="2">
<p class="firmNameHeader">Meredith,
Weinstein &amp; Numbers</p>
<p class="attorneyAtLawNameHeader">
Attorneys at Law</p>
</td>
<td>&nbsp;</td>
<td height="52"></td>
</tr>
<tr>
<td rowspan="3">

Just change whatever to make the code consistent in that region and it
should help.

--
Murray
MVP Expression Web


Sixbells said:
Thanks Murry;
Here is the link to the page, I think I got it right except it shifts a
bit
to the left with 3rd party browsers, Firefox, Opera and Netscape.
http://www.mwncov.com/csm2.htm

Also, if you get a chance and look at it in Opera (or any of the browsers
above) note the white space at the top and bottom of the page. I have been
able to correct the problem on the Home and Contact Us Page, but if I
clear
the white space on the Lawyers page, the button bar is repositioned and
appears to 'jump' when going from Home to any of the Lawyers pages. How
would I make the table containing the toolbar stay 'absolute' as well, set
the height the same for the table above?
Click to expand...
 
S

Sixbells

First of all I want to thank you Murray for your wonderful feedback! I learn
something every time I submit questions to this community...

I have made the !DOCTYPE changes below as well as got the menu bar the same
on each page.

http://www.mwncov.com/csm2.htm - I now know what you were referring to, the
absolute was relative to the top left corner on the window. I want the white
text with the contact information on the three Lawyers pages to be .25 inches
below the picture on the JPEG, with the right side of the text box lining up
with the right side of the photo.

Two other quick fixes to the website from hell. It probably isn't good for a
novice to design websites for family! :)

1. I want some padding at the top of the page, would I change <div
align="center"> to <div align="absmiddle">, or that even a legal parameter?
2. The %$@ white space at the bottom of the Lawyer pages only on third party
browsers? I am so close to finishing this site...

Thanks Again Murray,
Doug Meredith
Houston, TX
~~~~~~~~~~~~~
 
R

Rob Giordano \(Crash\)

You could just put the white text as part of the image...no?



--
~~~~~~~~~~~~~~~~~~
Rob Giordano
Microsoft MVP Expression






Sixbells said:
First of all I want to thank you Murray for your wonderful feedback! I
learn
something every time I submit questions to this community...

I have made the !DOCTYPE changes below as well as got the menu bar the
same
on each page.

http://www.mwncov.com/csm2.htm - I now know what you were referring to,
the
absolute was relative to the top left corner on the window. I want the
white
text with the contact information on the three Lawyers pages to be .25
inches
below the picture on the JPEG, with the right side of the text box lining
up
with the right side of the photo.

Two other quick fixes to the website from hell. It probably isn't good for
a
novice to design websites for family! :)

1. I want some padding at the top of the page, would I change <div
align="center"> to <div align="absmiddle">, or that even a legal
parameter?
2. The %$@ white space at the bottom of the Lawyer pages only on third
party
browsers? I am so close to finishing this site...

Thanks Again Murray,
Doug Meredith
Houston, TX
~~~~~~~~~~~~~
Click to expand...
 
S

Sixbells

~~~~~
Actually the coordinate space for any absolutely positioned element is based
on the zero points for the nearest positioned ancestor. Only when there is
no nearest positioned ancestor would this default to the body tag, hence the
upper, left-hand corner of the viewport. Thus -

<body>
.....
<div style="position:relative;" id="parent">
....
<div style="position:absolute;top:150px;left:200px;"
id="child">content</div>
</div>
</body>

div#child will be placed 150px below and 200px to the right of the zero
intersection for div#parent said:
1. I want some padding at the top of the page, would I change <div
align="center"> to <div align="absmiddle">, or that even a legal
parameter?
Click to expand...

No. You would add top margin to the body tag, e.g.,

body { margin-top:20px; }
even a legal parameter?
Click to expand...

No. It has never been part of the official HTML syntax.
2. The %$@ white space at the bottom of the Lawyer pages only on third
party
browsers?
Click to expand...

I'll take a look.
~~~~~
Thank you Murray, I think I have learned more in the last three days or so,
I wish I could shake your hand! The Margin param in my CSS worked like a
charm as did the div-parent/child code.

Have a great night, and I look forward to your advice on Browser
compatibility with the white space on the bottom of the Lawyers pages. the
site is www.mwncov.com (of course), I am publishing the changes above right
now.

Thanks again,
Doug
++++++++++
 
R

Rob Giordano \(Crash\)

Interesting effect...nudge the viewport size and white text disappears until
you refresh the page, I doubt you want this though.

--
~~~~~~~~~~~~~~~~~~
Rob Giordano
Microsoft MVP Expression
 
S

Sixbells

Yes, I noticed that I had to force a refresh after resizing the window. I
tried to change the Z-Order, but the refresh issue still exists. I will move
the Text box code above the JPEG code and see if that helps. Thanks to all!
 
M

Murray

There would be only one way to take care of the white space BELOW THE
COLORED region on the left - is that what you are talking about?

If so, then google "faux-column".
 
S

Sixbells

Yes, I tried that but the email link did not work. I will teak it see of
moving the text box code above the image helps.
 
S

Sixbells

I moved the <img> below the text box code, but the refresh issue remains. I
always thought that a window resize forced a refresh, obviously not. Is
there a way for me to capture a resize event, and 'force' a refresh?? I know
it is a hack, but I am at a loss.
 
R

Rob Giordano \(Crash\)

personally...I'd just put the white text as part of the image and be done
with it, that way it will always be in the place you want. - keep your image
files so if you need to change the content of the white text later you can.



--
~~~~~~~~~~~~~~~~~~
Rob Giordano
Microsoft MVP Expression
 
M

Murray

You are trying to hit a fly with a sledgehammer. Where do you want the
content to appear in that colored region?
 
S

Sixbells

Murray, it is fine now, your parent/child solution worked and I positioned it
to where it now stays it the same position regardless of the viewport. The
issue is the on resize the text box disappears until I force a refresh (F5).
I always thought the windows was refreshed on a resize event, but obviously
not. If I use Crash's solution above, I cannot include the email link.

That is why I was asking if the is a way to capture a resize event, and
force a refresh. The last remaining issue is the white space at the bottom
of the Lawyers' pages on third party browsers. Thanks for your feedback
Murray and Crash!
 
R

Rob Giordano \(Crash\)

Yah, still disappears.

Actually you could use an image with a hotspot for the email...but emails in
the clear like that are bound to attract spammers anyway.

--
~~~~~~~~~~~~~~~~~~
Rob Giordano
Microsoft MVP Expression
 
M

Murray

The last remaining issue is the white space at the bottom
of the Lawyers' pages on third party browsers.
Click to expand...

I have given you the solution for that, right? Did you google "faux
columns"?
to where it now stays it the same position regardless of the viewport
Click to expand...

But you've not uploaded this one, right? If you have, it's not working for
me.
on resize the text box disappears until I force a refresh
Click to expand...

Which browser? Which 'text box'? I'm not seeing anything like this in FF.
 
R

Rob Giordano \(Crash\)

IE7 all the attorneys' pages text disappears when changing viewport

--
~~~~~~~~~~~~~~~~~~
Rob Giordano
Microsoft MVP Expression
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Absolute position in Layout 2
Move Chart with Text 0
Can I have multiple child divs? 2
Automatic hover/help texts based on Schema annotations? 0
Place Text box at Mouse Pointer Position on a page 0
Two columns followed by single page-width column on same page 0
Absolute Position of a table realtive to a cell? 3
White space above heading inconsistently applied 1

Top