4 replies [Last post]
OnePay
Offline
newbie
Last seen: 15 years 42 weeks ago
Timezone: GMT+2
Joined: 2003-11-28
Posts: 2
Points: 0

Please have a look at the issue/problem at the attachment or the following URL:

http://www.onepay.nl/Scripts/CSS_Text_BG.html

The goal is to have a bunch of text in the background and at some points in the text a word (the BG is transparant) that is layed over the text.

Requirements:

- the overlay-texts are not allowed to lay over each other
- the overlay-texts should always be inside the browser window (and preferably a minimum from all edges)
- the overlay-texts should not be positioned directly, but by the position in the bunch-of-text (corrected only for: margin from the edge of the screen and other overlay-texts)
- the bunch-of-text should be static and not cause a scrollbar: overflow is hidden
- and, to top it off: it should work both in Opera and MSIE (and be standards complient)[url][/url]

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 44 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

BG-text with margined overlay-text

I started to look at this, but to me there were too many questions.

For example "the bunch-of-text should be static and not cause a scrollbar: overflow is hidden" which is easy, but is determined by the resolution the user may have and what size is the viewport.

Putting aside that for the moment and looking at the real problem which is positioning the text layer on top. You have already done the only thing I could think of.

The problem is that once you make the text position:absolute, then it is no longer contained, and therefore can move outside the viewport.

The answers I came up with were really based on cheating slightly because there is no other way I can think of -

1) never put two floating texts too close to each other
2) place them in middle of text, more specifically in middle of viewport so that they are not close to sides.
3)margin the Body say 100px on all sides away from the veiwport.
4) Do not make the background text too long.

I actually think that you have translated this for us from some school project, and it is possibly you are reading it wrong??

It also may be that there is some answer we have not thought of. Hope you come back and tell us if there is.

Regards
Day

The only way to learn is to do it yourself

OnePay
Offline
newbie
Last seen: 15 years 42 weeks ago
Timezone: GMT+2
Joined: 2003-11-28
Posts: 2
Points: 0

BG-text with margined overlay-text

Quote:

For example "the bunch-of-text should be static and not cause a scrollbar: overflow is hidden" which is easy, but is determined by the resolution the user may have and what size is the viewport.

This is solved by providing more text than fits on the largest monitor (though this problem, if too troublesome, can be solved be dynamically putting the words on a BG image using PHP).

Quote:

The problem is that once you make the text position:absolute, then it is no longer contained, and therefore can move outside the viewport.

Indeed!

Quote:

The answers I came up with were really based on cheating slightly because there is no other way I can think of -

1) Never put two floating texts too close to each other
2) Place them in middle of text, more specifically in middle of viewport so that they are not close to sides.
3) Margin the Body say 100px on all sides away from the viewport.
4) Do not make the background text too long.

This might work, I will try this monday morning.

Quote:

I actually think that you have translated this for us from some school project, and it is possibly you are reading it wrong??

It also may be that there is some answer we have not thought of. Hope you come back and tell us if there is.

Any school project would have had a monday morning deadline (do students ever start their project on time anymore), I don't work on the weekend anymore.

However, you are right about translating it ... but it was from Dutch to English. At the office we worked on this quest (we try to solve one strange/difficult problem every week to bring our knowledge to the edge) for nearly 6 hours, but could not find even one possible solution (and we have a fairly large "book of tricks").

Again, thanks for starting to take a look at it.

PS: The only two "solutions" we got was by not having the problem at all and just make the menu/link text the same size as the surrounding text and the other way was to use Flash. And, of course, we could also just use "position: fixed" and purpusly position them (and use JavaScript or PHP to make the number vary a little on each refresh).

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 44 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

BG-text with margined overlay-text

ahhh

Thank you for explaining it. Hopefully you do not come across a real life problem like that.

Boy would love to see that book of Tricks!

Day

The only way to learn is to do it yourself

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 44 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

BG-text with margined overlay-text

Have a solution but it is not perfect. I am 90% there, in so much that the absolute text does not move outside the viewport on the left or right, which is the most important thing. It is also compliant.

But you get a small problem with the underlying text when resizing, insomuch the text following the link may have a large gap in front of it till the text preceding drops down to the next line. See also "Note:" at end.

I also could not get past the problem of 2 links being seperated by a very small amount of text, and therefore being on top of each other.

I could not stop the link from being pushed out the bottom of the viewport with the text when resizing, but was not sure if that was a requirement anyway.

OK - what I did was place a relative positioned box around the absolute positioned box, and then negatived margined the "following" text.

Here is code

		<style>
			body
			{
				color: #AAAAAA;
				background-color: #666666;
				font-size: 0.75em;
				overflow: hidden;
				text-decoration: none;
				text-shadow: black 2px 2px 5px;
				z-index: 1;
			}
			
			pre
			{
				font-size: 1em;
				text-transform: none;
			}
			
			p 
			{
			display: inline;
			}

			.left 
			{
			margin-left: -200px;
			}

			.under
			{
				position: relative;
				width:200px;
				background-color: transparent;
				z-index: -7;
				display: hidden;
			}

			.MenuLink
			{
				position: absolute;
				font-size: 2em;
				text-transform: none;
				text-shadow: white;
				color: #BBBBBB;
				background-color: transparent;
				z-index: 7;
				margin-left: 10px;
				margin-right: 10px;
				padding: 0px;
			}
		</style>

and

<span class="under"><span class="MenuLink">Menu Link 0a</span></span> <span class="left"></span>

Note: the negative margin I have used could be based on EM or the font size for the link be fixed in size. I used -200px to leave plenty of room for the text but it could be smaller, which would relieve the preceding gap as explained above.

Regards
Day

The only way to learn is to do it yourself