In my previous blog post I discussed about how to slice a template, now we will import your sliced image to html as a webpage. If you’re thinking to a <img src=""> html tag, it’s a big NO, we will be use the CSS but we have to create your html first.
<!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>Template Slicing 101</title> </head> <body> </body> </html>
* After the html file, create a css file and name it as style.css, I recommend you to put this file where your html file is located also.
* After style.css was created, we will link your style sheet from html file. Insert this line
inside of
<!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>Template Slicing 101</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> </body> </html>
Then open your style.css, now we will set the padding and margin of body to zero because some browser has default margins and padding. We put text-align:center because IE6 doesn’t read margin: 0 auto that makes <div> to align center. Then its up to for adding more attribute or properties of body like Fonts-size, font-style, color etc. For the following instruction just follow the html and css as describe below.
body {
margin: 0;
padding: 0;
text-align: center;
}
Then the container, this will serve as a second body of our html, as I mention margin: 0 auto will set the div to center, and we need to add a text-align: left to override the text-align: left to the body, because we want to set all element inside the #container to align left.
CSS:
#container {
width: 804px;
margin: 0 auto 0 auto;
text-align: left;
}
HTML:
<body> <div id="container"> </div> </body
CSS:
#header_container {
width: 804px;
height: 120px;
position: relative;
}
This will be your logo container and we will position it absolutely to left.
#logo {
width: 250px;
height: 90px;
background: url(logo.jpg);
position: absolute;
left: 0;
}
HTML:
<body>
<div id="container">
<div id=“header_container”>
<div id=“logo”></div>
</div>
</div>
</body>
This is a little bit tricky but just follow this css and you will find out later.
CSS:
#menu_container {
width: 804px;
height: 55px;
background: url(menu-middle.jpg) repeat-x;
position: relative;
}
#menu_left{
width: 17px;
height: 55px;
Position: absolute;
background: url(menu-left.jpg);
left: 0;
}
#menu_right{
width: 17px;
height: 55px;
Position: absolute;
background: url(menu-right.jpg);
right: 0;
}
HTML:
<body>
<div id="container">
<div id=“header_container”>
<div id=“logo”></div>
</div>
<div id=“menu_container”>
<div id=“menu_left”></div>
<div id=“menu_right”></div>
</div>
</div>
</body>
CSS:
#content_wrapper {
width: 804px;
height: auto;
background: url(content-bg) repeat-y;
}
#main_content{
width: 750px;
height:auto;
min-height: 300px;
}
#footer {
width: 804px;
height: 70px;
background: url(footer-bg);
}
HTML:
<body>
<div id="container">
<div id=“header_container”>
<div id=“logo”></div>
</div>
<div id=“menu_container”>
<div id=“menu_left”></div>
<div id=“menu_right”></div>
</div>
<div id=“content_wrapper”>
<div id=“main_content”>
</div>
</div>
<div id=“footer”></div>
</div>
</body>
