/* This style sheet was written by Paul Dell and was distributed with the Belle Anglaise Template available at http://www.dellwebsites.com
- This comment should remain intact though you are free to edit the style sheet as you see fit. */
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6{ /* set everything to zero for a good
starting point this selector at the top is like belt and braces,
you can see immediately when desiging if you haven't set margins and padding
to an element as they become all scrunched up together. For example I have
#rightcolumn p{font-size: 70%;margin: 10px;} this sets the p element margin
to 10px in the rightcolomn div, it overwrites what we have in the body selector see http://www.w3schools.com/css/tryit.asp?filename=trycss_margin-left for more information*/
margin: 0; /* sets the margins to zero on the body */
padding: 0; /* sets the padding to zero on the body */
border: 0; /* deletes any borders */
}
body {
background-image: url(Images/background.jpg);/*sets the path to the background image*/
background-position: center;/*centres the background image*/
color: #000000;/*sets the default text colour for our pages*/
font-family: Arial, helvetica, sans-serif;/*sets the text font for our page*/
font-size: 100%;/*sets the font size to 100%*/
min-width: 750px; /* sets a minimum width (min-width is not supported in IE) */
text-align: center; /* This is a hack to centre the wrapper in IE5x */
background-color: #FFF;/* body background colour white*/
}
#wrapper {
margin: 0 auto;/* centres the wrapper div, auto determines the left and right margins evenly*/
text-align: left;/* re aligns the text to the left after placing text-align: center; in the body */
width: 740px;/* this sets the wrappers width to 740 pixels */
background-position: right;/* positions the background image to the right side of the wrapper div */
background-image: url(Images/wrapper-div-background.gif);/* sets the path to the background image */
background-repeat: repeat-y;/* repeats the background image down the page */
}
#header {/* this is the header div, notice the height is set as to contain the background image */
background-image: url(Images/header.jpg);/* sets the path to the header background image */
height: 230px;/* sets the height to 230 pixels NOTE A div will expand to the width of it's containing element, if the width is the same as the containing element then no width property needs to be declared, but be aware that in some certain cases you need to specify the width with floated div or containers that contain floated divs*/
background-repeat: no-repeat;/* sets the background as to not repeat */
margin-top: 10px;/* sets a margin from the top */
}
/* start of navigation under the header div */
#topnav li {
display: block;/* A block element displays as a block, it forces a line break. So think of a block as a brick :)*/
float: left;/* floats the navigation to the left */
margin-top: 3px;/* creates a top margin of 3 pixels */
background-image: url(Images/top-nav-background.jpg);/* sets the background image */
}
#topnav ul {
height: 30px;/* sets the height */
text-align: center;/* centres the text*/
background-color: #FFF;/* sets the background colour */
}
#topnav ul li a {
color: #000000;/* sets the colour for the text */
font-size: 70%;/* sets the size for the text link*/
display: block;/* displays our links to look like buttons */
font-weight: bolder;/* sets the font to bold */
text-decoration: underline;/* removes the underline from the links */
width: 148px;/* sets the width for each link */
padding-top: 8px;/* sets the path to the background image */
border: none;/* makes sure we have no border */
background-repeat: repeat-x;/* repeats the background image X */
height: 30px;/* sets the height to 30 pixels */
}
#topnav ul li a:hover{
background-image: url(Images/top-nav-background-hover.jpg);/*displays the background image on hover*/
color: #FF6600;/*sets the font color on hover*/
}
/*#squareheadings is self explanatory as is #squareheadings2 and #squareheadingscontactus */
#squareheadings {
background-image: url(Images/rectangle-background-one.jpg);
height: 58px;
}
#squareheadings2 {
background-image: url(Images/rectangle-background-two.jpg);
height: 58px;
}
#squareheadingscontactus {
background-image: url(Images/rectangle-background-contactus.jpg);
height: 58px;
}
#content {/*#content div contains the contentleft, rightcolumn and footer divs*/
}
#contentleft {
float: left;/*floats the div left of the parent container */
margin-top: 6px;
padding: 3px 3px 10px 3px;
line-height: 130%;
font-size: 85%;
width: 500px;
}
#rightcolumn {
float: right;/*floats the div right */
width: 190px;/*sets the width of rightcolumn */
margin-top: 6px;/*gives us a bit of breathing space under the topnav div */
}
/*styling the element in the rightcolum div*/
#rightcolumn p{
font-size: 82%;/*sets the font size to 82%*/
margin: 10px; /*sets the padding top, right, bottom, left. NOTE you need to set the margin and padding to what *YOU* want them to be then all the browsers will use your settings */
}
/*styling the contentleft links*/
#contentleft a,
#contentleft a:visited {/*use multiple selectors when they are identical, in this case a:link and a:visited have the same appearence*/
color: #FFF;/*sets the font colour to white */
text-decoration: none;/*removes the default underline from the link text */
background-color: #FF6600;/*link background colour */
padding: 4px;/*sets the link padding to 5px */
font-size: 82%;/*sets the font size to 82%*/
margin: 10px;/*sets a margin of 10 pixels */
}
#contentleft a:hover {
color: #FFFFFF;/*sets the font colour on hover*/
background-color: #000000;/*sets the background colour on hover*/
}
#contentleft p {/*the P element defines a paragraph.*/
color: #000000;/*sets the font colour*/
margin: 10px; /*creates a margin of 10 pixels, delete this and you will see a big difference in the display, go on delete it, check it out then come back here and put it back :)*/
}
#footer {
width: 500px;/*sets the width to 500 pixels */
background-image: url(Images/footer-background.jpg);/*sets the path to the footer background */
background-repeat: no-repeat;/*makes sure the background image does not repeat */
clear: both;/*clears the div see http://www.w3.org/TR/CSS21/visuren.html for more information*/
height: 35px;/*sets the height of the footer div */
}
#footer p{/* here we are positioning and sizing the footer text
elementas to position it with accordance of the background image */
font-size: 80%;
padding-left: 59px;
padding-top: 14px;
}
/*styling the footer links */
#footer a{
text-decoration: none;/*removes the default underline from the link text */
color: #006699;/*font colour */
}
#footer a:hover{
color: #333;/*sets the font colour on hover*/
border-top: dashed black 1px;/*this places a dashed border above the link text on hover */
}
/*styling the contentleft links*/
#rightcolumn a,
#rightcolumn a:visited {/*use multiple selectors when they are identical, in this case a:link and a:visited have the same appearence*/
color: #666666;/*sets the font colour to white */
text-decoration: none;/*removes the default underline from the link text */
background-color: #C4D1C7;/*link background colour */
padding: 3px;/*sets the link padding to 5px */
margin: 10px 0px 10px 0px;/*sets a margin of 10 pixels */
}
#rightcolumn a:hover {
color: #030;/*sets the font colour on hover*/
background-color: #CBCBCB;/*sets the background colour on hover*/
}
/*We have explained all there is to explain here and we have ommitted some comments which just repeat
themselves please do not contact us for any answers that you are able
to obtain from here http://www.w3schools.com/css/default.asp we cannot possibly reply to questions
that are available elsewhere as we do not have the time and in any case Pablo is probably drunk ;)
Here is a link to get you started, remember to read, and then read again.
http://www.w3schools.com/css/default.asp Have fun and we wish you the best of luck*/