Css Yardım

GURKAN1994 · 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

blackman12 · 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.)

carysma1 · December 2, 2012

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

Sign In

Css Yardım

Recommended Posts

GURKAN1994

Link to comment

Share on other sites

blackman12

Link to comment

Share on other sites

carysma1

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity