Hi Gareth,
I did a little volunteer work for the scouting web, (atta boy Gareth!) concerning that rounded top for the Homepage. The attachment file:
bg_content-top.jpg. The attached file can replace the existing rectangle - it's all yours!
(hint: to download the picture mouse over the line in the black and when your cursor turns into the "hand": Right-mouse click on it and then select "Save Picture as ...")Click to view attachmentIf this new attached file
rounded corner white top is used (it would need to be uploaded into the
images folder at the Web Account) the current Homepage code line:
CODE
<img src="images/bg_content-top.png" alt="white top" width="780" height="15" />
would need to be modified (or, be replaced by commenting out the existing
<img src="...bg_content-top.png..."/> to call the new file:
bg_content-top.jpgCODE
<img src="images/bg_content-top.jpg" alt="white round top" width="780" height="15" />
My Monitors Display Resolution is currently set at 1024 x 768 and I noticed that the horizontal navigation menu is a little off center too, try
179px for the
#hornav { left:220px } in the Homepage file.
Centering issues can be such fun ...here's what it appears as with the above mentioned changes:
Some other suggestions:Images always take a moment or two to load depending upon their filesize, there is the background (solid color) file named
bg.jpg that is used in the
body and throughout the various
id=" " of the Homepage from the CSS file. This
bg.jpg, as it is a solid color (#65C7B8), may be replaced with a background color in the CSS file.
Such a replacement will be a benefit as the image is no longer required and can be removed from the files needed for the display of the page and the page can be rendered a bit quicker. Another benefit to this is that the BODY of the page, which is currently callng for a background color of a dimmed yellowish-green (#8D927C) is eventually covered by this
bg.jpg (the color shift when the page is first called to load). The line that could be commented out from the CSS file is basically:
background: url(images/bg.jpg) repeat;
The CSS files' codings that are affected by this change would be now be as follows:
CODE
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
color: #FFFFFF;
/* background: #8D927C url(images/bg.jpg) repeat; */
background-color: #65C7B8; /* replaces: background: #8D927C url(images/bg.jpg) repeat; */
margin: 0;
padding: 0;
text-align: center;
}
#hornav ul li {
display: inline;
margin: 0 2px 0 0;
padding: 3px 0 3px 10px;
/* background: url(images/bg.jpg) repeat-y; */
background-color: #65C7B8; /* replaces: background: url(images/bg.jpg) repeat-y; */
}
#hornav ul li a {
text-decoration: none;
padding: 3px 10px 3px 0;
margin: 0;
/* background: url(images/bg.jpg) repeat-y; */
background-color: #65C7B8; /* replaces: background: url(images/bg.jpg) repeat-y; */
}
#wrapper-1 {
/* background: url(images/bg.jpg) repeat-y; */
width: 880px;
margin: 0 auto;
text-align: center;
}
#wrapper-2 {
/* background: url(images/bg.jpg) repeat-y; */
width: 780px;
margin: 0 auto;
text-align: center;
}
Not unlike the afore mentioned concerning images, the white background of
#wrapper-3 may become handled in the same manner using a background color of white (#FFFFFF).
CODE
#wrapper-3 {
/* background: url(images/Untitled.png); */
background-color: #FFFFFF; /* replaces: background: url(images/Untitled.png); */
color: #333;
text-align: center;
}
Just was taking it easy today and thought I'd give a few suggestions for the look of the ST MICHEALS 31
st BELFAST SCOUT TROOP Web.