Creating A Dark and clean HTML CSS website layout
Get started
Ok, let`s start. Lets create new folder and few more folders inside (to keep proper structure):
- css – which will contain style files (style.css, menu.css and meteor-slides.css)
- images – which will contain all our images
- js – we will keep here all javascripts (jquery.js, jquery.cycle.all.js, script.js and slideshow.js)
Head section code
Now I am going to give you the usual HTML head area of index.html with the attached CSS/JS.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Dark Theme #3 | Script tutorials</title>
<!-- Linking styles -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/meteor-slides.css" type="text/css" media="screen">
<!--[if IE 7]>
<style>
.promo_area {padding:0;}
.promo_area .meteor-nav .prev a {top:236px;}
.promo_area .meteor-nav .next a {top:236px;}
</style>
<![endif]-->
<!-- Linking scripts -->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.cycle.all.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<script src="js/slideshow.js" type="text/javascript"></script>
</head>
Moving forward – Main layout (body)
Whole layout consist of 3 main section: header, center (content), and footer. It looks like:<body> <div class="top"></div> <div class="mid"></div> <div class="bottom"></div> <!-- Defining the header section of the page --> <header> ......... </header> <!-- Defining the main content section of the page --> <div class="content"> ......... </div> <footer><!-- Defining the footer section of the page --> ......... </footer> </body>CSS for main layout (plus all base styles)/* base styles */ * {margin:0; padding:0;} img {border:0;} .clear {clear:both; line-height:0; height:0; font-size:1px;} .marg {width:916px; margin:0 auto;} .mid {background:url(../images/bg.png) repeat top; width:100%; height:1108px; top:174px; left:0; position:absolute;} .top {background:url(../images/top.jpg) repeat-x top; width:100%; height:175px; top:0; left:0; position:absolute;} .bottom {background:url(../images/bottom.jpg) repeat-x top; width:100%; height:389px; top:1109px; position:absolute; left:0;} body {font:13px Arial, Helvetica, sans-serif; color:#000000;} a {text-decoration:none; color:#fff; outline:none; cursor:pointer;} a:hover {text-decoration:underline;}These CSS styles defines the basic element styling, backgrounds to different sections, positions, fonts etc.Header section
Our header will contain logo, and navigation menu at right side. Here are HTML for that section:<!-- Defining the header section of the page --> <header> <div class="marg"> <div class="header"> <div class="logo"> <a href="#" title="Dark Theme #3">Dark Theme #3</a> </div> <div class="nav"> <!-- Defining the navigation menu --> <ul> <li class="current"><a href="http://www.script-tutorials.com/"><span class="l"></span><span class="m">Home</span><span class="r"></span></a></li> <li><a href="http://www.script-tutorials.com/"><span class="l"></span><span class="m">Tutorials</span><span class="r"></span></a> <ul class="sub-menu"> <li><a href="http://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li> <li><a href="http://www.script-tutorials.com/category/jquery/">JS / jQuery</a></li> <li><a href="http://www.script-tutorials.com/category/php/">PHP</a></li> <li><a href="http://www.script-tutorials.com/category/mysql/">MySQL</a></li> <li><a href="http://www.script-tutorials.com/category/xslt/">XSLT</a></li> <li><a href="http://www.script-tutorials.com/category/ajax/">Ajax</a></li> </ul> </li> <li><a href="http://www.script-tutorials.com/tag/html5/"><span class="l"></span><span class="m">Tags</span><span class="r"></span></a> <ul class="sub-menu"> <li><a href="http://www.script-tutorials.com/tag/animation/">animation</a></li> <li><a href="http://www.script-tutorials.com/tag/html5/">html5</a></li> <li><a href="http://www.script-tutorials.com/tag/captcha/">captcha</a></li> <li><a href="http://www.script-tutorials.com/tag/gallery/">gallery</a></li> <li><a href="http://www.script-tutorials.com/tag/animation/">animation</a></li> </ul> </li> <li><a href="http://www.script-tutorials.com/creating-nice-clean-html-css-website-layout-3-dark-theme/"><span class="l"></span><span class="m">Back</span><span class="r"></span></a></li> </ul> <div class="clear"></div> </div> </div> </div> </header>CSS for Header section/* header area */ .header {position:relative; width:916px; height:174px; z-index:1000;} .h_user {position:absolute; right:225px; top:16px; color:#292929;} .h_user a, .h_user span, .h_user img {vertical-align:middle;} .h_user span {padding:0 2px;} .h_user a {color:#717171; font-size:10px; text-transform:uppercase;} .h_user .h_tw {padding:0 2px 0 18px;} .h_title {position:absolute; left:33px; top:23px; font-size:10px; color:#484848; text-transform:uppercase;} .logo {position:absolute; width:231px; height:50px; left:35px; top:83px;} .logo a {background:url(../images/logo.png) no-repeat; width:231px; height:50px; display:block; text-indent:-9999px;}CSS for Navigation menu
css/menu.css
.nav {position:absolute; right:0; top:86px;} .nav ul {list-style:none; position:relative;} .nav ul li {display:block; float:left; position:relative; z-index:1000;} .nav ul li a {display:block; font-family:Verdana, sans-serif; color:#c5c5c5; font-size:24px; font-weight:bold; height:49px; line-height:49px; position:relative; padding:0 9px; z-index:2;} .nav ul li a span {display:block; height:49px;} .nav ul li a .m {padding:0 12px;} .nav ul li a .l {position:absolute; width:9px; left:0; top:0;} .nav ul li a .r {position:absolute; width:9px; right:0; top:0;} .nav ul li a:hover {text-decoration:none;} .nav ul li a:hover .m, .nav ul li.hover a .m {background:url(../images/pag_bg.png) repeat-x top;color:#fff;} .nav ul li a:hover .l, .nav ul li.hover a .l {background:url(../images/pag_l.png) no-repeat left;} .nav ul li a:hover .r, .nav ul li.hover a .r {background:url(../images/pag_r.png) no-repeat right;} .nav ul .current .m {background:url(../images/pag_bg.png) repeat-x top;} .nav ul .current .l {background:url(../images/pag_l.png) no-repeat left;} .nav ul .current .r {background:url(../images/pag_r.png) no-repeat right;} .nav ul li ul {display:none; width:207px; position:absolute; z-index:1; top:49px; left:0;} .nav ul li ul li {} .nav ul li ul li .l, .nav ul li ul li .r {display:none;} .nav ul li ul li .m {background:none; padding:0;} .nav ul li ul li a {width:171px; padding:0 18px; background:#171717; font-size:18px;} .nav ul li ul li ul {top:0; left:207px;} .nav ul .hover ul {display:block;} .nav ul .hover ul li ul {display:none;} .nav ul .hover ul .hover ul {display:block;} .nav ul .hover ul li a {background-color:#000;} .nav ul .hover ul .hover a {background-color:#444;}
0 comments:
Post a Comment