TASARIM ÜSTÜ
<div class="wrap1">
<div class="wrap2">
<div class="logo">
<div style="display:inline; float:left;">
www.arapkoy.tr.gg
<div class="slogan">slckyel</div>
</div>
<div style="display:inline; float:right">
<input type="text" />
</div>
</div>
<div id="menu">
<div class="menu">
<ul>
<li><span class="hlavny_"><a href="#">Home</a></span></li>
<li><img src="http://www.opendesigns.org/designs/1840/img/divider2.png" alt="" /></li>
<li><span class="left"></span><span class="hlavny"><a href="#">Photos</a></span><span class="right"></span></li>
<li><img src="http://www.opendesigns.org/designs/1840/img/divider2.png" alt="" /></li>
<li><span class="hlavny_"><a href="#">About</a></span></li>
<li><img src="http://www.opendesigns.org/designs/1840/img/divider2.png" alt="" /></li>
<li><span class="hlavny_"><a href="#" >Links</a></span></li>
<li><img src="http://www.opendesigns.org/designs/1840/img/divider2.png" alt="" /></li>
<li><span class="hlavny_"><a href="#">Contact</a></span></li>
</ul>
</div>
<div class="info">
This text is describing selected item. You may give here advertisement, informations etc. Whatever!
</div>
<div class="leftpanel">
<div class="header">Products</div>
<ul id="categories">
<li style="border-top:0;"><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li class="selected"><a href="#">Item 4 - selected</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
</ul>
<br />
<div class="header">Office</div>
<div class="text">
<strong>Corporation ltd.</strong><br /><br />
212 Military Parkway<br />
<span class="divider">Los Angeles, CA 94043</span>
Telephone: +421 903 000 000<br />
E-mail:
e-mail( at )domain.com<br />
ICQ: 000-000-000<br />
Skype: corporation1<br /><br />
</div>
</div>
<div class="mainpanel">
<div class="text_">
TASARIM ALTI
</div>
</div>
<div class="rightpanel">
<div class="header">Inquiry</div>
<div class="inquiry">
<span class="divider" style="font-weight:bold;">Pri iudico cetero euripidis eu, tota utinam interesset nam et?</span>
<span class="divider"><a href="#">Viris delectus voluptatum</a> (467)</span>
<span class="divider"><a href="#">Has ne etiam epicuri</a> (1347)</span>
<span class="divider"><a href="#">Docendi honestatis eos ne</a> (608)</span>
<span class="divider"><a href="#">Mel ex ullum probatus similique</a> (609)</span>
<strong>3031 votes</strong><br /><br />
</div>
<div class="header">Corporation ltd.</div>
<div class="text">
<strong>Corporation ltd.</strong><br /><br />
212 Military Parkway<br />
<span class="divider">Los Angeles, CA 94043</span>
Telephone: +421 903 000 000<br />
E-mail:
e-mail( at )domain.com<br />
ICQ: 000-000-000<br />
<span class="divider">Skype: corporation1</span>
Telephone: +421 903 000 000<br />
E-mail:
e-mail( at )domain.com<br />
ICQ: 000-000-000<br />
Skype: corporation1<br /><br />
</div>
</div>
</div>
<p> </p>
<p> </p>
<p>
<!-- Do not change anything here! It may disable your webpage. -->
</p>
<div class="info1">
<div style="display:inline; float:left;">© 2008 <a href="#">yourwebsite.com</a>. Design <a href="http://pbcreations.sk" title="Webdesign, professional web solutions">P&B Creations</a>.</div>
<div style="display:inline; float:right;"><a href="http://www.topas-tachlovice.cz/topas-tachlovice.aspx" title="Obcanské sdruzení Topas Tachlovice">Tachlovice</a></div>
</div>
<!-- Do not change anything here! It may disable your webpage. -->
</div>
</div>
CSS KISMINA YAPIŞTIR
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 {
color:#333333;
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
margin:0 auto;
background: transparent url("http://www.opendesigns.org/designs/1840/img/bg.gif") center top no-repeat;
background-color:#e4e4e4;
}
a, a:visited, a:link { color:#000000; text-decoration:underline; }
a:hover { color: #666666; }
h1 { font-size:18px; margin:0; color:#333333; border-bottom: 1px dashed #333333; }
h2 { font-size:12px; margin:0; color:#333333; border-bottom: 1px dashed #333333; border-top:1px dotted #333333; }
h1 a, h1 a:visited, h1 a:link { text-decoration:none; }
h2 a, h2 a:visited, h2 a:link { text-decoration:none; padding:10px; line-height:25px; }
h2 img { margin-right:5px; border:0; }
input {
background-color: #fff;
background-image:url("http://www.opendesigns.org/designs/1840/img/input.gif");
background-repeat: repeat-x;
border:1px solid #b1df37;
width:140px;
padding:3px;
margin-top:18px;
}
div.wrap1 {
width: 858px;
margin: 0 auto;
overflow: hidden;
border:1px solid #c3c3c3;
}
div.wrap1 .wrap2 {
width: 856px;
background-repeat:repeat-y;
border: 1px solid #FFFFFF;
margin: 0 auto;
overflow: hidden;
}
div.wrap2 .logo {
width:796px;
height:61px;
padding:0px;
margin:0 auto;
background-image: url("http://www.opendesigns.org/designs/1840/img/logo.png");
background-repeat:no-repeat;
color:#FFFFFF;
font-size:22px;
font-weight:bold;
padding:30px;
}
div.logo .slogan {
font-size:9px;
font-weight:normal;
margin-top:3px;
}
div.info, div.info1 {
width:816px;
line-height:40px;
background-color:#FFFFFF;
padding-left:20px;
padding-right:20px;
background-image:url(http://www.opendesigns.org/designs/1840/img/info.gif);
background-repeat:repeat-x;
}
div.info1 {
background-image:url(http://www.opendesigns.org/designs/1840/img/info1.gif);
float:left;
border-top:1px solid #fff;
background-color:#e4e4e4;
color:#999;
}
div.info1 a, div.info1 a:link, div.info1 a:visited { color:#999; }
div.info1 a:hover { color: #666; }
div.wrap2 .leftpanel, div.wrap2 .rightpanel {
width:200px;
display: inline;
float:left;
}
div.wrap2 .mainpanel {
width:456px;
float:left;
}
div.leftpanel .header, div.rightpanel .header {
background-image:url(http://www.opendesigns.org/designs/1840/img/header.png);
background-repeat:no-repeat;
width:180px;
line-height:35px;
padding-left:20px;
color:#FFFFFF;
overflow:hidden;
font-weight:bold;
}
.text { padding:8px; text-align:justify; }
/* uplatnuje sa na left a right stlpec */
.text img { margin-right:10px; margin-bottom: 10px; border:0; float:left; }
.text_ { padding:15px; text-align:justify; }
/* uplatnuje sa na hlavny stlpec */
.text_ img { vertical-align:middle; border:0; }
span.divider {
border-bottom:1px dashed #333333;
padding-bottom:5px;
margin-bottom:5px;
display:block;
}
div.rightpanel .inquiry, div.leftpanel .inquiry {
padding:8px;
text-align:justify;
}
.inquiry a, .inquiry a:link, .inquiry a:visited, .inquiry a:hover { text-decoration:none; }
div#menu .menu {
height: 47px;
width: 856px;
background-image: url('http://www.opendesigns.org/designs/1840/img/menu.png');
background-repeat: repeat-x;
}
*> div#menu .menu { margin-top: -11px; }
div#menu .menu ul {
padding: 0;
list-style: none;
line-height: normal;
margin-left: -7px;
}
*> div#menu .menu ul { margin-left:0; }
div#menu .menu li {
display: inline;
}
div#menu li span.left {
background-image:url(http://www.opendesigns.org/designs/1840/img/menu-left.gif);
background-repeat:no-repeat;
width: 5px;
height: 64px;
overflow: visible;
position: relative;
bottom:15px;
vertical-align: bottom;
visibility:visible;
display:block;
padding-top: 15px;
margin-bottom: -32px;
float:left;
}
div#menu li span.hlavny {
background-image:url(http://www.opendesigns.org/designs/1840/img/menu-central.gif);
background-repeat:repeat-x;
height: 64px;
overflow: visible;
position: relative;
bottom:15px;
vertical-align: bottom;
visibility:visible;
display:block;
float: left;
padding-top: 15px;
margin-bottom: -32px;
text-align: center;
text-decoration: none;
padding-left:40px;
padding-right:40px;
}
div#menu li span.hlavny a, div#menu li span.hlavny a:visited, div#menu li span.hlavny a:link { color:#000; }
div#menu li span.hlavny_ {
height: 64px;
overflow: visible;
position: relative;
bottom:15px;
vertical-align: bottom;
visibility:visible;
display:block;
float: left;
padding-top: 15px;
margin-bottom: -32px;
text-align: center;
text-decoration: none;
padding-left:45px;
padding-right:45px;
}
div#menu li span.right {
background-image:url(http://www.opendesigns.org/designs/1840/img/menu-right.gif);
background-repeat:no-repeat;
width: 6px;
height:64px;
overflow: visible;
position: relative;
bottom:15px;
vertical-align: bottom;
visibility:visible;
display:block;
padding-top: 15px;
margin-bottom: -32px;
float: left;
}
div#menu .menu a, div#menu .menu a:visited, div#menu .menu a:active {
color:#000;
display:block;
float: left;
padding: 16px 0 0 0;
margin:0;
text-align: center;
text-decoration: none;
}
div#menu .menu img {
display:block;
float: left;
margin: 0px;
margin-bottom: -16px;
padding: 12px 0 0 0;
text-align: center;
text-decoration: none;
}
div#menu .menu a:hover { color:#000; text-decoration:underline; }
/* categories */
ul#categories {
width:200px;
position: relative;
margin: 0px;
padding: 0px;
list-style: none;
font-size: 11px;
}
ul#categories li {
display: block;
padding: 0px;
line-height: 30px;
border-bottom: 1px #e3f4b7 solid;
border-top: 1px solid #f9faf7;
height: 30px;
margin-top: -2px;
margin-bottom: -2px;
}
*> ul#categories li { margin-top: 0px; margin-bottom: 0px; }
ul#categories li.selected {
text-decoration: none;
background-color:#e3f4b7;
}
ul#categories li a {
display: block;
overflow: hidden;
padding: 0px 0px 0px 40px;
line-height: 30px;
text-decoration: none;
font-size: 11px;
color: 000;
background: url(http://www.opendesigns.org/designs/1840/img/arrow.gif) 26px 12px no-repeat;
}
ul#categories li a:hover {
text-decoration: underline;
background-color:#e3f4b7;
}