-
programcity
Aktif Üye
Konum: İstanbul
|
27.04.2009, 14:39 (UTC) Mesaj konusu: |
|
|
Style
Kod: /*
culture shock: voodoo dolly v2.0
pogy366: http://www.raykdesign.net
Sept 2007
*/
body {
font-family:Arial, Helvetica, sans-serif;
font-size:.8em;
color:#000000;
margin:20px 0 0 0;
padding:0 0 0 0;
background:#ffffff;
}
p {
margin-bottom:10px;
line-height:1.2em;
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
ul, ol {
margin:0 0 12px 0;
padding:0;
}
li {
margin:0 0 5px 15px;
padding-left:15px;
list-style:none;
background-image:url(http://image.ultimadestek.com/image.php?id=6541_49F5C160&gif);
background-position:0 3px;
background-repeat:no-repeat;
font-size:1em;
color:#454545;
}
a {
color:#6E312A;
text-decoration:underline;
}
a:hover {
color:#999999;
text-decoration:none;
}
/* Main Outer Container */
#pageWrap {
margin:0 auto;
padding:0;
width:980px;
}
/* Header */
#header {
margin:0;
padding:0;
width:980px;
height:135px;
background-image:url(http://image.ultimadestek.com/image.php?id=BB69_49F5C160);
background-position:0 0;
background-repeat:no-repeat;
}
#header h1 {
margin:0;
padding:30px 0 0 170px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
font-size:3em;
font-weight:lighter;
}
#header p {
margin:0;
padding:5px 0 0 175px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#eeeeee;
}
/* Main Navigation */
#navBar {
margin:0;
padding:0;
width:980px;
height:35px;
line-height:35px;
background:url(http://image.ultimadestek.com/image.php?id=7976_49F5C160);
background-position:0 0;
background-repeat:no-repeat;
}
#navBar ul{
list-style-type:none;
margin-left:20px;
}
#navBar li{
margin:0;
padding:0;
list-style-type:none;
display:inline;
background-image:none;
}
#navBar li a{
margin:0 0 0 -5px;
padding:9px 20px 9px 20px;
color:#ffffff;
text-decoration:none;
font-size:1.1em;
border-left:1px solid #757575;
}
#navBar ul li a:hover{
color:#ffffff;
text-decoration:none;
background-color:#AC4B41;
}
#navBar li.end {
margin:0;
padding:0;
list-style-type:none;
display:inline;
background-image:none;
}
#navBar li.end a{
margin:0 0 0 -5px;
padding:9px 20px 9px 20px;
color:#ffffff;
text-decoration:none;
font-size:1.1em;
border-left:1px solid #757575;
border-right:1px solid #757575;
}
#navBar li.end a:hover{
color:#ffffff;
text-decoration:none;
background-color:#AC4B41;
}
/* Content Container */
#container {
margin:0;
padding:10px 0 0 0;
width:980px;
}
/* Left Content Column - heavy negative margin so center column can appear first in HTML */
#leftColumn {
float:left;
margin:0 0 0 -750px;
padding:0;
width:140px;
font-size:.9em;
color:#686868;
}
#leftColumn h2 {
font-size:1.4em;
color:#9C291D;
}
#leftColumn ul, ol {
margin:0 0 12px 0;
padding:0;
}
#leftColumn li {
margin:5px 0 0 0;
padding-left:15px;
list-style:none;
background-image:url(http://image.ultimadestek.com/image.php?id=6541_49F5C160&gif);
background-position:0 1px;
background-repeat:no-repeat;
font-size:.95em;
color:#6E312A;
}
/* Center Content Column */
#centerColumn {
float:left;
margin:0 10px 0 145px;
padding:6px 6px 6px 10px;
width:580px;
font-size:.9em;
color:#000000;
border-left:1px dashed #cccccc;
}
#centerColumn h2 {
margin:0 0 5px 0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1.8em;
color:#9C291D;
}
/* Right Content Column */
#rightColumn {
float:left;
margin:0;
padding:6px;
width:200px;
font-size:.9em;
color:#646464;
background:#eeeeee;
border:1px solid #cccccc;
}
#rightColumn h2 {
font-size:1.4em;
color:#2C2C2C;
}
/* Footer */
#footer {
margin:30px 0 10px 0;
padding:0;
width:980px;
height:100px;
background-image:url(http://image.ultimadestek.com/image.php?id=7EF3_49F5C160);
background-position:0 0;
background-repeat:no-repeat;
}
#footer p {
margin:0;
padding:0 150px 0 0;
line-height:100px;
font-family:Arial, Helvetica, sans-serif;
font-size:.8em;
color:#454545;
text-align:right;
}
#footer a {
color:#9C291D;
text-decoration:none;
}
#footer a:hover {
color:#999999;
text-decoration:underline;
}
/* Clears nested floats */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Tasarim Üstü
Kod:
<!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 http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="#" />
<meta name="keywords" content="#" />
<meta name="author" content="#" />
<link rel="stylesheet" type="text/css" href="reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen,print" />
<!--[if IE 6]>
<style>
#centerColumn {
float:left;
margin:0 10px 0 75px;
padding:6px 6px 6px 10px;
width:580px;
font-size:.9em;
color:#000000;
border-left:1px dashed #cccccc;
}
</style>
<![endif]-->
<title>Voodoo Dolly v2.0</title>
</head>
<body>
<div id="pageWrap">
<div id="header">
<h1>Voodoo Dolly v2.0</h1>
<p>Busting Out The Digital Spackle For A Long Overdue Update</p>
</div><!--// end #header //-->
<div id="navBar">
<ul>
<li><a href="#" title="Homw">Home</a></li>
<li><a href="#" title="About">About</a></li>
<li><a href="#" title="Blog">Blog</a></li>
<li class="end"><a href="#" title="Contact">Contact</a></li>
</ul>
</div><!--// end #navBar //-->
<div id="container" class="clearfix">
<div id="centerColumn">
<h2>Center Column</h2>
<p>
Tasarım Altı
Kod: </p>
<p>Proin enim justo, viverra vitae, aliquam eget, pretium vel, enim. Pellentesque volutpat, est ac facilisis tempor, nibh diam posuere felis, vitae rhoncus odio velit vitae lectus. Nulla augue pede, bibendum sit amet, volutpat dapibus, adipiscing non, tellus. Nulla elit. Fusce imperdiet ullamcorper massa. Nulla sem ligula, interdum ut, sagittis sed, cursus in, metus. Sed porttitor neque sit amet metus. Ut mattis mollis risus. Duis auctor nulla at magna.</p>
</div><!--// end #centerColumn //-->
<div id="leftColumn">
<h2>Left Column</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<p><a href="#" title="#">Lorem ipsum</a> dolor sit amet, consectetuer adipiscing elit. Sed nec lacus. Proin vulputate mauris ut sem aliquam tristique. Sed tortor nisi, rutrum ut, tincidunt nec, luctus eu, lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed nec lacus. Proin vulputate mauris ut sem aliquam tristique. Sed tortor nisi, rutrum ut, tincidunt nec, luctus eu, lectus.</p>
</div><!--// end #leftColumn //-->
<div id="rightColumn">
<h2>Right Column</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p><a href="#" title="#">Lorem ipsum</a> dolor sit amet, consectetuer adipiscing elit. Sed nec lacus. Proin vulputate mauris ut sem aliquam tristique. Sed tortor nisi, rutrum ut, tincidunt nec, luctus eu, lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed nec lacus. Proin vulputate mauris ut sem aliquam tristique. Sed tortor nisi, rutrum ut, tincidunt nec, luctus eu, lectus.</p>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed nec lacus. Proin vulputate mauris ut sem aliquam tristique. Sed tortor nisi, rutrum ut, tincidunt nec, luctus eu, lectus.</p>
</div><!--// end #rightColumn //-->
</div><!--// end #container //-->
<div id="footer">
<p>Copyright, 2005 (Your Site Name) • Design
by <a href="http://www.raykdesign.net">Rayk Web Design</a></p>
</div><!--// end #footer //-->
</div><!--// end #pageWrap //-->
</body>
</html>
Sanırım Bu Şekilde İstedin.
İyi Çalışmalar ______________ Business Web Me! - www.webme.com |
|