![[Guide]How to make ur own CO Website. (CSS)!!!!](https://www.elitepvpers.com/forum/iconimages/tutorials/guide-how-make-ur-own-co-website-css_ltr.gif){kind=small}
[Guide]How to make ur own CO Website. (CSS)!!!!
Introducing.
First you need to have some knowledge what html and css is.
I would recommend this site.
Thought Im learning aspx with c# atm. at school, I will make guide for
that later.
Im using w3schools to look up on things, when I get confused etc.
This guide is for making a simple Conquer Online Website.
Now when u know what html and css is (Dont need much knowledge, just some general).
I will not go in intern css, as thats really bad to use.
I prefer extern css.
Then your read to continue to next step.
----------------------------------------
Now you need some editor for making html etc.
I would suggest Visual Web developer, if u dont got Visual Studio.
Is alittle different, but same functionalities, of what im gonna show.
You can download Visual Web developer here.
Now when u got what u need, then were ready to continue.
Lets start with the skeleton for your page.
First we need a folder for your website.
Make one folder.
Now were ready to start, open your editor.
Choose File > New > File.
Then choose a Html page.
Now you will get a page, should look like this:
PHP 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>
<title>Untitled Page</title>
</head>
<body>
</body>
</html>
PHP Code:
<title>Untitled Page</title>
I called mine:
PHP Code:
<title>CO Website</title>
Now we got a base html file.
How does it look in the browser?
Well, lets save the file first.
File > Save as > Your website folder.
I have called mine index.htm
Well, as there is nothing on our website, then is empty.
Well, now we need a base design of our website, so lets make a simple css design.
With a header, a menu and a footer.
Will look something like this:
Well, how do we make things like that?
Isn't it just use tables?
Tables are a bad idea to use and they can't control your site enough.
It will make it confused for ur self.
Thats where css is awsome.
Then we just work with div, wich is a boxtype.
Is build up this way:
Now lets make a div for every thing we got on our page.
Simplest way is make it look like this:
inside <body> </body>
also Im using class, is easier to control for whole pages.
As classes can be used more then once.
Where ids can only be used one time.
So lets use classes.
put a div for the whole page:
PHP Code:
<div class="page">
<!-- This is the whole page-->
</div>
Now next step is to make one for header, menu, content and footer.
So lets do that.
When your done it should look like something like this in body.
PHP Code:
<body>
<div class="page">
<!-- This is the whole page-->
<div class="header">
<!-- This is the header-->
</div>
<div class="menu">
<!-- This is the menu-->
</div>
<div class="content">
<!-- This is the content-->
</div>
<div class="footer">
<!-- This is the footer-->
</div>
</div>
</body>
Go to File > New > StyleSheet.
Now were gonna look at css.
I will make a simple one with grayboxes and black background.
So I have something to work of.
How do I get ids and classes then?
PHP Code:
.classname/*Gets the class named classname*/
{
}
#idname/*Gets the id named idname*/
{
}
name/*Gets all tags using name*/
{
}
PHP Code:
.classname/*Gets the class named classname*/
{
}
name/*Gets all tags using name*/
{
}
Wich is the whole page.
To make it background black, just type in something like this.
PHP Code:
body
{
background-color: Black;
}
Now we need to make our page work with the css file.
Go to your html page.
and find:
PHP Code:
<title>CO Website</title>
Use this, if name is Style.css:
PHP Code:
<link rel="Stylesheet" type="text/css" href="Style.css" />
<!-- Ref to our css page -->
It should look like this now:
Woohoo, it works, we got a blackpage, wich is controlled from our css page.
Awsome right?
That u can work extern.
I love css so much for that u only have to edit something 1 time and not on all pages,
like if ur working with tables.
Well lets continue on our website.
Now we need some text in it.
I will just write a general plain content that you could use.
And explain what I did after.
Style.css
PHP Code:
body
{
background-color: Black;
}
h1
{
text-align:center;
}
.page
{
width:800px;
margin:auto;
}
.header
{
width:800px;
border:1px solid black;
background-color: Gray;
}
.menu
{
padding: 10px 10px 10px 10px;
width:150px;
margin:0px;
border:1px solid black;
background-color: Gray;
float:left;
}
.content
{
padding:10px 10px 10px 10px;
width:600px;
margin:0px;
border:1px solid black;
background-color: white;
float:right;
}
.footer
{
position: relative;
margin-top: -150px;
height: 30px;
clear:both;
background-color: Gray;
width:800px;
}
PHP 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>
<title>CO Website</title>
<link rel="Stylesheet" type="text/css" href="Style.css" />
</head>
<body>
<div class="page">
<!-- This is the whole page-->
<div class="header">
<!-- This is the header-->
<h1>CO Website</h1>
</div>
<div class="menu">
<!-- This is the menu-->
<b>Menu</b><br />
<a href="Index.htm">Index</a><br />
<a href="Download.htm">Download</a><br />
<a href="Register.htm">Register</a><br />
<a href="Contact.htm">Contact</a>
</div>
<div class="content">
<!-- This is the content-->
Welcome to my first Conquer Online website. I made this with CSS.<br />
Thanks to _Vodka for learning me basic css.
</div>
<div class="footer">
<!-- This is the footer-->
Copyright © _Vodka 2010
</div>
</div>
</body>
</html>
Lets look on the css first.
I made background color black with
PHP Code:
body
{
background-color: Black;
}
PHP Code:
h1
{
text-align:center;
}
And then the widht to be 800px.
Thats a good size and I like to work with it.
We have to take care of some still work with
small displays, but not many.
Not only what we got self, but what others got.
So 800px is a good thing to work with.
PHP Code:
.page
{
width:800px;
margin:auto;
}
So 800pixels again.
And I made a border with 1px and solid black style.
Then the color of the header gray.
PHP Code:
.header
{
width:800px;
border:1px solid black;
background-color: Gray;
}
Using it most time to get content and header alittle away from
the menu.
Then widht to be 150pixels, so is not too big or too small.
Then I made a border on it, because lets keep same style.
Different styled pages, looks bad (In most cases).
Then a Background color of gray.
And because I want it on left side, I used float to control, where
I wanted it.
PHP Code:
.menu
{
padding: 10px 10px 10px 10px;
width:150px;
margin:0px;
border:1px solid black;
background-color: Gray;
float:left;
}
I made margin 0px, so it will be at the edge of the border.
And no spaces. Then I made a border with 1pixel and solid black
to keep same style as before.
Then background color white, because thats a standart color of
content page.
Because it should be right side of menu, then I used float
to control that it is.
PHP Code:
.content
{
padding:10px 10px 10px 10px;
width:600px;
margin:0px;
border:1px solid black;
background-color: white;
float:right;
}
Well width is 800px, because it needs to be at the whole buttom of page.
Then marget -150, so it puts it at a good position.
U can try edit the options for what u think is best.
And rest options are to make it fit in the page.
With style etc.
PHP Code:
.footer
{
position: relative;
margin-top: -150px;
height: 30px;
clear:both;
background-color: Gray;
width:800px;
}
Hope you know what were doing now.
Now for the html page.
Lets look on every tag, dats important.
First thing is the header.
PHP Code:
<div class="header">
<!-- This is the header-->
<h1>CO Website</h1>
</div>
<h1> is the heading tag.
It contains more then 1 control in 1.
There is from h1 - h7.
Higher number = smaller text.
Dont ask why, cuz I actually dont know.
Makes no sense for me.
Well </h1> is to end the tag.
But u know if u readed alittle about html.
Now lets look on next div wich is the menu.
PHP Code:
<div class="menu">
<!-- This is the menu-->
<b>Menu</b><br />
<a href="Index.htm">Index</a><br />
<a href="Download.htm">Download</a><br />
<a href="Register.htm">Register</a><br />
<a href="Contact.htm">Contact</a>
</div>
<b> tag stands for bold. Like here on forum is [ b ].
So the text Menu will be in bold.
Now to link to each page, I made these links.
<a> = link.
href is the reference of the link.
Where it should link to.
Example:
PHP Code:
<a href="http://google.com">Google</a>
There is not needed much explanation for content.
Is the white bar you saw before in the page.
when you putting things in it, then it will automatical be bigger.
As were controlling that in the css file.
Look for .content class
PHP Code:
<div class="content">
<!-- This is the content-->
Welcome to my first Conquer Online website. I made this with CSS.<br />
Thanks to _Vodka for learning me basic css.
</div>
It dosnt need much explanation either as is just some plain text like copyright etc.
PHP Code:
<div class="footer">
<!-- This is the footer-->
Copyright © _Vodka 2010
</div>
Regards.
Download + Preview:
Goodluck with your server and goodluck with your site.
