Let me show you the Powers of (x)HTML and CSS, to teach you how to use them...
If you're starting with CSS, please read my other tutorial, CSS Beginners Guide.
This tutorial would take me ages to explain you the things I already explained in the other tutorial.
When you start coding your own template or homepage, you will most probably want to make it
accessible to as many users, you can get!!!
In this case the first thing you should think of, is how to do it...
The answer is, writing your following the World Wide Web Consortium (W3C).
The main Problem are, all those different Browsers... They all have their own way parsing the web structure, your HTML...
But still they are all following the W3C Rules...
That means, if you wouldn't write your HTML and CSS according to these HTML & CSS Rules, your Visitors would see the page based on their Browser...
A Visitor, who is using FireFox to view your Page, s/he would most probably view the page how it has to be...
While a Visitor, who's using Internet Explorer, would only see bunch of "broken pieces", your page will not make no sence to them and they'll leave.
One follower less, means if you code the page following the W3C Standards for Web Design and Applications.
You would have atleast a guest on your site, who will think about visiting your site again and often...
If you ask me, that's better than having Him/her look at the page for 3 sec.. and just leave, and doesn't come back....
All in all, having a valid code will keep the visitor longer on your site, s/he'll eventually think about of staying... That is based on how you manage to Persent yourself and your Homepage!!
I will use a Template already made, it's a free one from http://www.templateworld.com;
However, for this tutorial I must ask you to download this Template, here is a Direct link to the download...
I will walk you through the creation of the above Template, show you how (x)HTML and CSS are used to create beautiful sites... Available to every user, using every browser...
A good site to bookmark.
CSS Reference
If you're starting with CSS, please read my other tutorial, CSS Beginners Guide.
This tutorial would take me ages to explain you the things I already explained in the other tutorial.
When you start coding your own template or homepage, you will most probably want to make it
accessible to as many users, you can get!!!
In this case the first thing you should think of, is how to do it...
The answer is, writing your following the World Wide Web Consortium (W3C).
The main Problem are, all those different Browsers... They all have their own way parsing the web structure, your HTML...
But still they are all following the W3C Rules...
That means, if you wouldn't write your HTML and CSS according to these HTML & CSS Rules, your Visitors would see the page based on their Browser...
A Visitor, who is using FireFox to view your Page, s/he would most probably view the page how it has to be...
While a Visitor, who's using Internet Explorer, would only see bunch of "broken pieces", your page will not make no sence to them and they'll leave.
One follower less, means if you code the page following the W3C Standards for Web Design and Applications.
You would have atleast a guest on your site, who will think about visiting your site again and often...
If you ask me, that's better than having Him/her look at the page for 3 sec.. and just leave, and doesn't come back....
All in all, having a valid code will keep the visitor longer on your site, s/he'll eventually think about of staying... That is based on how you manage to Persent yourself and your Homepage!!
I will use a Template already made, it's a free one from http://www.templateworld.com;
However, for this tutorial I must ask you to download this Template, here is a Direct link to the download...
I will walk you through the creation of the above Template, show you how (x)HTML and CSS are used to create beautiful sites... Available to every user, using every browser...
- [color=#00BFFF (Click to View)Part 1:[/color] Preparing the Files]
If you didn't already downloaded the template we will use for this tutorial, please download it...
So let's start, create a new Folder and name it however you want. You will use this Folder for this Tutorial.
Inside of the same folder, create 2 files, index.htm and style.css, you also need to create another folder named, images..
Now, yes, you have the template already coded, but I will show you the meaning of the code...
So first open the folder where you have the above Template, and copy the all images from the images folder into your images directory.
Now we have all images done and we can start coding the design...
NOTE: For the case you want to Design your Site yourself, you will need to learn how to slice the designed template in proper way.
For this I will redirect you over here to, CssSlicingGuide.com...
This tutorial is meant for already sliced templates, where you have the images to work with, that's why I need you to download the template...
This Tutorial also requires you to know atleast the basic stuff of HTML and CSS.
We will start with the index.htm file, open it and write the following code into it.
index.htm Wrote:
Code:<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>AppleWeb</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
We define the header of our Site.
The first line is the so called, DocType, which is used to associate our document with the Document Type Definition.
Here we declare the type of our document, in this code we declare it as, xHTML 1.0 Transitional using the English language...
You code can never be validated as a valid one if you don't put this as your first line...
In the second line we start our actual HTML, with the Tag html...
Then in the head section (<head></head>), we define the Content-Type as text/html and Charset encoding iso-8859-1, for that we use the meta tag..
Next is to name our site, using title tags, AppleWeb.
We will also need to include our css file, using the tag link, we declare the link as a stylesheet and teype as text/css.
The meta and link tags are self closing tags, which means you don't need to close them like every other Tag, <html></html>.
They are being closed with the "/" at the end of the tag, (<link rel="" />).
Once you have all that defined, we use </head> to close our header definition.
Next we can start to work on the body of our template.
Before we start coding our template, let us also prepare the CSS file, style.css.
style.css Wrote:
Code:/* CSS Document */
body{
padding:0; margin:0;
}
div, p, h1, h2, h3, ul, img{
padding:0; margin:0;
}
ul{
list-style-type:none;
}
.balnk{
font-size:0px; line-height:0px; clear:both;
}
We now style the basic HTML tags, body, div, p, h1, h2, h3, ul, img.
The only thing we do, we declare the margin and padding of those elements to 0.
Then we style our ul element with it's own styling, setting list-style-type to none.
And lastly we declare a CSS class, named balnk.. This line styles a br tag... used only once in the HTML...
- [color=#00BFFF (Click to View)Part 2:[/color] Coding the Page Header]
In this part we will code and style the page header....
So we continue to write our HTML code.. Right below <body>....
index.htm Wrote:
Code:<div id="main_header">
<div id="header">
<ul>
<li><a href="#" class="home" title="home">home</a></li>
<li><a href="#" class="user" title="user">user</a></li>
<li><a href="#" class="contact" title="contact">contact</a></li>
</ul>
<ul class="free">
<li><a class="call">800-121-4545 759-121-5454</a></li>
</ul>
<img src="images/logo.gif" alt="appleweb" width="205" height="65" title="appleweb" />
<ul class="navi">
<li><a href="#">Network</a></li>
<li><a href="#">Submission</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Finance</a></li>
<li class="li1"><a href="#">Testimonials</a></li>
</ul>
</div>
</div>
This time, we create an DIV element and declare the ID of that element as main_header.
This DIV will be our main parent for all the things we need inside of the header...
Next DIV block's ID is declared as header, This is our actual header element.
It holds 3 lists, (ul).
The first list holds few links for our user, a home link, a user link and a contact link....
The next list, we declare the ID as free, this holds a phone number for our user to call...
The 2 lists above are placed aboue the banner, the banner is placed between the first 2 lists and the last one...
We use the img tag to load the banner image...
And the last list is our main navigation, the ID is declared as navi...
This list holds all the links to the pages you're site has... in this case those are...
Network, Submission, Archieves, Finance and Testemonials.
Lastly we close the 2 DIV elements.
Now let us look at the CSS part for the above HTML code.
Just simply add the following to your existing style.css.
style.css Wrote:
#0a2b43.Code:/*--------------------------------header-------------------*/
#main_header{
width:100%; margin:0 auto; background:url(images/bg.gif) repeat-x #0a2b43; color:#FFFFFF; height:216px;
}
#main_header #header{
width:764px; margin:0 auto; background:url(images/header_pic.gif) no-repeat #fff6d8; color:#FFFFFF; height:216px;
position:relative;
}
#main_header #header ul{
background:url(images/search_bg.gif) no-repeat #09283f; color:#FFFFFF; display:block; position:absolute; height:22px;
width:123px; margin:0; padding:6px 0 0 26px; top:10px; left:0px;
}
#main_header #header ul li{
float:left; display:block; margin:0 23px 0 0;
}
#main_header #header ul li a{
height:15px; text-decoration:none; text-indent:-2000px; display:block; width:20px;
}
#main_header #header ul li a.home{
background:url(images/home.gif) no-repeat 0 0; width:16px; height:16px;
}
#main_header #header ul li a.home:hover{
background:url(images/home_h.gif) no-repeat 0 0; width:16px; height:16px;
}
#main_header #header ul li a.user{
background:url(images/user.gif) no-repeat 0 0; width:16px; height:16px;
}
#main_header #header ul li a.user:hover{
background:url(images/user_h.gif) no-repeat 0 0; width:16px; height:16px;
}
#main_header #header ul li a.contact{
background:url(images/contact.gif) no-repeat 0 0; width:19px; height:16px;
}
#main_header #header ul li a.contact:hover{
background:url(images/contact_h.gif) no-repeat 0 0; width:19px; height:16px;
}
#main_header #header ul.free{
background:url(images/toll_free-1.gif) no-repeat #09283f; color:#5d5024; display:block; height:28px; width:140px;
padding:7px 0 0 43px; position:absolute; top:2px; left:580px; margin:0;
}
#main_header #header ul.free li{
float:left; display:block; font:10px/12px 'Trebuchet MS', Arial, Helvetica, sans-serif; text-align:center; color:#5D5024;
margin:0px 0px 0 0; padding:0 0 0 0 ; text-transform:uppercase; font-weight:normal; background-color:#FFF6D8;
}
#main_header #header ul.free li span{
font-size:14px; line-height:16px; color:#FFFFFF; font-weight:bold; background-color:#ff0033; width:63px; height:16px;
}
#main_header #header ul.free li a.call{
color:#e5f4ff; font-size:11px; font-weight:normal; text-transform:uppercase; text-indent:0px; width:72px; margin:0 0 0 0px;
padding:0 0 0 5px; background-color:#09283f;
}
#main_header #header img{
position:absolute; left:40px; top:74px; display:block;
}
#main_header #header ul.navi{
width:491px; display:block; position:absolute; top:189px; left:131px; padding:0; margin:0; background:none;
}
#main_header #header ul.navi li{
background:url(images/saparation.gif) no-repeat right; height:22px; padding:0 14px 0 5px; margin:0;
display:block; float:left;
}
#main_header #header ul.navi li.li1{
background:none; height:22px; padding:0 14px 0 5px; margin:0;
display:block; float:left;
}
#main_header #header ul.navi li a{
font:12px/21px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#847543; text-decoration:none; text-indent:0px;
padding:0 0 0 15px; font-weight:bold; margin:0; width:inherit; background-color:#fff6d8;
}
#main_header #header ul.navi li a:hover{
background:url(images/navi_h.gif) no-repeat 0 2px;
}
If you look at this css, you will notice that every definition begins with #main_header.
That means that we apply the styling to the ID = main_header and everything inside of the using element ONLY!
In the first definition, #main_header {}, we define how our element should be displayed.
Width is set to be 100%, it will have the same size as the users window.
Height is set to 216 pixel, we also set margins, margin-top is set to 0 pixel while margin-left is set as auto.
We also style the background, using the image images/bg.gif which also will repeat it self vertically, for the case that the image can't be found
we define the background color as
We have styled our main header...
And since this tutorial is meant for people, who already are familiar with the Syntax of CSS.
I will skip the BIG explanations and just tell you what the properties do and why we use them!
background: This property lets you define the background of the styled element, wheter it is a image or just simple color value.
When you want to use a image as a background, you will add the attribute url('path'), where you then replace path with the full path to the resource you want to use!
You can also control the appreance of the background image, using propertys such as, position and repeat.
The background property can be called in different ways, either by simply calling it as background: or by calling it's child propertys.
background-image:url(), the right attribute for this is the url() definition.
background-color:red, this property accepts all kinds of color definitions such as, color names(blue), hex color values(#FF0000), rgb color values(255,255,255). When defining a RGB color you need to call it with the RGB function... rgb(222,222,111);
background-repeat:no-repeat, for this there are only 4 attributes, no-repeat, repeat-x, repeat-y and repeat the first will show the image as it is, the second will repeat the image vertically and the third will do the same horizontaly. The last repeat will repeat the image in both directions.
background-position:top 50%, using this you can place your background image where ever you want, you can use values such as position names; top left, center center, or you can use percent positioning, 25% 45%, 0% 20% and also pixel values, 30px 40px
All of the above properties can be called with in a single background property...
Code:/* here we use properties as background-, image, repeat and color */
background:url(images/bg.gif) repeat-x #0a2b43
We also use properties, width and height...
Both of those properties accept length values or percent values, length values can be defined as pixel(px) or in centimeters(cm) or other length definitions...
Code:width:100%;
height:216px;
The property color is used to define the color of the text, works same as background-color.
Properties margin and padding are also used in the above CSS, both properties accept one to four attributes, defining the positions, left, top, right, bottom.. (In that order);
Same as width and height properties, those 2 accept all length values, pixel, points(pt), percent, centimeter, etc....
You can also define the length for the specific side by using those 2 the following way...Code:margin:2px; /* this will set margin to 2 pixels on all 4 sides of our element */
margin:2px 0px; /* this will set margin-left to 2 pixels and margin-top to 0px */
margin-left, margin-top, margin-right, margin-bottom,
padding-left, padding-top, padding-right, padding-bottom,
Another property we use is, text-decoration, this let use decorate our text a bit...
Values accepted by this property are, none, underline, overline, line-through and blink... The values are pretty much self explained so I'll skip the explanation..
Properties, top and left are used to move our element from those positions away, defining top as 300px will move the styled element 300px down...
The values can also be negative numbers, they will then be moved up instead of down...
Same as width and height[/b, top and left accept all length definitions...Code:top:300px;
left:-150px;
display property is used to define the type of box an element should create....
Values accepted, are among few, [i]inline, block, inline-block and list-item..
More about display
Property float, let's you define the alignment of the styled element, values accepted are left, right and none...
position property is used to position an element, it's values are, absolute, relative, fixed and static...
float will not work when used with the property position and it's value absolute....
More about position...
And last on our list is the property, font and all it's sub-properties...
font, lets you declare all properties in one porperty, same as background or margin/padding..
More about font[/color]
- [color=#00BFFF (Click to View)Part 3:[/color] Coding the Main Body]
Here we will code our main body...
index.htm Wrote:
Code:<div id="main_body">
<div id="body">
<h2>why choose us?</h2>
<p><span>AppleWeb</span> is a free, tableless, W3C-compliant web design layout by Template World. This template has been tested and proven compatible with all major browser environments and operating systems. You are free to modify the design to suit your tastes in any way you like. We only ask you to not remove "Design by Template World" and the link http://www.templateworld.com from the footer of the template. If you are interested in seeing more of our free web template designs feel free to visit our website, Template World. We intend to add at least 25 new free templates in the coming month. <a href="#">More...</a></p>
<!--latest event start -->
<div id="event">
<h2>latest events <span>on 02nd october 2006</span></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. DonecSed fringilla ligula dol, eleifend cursus, tincidunt ir, tempus id, elitau auguearcr. Nulla pede sapien, variusrtn vitae </p>
<h3>tellus,dapibusvitae, vehicula vitae, <a href="#">Aculis ante congue</a></h3>
<p>aculis ante congue vel,uar risus. Aenean a pede. Sedr fringilla, quam uttellus text facilisisconsequat, elitaugu suscipit tellus, at iaculisant ante eget massa. Vestibulu facilisis. Quisque vel est.wr Donec ante velit, eleifenrer ucont cont, euismod etftrw rhoncus eget, sapien. Inter condimentum <a href="#" class="more">more</a> </p>
</div>
<!--latest event end -->
<!--support start -->
<div id="support">
<h2>our support <span>Nulla pede sapien,</span></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. DonecSed fringilla ligula dol,<u> eleifend cursus,</u> tincidunt ir, tempus id, elitau auguearcr. Nulla pede sapien, variusrtn vitae,</p>
<ul>
<li>pede. Sedr fringilla, quam, <a>uttellus textfacilisisconsequ, elitaugu </a></li>
<li>pede. Sedr fringilla, quam, <a>uttellus textfacilisisconsequ, elitaugu </a></li>
<li>pede. Sedr fringilla, quam <a>suscipit tellus, at iaculisant ante eget massa. Vestibulu facilisis. Qu</a></li>
</ul>
<a href="#" class="online"> 24x7 hours <span>online chat</span></a> </div>
<!-- support end -->
<!--services start -->
<div id="services">
<h2>new services<span> R Richardson</span></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. DonecSed fringilla ligula dol, eleifend cursus, tincidunt ir, tempus id, elitau auguearcr. Nulla pede sapien, variusrtn vitae, </p>
<h3>tellus,dapibusvitae, vehicula vitae,</h3>
<ul>
<li><a href="#">culis ante congue</a></li>
<li><a href="#">vel,uar risus. Aenean a</a></li>
<li><a href="#">pede. Sedr fringilla, </a></li>
<li><a href="#">quam uttellus text </a></li>
<li><a href="#">facilisisconsequat,</a></li>
<li><a href="#">elitaugu suscipit tellus,</a></li>
<li><a href="#">at iaculisant ante eget </a></li>
<li><a href="#">massa.velit,</a></li>
</ul>
<a href="#" class="more1">more</a> </div>
<!--services end -->
<br class="balnk" />
</div>
</div>
You should just read this code, if I have done my job good in the previous parts there is no need to explain this asny more....
And we also continue to add new style...
style.css Wrote:
Code:/*------------------------------------body-------------------------*/
#main_body{
width:100%; background-color:#0a2b43; color:#fff6d8;
}
#body{
width:764px; margin:0 auto 0 auto; padding:17px 0 0 0;
}
#body h2{
font:28px/24px 'Trebuchet MS', Arial, Helvetica, sans-serif ; color:#fff6d9; margin:0 0 15px 40px;
font-weight:normal; background-color:#0a2b43; display:block;
}
#body p{
background:url(images/welcome_pic.gif) no-repeat #0a2b43; color:#799fbb; padding:0 0 0 114px; margin:0 0 0 40px; width:598px;
display:block; font:13px/17px Verdana, Arial, Helvetica, sans-serif;
}
#body p span{
color:#fff6d8; background-color:#0a2b43;
}
#body p span.bg{
color:#799fbb; background-color:#041929;
}
#body p a{
width:56px; height:12px; display:block; background:url(images/more_bg.gif) no-repeat #0a2b43; margin:3px 0 42px 526px;
font:11px/12px Verdana, Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; color:#ffffff;
padding:0 0 0 5px; text-decoration:none;
}
#body p a:hover{
background:url(images/more_bg_h.gif) no-repeat #0a2b43; color:#ff0033;
}
#event{
width:215px; padding:0 0 0 40px; float:left; display:block;
}
#event h2{
background:url(images/event_bg.gif) no-repeat ; font:24px/31px "Trebuchet MS", Arial, Helvetica, sans-serif;
width:142px; height:45px; padding:5px 20px 0 54px; margin:0; font-weight:normal; display:block;
}
#event h2 span{
color:#847543; font:11px/12px Verdana, Arial, Helvetica, sans-serif; font-weight:bold; background-color:#fff6d8;
display:block;
}
#event p{
width:191px; display:block; font:13px Verdana, Arial, Helvetica, sans-serif; color:#799fbb; background-color:#0a2b43;
margin:19px 0 0 23px; background:none; padding:0;
}
#event h3{
color:#fff6d8; font-weight:bold; font:14px Verdana, Arial, Helvetica, sans-serif; width:191px; display:block;
margin:19px 0 0 23px; padding:0; background-color:#0a2b43;
}
#event h3 a{
width:171px; height:17px; display:block; background:url(images/arrow.gif) no-repeat 160px 6px #051b2b; padding:0 0 0 7px;
margin:4px 0 0px 0; font:11px/15px Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-weight:bold;
text-decoration:none;
}
#event h3 a:hover{
background:none; color:#FFFFFF; background-color:#0a2b43;
}
#event p a.more{
width:56px; height:12px; display:block; background:url(images/more_bg.gif) no-repeat #0a2b43; margin:22px 0 37px 118px;
font:11px/11px Verdana, Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; color:#ffffff;
padding:0 0 0 5px; text-decoration:none;
}
#event p a.more:hover{
background:url(images/more_bg_h.gif) no-repeat #0a2b43; color:#ff0033;
}
/*------------------------support-------------*/
#support{
width:215px; padding:0 0 0 25px; float:left; display:block;
}
#support h2{
background:url(images/support.gif) no-repeat; font:24px/31px 'Trebuchet MS', Arial, Helvetica, sans-serif;
width:126px; height:45px; padding:5px 20px 0 71px; margin:0; font-weight:normal; display:block;
}
#support h2 span{
color:#847543; font:11px/12px Verdana, Arial, Helvetica, sans-serif; font-weight:bold; background-color:#fff6d8;
display:block;
}
#support p{
width:191px; display:block; font:13px Verdana, Arial, Helvetica, sans-serif; color:#799fbb; background-color:#0a2b43;
margin:19px 0 19px 16px; background:none; padding:0;
}
#support ul{
width:191px; display:block; margin:0px 0 0px 16px; padding:0;
}
#support ul li{
font:12px/15px Verdana, Arial, Helvetica, sans-serif; color:#fff6d8; background-color:#0a2b43; width:191px; display:block;
padding:0 0 0 0;
}
#support ul li a{
font:12px/17px Verdana, Arial, Helvetica, sans-serif; color:#799fbb; background-color:#0a2b43; text-decoration:none;
display:block; padding:5px 0 5px 0; margin:0;
}
#support a.online{
width:146px; height:57px; border:#486d88 1px solid; display:block; margin:20px 0 0 16px; background-color:#051b2b;
color:#fff6d8; padding:10px 18px 0 16px; font:22px/28px Verdana, Arial, Helvetica, sans-serif;
font-weight:normal; text-transform:uppercase; text-decoration:none;
}
#support a.online span{
color:#799fbb; font-size:18px; line-height:18px; padding:0 0 0 8px; background-color:#051b2b; display:block;
}
#support a.online:hover{
background-color:#1c4f75; color:#fff6d8;
}
/*--------------------------------services-------------------*/
#services{
width:215px; padding:0 0 0 28px; float:left; display:block;
}
#services h2{
background:url(images/services.gif) no-repeat ; font:24px/31px 'Trebuchet MS', Arial, Helvetica, sans-serif;
width:140px; height:45px; padding:5px 20px 0 53px; margin:0; font-weight:normal; display:block;
}
#services h2 span{
color:#847543; font:11px/12px Verdana, Arial, Helvetica, sans-serif; font-weight:bold; background-color:#fff6d8;
display:block;
}
#services p{
width:191px; display:block; font:13px Verdana, Arial, Helvetica, sans-serif; color:#799fbb; background-color:#0a2b43;
margin:19px 0 0 16px; background:none; padding:0;
}
#services h3{
color:#fff6d8; font:14px Verdana, Arial, Helvetica, sans-serif; width:190px; display:block;
margin:19px 0 0 16px; padding:0; font-weight:bold; background-color:#0a2b43;
}
#services ul{
width:191px; display:block; margin:5px 0 0 16px;
}
#services ul li{
background:url(images/arrow1.gif) no-repeat 0 12px ; display:block; padding:0 0 0 14px;
}
#services ul li a{
font:14px/24px Verdana, Arial, Helvetica, sans-serif; color:#799fbb; text-decoration:underline; background-color:#0a2b43;
}
#services ul li a:hover{
text-decoration:none;
}
#services a.more1{
width:56px; height:12px; display:block; background:url(images/more_bg.gif) no-repeat #0a2b43; margin:39px 0 0 121px;
font:11px/12px Verdana, Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; color:#ffffff;
padding:0 0 0 5px; text-decoration:none;
}
#services a.more1:hover{
background:url(images/more_bg_h.gif) no-repeat #0a2b43; color:#ff0033;
}
The above CSS is used to style our main body, there are no new properties that we use in here so there is no need to explain it any further...
- [color=#00BFFF (Click to View)Part 4:[/color] Finishing the Template...]
All we need to do now is to finish our template, we write a footer for some additional stuff...
index.htm Wrote:
Code:<div id="main_footer">
<div id="footer"><!--footer navigation start -->
<ul>
<li><a href="#" class="mg">Network</a>|</li>
<li><a href="#">Submission</a>|</li>
<li><a href="#"> Archives</a>|</li>
<li><a href="#">Finance</a>|</li>
<li><a href="#">Testimonials</a></li>
</ul>
<ul class="ad">
<li><a>Can Can Road 0128 Thonhill Canada</a></li>
<li class="nobor1"><a><span>ph:</span>
800-121-4545 759-121-5454</a></li>
<li class="nobor"><a><span>fax:</span>
759-121-5454 800-121-4545</a></li>
</ul>
<p>© appleweb. All rights reserved.</p>
<p class="de">Designed by: <a href="http://www.templateworld.com/">Template World</a></p>
</div><!--footer navigation end -->
</div>
</body>
</html>
Again this is all already explained, it is only used differently....
And the CSS for the footer is;
style.css Wrote:
Code:/*---------------------------------footer-----------------*/
#main_footer{
width:100%; float:left; background:url(images/footer_bg.gif) repeat-x #0c1d2a; color:#ffffff;
border-top:#ffffff 1px solid; margin:0px; padding:0px;
}
#footer {
width:530px; height:187px;
margin:0 auto 0 auto;
}
#footer ul{
width:500px; display:block; list-style-type:none; margin:46px 0 0 40px; position:absolute;
}
#footer ul li{
display:block; float:left;
}
#footer ul li a{
font:14px/12px 'Trebuchet MS', Arial, Helvetica, sans-serif;
color:#ffffff; background-color:#09161f;
text-decoration:none;
margin:0 16px 0 16px;
}
#footer ul li a.mg{
font:12px/11px Arial, Helvetica, sans-serif;
color:#ffffff; background-color:#09161f;
text-decoration:none;
margin:0 11px 0 0px;
}
#footer ul li a.mg:hover{
text-decoration:underline;
}
#footer ul li a:hover{
text-decoration:underline;
}
#footer ul.ad{
width:323px; display:block; list-style-type:none; margin:77px 0 0 90px;
}
#footer ul.ad li{
height:40px;
width:96px;
display:block;
border-right:#FFFFFF 1px dashed;
}
#footer ul.ad li.nobor{
height:40px; width:96px; display:block; margin-left:10px; border-right:none;
}
#footer ul.ad li.nobor1{
height:40px; width:96px; display:block; float:left; margin-left:10px; border-right:#FFFFFF 1px dashed;
}
#footer ul.ad li a{
font:10px/12px Tahoma, Arial, Helvetica, sans-serif; color:#d1bd86; background-color:#0c1c27; font-weight:bold;
text-decoration:none; margin:0 0 0 0; display:block;
}
#footer ul.ad li a span{
color:#ff0033; background-color:#0b1a24;
text-transform:uppercase; margin:0 10px 0 0; display:block;
}
#footer ul.css{
width:100px;
display:block;
margin:75px 0 0 211px;
font-size:0px;
padding:0px;
}
#footer p{
padding:135px 0 0 165px; font:11px/16px Tahoma, Arial, Helvetica, sans-serif; color:#FAFAFA;
background:url(images/footer_bg.gif) repeat-x #0c1d29; font-weight:normal; height:14px; margin:0;
}
#footer p.de{
padding:0 0 0 165px; margin:0; line-height:12px; width:160px; text-align:center; background-color:#0c1d2a;
color:#fff; background:none;
}
#footer p.de a{
color:#fff; background-color:#0c1d2a; text-decoration:underline;
}
#footer p.de a:hover {
color:#fff; background-color:#0a5083;
}
Let me say it again, already explained...
I didn't go into depth in last 2 parts, since the 2nd part explains almost everything....
All you need to do is read both files few times and understand it, it's really simple as that...
I used a Template from another site to show you how you can learn by your self....
Download free valid templates and just read them, see how they were made and what was used to achieve things...
A good site to bookmark.
CSS Reference
![[Image: sfmentors.gif]](http://img151.imageshack.us/img151/5681/sfmentors.gif)