/    Sign up×
Community /Pin to ProfileBookmark

Changing scrolling view of background image

Copy linkTweet thisAlerts:
Apr 01.2005

Newb to the forum here, looking for some help off you kind, kind fellows

k, first off, here’s a link to the page and then I’ll explain what I’m trying to do. [url]http://www.freewebs.com/seadersonline[/url]

now, I’m all for my, “making a webpage size dynamically”, for instance the main content will be in the middle, (width 780px), but if someone comes on with a higher resolution, the page should make itself bigger by doing a few things.

That’s what the background images are for, they stretch with the page, the right sided one works exactly as and how I want it to, whereas the left one doesn’t. They both do the same thing when expanding the page, show the background image beginning on the left moving to the right.

Is there anyway I can reverse that for the left hand background image?

Cheers in advance.

to post a comment
HTML

20 Comments(s) ↴

Copy linkTweet thisAlerts:
@Zohar_AmihudApr 01.2005 — The browser is VERY, VERY forgiving to what is wrriten in your HTML source code. It will display something, maybe NOT what you ment to display, but you will see something...

In your table you must use the <td> closing tag: </td>

If you have an empty cell, you must put a space into it like this: <td>&nbsp;</td>

This is the table structure:

<table>

<tr>

<td>

</td>

<td>

</td>

::

::

</tr>

<tr>

<td>

</td>

<td>

</td>

::

::

</tr>

</table>

more info at www.bookchamp.net
Copy linkTweet thisAlerts:
@darkoZiacauthorApr 01.2005 — No, that's not true at all, that table was created complying with W3C standards, if you validate it with them, http://validator.w3.org/check?uri=http%3A%2F%2Fwww.freewebs.com%2Fseadersonline, it tells you that it IS html standard, I even designed that table in accordance to their own guidelines found here, http://www.w3.org/TR/html401/struct/tables.html.

One way or another, that's not what I was looking for, I'm looking to change the way a background image becomes visible.
Copy linkTweet thisAlerts:
@kinApr 01.2005 — You're site looks great, I didn't see any problems with the background on the left or right side. My resolution is 1280x1024. Is there something i"m missing? Maybe I need a higher res to see the problem?
Copy linkTweet thisAlerts:
@darkoZiacauthorApr 01.2005 — If you resize your browser to say 780 width (you can't go any lower cos then scroll-bars will appear), and then gradually make the page bigger, you'll see that the right-hand side looks as if it's just one image, whereas the left-hand side is slightly broken. This is to do with the way the image is made visible.

Sorry about this, I'm being really anal, but it's a feature that I really want.
Copy linkTweet thisAlerts:
@kinApr 01.2005 — Ok, I think I see what you're saying now... the bg image on the left is different the the one on the right, is it that you want them to be the same except opposite?
Copy linkTweet thisAlerts:
@kinApr 01.2005 — Right, I see that now. No need to apologize, but that makes sense, I would want the same were I making the page.
Copy linkTweet thisAlerts:
@kinApr 01.2005 — Ok, I think I see what you're saying now... the bg image on the left is different the the one on the right, is it that you want them to be the same except opposite?
[/QUOTE]

Posted before I saw your reply. *Apologies*
Copy linkTweet thisAlerts:
@kinApr 01.2005 — Hmm... I'm not seeing anything in your code that I wouldn't have done, or nothing not there that I would have- except the closing the table tags but you made your case about that and it wouldn't resolve your issue at all. ? I would also like to know if anyone else has suggestions so I'll keep watching the thread too.
Copy linkTweet thisAlerts:
@darkoZiacauthorApr 01.2005 — Yeah, the code that's there now is just standard html, I know there is something missing, but I don't know what it is and I've been googling for an answer for a while now and come up with nothing. I'm not even sure what exactly to search for, I think it's to do with how you anchor your image (this is my photoshop talk coming out), the default is the most left-sided point of an image is your "anchor", that'll be where the first "slice" of the image will be shown and then it will be revealed gradually from there, what I need to do is change that anchor point to the most right-sided point.
Copy linkTweet thisAlerts:
@darkoZiacauthorApr 01.2005 — k, I'm nearly there, if I add "; background-position: top right 0px -310px" to the style of the image, it does exactly what I want it to do in Dreamweaver, but in neither Firefox nor IE, anybody any ideas why this is?
Copy linkTweet thisAlerts:
@darkoZiacauthorApr 01.2005 — It's working now, exactly how I wanted, just needed the top right thing in there. For anyone who's interested, here's the relevant code (which you can see in operation [url=http://www.freewebs.com/seadersonline]here[/url]

&lt;table style="width:100%; margin:0px" cellpadding="0" cellspacing="0"&gt;
&lt;tr&gt;&lt;td height="35" width="50%" style="background-image:url(edited/top-top.png)"&gt;&lt;td rowspan="3" style="background-image:url(edited/merge.gif);"&gt;
&lt;table style="width:780px; height:172px; background-image:url(edited/top-bckgrnd.gif)"&gt;
&lt;tr valign="bottom"&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;td width="50%" style="background-image:url(edited/top-top.png)"&gt;
&lt;tr&gt;&lt;td height="100" style="background-image:url(edited/top-left.png); background-position:top right"&gt;&lt;td style="background-image:url(edited/top-right.png)"&gt;
&lt;tr&gt;&lt;td height="35" style="background-image:url(edited/top-bottom.png)"&gt;&lt;td style="background-image:url(edited/top-bottom.png)"&gt;
&lt;/table&gt;
Copy linkTweet thisAlerts:
@PeOfEoApr 02.2005 — [COLOR=deeppink]basically make your page with your lowest res in mind. Make your site work at 800 x 600 first and foremost. If a larger res comes along and the page width is fixed it is no biggy. If you want this to be fluid you can use css w/ floats to position elements, or position elements with top left bottom and right positioning and use % widths.



DO NOT USE TABLES FOR LAYOUT!!!! Your code may be valid html 4.01 standard but it is not compliant with the current standards and it is not accessible.[/COLOR]
Copy linkTweet thisAlerts:
@darkoZiacauthorApr 02.2005 — K, I will do after this project, but most of the coding from the top (header part), I wrote under the guidlines of W3C, I mean if I can't trust them, who can I trust? Also according to their validator - http://validator.w3.org/check?uri=http%3A%2F%2Fwww.freewebs.com%2Fseadersonline , it says that it is, so...
Copy linkTweet thisAlerts:
@PeOfEoApr 02.2005 — K, I will do after this project, but most of the coding from the top (header part), I wrote under the guidlines of W3C, I mean if I can't trust them, who can I trust? Also according to their validator - http://validator.w3.org/check?uri=http%3A%2F%2Fwww.freewebs.com%2Fseadersonline , it says that it is, so...[/QUOTE]
[COLOR=deeppink]Your code is not compliant with the accessibility standards set by the w3c. Just because the code validates does not mean it is compliant with the standards. Your code validating only means you did not use deprecated tags, deprecated attributes, and your tags have all of their requirements met (they are closed if they need to be, they have the neccessary attributes, they are where they are supposed to be). Here is what the w3c thinks of tables:

Tables should be used to mark up truly tabular information ("data tables"). Content developers should avoid using them to lay out pages ("layout tables"). Tables for any use also present special problems to users of screen readers (refer to checkpoint 10.3).[/quote]

Standards compliant code means it is compliant with the wcag -> http://www.w3.org/TR/WAI-WEBCONTENT/ (this would also mean it is also compliant with wai and 508).

Html 4.01 trans is also a loose doc type. Ideally one would be using html 4.01 strict or maybe xhtml if they use it properly.[/COLOR]
Copy linkTweet thisAlerts:
@darkoZiacauthorApr 02.2005 — k...

I have been meaning to learn and practise css for a while now, but haven't as soon as this project is done I'll do it!
Copy linkTweet thisAlerts:
@PeOfEoApr 02.2005 — k...

I have been meaning to learn and practise css for a while now, but haven't as soon as this project is done I'll do it![/QUOTE]
[COLOR=deeppink]Ill hold yah to that :p[/COLOR]
Copy linkTweet thisAlerts:
@darkoZiacauthorApr 02.2005 — [COLOR=deeppink]Ill hold yah to that :p[/COLOR][/QUOTE]

kk, I'll have it in by ten past, sir! ?
Copy linkTweet thisAlerts:
@the_treeApr 02.2005 — You claim to have read the specifications but did you just ignore this paragraph?Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.[/quote]
Copy linkTweet thisAlerts:
@darkoZiacauthorApr 06.2005 — I was on a while back about getting my header pics to do a few things, they're doing what they're supposed to do... in Firefox, but IE doesn't really like them.

Since I was last on, I have learned XHTML and CSS, and I've implemented them both in my website (I can now show off my W3C XHTML validation [url=http://validator.w3.org/check?uri=http%3A%2F%2F193.1.127.21%2F%7Eslong%2Fcss%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&verbose=1]here[/url]) but as you can see (with IE), it's all messed up. Quite dissapointed, I even now have a JavaScript to send the browser to use different stylesheets, but I'm not wholly sure what the problem is, any ideas?

Site is here: [url=http://193.1.127.21/~slong/css/index.html]site[/url].
×

Success!

Help @darkoZiac spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...