Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj20.04.2009, 19:34 (UTC)    
Mesaj konusu: Bu Tasarımın Kodlarını Ayırabilecek Var Mı?

Arkadaslar aşağıda vermiş olduğum adresteki css tasarımı kodlara ayırabilecek var mı?

http://csstinderbox.raykonline.com/demos/voodoo/voodoo-dolly-v2.zip

Teşekkürler.
Mesaj27.04.2009, 11:43 (UTC)    
Mesaj konusu:

Kimse Ayıramıyor Mu :S
Mesaj27.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) &nbsp;•&nbsp; 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 Wink
______________
Business Web Me! - www.webme.com
Mesaj27.04.2009, 18:47 (UTC)    
Mesaj konusu:

Teşekkürler kardeş güzel oldu. Sağol emeğin için.
Mesaj27.04.2009, 18:48 (UTC)    
Mesaj konusu:

Fakat uzun yazılar sağa kayıyor, neden sizce?
Mesaj27.04.2009, 19:58 (UTC)    
Mesaj konusu:

siteniziekleyin yazmış:
Teşekkürler kardeş güzel oldu. Sağol emeğin için.

Rica Ederim.
siteniziekleyin yazmış:
Fakat uzun yazılar sağa kayıyor, neden sizce?

Bilmiyorum Nedenini Pek Fazla inceleyemedim, eğer Tasarım üzeri ve altında bi yere yazı yazarken kayıyorsa
Kod:
 <br/>
kullanıp satır ine bilirsin Wink
______________
Business Web Me! - www.webme.com
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu