CSS Part 1

So now we have our basic html page. This looks really bad, so now we need to setup our CSS file to make it look much better! Too start off we will be saving a new file called main.css into our style folder. In the top of our CSS document we will set the following:

@charset "utf-8";
/* CSS Document */

Setup

To help you understand the properties used I have setup this list below to give you an idea of each property used throughout the CSS section. I will briefly explain when they are used but will not go into depth on how they can be used.

Background – will define a background color or image and its location of start.
Color – will define the text color.
Padding – sets the spacing inside an object it is attached too.
Margin – sets the spacing outside an object it is attached too.
Width – defines the width of an object it is attached too.
Height – defines the height of an object it is attached too.
Border – sets a solid, dashed, etc lines outside the parameter of the object it is attached too.
Display – sets hidden, block, inline, etc on how the object will display in the view.
Float – defines where to push the object it is attached too.
Position – defines how the object is going to align itself with the page.
Font-family – defines the type of font to use like Arial, Verdana, etc.
Font-size –defines the size of the text
Border-radius – sets the rounded corners to the object it is attached too.
List-type – defines how a list is formatted.

CSS Background

/* Background Design and Effects */
body {
	background: url(../images/bg/bg-pattern.png) left top repeat;
	color: #2e2e2e;
	font-size: 11px;
	font-family: arial;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

.bgeffect {
	min-width: 900px;
	min-height: 500px;
	background: url(../images/bg/bgdesign.png) center top no-repeat;
}

So now we have made our first step in setting up our CSS. I will try to stay in the same order as much as possible with the html code. So from above we have setup our body tag with a background which is our pattern. Then we set up the text color, text size with font-size, and then our font family. Finally we did a basic reset on any padding or margin that the browser might have given the tag. Next we had the cloud effect "bgeffect" in which we set a min-width meaning we will not allow the div to go smaller than 900 pixels. This is the width of our images that we will set in the background. We also set a min-height which is the same as the picture. Finally we set the image attached and then centered it with center, then made sure it was on top with the word top, to stop it from repeating we placed no-repeat so it will only display once.

Information Holders

/* Information Holders */
.fixed {
	margin: 0px auto 0px auto;
	padding: 0px 0px 0px 0px;
	width: 880px;
}
.ssfixed {
	margin: 0px auto 0px auto;
	padding: 0px 0px 0px 0px;
	width: 900px;
}
	.ssfixed .f10 { padding: 10px 0px 10px 0; border-radius: 5px; }

So we will follow with our holders which are "fixed" and "ssfixed". Now we have both of these classes with a margin that has auto in the left and right side. We set this to auto for the class/div to align center on the x-axis. Next we defined having no padding which is not really needed but was added in case we needed to use it. Finally they both have a different width this is to allow us to accomplish the design look since "ssfixed" is the slideshow which is a little wider. Finally there is the last class called "f10" this is in here because it is just a group holding but also adds to the design look with is padding and border radius to allow curved corners.

  /* Banner Information/Holders  */
.head { padding: 0px 0px 50px 0px; }

.logo {	width: 202px; height: 52px; margin: 25px 0px 0px 0px; background: url(../images/Logo/GMLogo-N.png) center center no-repeat; }
	.logo:hover { background: url(../images/Logo/GMLogo-H.png) center center no-repeat; }
	.logo a { display: block; width: 202px; height: 52px; }

To start off with the banner we will setup the padding on bottom for spacing. Then we will setup our logo image, we do this by making a width and height to setup a box area. So if you look at the image it has a width of 202 pixels and a height of 52 pixels. Finally we apply a background which is center on the x and y axis. Next in the list we have a hover that will change the picture to act as if it’s a button. And finally we setup the link tag we used to have a width and height to make it clickable in our logo div.

Banner Navigation

  .navigation { width: 650px; margin: 43px 0px 0px 0px; list-style: none; font-size: 14px; font-weight: bold; float: left; padding: 0px 0px 0px 0px; }
		.navigation a { color: #FFFFFF; text-decoration: none; }
		
		.navHover { height: 5px; }
		
		.navigation li { list-style: none; padding: 0px 5px 3px 5px; margin: 0px 5px 0px 5px; float: left; }
		.navigation li:hover .navHover { background: url(../images/Fades/Fade-20.png) left top repeat; }

We start of by setting a width and margin to allow us better customization of our navigation class. Next we redefine our list to basic text with the list-style set to none. Finally we set the basic changes to font size, float location, and padding back to 0 pixels. Following the order we then setup our links to have a color of white (#FFFFFF) and no underline by turning text-decoration to none. Further down we will see our random div we made inside our links, we set a height of 5 pixels to define how much it will take up for when we add looks to it. Next up we finalize our list by redefining our li tags with no list-style then adding a padding and margin for spacing and size, with a wrap up of float to allow our li’s to align next to each other. At the end we have a li again but this time it’s for the hover, which on hover will change our navHover class to have a background.

Slideshow Details

/* SlideShow Setup */
.ssBorder { height: 10px; width: 900px; }
	/* Slide Body and Slides */
	.ssBody { padding: 3px 3px 3px 3px; background: #FFFFFF; margin: 0px 10px 0px 10px;}
		.ssSlide { background: url(../images/slideshow/Slide1.png) center center no-repeat; width: 874px; height: 174px; overflow: hidden; }
			.ssSlide ul { position:relative; width: 3500px; height: 174px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }
			.ssSlide ul li { height: 174px; width: 874px; list-style: none; float: left; }
	/* Slide Buttons */
	.ssBLast { width: 48px; height: 48px; background: url(../images/slideshow/Arrow-Left.png) center center no-repeat; 
					position: absolute; margin: -110px  0px 0px -27px; }
		.ssBLast a { display: block; width: 48px; height: 48px; }
	.ssBNext { width: 48px; height: 48px; background: url(../images/slideshow/Arrow-Right.png) center center no-repeat; 
					position: absolute; margin: -110px  0px 0px 853px; }
		.ssBNext a { display: block; width: 48px; height: 48px; }

In this section I’m going to skip the basic details and start off with the slideshow slides. If you noticed on our slides we have mystical width of 3500 pixels this is to allow the images to align next to each other. Next you might see that ssSlide class has an overflow of hidden. This is to allow the images that are next to each other to be hidden if outside the size of the class. It’s like a paper CD case in which you don’t see the border of the disc because it is covered while you can still see the center and image on the disc to tell what it is.