Arama butonu
Bu konudaki kullanıcılar: 1 misafir, 1 mobil kullanıcı
3
Cevap
343
Tıklama
0
Öne Çıkarma
Html template css yardım
A
13 yıl (435 mesaj)
Teğmen
Konu Sahibi

Arkadaşlar kendim ugrasarak hazırladıgım bi template'm var fakat sitede yer alan kutuların ve kenarların oval/yuvarlak şeklinde olmasını istiyorum . kenarlar keskin olsun istemiyorum bu konuda yardımcı olabilirseniz eğer sevinirim.
Css kodu ekliyorum...... resimde ekledim...





quote:


 
/* Main Layout Styles */

body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #666;}
.right {float: right;}
.left {float: left;}
img {border: none;}
ul, li {margin: 0; padding: 0; list-style: none;}
form {margin: 0; padding: 0;}
a {color:#0088B5; font-weight: bold; }
a:hover {color: #0078A0; }

#container {width: 910px; padding: 6px; -moz-border-radius: 13px; background: #fff; margin: 10px auto; overflow: auto;}
#content {width: 900px; overflow: auto;}

#header {
width: 910px;
height: 80px;
}
.logo {margin: 3px; float: left;}
ul#toplinks {float: right; color: #999; margin: 0; padding: 0; list-style: none;}
ul#toplinks li {float: right; margin: 3px 0 0 10px;}
ul#toplinks a { color: #999; font-weight: normal;}
ul#toplinks a:hover { color: #666; font-weight: normal;}

#nav {padding: 0; width: 890px; background: #6C9831 url(images/bg_nav.png) repeat-x bottom; padding: 9px 0 10px 20px; -moz-border-radius: 10px; color: #fff; height: 12px; margin: 5px 0;}
#nav li {padding-right: 20px; float: left; display: block;}
#nav a {color: #fff; text-decoration: none; font-weight: normal;}
#nav a:hover {color: #ffffff;}

#footer {width: 900px; text-align: center; margin: 5px auto; padding-bottom: 5px; clear: both;}
#footer ul {width: 450px; margin: 0 auto;}
#footer li{float: center; margin-right: 0px;}
#footer li a{color: #999;}

/* Homepage Styles */

#topbox {width: 900px; padding: 20px; -moz-border-radius: 10px; background: #00ACE6 url(images/bg_fptopbox.png) repeat-x bottom; overflow: auto; color: #fff;}
#topbox h4 {color: #fff; font-size: 20px; letter-spacing: -1px; margin: 0; padding: 0 0 5px 0; }
#topbox input {border: 1px solid #0093C4; padding: 3px 3px; width: 230px;}
#topbox select {margin-left: 3px;}
#topbox .btn {padding: 3px 5px; background: #004055; color: #fff; border: none; -moz-border-radius: 3px; position:absolute; margin-left: 5px; cursor: pointer; width: 60px; font-size: 11px;}
#topbox .btn:hover {background: #005773; }
#tbleft {float: left; width: 450px; padding: 15px 0 0 10px;}
#tbleft .tld {width: 75px;}

#tbright {font-size: 12px; float: right; width: 390px; border-left: 1px solid #00ACE5; padding-left: 15px;}
#tbright #boxleft {float: left; width: 225px;}
#tbright input {width: 145px; margin: 5px 0 0 5px;}
#tbright p {float: right; margin: 0; padding: 0;}
#tbright p.link {float: left; margin: 13px 0 0 10px; font-size: 11px; padding: 0;}
#tbright a {color: #fff; text-decoration: underline;}

ul#promobox {
width: 915px;
position: relative;
float: left;
margin-bottom: 10px;
}
ul#promobox p {margin: 0; padding: 0;}
ul#promobox li {width: 186px; padding: 10px 11px 20px 20px; float: right; background: #5e5e5e url(images/bg_promo1.png) repeat-x bottom; margin: 5px 10px 0 0; -moz-border-radius: 10px; color: #5e5e5e; }
ul#promobox ul {margin: 0 0 px 0;}
ul#promobox li ul li {margin: 5px 0 0 0; background: url(images/bullet.png) no-repeat left center; padding: 0 0 0 10px; width: 185px;}
ul#promobox li h3 {line-height: 1; color: #6b9832; letter-spacing: -1px; font-size: 20px; float: left; margin: 0; padding: 0 0 3px 0;}
ul#promobox li .pricebox {line-height: 1; float: right; text-align: center; padding-right: 10px;}
ul#promobox li .pricebox .lrg {line-height: 1; letter-spacing: -1px; font-size: 16px; font-weight: bold; margin: 0; padding: 0;}

ul#promobox a {background: #5e5e5e; color: #fff; float: left; margin: 15px 10px 0 0; padding: 5px 10px; text-decoration: none; -moz-border-radius: 5px; font-weight: normal;}
ul#promobox a:hover {background: #5e5e5e;}

ul#promobox li.two{background: #5e5e5e url(images/bg_promo2.png) repeat-x bottom;}
ul#promobox li.three {background: #5e5e5e url(images/bg_promo3.png) repeat-x bottom;}

#newsbox {width: 570px; padding: 15px; background: #f7f7f7; float: left; -moz-border-radius: 10px;}
#newsbox p {margin: 0; padding: 0;}
#newsbox h5 {font-size: 20px; letter-spacing: -1px; color: #6c9831; margin: 0; padding: 0; line-height: 1;}
#newsbox h6 a {
font-size: 14px;
letter-spacing: -1px;
color: #5e5e5e;
margin: 0;
padding: 0;
line-height: 1;
font-weight: bold;
}
#newsbox h6 {margin-bottom: 2px; padding: 0; line-height: 1;}
#newsbox li {margin-top: 15px; line-height: 1.5em;}
#newsbox .rss a{float: right; margin: 3px 8px 0 0; color: #999; font-weight: normal;}

#quotes {width: 275px; padding: 10px; float: right; background: #efefef url(images/bg_promo3.png) repeat-x bottom; -moz-border-radius: 10px; color: #6b6b6b;}
#quotes p {margin: 0; padding: 0;}
#quotes h3 {line-height: 1; letter-spacing: -1px; font-size: 17px; margin: 0; padding: 0;}
#quotes li {margin-top: 17px; font-size: 17px; font-weight: bold; letter-spacing: -1px;}
#quotes a {float: left; color: #fff; padding: 0; margin-top: 15px;}


< Resime gitmek için tıklayın >

DH forumlarında vakit geçirmekten keyif alıyor gibisin ancak giriş yapmadığını görüyoruz.

Üye olduğunda özel mesaj gönderebilir, beğendiğin konuları favorilerine ekleyip takibe alabilir ve daha önce gezdiğin konulara hızlıca erişebilirsin.

Üye Ol Şimdi Değil





< Bu mesaj bu kişi tarafından değiştirildi AlkanMh -- 17 Mayıs 2013; 15:32:28 >

N
13 yıl (416 mesaj)
Teğmen

css oval yapma kodu : "border-radius" dur.
bunu tablo içinde kullancaksan en dışa bir tane div açarsan daha verimli sonuç alabilirsin.

gölge efekti için ise kod: "box-shadow"

örnek kutu
örnek ovallik





< Bu mesaj bu kişi tarafından değiştirildi necipamir -- 17 Mayıs 2013; 16:00:37 >
Bu mesaja 1 cevap geldi.
A
13 yıl (435 mesaj)
Teğmen
Konu Sahibi

tesekkurler halletim cok sagolun :)



N
13 yıl (416 mesaj)
Teğmen

rica ederim.




Bu mesajda bahsedilenler: @Ati4830
DH Mobil uygulaması ile devam edin. Mobil tarayıcınız ile mümkün olanların yanı sıra, birçok yeni ve faydalı özelliğe erişin. Gizle ve güncelleme çıkana kadar tekrar gösterme.