...

View Full Version : Wide Screen Viewing (need border width limits)



ENIGMACODE
07-07-2007, 02:56 AM
Hello

I've been using an older Editor called 'Page Wiz'

I can tweak the HTML, but I don't know what code or where to put it to in order limit the Page Backgrounds from tiling to the left and right?

In the backgrounds of these pages is usually a photograph which looks fine on a normal screen, but it tiles to either side on a Wide Screen.

http://ww2survivorstories.com/

Thanx for your help:confused:
Mike

BWiz
07-07-2007, 04:06 AM
You'll need CSS for that:



<style type="text/css">
<!--
body { background-repeat: no-repeat; }
-->
</style>

abduraooft
07-07-2007, 09:42 AM
You'll need CSS for that:



<style type="text/css">
<!--
body { background-repeat: no-repeat; }
-->
</style>


Hope it can be improved a little bit by making


body {
background:url(survivor/home-backgrd-2.jpg) #some_light_grey;
background-position:center;
background-repeat: no-repeat;
}

where #some_light_grey can be #ccc or #ddd

Your page contains a lot of non-standard(depereciated) atributes and tags such as <font> bgcolor etc. Try to improve them.

Arbitrator
07-07-2007, 09:58 AM
I've been using an older Editor called 'Page Wiz'

I can tweak the HTML, but I don't know what code or where to put it to in order limit the Page Backgrounds from tiling to the left and right?

[Ö]

http://ww2survivorstories.com/You might want to try hand‐coding a bit and correcting the numerous errors in that document. Importantly, itís missing a document type declaration. Below is the HTML 4.01 Strict declaration; it should be placed at the very top of the document.


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

After doing that I would run your document through a validator (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ww2survivorstories.com%2F) and correct all of the shown errors. If you donít understand any of the error messages, you can ask around the forum.




<style type="text/css">
<!--
body { background-repeat: no-repeat; }
-->
</style>
I would recommend against using SGML comment tags (<!-- and -->) within style elements. Not only is it totally unnecessary, but it leads to confusion when people attempt to use XHTML.


Hope it can be improved a little bit by making


body {
background:url(survivor/home-backgrd-2.jpg) #some_light_grey;
background-position:center;
background-repeat: no-repeat;
}

where #some_light_grey can be #ccc or #dddThis code can be further refined.


html { background: gray url("survivor/home-backgrd-2.jpg") center no-repeat; }

ENIGMACODE
07-07-2007, 12:55 PM
I want to thank everyone for their help

I'll try applying some of this code and see if any of it works?

The editor is an older WYSWUG type editor, I've had a bit of a problem before when I try to add newer-style HTML

In the 'What you See' mode, and in the HTML mode those improvememnts don't always work.
I guess if I could just apply sort of black border evenly to both sides of the main body, perhaps this would serve as a 'Mask' or ' Limit' not allowing tiling to either side - know what I mean?

What's your guess as to the number of people who own wide-screen computer screens this days? Do you think most folks still own conventional screens?

Thanx again - I'll have to try some of these new codes

Thanx
Mike

Arbitrator
07-07-2007, 06:11 PM
I guess if I could just apply sort of black border evenly to both sides of the main body, perhaps this would serve as a 'Mask' or ' Limit' not allowing tiling to either side - know what I mean?Youíve already been given the CSS necessary to prevent tiling.


What's your guess as to the number of people who own wide-screen computer screens this days? Do you think most folks still own conventional screens?I can see your image tile at 1280◊1024. According to TheCounter.com (http://www.thecounter.com/stats/2007/June/res.php), ~28% of users had a resolution of that large or larger for the month of June. According to OneStat.com (http://www.onestat.com/html/aboutus_pressbox51_screen_resolutions_internet.html), ~29% of users would be able to see your image tile as of April.

ENIGMACODE
07-07-2007, 06:45 PM
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
html { background: gray url(&quot;http://www.ww2survivorstories.com/home-backgrd-2.JPG&quot;)center no-repeat; }
<DIV ><table width="600" align="center">
<TBODY><tr><td>
<P align="center">
<A href="http://www.ww2survivorstories.com/"><FONT size="3" face="Impact">Home</FONT></A>&nbsp;</FONT>
<A href="story.htm"><FONT face="Impact" size="3">The Story</FONT></A>&nbsp; <A href="veterans.htm"><FONT face="Impact" size="3">The
Veterans</FONT></A>&nbsp; <A href="photos.htm"><FONT face="Impact" size="3">Photographs</FONT></A>&nbsp; <A href="preview.htm"><FONT face="Impact" size="3">Preview</FONT></A>&nbsp; <A href="research.htm"><FONT face="Impact" size="3">Research</FONT></A>&nbsp; <A href="links.htm"><FONT face="Impact" size="3">Links</FONT></A>&nbsp;&nbsp;&nbsp; </FONT></P>
<P></P>
<P align="center"><FONT color="#ffffff" face="Arial">&nbsp;&nbsp; </FONT></P>
<P align="center"><FONT face="Arial" color="#ffffff"><FONT face="Impact" color="#000000" size="6"> </FONT></FONT>
<P align="center"><FONT face="Arial" color="#ffffff"><FONT face="Impact" color="#000000" size="6"> </FONT></FONT>
<P align="center"><FONT face="Arial" color="#ffffff"><FONT face="Impact" color="#000000" size="6">Survivors' Stories</FONT>&nbsp;&nbsp;</FONT><FONT color="#ffffff" face="Arial">
<P align="center"><FONT face="Arial" color="#ffffff"><FONT face="Impact" color="#000000" size="6">&nbsp;&nbsp;&nbsp;&nbsp;<FONT size="5">North Africa
1942-43</FONT> </FONT>&nbsp;&nbsp;</FONT><FONT color="#ffffff" face="Arial">&nbsp;
</FONT>&nbsp;</P></FONT>
<P align="center"><FONT color="#ffffff" face="Arial">&nbsp;&nbsp; </FONT></P>
<P align="center"><FONT face="Arial" color="#ffffff"><FONT face="Impact" color="#000000" size="4">&nbsp; An independent non-profit film</FONT>&nbsp;&nbsp;</FONT><FONT color="#ffffff" face="Arial"></FONT></P>
</td></tr></TBODY></table>
<DIV></DIV>
<P>&nbsp;</P>
<P align="center">&nbsp;</P>
<P align="center">&nbsp;</P>
<P align="center">&nbsp;</P>
<P align="center">&nbsp;</P>
<P align="center">&nbsp;</P>
<P align="center">&nbsp;</P>
<P align="center">&nbsp;</P>
<P align="center"><FONT face="Courier New" size="2"><STRONG>For information on how
to obtain a copy of the DVD, contact: </STRONG></FONT></P>
<P align="center"><FONT face="Courier New" color="#0000ff" size="2"><STRONG><A href="mailto:survivorstories@comcast.net">survivorstories@comcast.net</A></STRONG></FONT></P>
<P align="center"><FONT size="2"><FONT face="Courier New">&copy;&nbsp; <FONT color="#000000">Copyright
2007</FONT></FONT></FONT></P></A></TD></TR></TABLE></DIV>
</BODY>
</HTML>

Or take a look here:
www.ww2survivorstories.com/test-1.htm

Obviously I screwed something up :(

BWiz
07-07-2007, 07:56 PM
Firstly at the top of the page:

Correct this:

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

To this:

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

You're border isn't showing because you've set it to the html tag,



html { background: gray url(&quot;http://www.ww2survivorstories.com/home-backgrd-2.JPG&quot;)center no-repeat; }


It should be set to the body tag


body {
background-image: url("http://www.ww2survivorstories.com/home-backgrd-2.JPG")
background-position: center;
background-repeat: no-repeat;
}


Next, please stop using the <font> tag - its deperecated. You may also want to set a page title [<title></title> tags]. You're also using fonts that people may not have, such as Impact. Although Windows (and I think Mac as well) comes with this font - Linux doesn't and I don't think theres a Linux version of it either - Though don't worry about this too much I'm just saying.

Arbitrator
07-07-2007, 08:14 PM
Obviously I screwed something up :(Put the following code within the head element of your document.


<style type="text/css">
html { background: gray url("survivor/home-backgrd-2.jpg") center no-repeat; }
</style>

CSS goes within a style element. The style element, in turn, goes within the head element.


You're border isn't showing because you've set it to the html tag,

[Ö]

It should be set to the body tag
This is wrong. It doesnít matter which element itís applied to. I apply it to the html element since that is the correct thing to do in XML and XML‐derived languages such as XHTML; doing it in HTML too makes things consistent.

And, FYI, you donít apply CSS to tags; you apply it to elements. </html> is a tag and you canít style that independently of the tag <html>.

ENIGMACODE
07-07-2007, 11:49 PM
Hello again Arbitrator (you're very patient) :(

http://www.ww2survivorstories.com/test-1.htm

How bout these:
http://www.ww2survivorstories.com/Test-5.htm < No Background Photo
http://www.ww2survivorstories.com/Test-4.htm

As you can see I've lost the background photo altogether

I've tried to copy the HTML as best as I could. I wonder if it has anything to do with the editor not behaving?

Should I try starting all over again using the HTML-Kit http://www.chami.com/html-kit/ which I downloaded?

Thank you
Mike

ENIGMACODE
07-08-2007, 01:06 PM
Hello again Arbitrator

If you stay just exactly on the page:
http://www.ww2survivorstories.com/Test-5.htm

without clicking on any of the links, the background photo doesn't appear
(try refreshing your browser)

This problem that I'm having ONLY refers to viewing on a wide screen computer - NOT a coventional sized screen

I've tried EVERYTHING - It seems I just can't find the code that will FIT that background photo DIRECTLY in the middle of a stretched WIDE screen, while adding a gray colored border to either side left and right, to act as a limit to the each side of the background photo.

I've tried BOTH Editors:
My older Page Wiz Editor
AND
The link to the newer technology free 'HTML KIT'

Both Editors cannot seem to solve this problem

My alternatives:
Simply stretch/distort the ENTIRE length of the background photos affected, so they won't TILE
Then when folks will view them on a wide screen, they'll just see more of the STRETCHED background photo ....

Thanx

koyama
07-08-2007, 01:39 PM
without clicking on any of the links, the background photo doesn't appear
(try refreshing your browser)
You have this:


html { background: gray url("http://www.ww2survivorstories.com/home-backgrd-2.JPG")center no-repeat; }
while Arbitrator said you should use this:


html { background: gray url("survivor/home-backgrd-2.jpg") center no-repeat; }
When using the background shorthand property like this, if there is no space after the URL then the background image fails to load in IE6 and IE7.

See browser comparison chart for the background shorthand property:

http://www.webdevout.net/browser-support-css#support-css2propsbasic-background

Which browsers were you viewing the page in?

ENIGMACODE
07-08-2007, 06:23 PM
:thumbsup:

Hello and thank you everyone who tried to help me
(I really appreciated it)

I've settled for a reasonable compromise and just stretched a few
photos from specific photos that I felt were important NOT to Tile
when viewing.

The other backgrounds actually look better 'Tiled' because there is
important information that can be read adequately without
missing anything when viewed on a normal sized view screen.

Take a another look in both wide screen and normal view:
http://ww2survivorstories.com/
(I'm satisfied)

Thanx so much
Mike

Arbitrator
07-09-2007, 12:41 PM
http://www.ww2survivorstories.com/test-1.htmThis document contains errors. In particular, you have ďHEADĒ in place of what should be <head>. You didnít copy the CSS that I provided correctly either:


html { background: gray url(&quot;survivor/home-backgrd-2.jpg&quot;) center no-repeat; }

The Quotation Mark (") characters should not be represented via the character entity reference &quot;. Either your editor, host, or yourself are incorrectly converting them or you donít know how to use your editor or host correctly.


http://www.ww2survivorstories.com/Test-5.htm < No Background PhotoThis document contains errors. As koyama mentioned (http://www.codingforums.com/showpost.php?p=585651&postcount=12), you copied the CSS incorrectly. There should be a space in front of the center keyword if you want the image to display in Internet Explorer. The background displays in Firefox; Iím not sure if this is a bug or not.

I donít know why thereís a big black area beneath the image. If your intent was to force it to the top of the window, then you should have substituted the top keyword for the center keyword.


http://www.ww2survivorstories.com/Test-4.htmThis document contains errors. You didnít make the proposed changes to this document either. I donít know why you specified it.


As you can see I've lost the background photo altogether

I've tried to copy the HTML as best as I could. I wonder if it has anything to do with the editor not behaving?It has to do with errors in your code and the inability to copy‐and‐paste code correctly or to verify that the code was copied correctly.

Before you started working on the core issue here, you should have fixed all of the errors in the document. I pointed out that your document contained errors in post four of this thread (http://www.codingforums.com/showpost.php?p=585282&postcount=4). Then you should have made the change and, before posting your issues here, validated the document again.

Your document also exhibits other issues, such as use of presentational elements and attributes (obsolete code) instead of CSS and misuse of elements. With regard to the latter, take the following code as an example.



<P align="center">&nbsp;</P>

Obviously, &nbsp; does not constitute a paragraph. No‐Break Space characters should not be used to produce vertical space between content and p elements should contain paragraphs (one or more complete sentences).


Should I try starting all over again using the HTML-Kit http://www.chami.com/html-kit/ which I downloaded?Iíve never tried that piece of software and I donít know what your current software is, so I canít make a recommendation.


I've settled for a reasonable compromise and just stretched a few
photos from specific photos that I felt were important NOT to Tile
when viewing.

The other backgrounds actually look better 'Tiled' because there is
important information that can be read adequately without
missing anything when viewed on a normal sized view screen.

Take a another look in both wide screen and normal view:
http://ww2survivorstories.com/The image will still tile at large resolutions, such as 1600◊1200. Without the use of CSS background positioning, the ship will not appear centered at various resolutions either. Mainly though, you should be using CSS instead of presentational attributes such as background.

ENIGMACODE
07-09-2007, 06:35 PM
Arbitrator

Obviously you take your role here seriously, and I thank you profusely.

As I said, I suspect it's the old editor that makes the erroneous conversions, not me exactly.

Yes I ran the code through the validator, and yes there were issues pointed out - but these issues are above my current knowledge of HTML.

You, and others have helped me a lot - but I can't keep coming back here asking more questions - I've over extended my welcome.

The page, (with errors), looks fine in IE 6, and Safari Mac OSX.

Sure there are pages that tile, but as I explained, I got the ship background, (for the most part), not to tile, as well as the 'Photos Page', and the 'Links Page' backgrounds - that's all that matters to me right now, without going to HTML school ....

The bigger picture to this non-profit educational film, and the web site, are the veterans' contributions, and their sacrifices, all of whom are still alive, (but not for long).

If I had the money, I'd hire you to design the page for me.

Thanx again Arbitrator



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum