Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Help needed for a Novice!

Discussion in 'Website Coding & Programming Forum:' started by Haz, Apr 28, 2011.

  1. Haz

    Haz New Member

    Hi, I've recently created my second website in Dreamweaver which was a friend who has a bed and breakfast www(DOT)snowatthebarn(DOT)co(DOT)uk*

    However I have various problems with it:

    1. The site looks fine in Safari/Firefox but on some computers which run Internet Explorer the Divs at the top of the page are all jumbled up and the text overlaps. I've posted the html for the index page and the code for the attached external style sheet at the bottom of this list of questions. Does anyone have any idea where I am going wrong? I've also attached a screenshot of what it looks like.


    2. I've tried googling the website and when I use certain keywords the site is listed but for some reason there is no blue title to click on - just the url at the bottom - again I've attached a screenshot. Can anyone see anything missing in my code which is causing this?

    3.The bed and breakfast/guest house is in a small village called Marshfield in South West England. There are probably only 2 or 3 other guest houses in the village. However when I google 'bed and breakfast marshfield' the site isn't listed until the 4th, 5th or 6th pages (depending on search terms). i have included a list of keywords in my code just after the head tag. Does anyone know why the site is comming down so low in the listings? I don't think he has any links to the site yet but surely the site should come up on the first or second page despite this?

    4. Further to the question above - there is a Marshfield in America - a lot of American sites are comming up before the site that I created. Should mine not be given priority for people searching in the UK since it has a co.uk*name? I see that the two or three other bed and breakfasts in the village come up first and second when searching for 'bed and breakfast marshfiled'

    5.I have put a google map into his website in the 'Directions' page. However, despite listing his business with google maps, there is no pointer on the map. When I log into the google account I created for him and go to 'Maps' it shows his business marked on the map with a pointer but when I search in google there is no pointer. Any ideas what I need to do to get this to work?

    [​IMG]

    Here is the html code for the index page:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <TITLE>-</TITLE>
    <META NAME="KEYWORDS" CONTENT="bed, breakfast, bath, marshfield, accommodation, hotel, cotswolds, south, gloucestershire, bristol, somerset, guest, house">
    <META NAME="DESCRIPTION" CONTENT="Bed and Breakfast in Marshfield near Bath">
    <META NAME="ROBOTS" CONTENT="INDEX,FOLLOW">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>SNOW AT THE BARN - Bed &amp; Breakfast near Bath</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    #header {
    position: absolute;
    height: 183.986px;
    width: 955px;
    background: #4a583a;
    }
    #content {
    position: absolute;
    height: 700px;
    width: 955px;
    top: 183.986px;
    }
    -->
    </style><script type="text/javascript">

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-22281135-1']);
    _gaq.push(['_trackPageview']);

    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

    </script></head>

    <body>
    <div id="container">
    <div id="greenarea">
    <div id="drawing"></div>
    <div id="snow">
    <h1>SNOW AT THE BARN</h1>
    </div>
    <div id="crest"></div>
    <div id="bed">
    <h1>Bed &amp; Breakfast Accommodation<br />Marshfield near Bath</h1>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div>
    <div id="phone">01225 892339&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 07973 382028 </div>
    </div>
    <div id="topleft">
    <p>&nbsp;</p>
    <p>The Barn dates from the 18th Century and lies within the village of Marshfield, a designated conservation area, in the county of South Gloucestershire. A family home of many years standing, the Barn is set in an attractive mature garden and offers ample off-street parking. The comfortable bed and breakfast accommodation is to a high standard and the Barn offers a warm welcome and a relaxing environment.<br />
    <br />
    The village of Marshfield lies on the southern edge of the Cotswolds and is just 6 miles from the Roman city of Bath. From its 12th Century church to its more recent 18th Century High Street, the village proudly displays its architectural heritage based on the old wool and malting industries. Marshfield boasts two fine pubs offering good food, wine and traditional ales and a friendly teashop. Other village amenities include an outstanding village shop, a butchers, newsagents and post office.</p>
    </div>
    <div id="topright"><img src="images/Marshfield-July-2006-032.jpg" width="414" height="311" alt="Snow at the Barn" /></div>
    <div id="welcome">Welcome</div>
    <div id="menu">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="whatsnear.html">What's Near</a></li>
    <li><a href="accommodation.html">Accommodation</a></li>
    <li><a href="rates.html">Rates</a></li>
    <li><a href="reservations.html">Reservations</a></li>
    <li><a href="directions.html">Directions</a></li>
    </ul>
    </div>
    <div id="bottomleft"><img src="images/Marshfield-July-2006-042.jpg" width="414" height="311" alt="Garden" /></div>
    <div id="bottomright"><img src="images/Marshfield-July-2006-036.jpg" width="414" height="311" /></div>
    </div>
    </body>
    </html>



    And here is the attached stylesheet:

    @charset "UTF-8";
    body {
    background-color: #49602B;
    font-family: "Times New Roman", Times, serif;
    font-size: 32px;
    font-style: normal;
    font-weight: normal;
    color: #FFF;
    }
    /* CSS Document */

    #container {
    font-size: 14px;
    background: #F6F6F6;
    width: 955px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    height: 1000px;
    }
    #greenarea {
    background: #49602B;
    position: absolute;
    height: 184px;
    width: 966px;
    }
    #topleft {
    position: absolute;
    height: 311px;
    width: 414px;
    left: 50px;
    top: 281px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    color: #000;
    }
    #topright {
    position: absolute;
    height: 311px;
    width: 414px;
    top: 282px;
    left: 493px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    color: #000;
    }
    #map_canvas {
    position: absolute;
    height: 311px;
    width: 414px;
    left: 493px;
    top: 282px;
    }
    .bold {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    color: #000;
    }
    #welcome {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 31px;
    font-style: normal;
    font-weight: normal;
    height: 35px;
    width: 178px;
    left: 169px;
    top: 278px;
    position: absolute;
    color: #49602B;
    }
    #menu {
    position: absolute;
    height: 50px;
    width: 899px;
    left: 27px;
    top: 177px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    list-style: none;
    color: #49602B;
    }
    #drawing {
    background: url(images/logo.png);
    position: absolute;
    height: 172px;
    width: 225px;
    }
    #snow {
    position: absolute;
    height: 25px;
    width: 307px;
    left: 330px;
    top: -11px;
    font-style: normal;
    font-weight: normal;
    }
    #bed {
    position: absolute;
    height: 120px;
    width: 340px;
    left: 301px;
    top: 50px;
    }
    #phone {
    position: absolute;
    height: 42px;
    width: 163px;
    left: 423px;
    top: 125px;
    text-align: left;
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    color: #FFF;
    }
    #crest {
    position: absolute;
    height: 17px;
    width: 61px;
    left: 446.27px;
    top: 40px;
    background: url(images/crest3.png);
    }
    #container #greenarea #bed h2 {
    font-family: "Times New Roman", Times, serif;
    font-style: normal;
    font-weight: normal;
    color: #FFF;
    text-align: center;
    }
    #container #greenarea #bed h1 {
    font-size: 18px;
    text-align: center;
    }
    #menu ul li {
    display: inline;
    margin-right: 25px;
    margin-left: 25px;
    list-style: none;
    }
    #menu a:hover {
    color: #0F0;
    text-decoration: none;
    }
    #bottomleft {
    position: absolute;
    height: 311px;
    width: 414px;
    left: 50px;
    top: 618px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    color: #000;
    }
    #bottomright {
    position: absolute;
    height: 311px;
    width: 414px;
    left: 491px;
    top: 618px;
    }
    #menu a:visited {
    color: #030;
    text-decoration: none;
    }
    #menu a:link {
    text-decoration: none;
    color: #49602B;
    }
     
  2. Haz

    Haz New Member

    Oh, and the two screenshots can be viewed here:

    www(dot)simmondsdesign(dot)co(dot)uk/blog/photos
     
  3. Corrosive

    Corrosive Moderator Staff Member

    It looks fine in IE9 to me but 6/7/8 can be a bit of a nightmare I'm afraid. One think I would say is to lay off the 'position absolute' for everything. Learn about page flow and relative/natural positioning and your designs will be much more stable and be better in older browsers. You can't really 'drag and drop' a website, despite what Adobe would have you believe.


    Yep, put a page title in. You have;

    Code:
    <TITLE>-</TITLE> 
    Suggest at least;

    Code:
    <TITLE>Snow At The Barn - Bead &amp; Breakfast - Marshfield</TITLE> 
    No way, my wife's Aunt lives in Marshfield! Google is a 'long game' how long has the site been up? Also suggest you only have one h1 tag per page.

    Set up a Google Webmaster account and select your geographical location. That might help but, yes, you are right that .co.uk should come up first on google.co.uk.

    Yep, use the Maps API; Google Maps API Family - Google Code if you haven't already. You should be able to add a marker location in the code string you produce. It is something like &markers with some co-ords after it but it has been a while since I used it.

    Hope that helps and nice site btw.
     
  4. djb

    djb Member

    Can’t really add anything to that!
     
  5. Haz

    Haz New Member

    Thanks very much for that - that's a great help! Much appreciated. I'm still massively confused by the google map marker but I'll perservere! Everything else is resolved now though. Thanks very much :icon_smile:again.
     
  6. squeezee

    squeezee Member

    If you zoom into Marshfield on the map you have a little blob, so that's good :icon_wink:
    If you want to get on Google, you need time and a few tricks:
    Tell google what the site is about. Pick some keywords - things that people might search for and include them in your h1 tags, your alt text for images, your body text etc. use about 3-5 times at most in each location.
    Get some backlinks to the site, DMoz is very good, it's the one that Google uses. You could use the signature on this forum. Use anchor text, so bed & breakfast or B&B that links to the site - that way Google will associate B&B with www.snow etc.
    Look at your site in the lynx browser, it's text only so you will see it through Google's eyes. Look for your keywords.
    Do a cloudtag of the site, which words are prominent?
    Webmaster tools is great, do it.
    I'm in Swindon if you are local.
     
  7. Corrosive

    Corrosive Moderator Staff Member

    You are welcome.
     
  8. Edge

    Edge Active Member

    Can I suggest you use keywords like 'Bed and Breakfast Bath' in the page title followed by snow at the barn. Also try and get similar keywords into headings on the page and enclose them with <h1> or <h2> tags.
     

Share This Page