Screen problems when viewing websites.

I am hoping this is the correct place, to ask this question.
I am making a website for a friend.
http://harlequinfarmsgypsyhorses.com/Rocks.html
On my screen, it looks perfectly fine, but on my hubby's wide screen, the pic at the top, is drawn out and the first part starts again.
Obviously, the picture shown will not be the final picture, but it will be the same size.
Is there any way, to allow this picture to not start over again and appear correctly on all screens?
Really appreciate any help with this.
Thanks
Lizzie

 

The problem is that the image is inserted into the page as a background rather than a basic image. The nature of a background image, is that it will be repeated to fill the whole area.

The problem is here:

Code:

      <td height= "250" colspan= "7" background= "http://harlequinfarmsgypsyhorses.com/WebDesigns/Rock31.jpg "> 
                <div align= "right "> 
          <p>&nbsp;</p>

        </div>
      </td>

If you replaced it with this:

Code:

      <td height= "250" colspan= "7 "> 
                <div align= "right "> 
          <IMG SRC=" "http://harlequinfarmsgypsyhorses.com/WebDesigns/Rock31.jpg ">

        </div>
      </td>

I think the image would appear as you want it.

I don't know which editor you are using to generate this code (early version of Front Page perhaps), but it is creating some pretty ugly HTML.

If you want to start developing pages it is worth getting to understand what the underlying code is doing. HTML is really very simple. HTMLGoodies is a good place to start (well it got me going). You'll be surprised how quickly you can start creating well formed pages in plain HTML.

Once you've got HTML sussed, you can add CSS to the mix and then your pages can become really polished.

And there are plenty of good editors that make coding HTML easier. I like Eclipse based editors like Apanta
. Very flexible and free! You can use it to write HTML and keep on using it as you progress to PHP, Javascript, or Ruby on Rails as the fancy takes you.

The main thing with web page creation is that in the end it all comes down to HTML. Taking time when you start by really getting to grips with HTML will pay huge dividends as you move on to more sophisticated systems.

 

Ahem. Well I must be honest and say I've never used any editor. I learned basic html from books, a few years ago and added things here and there.
I've been playing around with the page a bit tonight, but it never shows up properly regardless of what I do. I did try your new code Reggie (thank you) but lost the pic.
I'll try again later.
Lizzie

 

Have you tried removing the div element and simplifying the cell to:

Code:

<td height= "250" colspan= "7 "> 
  <img src=" "http://harlequinfarmsgypsyhorses.com/WebDesigns/Rock31.jpg ">
</td>

I apologise for my assumption that the coding pattern was due to your application. If you've hand coded that from scratch and are self-taught, then there is a lot of merit in what you've achieved.

I see you've recoded the page since I looked last. It looks better - for example, all your tags are consistently lower case, which give the whole page a more consistent look.

What would really make the page better is some CSS. My wife's out tonight, so I'll have a go at creating an example page that will show you how that can help you. It's the least I can do after being so rude about your coding.

 

Well spotted. Thank you Arie.

LizzieD - notice that the error is also in my original "improvement" and that would explain why it did work for you.

 

Here is my version of your page. I've used XHTML rather than HTML as I find the extra strictness makes it easier to bug hunt (every tag has to have a matching closing tag or must be self closing - with HTML some tags must be closed while other don't)

The key thing is that I've used CSS styles to control the appearance of the page. That has allowed me to separate the style coding from the main markup. This makes it much easier to maintain the page. For example, if you want to change font, all you have to do is change the font-family: statement on line 6 and font throughout the page changes. If you define font for each element as you have in your original, if you want to change the font, you have to edit every tag where font has been defined.

Anyway, I hope this is on use.

Code:

<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN "
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html>
  <head>
    <title>Rocks</title>
    <style type= "text/css ">
      body {
        font-family: Times, TimeNr,  "New Century Schoolbook ", serif;
        background-image: url( "http://www.harlequinfarmsgypsyhorses.com/WebDesigns/lrock077.jpg ");
      }
      p, h1 {
        text-align: center;
      }
      h1, p.welcome, p.contact, p.info {
        font-style: italic;
      }
      p.welcome {
        font-size: medium;
      }
      p.advert, p.contact {
        font-size: x-large;
        font-weight: bold;
      }
      p.info {
        font-size: large;
        font-weight: bold;
      }
      div.hr {
        height: 15px;
        background: silver url( "http://www.sovavsiti.cz/css/hr1.gif ") no-repeat scroll center;
        margin-top: 30px;
      }
      img {
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
      div#links {
        position: absolute;
        left: 10%;
        top: 10px;
      }
      div#links ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      div#links li {
        float: left;
        padding-left: 10px;
      }
      div#links li a {
        display: block;
        border: 2px solid gray;
        padding: 2px;
        background-color: silver;
        font-weight: bold;
      }
      div#main_block {
        position: absolute;
        left: 5%;
        right: 5%;
        top: 50px;
        border: 5px solid black;
        background-color: silver;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <div id= "links ">
      <ul>
        <li><a href= "http://harlequinfarmsgypsyhorses.com ">Our Stallion</a></li>
        <li><a href= "http://harlequinfarmsgypsyhorses.com ">Our Mares</a></li>
        <li><a href= "http://harlequinfarmsgypsyhorses.com ">Our Colts</a></li>
        <li><a href= "http://harlequinfarmsgypsyhorses.com ">Our Fillies</a></li>
        <li><a href= "http://harlequinfarmsgypsyhorses.com ">For Sale</a></li>
        <li><a href= "http://harlequinfarmsgypsyhorses.com ">Links</a></li>
      </ul>
    </div>
    <div id= "main_block ">
      <img src= "http://www.harlequinfarmsgypsyhorses.com/WebDesigns/Rock31.jpg" />
      <p class= "welcome ">Welcome to</p>
      <h1>GREY ROCK RANCH</h1>
      <p class= "advert ">
         Offering the best in Registered Gypsy Horses.
         We stand at stud, several of the top Gypsy Horse
         Stallions to be found anywhere in the world.
         We sacrifice neither quality or disposition.
      </p>
      <img src= "http://www.harlequinfarmsgypsyhorses.com/Halcyon/Hacyinarenahead..jpg" />
      <div class= "hr "></div>
      <p class= "contact ">
        George and Jane Smith<br />
        Elk Road<br />
        Elkville<br />
        Oregon.
      </p>
      <p class= "contact ">Contact us here</p>
      <img src= "http://www.harlequinfarmsgypsyhorses.com/WebDesigns/rockemailgif.gif" />
      <p class= "info ">
        All text, pictures, animations and backgrounds appearing on this page,
        are the sole property and copyright of E.DeLeo and/or George Smith unless
        public domain or otherwise noted and may not be copied without permission.
        Pictures and graphics on this site are watermarked.
      </p>
    </div>
  </body>
</html>

 

Oh goodness. You guys are so kind to take your time to help me out. Thank you.
I wasn't at all upset Reggie, that you thought I was using something to code.
About 10 years ago, I found a fellow in the internet, who gave basic html instruction. He's probably still there. It was called PageTutor. I purchased his books and would keep them on my lap, while I made sites. Since then of course, so many more things have come along and I'm only just starting a bit of CSS. I really should learn it properly. Most of the time, I get along ok, but once in a while I hit a snag, as I did this time. I learned to write much in capitals at first but do know now that things have changed and that I need to change that.
And on that subject, should I be trying to use and learn, XHTML now? I've really not looked into it.
I thank you so much for the new code and I will work on it tomorrow.
I do think though, that my biggest frustration, is that so many monitors show things differently and colours differently. But I imagine, even professionals feel that way sometimes.
Again, thanks so much and tomorrow, I'll try out all your new suggestions.
I appreciate you both, for coming to my aid.
Lizzie

 

It a personal choice. In many ways, XHTML doesn't do anything for you that can't be done in HTML. Use what works for you.

I prefer XHMTL's consistency. In HTML some tags must be closed, like <B>, <DIV>, and <BODY>, while with others the closing tag is optional (for example, <P>, <LI>, <BR>). In XHTML every tab needs a matching closing tag (a <p> needs a closing </p>, as well as a <b> needing a closing </b>). The exceptions are for tags that effect a single instance/place, and these must use self-closing tabs : <br /> and <hr /> for example.

I find this more strict structure makes me think more about how the blocks of code fit together. It makes it easier to build a consistent structure and arrange blocks within hierarchies.

Also, I use firefox while I develop and this has a very nice plug-in called HTML validator. If my coding complies to the XHTML conventions, the plug-in gives me a nice green tick at the bottom right of the browser window. If that tick changes to a warning triangle or a red cross, I know I've made a mistake in my basic coding (missed out a tag or mispelt one - <td> instead of <tr> for example). What's more, when I double click on the icon, it takes me to a source code view and highlights the problem code. It is such a simple check, but it greatly helps me get my code right.

Because HTML is more forgiving, the validation isn't so useful. Put a tag in the wrong place and HTML will just work around it. That makes it easier to make a mistake and not notice it.

Another useful Firefox plug-in is the web developer toolbar. This gives you lots of useful tools for both bug tracking and working out how other people's sites work.

One thing to remember with Firefox, is always test the site with Microsoft's Internet Explorer. IE is a horrible browser, but it is what most people use so you have to make sure your site looks good with that too. The more you use CSS, the more you'll learn to be careful about how IE will mangle your nicely structured code.

 

I'll download Firefox and see how I like it Reggie. I believe I tried it a long time ago, and didn't like the way bookmarks/favourites, came up over the page. In fact, I downloaded IE 7, but went back to IE6, purely because of that.
I like to be able to keep my bookmarks, down at the side of the page if I want them. But I'll give it a shot anyway.
Thanks so much for all your thoughts. My friend now, has changed colours etc., on much of my original page and I'm now working on something similar. I'll show it to you when it's done.
Lizzie

 

In Firefox, you can open your bookmarks in a side pane by doing the following:

View > Side-bar > Bookmarks

Ctrl-B does the same thing.

The Netscape / Mozilla (Firefox, Thunderbird & SeaMonkey) forum is very active here, and a good place to post any queries you have about Firefox.