At <http://snow.prohosting .com/srcopan/dry/test.es.html>, you will see
that the background image runs down the left margin. The right hand side
of it is faded, watermark style, but it is one single image.
my intention is for the header and text to appear to the right of the
unfaded portion of the image, and on top of the watermarked portion. At
most viewport widths it works as intended. However, if the viewport is
narrowed enough to require horizontal scrolling, the header and text slide
over the background image. This does not surprise me (it's a _background_
image, after all) but it is not my intention.
My intention is that when horizontal scrolling is required, the unfaded
portion of the image not be obscured, as if the text were sliding under
it. What I do not know is how to do this. Clip? Chop the image into two
parts and give the unfaded part a higher z-index than the text? All ideas
welcome. Feel free to comment upon anything else you might notice as well.
Many thanks,
--
Warren Post
Santa Rosa de Copán, Honduras http://srcopan.vze.com/ 8  3929 
Warren Post <wp***@hondutel .hnwrote:
>At <http://snow.prohosting .com/srcopan/dry/test.es.html>, you will see
that the background image runs down the left margin. The right hand side
of it is faded, watermark style, but it is one single image.
my intention is for the header and text to appear to the right of the
unfaded portion of the image, and on top of the watermarked portion. At
most viewport widths it works as intended. However, if the viewport is
narrowed enough to require horizontal scrolling, the header and text slide
over the background image.
I presume you mean over the unfaded part of the background image?
>This does not surprise me (it's a _background_
image, after all) but it is not my intention.
I'm not seeing that, what browser are you seeing this with? Can you
provide a screenshot?
--
Spartanicus
"Spartanicu s" wrote
I'm not seeing that, what browser are you seeing this with? Can you
provide a screenshot?
In IE the two (missing) images on the right eventually get pushed over onto
the unfaded background. Is that what you are talking about, Warren?
El Tue, 12 Sep 2006 22:05:55 +0100, Spartanicus escribió:
Warren Post <wp***@hondutel .hnwrote:
>>...if the viewport is
narrowed enough to require horizontal scrolling, the header and text
slide over the background image.
I presume you mean over the unfaded part of the background image?
Correct. Sorry for my ambiguity.
>>This does not surprise me (it's a _background_ image, after all) but it
is not my intention.
I'm not seeing that, what browser are you seeing this with? Can you
provide a screenshot?
Firefox 1.5, Opera 9.0, IE 6, all on Linux (the latter running within
Crossover Office).
I have posted two screenshots. They were taken with Firefox, but I see the
same thing in Opera and IE. The first screenshot
<http://snow.prohosting .com/srcopan/dry/screenshots/1.jpgshows the
viewport narrow enough to require horizontal scrolling, but I have not yet
scrolled. Everything looks fine here. Then I scroll horizontally in the
second screenshot
<http://snow.prohosting .com/srcopan/dry/screenshots/2.jpg>. The header
image, top navigation bar, and content text all slide over the unfaded
part of the background image.
Thanks again for your help,
--
Warren Post
Santa Rosa de Copán, Honduras http://srcopan.vze.com/
El Tue, 12 Sep 2006 23:47:40 +0000, Bill Norton escribió:
In IE the two (missing) images on the right eventually get pushed over
onto the unfaded background. Is that what you are talking about, Warren?
No, although to clarify what I mean I have simplified my example somewhat
and provided a sample image. See my reply to Spartanicus for screenshots.
--
Warren Post
Santa Rosa de Copán, Honduras http://srcopan.vze.com/
Warren Post <wp***@hondutel .hnwrote:
>Then I scroll horizontally in the
second screenshot
Scrolling horizontally was the missing bit of data.
Specifying "background-attachment:fixe d" pins your image to the viewport http://www.w3.org/TR/CSS21/colors.ht...und-attachment
A brief explanation of the relevant phrases, just in case you are not
familiar with them: the "viewport" is the visible area inside a browser
document window or tab, it is your view onto the document, or part view
if the viewport isn't big enough to display it all. "Underneath " the
viewport lies the "canvas", this is the area on which the document is
rendered.
If the content doesn't fit in the viewport then the browser will
generate scollbars. By using the scrolling mechanism you effectively
move the viewport over the (in this case larger) canvas to enable you to
see the remaining content. During scrolling a
"background-attachment:fixe d" image will remain pinned to the viewport,
not the canvas.
With CSS2.x it is not possible to have an image positioned with respect
to the viewport for vertically overflowing content, whilst positioning
it with respect to the canvas for horizontally overflowing content.
--
Spartanicus
El Thu, 14 Sep 2006 09:15:13 +0100, Spartanicus escribió:
Warren Post <wp***@hondutel .hnwrote:
>>Then I scroll horizontally in the
second screenshot
Scrolling horizontally was the missing bit of data.
Specifying "background-attachment:fixe d" pins your image to the viewport
http://www.w3.org/TR/CSS21/colors.ht...und-attachment
A brief explanation of the relevant phrases, just in case you are not
familiar with them: the "viewport" is the visible area inside a browser
document window or tab, it is your view onto the document, or part view
if the viewport isn't big enough to display it all. "Underneath " the
viewport lies the "canvas", this is the area on which the document is
rendered.
If the content doesn't fit in the viewport then the browser will
generate scollbars. By using the scrolling mechanism you effectively
move the viewport over the (in this case larger) canvas to enable you to
see the remaining content. During scrolling a
"background-attachment:fixe d" image will remain pinned to the viewport,
not the canvas.
With CSS2.x it is not possible to have an image positioned with respect
to the viewport for vertically overflowing content, whilst positioning
it with respect to the canvas for horizontally overflowing content.
Yes, and in fact pinning the image of the bottle to the viewport, not the
canvas, is what I intended. I wish the image to remain fixed relative to
the viewport even when the content is scrolled horizontally. Hence my use
of background-attachment:fixe d.
What I am looking for is ideas on how to obscure that part of the content
that now overlays the unfaded part of the background image when the
content is horizontally scrolled. The appearance I seek is that the
bottle is over, not under, the horizontally scrolled content.
My code as it stands doesn't cut it, but more to the point, I am unsure
conceptually how to proceed. I could of course not set the bottle as a
background image and give it a higher z-index than the content, but then
it would not be fixed relative to the viewport. All ideas welcome (and
thanks, Spartanicus and Bill, for your observations thus far).
--
Warren Post
Santa Rosa de Copán, Honduras http://srcopan.vze.com/
Warren Post <wp***@hondutel .hnwrote:
>What I am looking for is ideas on how to obscure that part of the content
that now overlays the unfaded part of the background image when the
content is horizontally scrolled. The appearance I seek is that the
bottle is over, not under, the horizontally scrolled content.
I see. This could be done using a position:fixed element with the
unmasked half of the bottle as a background, but IE doesn't support
position:fixed, and it would result in partially masked content when
scrolled horizontally, text would become unreadable.
Best just let the bottle scroll.
--
Spartanicus
El Thu, 14 Sep 2006 22:29:26 +0100, Spartanicus escribió:
...This could be done using a position:fixed element with the unmasked
half of the bottle as a background, but IE doesn't support position:fixed,
and it would result in partially masked content when scrolled
horizontally, text would become unreadable.
Best just let the bottle scroll.
I see what you mean, and yet my client is pretty insistent on having this.
I'll ponder this some more. Thanks for your thoughts, Spartanicus.
--
Warren Post
Santa Rosa de Copán, Honduras http://srcopan.vze.com/ This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Scott Rankin |
last post by:
Hello All,
I have a problem that I've been struggling with for a couple of days.
The situation is such: I have an image (19 pixels high) that is
followed by a text element which has a background image, also 19
pixels high. HTML looks like so:
<html>
<style type="text/css">
img
|
by: styler |
last post by:
I am having difficulty with the page located here:
http://tinyurl.com/2zwa9
I am creating a number of image sets (some left-, some right-aligned; an
example of the right-aligned is shown the first figure below) in which
the text accompanying the image sets flows down around them. The image
sets have a single image on top and two immediately below. To create the
effect, I contain the image on top in a DIV and float it, and the bottom...
|
by: web_design |
last post by:
I put this together from some other scripts I am using on a site. I'm
trying to make a better email hiding script. It isn't working. Also, it
causes Internet Explorer 6 SP2 to block the script as "active content". :(
The idea is that if the user doesn't have JavaScript enabled, they will see
an image of the email address (that can't be read by email harvesting
programs). If JavaScript is enabled, the image will be hidden and the...
|
by: Amber |
last post by:
The DataGrid allows you to make columns visible or invisible on demand
- even edit and other special columns. This article will show you how
it is done.
Some developers have reported problems controlling the visibility of
columns in the DataGrid control. The problem usually comes down to one
fact. The DataGrid has a property called AutoGenerateColumns. The
default value is "True". This means that when AutoGenerateColumns is
set to True,...
|
by: CGuy |
last post by:
Hi Gurus,
I have a rather unique requirements in my ASP.NET application - I need
to create image buttons on the fly while rendering a page.
The scenario is like this - the user can enter some text (max 10 chars)
in a page and when he saves the information, the next page should display an
imagebutton that has the text which the user entered (in the previous page).
Please help me with your valuable insights.
| | |
by: FX |
last post by:
I wanna publish a script on my site which allows me to hide image
source.
i have rough idea abt it. i`ll point src to some php page like:
<img src="image.php">
& in tht php wat exactly shud be done so tht user doesnt come to know
the real source location of image file upon clicking its properties.
I've seen websites doing this. can somebody post the script for it?
Thanx in advance
|
by: randyrhandz |
last post by:
Hi!! I have a table with image inside. In a mouseover event the image will fade and the text will appear. My problem is I cant put the text behind the image because the text floats outside the image.
|
by: Doug |
last post by:
Hi I have an img control I am trying to hide upon certain types of
commands in my code behind. When to hide it is directly tied to a
asp:dropdownlist control. So depending on what the user selects in
that dropdownlist, this image will be hidden or be displayed.
I have tied the onselectedindexchanged value of the dropdownlist to a
c-sharp method (not javascript) because other things are being done
as
well that I want to do server side....
|
by: bharathreddy |
last post by:
Hi All,
I am using a listview control in my usercontrol so that it can be used in more than one form. This user control has one column extraw, so i want to make it invisible depending on the form it is being used.
I am using table in the listview control for formating purpose. In this table I want to hide a column. Is it posible to hide the column?. I am facing the problem because I cant catch the row its showing null values.
...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| | |
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| |
