Container Nedir? Ne İçin Kullanırız?

Herkese merhaba arkadaşlar. Bugün çoğu web sayfasında olan bir class’tan bahsedeceğim. Şimdi çoğu web sayfasına baktığınızda header alanında bulunan logo ve navigation alanı belirli bir genişliktedir. Banner alanında bulunan yazı, resim vb. gibi şeyler belirli bir genişliktedir. Yine diğer alanlarda bulunan yazılar belirli bir genişliktedir. Ama hepsinin bir ortak noktası var. Hepsi aynı genişliktedir. Yani container class’ı hizalama işleminde kullanılır.

Resim ile göstereyim;

Bakın bu benim şu anda devam etmekte olduğum projem. Burada iki farklı div’im var. Bir tanesi yukarıda olan yazıların bulunduğu alan. Diğeri ise ekibimiz alanı. Gördüğünüz gibi ikisi de aynı hizada. Peki koda aktarırken nasıl nasıl oluyor? Hemen onu da göstereyim.

İlk önce Css’te container adında bir sınıf oluşturuyoruz. Daha sonrasında ise container kullanılması gereken her yerde bu class’ı kullanabiliriz.

CSS

.container{
	width: 1200px;
	margin: 0px auto;
	position: relative;
}

Sizin de gördüğünüz gibi 1200px bir genişlik verdim. Sayfanın tam ortasında hizalanması için margin:0px auto verdim ve üzerine resim,yazı taglerini koyabilmek için position releative verdim. Eğer ki releative vermeseydim yazı veya resim tagleri container classının kapladığı alanın hemen altında yer alacaktı.

HTML

<div id="history">
        <div class="container">
            <div class="history-txt">
                <p>
                    Sıradan reklam anlayışlarına, yüzlerce hatta binlerce kez kullanılmış klişelerde karar kılınmış beyin fırtınalarına, 
                    allı pullu taklitlere, küflenmiş bakış açılarına ve ay sonu hesaplarına endekslenmiş iletişim stratejilerine 
                    vereceğimiz rahatsızlıktan dolayı üzgünüz.
                </p>
                <p>
                    Çünkü biz, en iyi fikri bulana kadar onlarca fikri tüketmekten korkmayan, küçük marka büyük marka ayrımı yapmadan çalıştığı 
                    her işin ardına güçlü bir strateji koyan, işini reklamca yapan ve sadece kreativiteye inanan bir ekibiz. Biz BOW'uz. 
                    Reklamıyla başarılı, imajıyla güçlü ve kreatif fikirlerle büyümek isteyen markaları birlikte çalışmaya bekleriz.
                </p>
            </div><!--history-txt-->
        </div><!--container-->
    </div><!--history-->
    <div id="our-staff">
        <div class="container">
            <div class="staff-txt">
                <h2>Ekibimiz</h2>
                <span>
                   Hepimiz gerçekliği sembol isimlere indirgemeye bayılırız ama Süpermen’in modası geçeli çok oldu. 
                   Dikkate değer bir başarı elde etmek ancak ekip işidir.
                </span>
            </div><!--staff-txt-->
            <ul class="staff">
                <li>
                    <img src="assets/img/kadin1.jpg">
                    <span class="name">Senem Aksevim</span>
                    <span>Web Designer</span>
                    <p>Quos quia provident consequuntur culpa facere ratione maxime
                        commodi voluptates id repellat velit eaque aspernatur expedita. 
                        Possimus itaque adipisci.
                    </p>
                </li>
                <li>
                        <img src="assets/img/kadin2.jpg">
                        <span class="name">Elif Tuğçe Altaş</span>
                        <span>Front-end Developer</span>
                        <p>
                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
                            totam rem aperiam, eaque ipsa quae ab illo 
                            inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                        </p>
                    </li>
                    <li>
                            <img src="assets/img/erkek1.jpg">
                            <span class="name">Güney Öztürk</span>
                            <span>Back-end Developer</span>
                            <p>
                                Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, 
                                vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
                            </p>
                        </li>
            </ul><!--staff-->
        </div><!--container-->
    </div><!--staff-->

Yine gördüğünüz gibi ilk önce genel kapsayıcı olan dive Id verdim. Daha sonra hemen bu divin altına container verdim ve yapacağım işlemleri container içerisine yaptım.

Hepinize iyi çalışmalar 🙂

Leave a Reply:

Your email address will not be published. Required fields are marked *