Css fila hittil:
/********************************************
HTML ELEMENTS
********************************************/
/* top elements */
* { margin: 0; padding: 0; outline: 0; } /*sets no padding or margin around the body of our document*/
body {
background-color: #393939; /*website background color (white)*/
color: #333333; /*sets our text color for our website*/
margin: 15px 0; /*sets no padding and a 15px margin around the body of our document*/
font-family: Verdana, Tahoma, arial, sans-serif; /*sets the font family for our website*/
font-size: 70%; /*sets the font size in %, you can also use 12px or 14px etc... px stands for pixels*/
line-height: 1.5em; /*sets the height between each line of text.*/
}
/********************************************
WEBSITE LAYOUT
********************************************/
#wrap {
width: 790px; /*width of our wrap*/
background: url(images/content.jpg) repeat-y center top; /*sets our background color to white and uses our content.jpg as a background, the background is also repeated along the Y axis*/
margin: 0 auto; /*center our margin to auto will center our website*/
text-align: left; /*aligns our text to the left*/
}
#content-wrap {
clear: both; /*The clear property sets the sides of an element where other floating elements are not allowed.*/
width: 760px; /*width of our wrap*/
margin: 5px auto; /*sets our top margin at 5 pixels and the rest to auto*/
padding: 0; /*sets 0 padding*/
}
#header {
position: relative; /*An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position*/
height: 131px; /*sets our header height, this should be the same as our header image*/
background: #caced1 url(images/header.jpg) no-repeat center top; /*sets a background behind our header and sets our header image onto the page*/
padding: 0; /*no padding is needed*/
}
html fila:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="Description" content="Hawk studios, print web & media" />
<meta name="Keywords" content="your, keywords" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Distribution" content="Global" />
<meta name="Author" content="richard carpenter -
webmaster@hv-designs.co.uk" />
<meta name="Robots" content="index,follow" />
<link rel="stylesheet" href="style.css" mce_href="style.css" type="text/css" />
<title>HAWK STUDIOS | Print . Web . Media</title>
</head>
<body>
<!-- wrap starts here -->
<div id="wrap">
<div id="header">
<!--HEADER INFO WILL GO HERE -->
</div>
<!-- content-wrap starts here -->
<div id="content-wrap">
<div id="main">
<!--MAIN CONTENT HERE -->
</div>
<div id="sidebar">
<!--SIDE BAR LINKS HERE -->
</div>
<!-- content-wrap ends here -->
</div>
<div id="footer">
<!--FOOTER HERE -->
</div>
<!-- wrap ends here -->
</div>
</body>
</html>
Bildene ligger i en mappe som heter images som ligger i en mappe sammen med html fila.
