| Html Şablon | www.HTMLSABLONKOD.tr.gg | by BRKNL | Arkasında Google Var

css20

CSS - 19

css19

Tasarımın Üzerindeki Bölüm

<div id="wrapper">

<div id="border">

<div id="header">
<div id="headertext">Site Adı</div>
<div id="headertextsmall">.. Sitenizin Slogani</div>
</div>


<div id="topmenu">
<ul class="glossymenu">
<li class="current"><a href="index.htm" _fcksavedurl="index.htm"><b>Ana Sayfa</b></a></li>
<li><a href="index.htm" _fcksavedurl="index.htm"><b>Hakkında</b></a></li>
<li><a href="index.htm" _fcksavedurl="index.htm"><b>Forum</b></a></li>
<li><a href="index.htm" _fcksavedurl="index.htm"><b>Html Kodlar</b></a></li>
<li><a href="index.htm" _fcksavedurl="index.htm"><b>Z. Defteri</b></a></li>
<li><a href="index.htm" _fcksavedurl="index.htm"><b>Toplist</b></a></li>
</ul>
</div>


<div id="leftcolumn">

<div class="leftcolumn-inner">
<h1>Arama</h1>
<form action="#" method="post">
<p><input name="search" id="search" /></p>
</form>
</div>


<div class="in-the-news">
<div class="left-heading">
<h3>Lorem lipsum</h3>
</div>
<div class="left-mid">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostris nostrud e
xercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolois nostrud e
xercitation ullamco
</div>
<img src="http://csstasarimm.cs.funpic.org/Demo/Css56/images/left-bottom.gif" _fcksavedurl="http://csstasarimm.cs.funpic.org/Demo/Css56/images/left-bottom.gif" class="block" alt="" />
</div>


<div class="in-the-news">
<div class="left-heading">
<h3>More lipsum</h3>
</div>
<div class="left-mid">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostris nostrud e
xercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolois nostrud e
xercitation ullamco
</div>
<img src="http://csstasarimm.cs.funpic.org/Demo/Css56/images/left-bottom.gif" _fcksavedurl="http://csstasarimm.cs.funpic.org/Demo/Css56/images/left-bottom.gif" class="block" alt="" />
</div>


<div class="in-the-news">
<div class="left-heading">
<h3>Image archive</h3>
</div>
<div class="randompicture">
<img src="http://csstasarimm.cs.funpic.org/Demo/Css56/images/randompic.jpg" _fcksavedurl="http://csstasarimm.cs.funpic.org/Demo/Css56/images/randompic.jpg" alt="Random picture" />
</div>
<img src="http://csstasarimm.cs.funpic.org/Demo/Css56/images/left-bottom.gif" _fcksavedurl="http://csstasarimm.cs.funpic.org/Demo/Css56/images/left-bottom.gif" class="block" alt="" />
</div>

</div>


<div id="rightcolumn">

<div id="highlightnews">
<img src="http://csstasarimm.cs.funpic.org/Demo/Css56/images/megaphone.png" _fcksavedurl="http://csstasarimm.cs.funpic.org/Demo/Css56/images/megaphone.png" alt="megaphone" /><p>Siteniz hakkında Duyuruları buradan Yapabilirsiniz.</p>
</div>


<div class="maincontent">
<img src="http://csstasarimm.cs.funpic.org/Demo/Css56/images/content-top.gif" _fcksavedurl="http://csstasarimm.cs.funpic.org/Demo/Css56/images/content-top.gif" class="block" alt="" />
<div class="content-mid">

Tasarımın Altındaki Bölüm

Css Kod Bölümü

h1#title{display: none;}  h2#title span {display: none;}  div.header{display: none;}  li.nav_element{list-style-type: none;}  li.nav_element{display: none;}
* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #666666;
font-size: 12px;
background-image:url(http://csstasarimm.cs.funpic.org/Demo/Css56/images/bg-tile.gif);
background-repeat:repeat;
}
#wrapper {
width: 782px;
margin: 0 auto;
}
#border {
border: 1px solid #8ECE5F;
margin: 20px 0px 5px 0px;
background-color: #fffffe;
min-height: 776px;
float: right;
width: 780px;
}
* html #border {height:776px} /* IE Min-Height Hack */
#header {
margin: 6px 5px 3px 5px;
background-image:url(http://csstasarimm.cs.funpic.org/Demo/Css56/images/header.jpg);
background-repeat:no-repeat;
height:140px;
}
#headertext
{
width:180px;
height:40px;
font-family:"Trebuchet MS";
font-size:33px;
color:#71c15c;
margin:50px 0px 0px 50px;
float:left;
clear:none;
}
#headertextsmall
{
width:250px;
height:30px;
font-family:"Trebuchet MS";
font-size:20px;
color:#fff;
padding-right:50px;
padding-top:60px;
float:right;
}
/* ------------------------ Start Navigation Bar -----------------*/
#topmenu
{
height:46px;
width: 770px;
padding-left:5px;
background-repeat:no-repeat;
}
/*MEUNU*/
.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(http://csstasarimm.cs.funpic.org/Demo/Css56/images/menug_bg.gif) repeat-x; /*tab background image path*/
height: 46px;
list-style: none;
}
.glossymenu li{
float:left;
}
.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}
.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(http://csstasarimm.cs.funpic.org/Demo/Css56/images/menug_hover_left.gif) no-repeat; /*left tab image path*/
background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:hover b{
background: url(http://csstasarimm.cs.funpic.org/Demo/Css56/images/menug_hover_right.gif) no-repeat right top; /*right tab image path*/
}
/* ------------------------ End Navigation Bar -----------------*/
/* ------------------------ Start Images -----------------*/
img {
display: inline;
border: none;
}
img.block {
display: block;
}
img.float {
float: left;
margin: 0px 14px 10px 0px;
}
/* ------------------------ End Images -----------------*/
/* ------------------------ Start Main Columns -----------------*/
#leftcolumn { /* Parent Wrapper for inside boxes */
margin: 6px 0px 0px 4px;
display: inline; /* IE Hack */
width: 240px;
float: left;
background-image:url(http://csstasarimm.cs.funpic.org/Demo/Css56/images/search-box.gif);
background-repeat: no-repeat;
min-height: 300px;
padding: 0;
}
* html #leftcolumn {height:300px} /* IE Min-Height Hack */
.leftcolumn-inner { /* Parent Wrapper for inside boxes */
display: inline; /* IE Hack */
width: 220px;
float: left;
background-image:url(http://csstasarimm.cs.funpic.org/Demo/Css56/images/search-box.gif);
background-repeat: no-repeat;
min-height: 40px;
padding: 10px;
margin-bottom: 7px;
}
* html .leftcolumn-inner {height:40px} /* IE Min-Height Hack */
.in-the-news { /* Parent Wrapper for inside boxes */
display: inline; /* IE Hack */
width: 235px;
float: left;
min-height: 125px;
margin-bottom: 7px;
}
* html .in-the-news {height:125px} /* IE Min-Height Hack */
#rightcolumn {
/* border: 1px solid red;*/
margin: 6px 0px 0px 0px;
display: inline; /* IE Hack */
width: 513px;
float: left;
min-height: 300px;
}
* html #rightcolumn {height:300px} /* IE Min-Height Hack */
#highlightnews {
background-image:url(http://csstasarimm.cs.funpic.org/Demo/Css56/images/highlightnews.jpg);
height:auto;
background-repeat: no-repeat;
text-align: left;
padding: 17px 10px 10px 13px;
display: inline; /* IE Hack */
float: left;
width: 510px;
}
#highlightnews img
{
float:left;
padding-right:10px;
}
* html .sponsor {height:80px} /* IE Min-Height Hack */
.maincontent {
min-height: 80px;
display: inline; /* IE Hack */
float: left;
margin-bottom: 7px;
width: 530px;
}
* html .maincontent {height:80px} /* IE Min-Height Hack */
.content-mid {
background-image:url(http://csstasarimm.cs.funpic.org/Demo/Css56/images/content-mid.gif);
background-repeat: repeat;
padding: 5px 14px 5px 14px;
}
.content-mid img
{
float:left;
margin:3px 10px 14px 0px;
}
.left-mid {
background-image:url(http://csstasarimm.cs.funpic.org/Demo/Css56/images/left-mid.gif);
background-repeat: repeat;
padding: 5px 14px 10px 14px;
}
.randompicture
{
background-image:url(http://csstasarimm.cs.funpic.org/Demo/Css56/images/left-mid.gif);
background-repeat: repeat;
text-align:center;
padding:5px 0px 5px 0px;
overflow:hidden;
}
.left-heading {
background-image:url(http://csstasarimm.cs.funpic.org/Demo/Css56/images/left-heading.gif);
background-repeat: no-repeat;
padding: 9px 14px 5px 10px;
}
.left-heading h3
{
font-size: 16px;
color: #fff;
min-height: 11px;
font-weight: bold;
}
* html .left-heading {height:11px} /* IE Min-Height Hack */
/* ------------------------ End Main Columns -----------------*/
/* ------------------------- Start Headings ---------------------*/
h1 {
font-size: 16px;
color: #72C236;
}
/* ------------------------- End Headings ---------------------*/
input {
border: 1px solid #8ECE5F;
width: 200px;
}
#footer {
font-size: 10px;
clear: both;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-bottom: 5px;
text-align:center;
}
ul#daily-links li {
list-style: none;
margin-left: 2px;
}
ul#nav-links li {
display: inline;
margin-left: 0px;
padding-left: 12px;
}
ul#daily-links li a:link{
color: #333;
text-decoration: none;
font-weight: bold;
}
ul#daily-links li a:visited{
color: #333;
text-decoration: none;
font-weight: bold;
}
ul#daily-links li a:hover{
color: #999;
text-decoration: none;
font-weight: bold;
}
a:link {
color: #006600;
text-decoration: none;
}
a:visited {
color: #006600;
text-decoration: none;
}
.valid {
margin: 10px 0px 0px 10px;
}

| Html Şablon | www.HTMLSABLONKOD.tr.gg | by BRKNL | Arkasında Google Var |

css20