Hey! Im Velozity. Im a learner in css at the moment, and wish to release what I go through :) - In hope that it helps other beginners!
Heres what you will be making:
Spoiler (Click to View)
(And when you hover over the menu it will light up/animate)
---------------------------------
Step 1: Get your tags in!
Start with your basic tags....
(http://prntscr.com/4oupnn)
----------------------------------
Step 2: Getting your CSS on!
Start with the background and padding!:
(http://prntscr.com/4oupvb)
Then move onto getting the hover(Mouse over box, lights up)
(http://prntscr.com/4ouq8w)
Now we start with the first box!(The first tab)
(http://prntscr.com/4ouqdv)
Now we move onto the href settings..
(http://prntscr.com/4ouqmg)
Then we get on the main header(The dark grey)
(http://prntscr.com/4ouqv1)
Then we finish with....
Now thats the end of CSS!
Moving onto the simple html stuff :)
Inside your <body> tags be sure to add the following..
^^ Edit the above to your div class name...(leave if just copied/pasted mine)
-------------------------------------
If you wish to view the whole code, you can view it here:
Spoiler (Click to View)
Heres what you will be making:
Spoiler (Click to View)
(And when you hover over the menu it will light up/animate)
---------------------------------
Step 1: Get your tags in!
Start with your basic tags....
Quote:<html>
<style>
</style>
<body>
</body>
</html>
(http://prntscr.com/4oupnn)
----------------------------------
Step 2: Getting your CSS on!
Start with the background and padding!:
Quote:html, body
{
background-color:#696969;
padding:0px;
margin:0px;
}
(http://prntscr.com/4oupvb)
Then move onto getting the hover(Mouse over box, lights up)
Quote:.box:hover
{
background-color:white;
color:grey;
}
(http://prntscr.com/4ouq8w)
Now we start with the first box!(The first tab)
Quote:.box
{
padding:5px;
text-decoration:none;
background-color:grey;
height:52px;
width:50px;
}
(http://prntscr.com/4ouqdv)
Now we move onto the href settings..
Quote:a
{
color:white;
text-decoration:none;
padding:10px;
line-height:55px;
float:right;
}
(http://prntscr.com/4ouqmg)
Then we get on the main header(The dark grey)
Quote:#header
{
width:100%;
background-color:#696969;
height:65px;
}
(http://prntscr.com/4ouqv1)
Then we finish with....
Quote:.bigbox
{
background-color:#595959;
width:59px;
height:100%;
}
Now thats the end of CSS!
Moving onto the simple html stuff :)
Inside your <body> tags be sure to add the following..
Quote:<div class="bigbox">
<div id="header">
<div class="box">
<a href="home.html">Home</a></div>
<br>
<div class="box">
<a href="shop.html">Shop</a>
</div>
</div>
^^ Edit the above to your div class name...(leave if just copied/pasted mine)
-------------------------------------
If you wish to view the whole code, you can view it here:
Spoiler (Click to View)
Hope, I have helped.. If you want some clearing up on anything feel free to contact me! If I have got this in the wrong thread, please move it :) or let me know.