Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Wide Screen Viewing (need border width limits)

    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
    Mike

  • #2
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    You'll need CSS for that:

    Code:
    <style type="text/css">
    <!--
    body { background-repeat: no-repeat; }
    -->
    </style>
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by BWiz View Post
    You'll need CSS for that:

    Code:
    <style type="text/css">
    <!--
    body { background-repeat: no-repeat; }
    -->
    </style>
    Hope it can be improved a little bit by making

    Code:
    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.
    Last edited by abduraooft; 07-07-2007 at 09:45 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by ENIGMACODE View Post
    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.

    Code:
    <!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 and correct all of the shown errors. If you donít understand any of the error messages, you can ask around the forum.

    Quote Originally Posted by BWiz View Post
    Code:
    <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.

    Quote Originally Posted by abduraooft View Post
    Hope it can be improved a little bit by making

    Code:
    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
    This code can be further refined.

    Code:
    html { background: gray url("survivor/home-backgrd-2.jpg") center no-repeat; }
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Getting some great solutions

    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

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by ENIGMACODE View Post
    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.

    Quote Originally Posted by ENIGMACODE View Post
    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, ~28% of users had a resolution of that large or larger for the month of June. According to OneStat.com, ~29% of users would be able to see your image tile as of April.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thank you Arbitrator (you're very patient) please take another looksee

    <HTML>
    <HEAD>
    <TITLE></TITLE>
    </HEAD>
    <BODY>
    html { background: gray url(&quot;http://www.ww2survivorstories.com/ho...G&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
    Last edited by ENIGMACODE; 07-07-2007 at 06:48 PM.

  • #8
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    Firstly at the top of the page:

    Correct this:
    Code:
    !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:
    Code:
    <!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,

    Code:
    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
    Code:
    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.
    Last edited by BWiz; 07-07-2007 at 07:59 PM.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by ENIGMACODE View Post
    Obviously I screwed something up
    Put the following code within the head element of your document.

    Code:
    <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.

    Quote Originally Posted by BWiz View Post
    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>.
    Last edited by Arbitrator; 07-07-2007 at 08:20 PM. Reason: I generalized one sentence.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #10
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hello again Arbitrator (you're very patient)

    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
    Last edited by ENIGMACODE; 07-08-2007 at 04:39 AM.

  • #11
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    This doesn't seem to be working

    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
    Last edited by ENIGMACODE; 07-08-2007 at 01:09 PM.

  • #12
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by ENIGMACODE View Post
    without clicking on any of the links, the background photo doesn't appear
    (try refreshing your browser)
    You have this:
    Code:
    html { background: gray url("http://www.ww2survivorstories.com/home-backgrd-2.JPG")center no-repeat; }
    while Arbitrator said you should use this:
    Code:
    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-sup...sic-background

    Which browsers were you viewing the page in?
    Last edited by koyama; 07-08-2007 at 06:55 PM. Reason: typo

  • #13
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thank you everyone



    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

  • #14
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by ENIGMACODE View Post
    This 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:

    Code:
    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.

    Quote Originally Posted by ENIGMACODE View Post
    This document contains errors. As koyama mentioned, 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.

    Quote Originally Posted by ENIGMACODE View Post
    This document contains errors. You didnít make the proposed changes to this document either. I donít know why you specified it.

    Quote Originally Posted by ENIGMACODE View Post
    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. 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.

    Quote Originally Posted by http://ww2survivorstories.com/
    Code:
    <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).

    Quote Originally Posted by ENIGMACODE View Post
    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.

    Quote Originally Posted by ENIGMACODE View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #15
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arbitrator

    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
    Last edited by ENIGMACODE; 07-10-2007 at 02:45 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •