portal tasarimi
Tasarım üzerindeki yazı kodu:
<div class="logomenu">
<div class="navbar">
<ul id="dropmenu">
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="header">
<div class="reklam1">reklam alanı</div>
<div class="header-box">
<form method="get" id="searchform" action="#">
<div><input type="text" value="" name="s" id="s" size="10" class="arama" x-webkit-speech="x-webkit-speech" onwebkitspeechchange="this.form.submit();" /> <input type="submit" id="searchsubmit" value="Bul" alt="ara bul" class="bul" /></div>
</form>
<div class="sosyalico"><a href="#" target="_blank" title="facebook"><img src="https://img.webme.com/pic/c/css-tasarimdeneme/facebook11.png" alt="facebook" title="facebook" /></a> <a href="#" target="_blank"><img src="https://img.webme.com/pic/c/css-tasarimdeneme/twitter1kl.png" alt="twitter" title="twitter" /></a> <a href="#" target="_blank"><img src="https://img.webme.com/pic/c/css-tasarimdeneme/google1.png" alt="google" title="google" /></a> <a href="#" target="_blank"><img src="https://img.webme.com/pic/c/css-tasarimdeneme/windowslive.png" alt="windowslive" title="windowslive" /></a> <a href="#"><img src="https://img.webme.com/pic/c/css-tasarimdeneme/bookmark.png" alt="bookmark" title="bookmark" /></a></div>
</div>
</div>
<div id="onsayfa">
Tasarım altındaki yazı kodu:
<div class="sidebar">
<ul>
<li>
<h2>baslık</h2>
<ul class="son_yorumlar">
<li style="padding-left: 3px; width: 295px; display: inline-block;">
<div><b><a href="#" title="acıklama">link</a></b></div>
</li>
<li style="padding-left: 3px; width: 295px; display: inline-block;">
<div><b><a href="#" title="acıklama">link</a></b></div>
</li>
<li style="padding-left: 3px; width: 295px; display: inline-block;">
<div><b><a href="#" title="acıklama">link</a></b></div>
</li>
<li style="padding-left: 3px; width: 295px; display: inline-block;">
<div><b><a href="#" title="acıklama">link</a></b></div>
</li>
<li style="padding-left: 3px; width: 295px; display: inline-block;">
<div><b><a href="#" title="acıklama">link</a></b></div>
</li>
<li style="padding-left: 3px; width: 295px; display: inline-block;">
<div><b><a href="#" title="acıklama">link</a></b></div>
</li>
</ul>
</li>
<li>
<h2>baslık</h2>
<ul class="son_yorumlar">
<li style="padding-left: 3px; width: 295px; display: inline-block;">
<div><b><a href="#" title="acıklama">link</a></b></div>
</li>
<li style="padding-left: 3px; width: 295px; display: inline-block;">
<div><b><a href="#" title="acıklama">link</a></b></div>
</li>
<li style="padding-left: 3px; width: 295px; display: inline-block;">
<div><b><a href="#" title="acıklama">link</a></b></div>
</li>
<li style="padding-left: 3px; width: 295px; display: inline-block;">
<div><b><a href="#" title="acıklama">link</a></b></div>
</li>
<li style="padding-left: 3px; width: 295px; display: inline-block;">
<div><b><a href="#" title="acıklama">link</a></b></div>
</li>
<li style="padding-left: 3px; width: 295px; display: inline-block;">
<div><b><a href="#" title="acıklama">link</a></b></div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="footer">copyright</div>
</div>
Css kodu:
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;}
body {
margin : 0;
font-family : 'Tahoma', Segoe UI, Tahoma, Sans-Serif, Georgia;
font-size : 11px;
text-align : center;
vertical-align : top;
background : url(https://img.webme.com/pic/c/css-tasarimdeneme/arkaplann.jpg) center top no-repeat #d7f8ff;
color : #000000;
}
h1 {
font-size : 24px;
padding : 0 0 10px 0;
}
body, h1, h2, h3, h4, h5, h6, blockquote, address, blockquote, dd, dl, hr, p, form {
margin : 0;
padding : 0;
}
a:link, a:visited {
text-decoration : none;
color : #0072bc;
}
a:hover {
text-decoration : none;
}
p {
padding : 0 0 5px 0;
margin-bottom : 0.4em;
margin-top : 0;
}
#wrapper {
margin : 0 auto 0 auto;
width : 962px;
text-align : left;
}
#header-bar {
width : 100%;
height : 43px;
background : #8cecfd;
border-bottom : 2px solid #5ae3fc;
}
#header {
float : left;
width : 962px;
height : 104px;
margin-top : 4px;
}
.header-box {
background : #9deefd;
float : left;
padding : 5px 5px 5px 9px;
height : 90px;
width : 212px;
margin-left : -3px;
position : relative;
border-top-right-radius : 4px;
border-bottom-right-radius : 4px;
z-index : 1;
}
.logomenu {
width : 962px;
margin : 0 auto 0 auto;
}
.logo {
float : left;
width : 962px;
height : 43px;
border : none;
}
.navbar {
float : right;
font-size : 12px;
}
#onsayfa {
background : #ffffff;
width : 952px;
float : left;
padding : 5px;
border-top-left-radius : 8px;
border-top-right-radius : 8px;
}
#videolar {
background : #bef4fe;
float : left;
width : 297px;
padding : 8px 8px 4px 8px;
margin-bottom : 5px;
border-radius : 4px;
}
#videolar img {
float : left;
width : 32px;
height : 32px;
margin-right : 4px;
background : #ddf3fc;
border : 0;
padding : 5px;
border-radius : 4px;
}
#videolar ul {
list-style-type : none;
margin : 0;
padding : 0;
color : #527702;
}
#videolar ul li h2 {
padding : 4px 0 4px 4px;
font-size : 24px;
color : #00bff3;
margin : 0 0 4px 0;
}
#videolar ul ul li {
padding : 5px 0 5px 5px;
margin : 1px 0 2px 0;
border-radius : 0;
background : #ffffff;
border-radius : 4px;
}
#videolar ul ul li:hover {
background : #9eeaff;
}
#videolar ul ul li a {
font-size : 11px;
}
#resimler {
background : #bef4fe;
float : right;
width : 297px;
padding : 8px 8px 4px 8px;
margin-bottom : 5px;
border-radius : 4px;
}
#resimler img {
float : left;
width : 32px;
height : 32px;
margin-right : 4px;
background : #ddf3fc;
border : 0;
padding : 5px;
border-radius : 4px;
}
#resimler ul {
list-style-type : none;
margin : 0;
padding : 0;
color : #527702;
}
#resimler ul li h2 {
padding : 4px 0 4px 4px;
font-size : 24px;
color : #00bff3;
margin : 0 0 4px 0;
}
#resimler ul ul li {
padding : 5px 0 5px 5px;
margin : 1px 0 2px 0;
border-left : none;
border-right : none;
border-top : none;
background : #ffffff;
border-radius : 4px;
}
#resimler ul ul li:hover {
background : #9eeaff;
}
#resimler ul ul li a {
font-size : 11px;
}
#programlar {
background : #bef4fe;
float : left;
width : 615px;
padding : 8px 8px 2px 8px;
margin-bottom : 5px;
border-radius : 4px;
}
#programlar img {
float : left;
width : 80px;
height : 80px;
margin-right : 4px;
background : #ddf3fc;
border : 0;
padding : 5px;
border-radius : 4px;
}
#programlar ul {
list-style-type : none;
margin : 0;
padding : 0;
color : #527702;
}
#programlar ul li h2 {
padding : 4px 0 4px 4px;
font-size : 24px;
color : #00bff3;
margin : 0 0 4px 0;
}
#programlar ul ul li:hover {
background : #9eeaff;
}
#programlar ul ul li a {
font-size : 11px;
}
.katbaslik {
background : #bef4fe;
width : 615px;
float : left;
padding : 8px;
margin-bottom : 5px;
border-radius : 4px;
}
.katbaslik h2 {
font-size : 24px;
color : #00bff3;
}
#container {
float : left;
width : 631px;
margin-right : 5px;
}
.breadcrumb {
font-size : 11px;
background : #9deefd;
padding : 8px 0 10px 5px;
margin-bottom : -5px;
border-top-left-radius : 4px;
border-top-right-radius : 4px;
}
.post {
background : #ffffff;
float : left;
width : 615px;
margin-bottom : 1px;
border : #bef4fe solid 8px;
border-radius : 4px;
}
.post h2 {
background : #bef4fe;
padding : 4px 0 8px 0;
font-size : 13px;
}
.post h2 a {
color : #00bff3;
}
.entry {
line-height : 21px;
font-size : 11px;
color : #464646;
padding : 5px 5px 5px 5px;
text-align : justify;
}
.entry-cat {
height : 92px;
line-height : 21px;
font-size : 11px;
color : #464646;
padding : 5px 5px 5px 5px;
text-align : justify;
}
.konular {
background : #bef4fe;
float : left;
width : 631px;
margin-bottom : 5px;
border-radius : 4px;
}
.konular ul {
list-style-type : none;
display : inline-block;
margin : 0 8px 8px 8px;
padding : 5px;
background : #ffffff;
border-radius : 4px;
}
.konular h2 {
padding : 8px 0 8px 8px;
font-size : 24px;
}
.konular h2 a {
color : #00bff3;
text-shadow : 1px 1px 1px #9ef3fd;
}
.konularbaslik {
font-weight : bold;
font-size : 11px;
padding : 0 0 2px 0;
}
.konu {
color : #ffffff;
}
.konutext {
height : 80px;
line-height : 20px;
font-size : 11px;
color : #464646;
text-align : justify;
}
.konutext p {
margin : 0;
}
#pagelink a {
margin-right : 4px;
}
.info:hover {
background : #ddf3fc;
}
.info h2 {
font-size : 11px;
margin : 2px 0 2px 0;
}
.infodata {
width : 60%;
display : inline-block;
padding : 3px 0 3px 20px;
}
.down:hover {
background : #ddf3fc;
}
.down h2 {
font-size : 11px;
margin : 2px 0 2px 0;
}
.downbutton {
height : 64px;
width : 64px;
float : right;
border : 0;
margin-left : 5px;
}
.downdata {
width : 60%;
display : inline;
padding : 3px 3px 3px 20px;
}
.icresim {
height : 200px;
width : 200px;
float : left;
background : #ffffff;
margin : 0 5px 0 0;
border : #ddf3fc solid 1px;
padding : 5px;
border-radius : 4px;
}
.probilgiler {
float : left;
height : 212px;
width : 387px;
}
.probilgiler ul {
list-style-type : none;
margin : 0;
padding : 0;
}
.probilgiler ul li {
list-style-type : none;
display : inherit;
margin : 0;
padding : 0 0 2px 0;
border-bottom : 1px dotted #454545;
}
.ptag {
width : 120px;
float : left;
font-weight : bold;
}
.indir {
width : 387px;
height : 63px;
border : 0;
margin-top : 5px;
}
.taglar {
padding : 5px;
background : #9deefd;
font-size : 11px;
}
.postbilgi {
display : inline;
float : right;
font-size : 11px;
font-weight : normal;
color : #0072bc;
margin-top : 1px;
}
.mdata p {
font-size : 11px;
}
.mdata a {
font-size : 11px;
color : #0072bc;
}
.posthumb img {
float : left;
background : #ffffff;
margin-right : 4px;
border : #ddf3fc solid 1px;
padding : 5px;
border-radius : 4px;
}
.postmetadata {
height : 21px;
background : #ecf8fe;
padding : 4px 0 5px 3px;
font-size : 13px;
color : #FFFFFF;
border-top : 1px dotted #bce6fb;
}
.benzer_konular {
height : 92px;
font-size : 11px;
line-height : 21px;
text-align : justify;
background : #ddf3fc;
color : #464646;
padding : 5px;
margin-bottom : 4px;
border-radius : 2px;
}
.benzer_konular li a {
font-weight : bold;
}
.bookmark {
display : inline;
float : right;
margin-top : 3px;
}
.bookmark img {
border : none;
}
.stats p {
float : left;
margin : 2px 0 0 4px;
font-size : 11px;
color : #fcfeff;
}
.stats a {
margin : 2px 0 0 4px;
font-size : 11px;
color : #fcfeff;
}
.stats img {
height : 16px;
width : 16px;
float : left;
}
.reklam1 {
float : left;
width : 728px;
height : 90px;
border : #ffffff solid 5px;
position : relative;
border-radius : 4px;
z-index : 2;
}
.reklam2 {
float : right;
display : inline;
width : 300px;
height : 250px;
border : #d4fc9b solid 8px;
border-radius : 4px;
margin-bottom : 4px;
}
.reklam3 {
width : 468px;
height : 60px;
margin : 5px auto 0 auto;
}
.reklam4 {
width : 468px;
height : 15px;
margin : 0 auto 5px auto;
}
.oldnav {
padding : 10px 10px 10px 10px;
float : left;
font-size : 14px;
font-weight : bold;
line-height : 18px;
}
.nextnav {
padding : 10px 10px 10px 10px;
float : right;
font-size : 14px;
font-weight : bold;
line-height : 18px;
}
.sidebar {
float : right;
width : 316px;
margin : 0;
padding : 0;
text-align : left;
display : inline;
}
.sidebar ul {
list-style-type : none;
margin : 0;
padding : 0;
color : #527702;
}
.sidebar ul li {
background : #d4fc9b;
color : #f3fae8;
padding : 8px;
border-radius : 4px;
margin-bottom : 4px;
}
.sidebar ul li h2 {
font-weight : bold;
font-size : 24px;
background : #d4fc9b;
color : #6cb406;
margin : 0 0 4px 0;
padding : 4px 0 8px 0;
}
.sidebar ul ul li {
background : #ffffff;
padding : 5px 2px 5px 5px;
margin : 0 0 2px 0;
border : 0;
border-radius : 4px;
}
.sidebar ul ul li:hover {
background : #a8dd5b;
color : #ffffff;
border-radius : 4px;
}
.sidebar ul ul li a {
color : #3d5a13;
font-size : 11px;
}
.rastgele_yazilar {
color : #000000;
}
.rastgele_resim img {
float : left;
width : 32px;
height : 32px;
margin-right : 4px;
margin-left : 2px;
background : #e2fdbc;
border : 0;
padding : 5px;
border-radius : 4px;
}
.son_yorumlar {
color : #000000;
}
.son_yorumlar img {
float : left;
width : 32px;
height : 32px;
margin-right : 4px;
background : #e2fdbc;
padding : 5px;
border-radius : 4px;
}
.clear {
clear : both;
}
#searchform {
height : 23px;
background : #ecf8fe;
padding : 6px 4px 6px 6px;
border-radius : 4px;
}
.arama {
float : left;
width : 165px;
height : 22px;
border : 0;
border-top-left-radius : 4px;
border-bottom-left-radius : 4px;
}
.bul {
color : #ffffff;
width : 35px;
font-weight : bold;
font-size : 11px;
float : left;
height : 24px;
background : #70cef2;
border : 0;
border-top-right-radius : 4px;
border-bottom-right-radius : 4px;
}
table#wp-calendar {
width : 100%;
text-align : center;
}
.comments-template {
margin : 0;
}
.comments-template ol {
margin : 0;
padding : 0;
list-style : none;
}
.comments-template ol li {
background : #ffffff;
color : #362f2d;
font-size : 11px;
text-align : justify;
line-height : 16px;
padding : 5px 5px 1px 5px;
}
.commentmetadata {
float : left;
width : 595px;
height : 42px;
font-size : 11px;
background : #ddf3fc;
padding : 5px;
margin-bottom : 4px;
border-radius : 2px;
}
.commentmetadata img {
background : #ffffff;
padding : 5px;
}
.commentform {
height : 20px;
font-size : 11px;
font-weight : bold;
background : #ecf8fe;
border : #bce6fb solid 1px;
margin : 4px 0 0 4px;
padding : 0;
border-radius : 2px;
}
.comments-template p.nocomments {
padding : 0;
}
.comments-template textarea {
font-size : 11px;
font-weight : bold;
background : #ecf8fe;
border : #bce6fb solid 1px;
width : 601px;
margin-left : 4px;
border-radius : 2px;
}
.commentsubmit {
height : 26px;
background : #70cef2;
border : #8ad6ff solid 1px;
margin : 0 0 4px 4px;
font-weight : bold;
border-radius : 2px;
}
.mini {
font-size : 10px;
text-align : center;
color : #ffffff;
margin-top : 3px;
}
.sosyalico {
width : 207px;
margin : 5px auto 0 auto;
height : 32px;
}
.sosyalico img {
border : none;
}
img.a {
left : 0;
top : 0;
z-index : 10;
border : none;
}
img.alignright {
float : right;
margin : 0 0 1em 1em;
}
img.alignleft {
float : left;
margin : 0 1em 1em 0;
}
img.aligncenter {
display : block;
margin-left : auto;
margin-right : auto;
}
a img.alignright {
float : right;
margin : 0 0 1em 1em;
}
a img.alignleft {
float : left;
margin : 0 1em 1em 0;
}
a img.aligncenter {
display : block;
margin-left : auto;
margin-right : auto;
}
#dropmenu, #dropmenu ul {
margin : 0;
padding : 0;
list-style-type : none;
list-style-position : outside;
position : relative;
line-height : 1.5em;
z-index : 300;
width : 100%;
margin-top : 10px;
}
#dropmenu a {
display : block;
padding : 0.25em 1em;
color : #ffffff;
border-right : 1px solid #ecf8fe;
text-decoration : none;
font-weight : bold;
font-size : 11px;
}
#dropmenu a:hover {
background : #ecf8fe;
color : #00bff3;
}
#dropmenu li {
float : left;
position : relative;
}
#dropmenu ul {
position : absolute;
display : none;
width : 12em;
top : 1.9em;
left : -1px;
margin : 0;
}
#dropmenu ul a {
background : #ecf8fe;
color : #00bff3;
border-left : 1px solid #ecf8fe;
}
#dropmenu li ul {
background : #ecf8fe;
color : #00bff3;
border-top : 1px solid #ecf8fe;
width : 14.1em;
}
#dropmenu li ul a {
background : #ecf8fe;
color : #00bff3;
width : 12em;
height : auto;
float : left;
border-bottom : 1px solid #ecf8fe;
}
#dropmenu ul ul {
top : auto;
}
#dropmenu li ul ul {
left : 12em;
margin : 0 0 0 10px;
}
#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {
display : none;
}
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {
display : block;
}
#footer {
background : #70cef2;
clear : both;
width : 952px;
height : 40px;
padding : 5px;
margin-bottom : 20px;
color : #ffffff;
border-bottom-left-radius : 8px;
border-bottom-right-radius : 8px;
}
Bugün 61 ziyaretçi (70 klik) kişi burdaydı!