ile

İçerik ve alt bilgi kısımlarını da Bootstrap için uygun hale getirelim

Genellikle bu tarz şirket sayfalarında ürünleri ya da hizmetleri gösteren 940 piksel genişliğinde bir ana resim bulunur. Bizim de elimizde şöyle bir resim olsun:

Bu resmi icerik adlı section etiketimizin hemen altına anaResim adlı div kutusunun içine yerleştireceğiz ki ilk mesajımızın hemen üstünde ama üs kısımın da hemen altında bulunsun.

<div id="anaResim"><img src="anaResim.jpg" alt="Ana Resim"/></div>

Daha sonra mesaj kısmının olduğu yeri ve altında bulunan bilgi kısmındaki article’ları yerleştirmemiz gerekiyor. Geniş mesajımız tüm sayfayı kaplasın, ürünlere göz atın linkimiz de hemen altında yeralsın. Daha önce yaptığımız gibi satırları oluşturalım.

<div id="mesaj">
    <div class="row">
        <div class="span12">
            <h1><strong>İstanbul'daki en hızlı, en kaliteli ve en uygun fiyatlı matbaayı mı arıyorsunuz?</strong></h1>
        </div>
    </div>
    <div class="row">
        <div id="inceleyin" class="span4 offset8">
            <a class="btn btn-primary btn-large"  href="urunler.html">Ürünlerimizi inceleyin</a>
            </div>
        </div>
    </div>

Gördüğümüz gibi mesaj kısmının boyu 12 birim. Yani tüm sayfayı kaplıyor. Ürünleri inceleyin kısmının boyu ise 4 birim. Ancak burada yeni bir şey var. offset8. Yani kaydırma. Yine 4 birim olan bir kutu yaptık. Ama bu sefer bu kutuyu en sağa kadar getirdik. Linkle alakalı yeni bir özellik daha var. “btn btn-primary btn-large” sınıflarıyla linkimizi büyük bir buton haline getirdik.

Son durum:

Mesaj kısmı biraz daha anaResim’den uzak dursa iyi olur. Bunu da custom.css dosyasını değiştirerek yapacağız. Ama şimdilik devam edelim.

Sıra bilgilerimizi tutan article etiketlerini düzenlemeye geldi. Bunların da her biri için önce bir satır kutusu açalım ve boylarını sırayla 4 birim, 3 birim ve 4 birim olarak ayarlayalım. Bir kutunun boyunu küçük tutmamızın sebebi yine alt satıra düşmelerini engellemek.

<div id="bilgiler" class="row">
    <article id="neyapiyoruz" class="span4">
        <h3>Ne yapıyoruz?</h3>
        <p>İstanbul'dasınız, davetiye, broşür, poster veya el ilanı'na ihtiyacınız var. Hem de 3 günde. Fiyatı da biraz uygun olsun ama sonuçlar temiz mi olsun? O zaman doğru yere geldiniz.</p>
    </article>   
    <article id="neredeyiz" class="span3">
        <h3>Neredeyiz?</h3>
        <p>İstanbul'un tarihi merkezi Sirkeci'deyiz. Ama mesafeler sorun değil. Siz bize gelemezseniz, biz size geliriz. Siparişim ayağıma gelsin diyorsanız, o da olur. </p>
    </article>  
    <article id="farkımız" class="span4">
        <h3>Bizim farkımız</h3>
        <p>Kesin kalite garantisine ihtiyacınız varsa, ücretsiz motorsikletli kuryeyle baskı işlerim gönderilsin diyorsanız, fiyatlar uygun olsun ama fazla da gecikmesin 3 gün içinde elimde olsun istiyorsanız, aradığınız yer burası. </p>
    </article>  
</div>

Bilgiler kısmını da bu şekilde düzenledik.

Şimdilik iyi ama daha yapmamız gereken çok şey var. CSS ile düzeltmeler yapalım. Burası biraz karışık gibi gözüküyor ama değil ve çok kolay aslında:


#mesaj
{
    /*Her yünden 20 piksellik boşluk bıraktık*/
    margin: 20px;
}

/*id'si bilgiler olan etiketin içindeki article etiketlerini seçtik*/
#bilgiler > article
{
    /*Yazılar için her yünden 10 piksellik boşluk bıraktık*/
    padding: 10px;

    /*1 piksellik kesintizik #e8e8e8 renginde kenar çizgisi oluşturduk*/
    border: 1px solid #e8e8e8;

    /*5 piksel çapında yuvarlak kenar elde ettik*/
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;

    /*Kutumuza gölge ekledik*/
    -webkit-box-shadow: 0 0 5px #efefef;
    -moz-box-shadow: 0 0 5px #efefef;
    box-shadow: 0 0 5px #efefef;

    /*Kutunun arka planı için gradient yani renk geçişi kullandık*/
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#efefef));
    background: -moz-linear-gradient(top, #fff, #efefef);

    /*Kutu boyunu da 242 piksel olarak ayarladık*/
    height:242px;
}

#bilgiler
{
    /*Yazılar için alttan ve üsttem 20 piksellik boşluk bıraktık ki yapışmasın*/
    padding-bottom: 20px;
    padding-top: 20px;
}

Yorum kısmında yaptığımız işlemler için açıklamalar yaptık. Burada yeni olan iki özellik şu. Birincisi #id > article yani bir id ismine sahip olan etiketin içinde yer alan article adındaki tüm etiketleri bu şekilde seçiyoruz. Diğeri ise gradient yani renk geçişli arka plan. Bu da CSS3 ile gelen yeni bir özellik.

Bunları yaptıktan sonra bilgiler kısmının son görüntüsü şu şekile geldi:

Çok daha güzel.

Son olarak da alt bilgi kısmını düzeltelim. Onu da bir satır haline getirelim ve içindekileri teker teker boyutlandıralım.


<footer>
    <div id="footer-content">
        <div class="row">
            <nav class="span2 offset3">
                <h4>Bağlantılar</h4>
                <ul id="altListe">
                    <li><a href="anaSayfa.html">Ana Sayfa</a></li>
                    <li><a href="hakkimizda.html">Hakkımızda</a></li>
                    <li><a href="kurumsal.html">Kurumsal</a></li>
                </ul>
            </nav>
            <div id="iletişim">
                <div id="adres" class="span2">
                    <h4>Adres:</h4>
                    Kızılyıldız Matbaacılık A.Ş.
                    Denizler Mah.
                    Eren Sok. No:68
                    Sireci, Fatih 34110
                    İstanbul TÜRKİYE
                </div>
                <div id="telefon" class="span2">
                    <h4>Telefon</h4>
                    Tel: +90 212 444 19 17
                    Fax: +90 212 444 19 05
                </div>
            </div>
        </div>
    </div>
    <div id="footer-floor">
        <div id="copyright">Her Hakkı Saklıdır. 2012 Kızılyıldız Matbaacılık A.Ş.</div>
    </div>
</footer>

Alt bilgide yapacaklarımız ise şöyle. Alt bilginin arkaplan renklerinin koyu gri ve siyah, başlık ve yazılarının ise beyaz ve açık gri olmasını istiyoruz. Yine boşluklara ve yapışmalar dikkat ederek tablomuzu tamamlayalım:


/*Burada pek öğrenmediğimiz birşey kalmadı aslında*/
#footer-content
{
    background: #252525;
    color: #999;
    padding:10px;
}

/*Footer içinde tüm seviyelerde yer alan h4 etiketlerinin rengini beyaz yaptık*/
footer h4
{
    color: #fff;
}

/*Footer içinde tüm seviyelerde yer alan linklerin rengini beyaz yaptık*/
footer a
{
    color:#fff;
}

/*Listenin başındaki noktacıkları yokettik*/
#altListe
{
    list-style:none;
}

/*Text-align özelliği ile yazıları sağa yasladık*/
#footer-floor {
    color: #999;
    background: #1b1b1b;
    padding: 10px;
    text-align:right;
}

/*Bu etiketler için yazıtipini değiştirdik*/
p, ul, ol, dl {
font-family: "Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}

Burada farklı olan bir şey yok. Tek fark “footer h4” seçimi. Bunun “footer > h4” ten ne farkı var dersek, footer h4, footer içindeki tüm h4’leri seviyesine bakmadan seçerken, footer > h4, footerin hemen altında yer alan h4 etiketlerini seçecek.

Ana sayfamızı düzenlemeyi nihayet bitirdik. Sonuçta elimizde profesyonel ve heryerde uyumlu çalışabilecek, estetik bir sayfa oluştu:

Bu da alt kısım:

Eğer buraya kadar örnekleri uygulayarak geldiyseniz, artık internet arayüzü yapmayı %85 – %90 oranında öğrendiniz demektir. Tebrik ediyorum.

Bir sonraki yazıda, sitemizin diğer bölümlerini oluşturacağız.

Dayanışmayla!
Meraklı Bilişimci

Yorumla

Yorum