Oto pliki!
style.css
- Kod: Zaznacz wszystko
/* CSS Document */
/*PAGE LAYOUT*/
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#logo{float:left; background-image:url(tie_logo.gif); width:274px; height:213px;}
#topheader{float:right; width:526px; height:97px; background-color:#F0F0F0; position:relative}
#toplinks{position:absolute; right:10px; top:10px;}
#menu{float:right; width:526px; height:32px; background-image:url(bg_menu.gif); background-repeat:repeat-x;}
#submenu{float:right; width:526px; height:32px; background-image:url(bg_submenu.gif); background-position:top; background-repeat:repeat-x;}
#contenttext{float:right; width:526px;}
#leftpanel{float:left; width:274px;}
#footer{float:left; width:800px; background-color:#F0F0F0; padding:10px;}
/*GRAY PANEL*/
.graypanel{
border:solid 1px #666666; background-color:#F7F7F7; padding:10px; margin:10px;
}
/*TEXT STYLES*/
.bodytext {
font: 0.7em Tahoma, sans-serif;
color: #666666;
}
.titletext {
font: 0.7em Tahoma, sans-serif;
font-size:36px;
font-weight:bold;
color:#CC0000;
}
.whitetitle {
font: 0.7em Tahoma, sans-serif;
font-size:36px;
font-weight:bold;
color:#FFFFFF;
}
.smalltitle {
font: 0.7em Tahoma, sans-serif;
font-size:20px;
font-weight:bold;
color:#CC0000;
}
.smallwhitetext {
font: 0.7em Tahoma, sans-serif;
font-size: 11px;
font-weight:bold;
color: #FFFFFF;
}
.smallwhitetext a{
font: 0.7em Tahoma, sans-serif;
font-size: 11px;
font-weight:bold;
color: #FFFFFF;
text-decoration:none;
}
.smallwhitetext a:hover{
text-decoration:underline;
}
.smallgraytext {
font: 0.7em Tahoma, sans-serif;
font-size: 11px;
font-weight:bold;
color:#999999;
}
.smallgraytext a{
font: 0.7em Tahoma, sans-serif;
font-size: 11px;
font-weight:bold;
color:#999999;
text-decoration:none;
}
.smallgraytext a:hover{
text-decoration:underline;
}
.smallredtext {
font: 0.7em Tahoma, sans-serif;
font-size: 11px;
font-weight:bold;
color:#CC0000;
}
.smallredtext a{
font: 0.7em Tahoma, sans-serif;
font-size: 11px;
font-weight:bold;
color:#CC0000;
text-decoration:none;
}
.smallredtext a:hover{
text-decoration:underline;
}
index.html
- Kod: Zaznacz wszystko
<head>
<meta name="author" content="xx" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="images/style.css" type="text/css" />
<title>RedTie</title>
}
</head>
<body>
<div id="page" align="center">
<div id="content" style="width:800px">
<div id="logo">
<div style="margin-top:70px" class="whitetitle">RedTie</div>
</div>
<div id="topheader">
<div align="left" class="bodytext">
<br />
<strong>Your Company Name</strong><br />
Evergreen Terrace 742<br />
Kansas Missouri<br />
Phone: 432-653-3121<br />
sales@thetiecompany.com
</div>
<div id="toplinks" class="smallgraytext">
<a href="#">Home</a> | <a href="#">Sitemap</a> | <a href="#">Contact Us</a>
</div>
</div>
<div id="menu">
<div align="right" class="smallwhitetext" style="padding:9px;">
<a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Products</a> | <a href="#">Our Services</a> | <a href="#">Contact Us</a>
</div>
</div>
<div id="submenu">
<div align="right" class="smallgraytext" style="padding:9px;">
<a href="#">Submenu 1</a> | <a href="#">Submenu 2</a> | <a href="#">Submenu 3</a> | <a href="#">Submenu 4</a> | <a href="#">Submenu 5</a> | <a href="#">Submenu 6</a>
</div>
</div>
<div id="contenttext">
<div style="padding:10px">
<span class="titletext">Welcome to RedTie!</span>
</div>
<div class="bodytext" style="padding:12px;" align="justify">
<strong>Hi! This is my third design for OSWD, with CSS and XHTML 1.0 Transitional Validation. You can do whatever you want with this template, just keep the Hosting Colombia link at the bottom. Enjoy! </strong><br />
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id est tincidunt nisl pellentesque tincidunt. Donec in mauris. Mauris neque magna, consectetuer id, malesuada vitae, tincidunt sit amet, mi. Aliquam lacinia. Suspendisse potenti. Proin justo lorem, rutrum ac, facilisis in, malesuada sed, ligula. Mauris lobortis lacus at nibh. Aenean vitae odio vel odio placerat hendrerit. Suspendisse lacus lacus, tempor id, pharetra eget, ornare sit amet, pede. Sed aliquet, justo ac elementum pretium, arcu leo placerat est, a luctus purus diam eget arcu. Nam augue diam, mollis a, scelerisque eget, aliquet condimentum, pede. Vestibulum tristique lectus sed augue.<br /><br />
Aenean ut mauris luctus mauris interdum convallis. Nunc vestibulum sodales nulla. Nulla vitae massa. Maecenas vel tellus vitae elit mattis adipiscing. In pulvinar felis sed est. Mauris non mi. Duis ultrices dolor ut orci. Quisque lacinia arcu et purus. Sed euismod metus nec augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc dolor leo, aliquam a, placerat sit amet, accumsan eget, dolor. Sed lacinia augue in magna. Fusce sed enim. Vestibulum et mauris. Phasellus in lectus. Pellentesque eu elit in dolor ullamcorper sodales. Vestibulum interdum ornare ligula. Mauris felis odio, rhoncus sed, adipiscing fermentum, tincidunt eu, metus. Suspendisse viverra rhoncus purus.
</div>
</div>
<div id="leftpanel">
<div align="justify" class="graypanel">
<span class="smalltitle">News</span><br /><br />
<span class="smallredtext">September 27, 2006</span><br />
<span class="bodytext">Curabitur arcu tellus, suscipit in, aliquam eget, ultricies id, sapien. Nam est.</span><br />
<a href="#" class="smallgraytext">More...</a><br /><br />
<span class="smallredtext">September 27, 2006</span><br />
<span class="bodytext">Curabitur arcu tellus, suscipit in, aliquam eget, ultricies id, sapien. Nam est.</span><br />
<a href="#" class="smallgraytext">More...</a><br /><br />
<span class="smallredtext">September 27, 2006</span><br />
<span class="bodytext">Curabitur arcu tellus, suscipit in, aliquam eget, ultricies id, sapien. Nam est.</span><br />
<a href="#" class="smallgraytext">More...</a><br /><br />
</div>
</div>
<div id="footer" class="smallgraytext">
<a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Products</a> | <a href="#">Our Services</a> | <a href="#">Contact Us</a>
| Your Company Name
© 2007 | <a href="xx" target="_blank">Hosting Colombia</a>
</div>
</div>
</div>
</body>
</html>
