Website Layout Part 1 Tutorial { Header }
Hello everyone,
In this short tutorial I will show you how to layout a header of a website
Now you all should know how to make a basic HTML document.
If not here is you base:
<HTML>
<BODY>
<!--Code Here-->
</BODY>
</HTML>
You want to create a div to hold your header Info also known as a PageWrapper. A less In depth tutorial can be found HERE!
<HTML>
<BODY>
<DIV ID="Header">
</DIV>
</BODY>
</HTML>
Now inside the div you can put all the HTML code you want or make more divs to categories your page into sections or parts to make it simpler to understand.
Moving onto the Css this is simply going to position the header. But you can add more stuff as you progress with HTML.
#Header {
font: 14px/1.4 'PT Sans Narrow', sans-serif;
width: 1000px;
margin-left: auto;
margin-right: auto;
border: 5px solid black;
color: white;
background-image:url('./Images/body.gif');
}
I went a bit more into depth than I did with that explanation above but you can easily see what you need to implement to make a working header, Now back to the HTML.
Adding an Image / Logo
<center><img src="./Images/Logo.gif" alt="WHATEVER" width="130px" height="109px" id="Logo" /></center>
Slogan:
<p id="blogSlogan">Your Number 1 Gaming Website</p>
Social Media Icons Implement:
Go to www.niftybuttons.com and choose the Icon Set you would like and follow the website instructions.
Implement the code underneath the logo and you are done.
Now back to the last part of Css.
#Logo{
position: relative;
left: 9px;
top: 30px;
width: 500px;
height: 50px;
}
#Header{
position: fixed;
left: 1050px;
top: 13px;
}
No comments:
Post a Comment