GURKAN1994 Posted December 1, 2012 Share Posted December 1, 2012 arkadaşlar bu görüntüyü yapmak için uğraşıyorum css de ama bi türlü yapamadım kenar taraflar gördüğünüz gibi köşeler oval ve saydam ben saydam yapınca 4 tarafa ayrı ayrı border verdiğimiz için üst üste geliyor ve ben saydamlık vermiş olsamda köşeler renkli oluyor yine ve satın al bölümünü tam yerine koyamıyorum iç içe div mi yapmam lazım acaba yeni başladım bu psd sini çizdim şu an site yi yapıyorum şu anda Quote Link to comment Share on other sites More sharing options...
blackman12 Posted December 2, 2012 Share Posted December 2, 2012 bi kere borderda opacity yok. o senin border için renk seçimine bağlı görebileceği bi efekt. köşe yuvarlatma komutu border-radius. button içinde text-align: center vermen yeterli olur gibime geliyo. (bunu buttona değil butonun parent divine vericeksin.) Quote Link to comment Share on other sites More sharing options...
carysma1 Posted December 2, 2012 Share Posted December 2, 2012 (edited) Kodları kendine göre düzenlersin. Kenarları oval yapmak için border-radius kullandım fakan internet explorer da çalışmıyor. Satın al linkini display: block yaptım ve margin: 0 auto ile ortaladım. Biraz incelersen daha iyi anlarsın. Kolay gelsin <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Başlıksız Belge</title> <style type="text/css"> .wrap h1 { font-size: 28px; color: #EBEBEB; margin: 0px; text-align: center; padding-top: 30px; padding-right: 20px; padding-bottom: 30px; padding-left: 20px; } .wrap .paket-detay { list-style-type: circle; font-size: 15px; color: #4B4B4B; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } .wrap .fiyat { line-height: 35px; text-align: center; font-size: 18px; color: #666 } .wrap .satinal { padding: 10px; } .wrap .satinal a { font-weight: bold; text-decoration: none; display: block; padding: 10px; background: #09C; font-size: 22px; width: 180px; margin: 0 auto; text-align: center; color: #EBEBEB; } .wrap .satinal a:hover { background: #F90; } .wrap { float: left; width: 240px; border: 2px solid #399; border-radius: 4px; margin-right: 10px; background:#F3F3F3; font-family: Arial, Helvetica, sans-serif; background: url(Windows-8-logo-300x300_03.gif) no-repeat 180px 110px; } div.last { margin-right: 0px; } #pro { margin-right: 0; } #pro h1 { background-color: #39F;} #baslangic h1 { background-color: #063;} #standart h1 { background-color: #666;} </style> </head> <body> <div id="baslangic" class="wrap"> <h1>Başlangıç</h1> <ul class="paket-detay"> <li>500 Mb</li> <li>25 Adet E-Posta</li> <li>5Gb Trafik</li> <li>Web İstatistikleri</li> </ul> <div class="fiyat"><strong>15</strong> TL</div> <div class="satinal"><a href="#">satın al</a></div> </div> <div id="standart" class="wrap"> <h1>Standart</h1> <ul class="paket-detay"> <li>1000 Mb</li> <li>25 Adet E-Posta</li> <li>10Gb Trafik</li> <li>Web İstatistikleri</li> </ul> <div class="fiyat"><strong>35</strong> TL</div> <div class="satinal"><a href="#">satın al</a></div> </div> <div id="pro" class="wrap"> <h1>Profesyonel</h1> <ul class="paket-detay"> <li>2000 Mb</li> <li>25 Adet E-Posta</li> <li>25Gb Trafik</li> <li>Web İstatistikleri</li> </ul> <div class="fiyat"><strong>65</strong> TL</div> <div class="satinal"><a href="#">satın al</a></div> </div> </body> </html> Edited December 2, 2012 by carysma1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.