Css Site Sablonu

umutcan85

Hectopat
Katılım
20 Kasım 2013
Mesajlar
97
HTML SAYFASI
<div id='AnaTasiyici'>
<div id='Baslik'>
<h1>Burası Baslık</h1>
</div>

<div id='menu'>
<h1>Burası Menu</h1>
</div>

<div id='İcerikTasiyici'>
<div id='solMenu'>
<h1>Burası sol menü</h1>
</div>

<div id='sagİcerik'>
<h1>Burası sag icerik</h1>
</div>

<div id='altBaslik'>
<h1>Burası alt Baslık</h1>
</div>

</div>
CSS SAYFASI
*{margin:0; padding:0}
#AnaTasiyici{width:1000px; margin:0 auto;}
#Baslik{background:#CE5424; height:100px; margin-top:5px;
border-radius:0 0 15 15px; border-bottom:5px solid #000;}
#menu{background:#4CB848; width:1000px; height:50px; border-radius:5px; margin-top:5px;}
#İcerikTasiyici{min-height:700px; background:#91C18A; margin-top:5px;}
#solMenu{width:300px; height:680px; background:#8CDAE8; margin-left:17px; margin-top:10px; float:left; border-radius:15px 15px 0 0;}
#sagİcerik{width:650px; height:680px; background:#CD10DE; margin-top:10px;float:left; margin-left:17px; border-radius:15px 15px 0 0;}
#altBaslık{width:1000px; background:CE5424; border-top:5px solid #000; border-radius:15px 15px 0 0; height:70px; margin-top:10px;}


h1{font-size:30px; color:#fff; text-align:center; line-height:100px;}
#menu h1{font-size:30px; color:#fff; text-align:center; line-height:50px;}
#İcerikTasiyici h1{font-size:30px; color:#fff; text-align:center; line-height:680px;}
#altBaslik h1{font-size:30px; color:#fff; text-align:center; line-height:70px;}
HATA VAR MI? [HASHTAG]#recep baltaş[/HASHTAG]

Sayfada Sablon eksik olarak cıkıyo tasarım
 
Kod örneğini JsFiddle üzerinden paylaş. Linki ekledim kontrol edebilirsin. Id ve sınıf isimlerini Türkçe kullanmamaya çalış. İstemeden de olsa Tr karakter hatası yapabilirsin. Mesela "altBaslık". Ayrıca her yerde id kullanmanın mantığı yok class kullan. Açıklama satırları ekle ve belli başlı bölümlemeler olsun. Mesela Css tarafında "ana taşıyıcı > başlık > menü" şeklinde sıralaman daha iyi olur.
 
Sana tavsiyem düzenli çalışman. :) Şablonun hatalı olmasının sebebi eksik <div> kapatmadır. Kodlarının en son ve düzenli halini kullanabilirsin.
Kod:
<html>
<head>
<style type="text/css">
*{margin:0; padding:0}
#AnaTasiyici{width:1000px; margin:0 auto;}
#Baslik{background:#CE5424; height:100px; margin-top:5px;
border-radius:0 0 15 15px; border-bottom:5px solid #000;}
#menu{background:#4CB848; width:1000px; height:50px; border-radius:5px; margin-top:5px;}
#İcerikTasiyici{min-height:700px; background:#91C18A; margin-top:5px;}
#solMenu{width:300px; height:680px; background:#8CDAE8; margin-left:17px; margin-top:10px; float:left; border-radius:15px 15px 0 0;}
#sagİcerik{width:650px; height:680px; background:#CD10DE; margin-top:10px;float:left; margin-left:17px; border-radius:15px 15px 0 0;}
#altBaslık{width:1000px; background:CE5424; border-top:5px solid #000; border-radius:15px 15px 0 0; height:70px; margin-top:10px;}


h1{font-size:30px; color:#fff; text-align:center; line-height:100px;}
#menu h1{font-size:30px; color:#fff; text-align:center; line-height:50px;}
#İcerikTasiyici h1{font-size:30px; color:#fff; text-align:center; line-height:680px;}
#altBaslik h1{font-size:30px; color:#fff; text-align:center; line-height:70px;}
</style>
</head>
<body>
<div id='AnaTasiyici'>
<div id='Baslik'>
<h1>Burası Baslık</h1>
</div>

<div id='menu'>
<h1>Burası Menu</h1>
</div>

<div id='İcerikTasiyici'>
<div id='solMenu'>
<h1>Burası sol menü</h1>
</div>

<div id='sagİcerik'>
<h1>Burası sag icerik</h1>
</div>

<div id='altBaslik'>
<h1>Burası alt Baslık</h1>
</div>

</div>

</div></body>
</html>
 
Uyarı! Bu konu 10 yıl önce açıldı.
Muhtemelen daha fazla tartışma gerekli değildir ki bu durumda yeni bir konu başlatmayı öneririz. Eğer yine de cevabınızın gerekli olduğunu düşünüyorsanız buna rağmen cevap verebilirsiniz.

Yeni konular

Geri
Yukarı