Merhaba. Başlık ne kadar açık oldu bilemiyorum. Şimdi kafama takılan soru şu: biz siteyi temel olarak kodlarken genel bir div içine alıyoruz, aldığımız zaman hazırladığımız navbar da bu genel divin ölçüleri içinde kalıyor. Ancak ben hem genel div kullanıp, hem de navbarın arka planını sağa ve sola sonsuz uzayacak şekilde nasıl yapabilirim?
Teşekkürler
Örnek:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navbar</title>
<style>
body {
margin: 0;
}
nav {
background-color: black;
height: 20px;
}
</style>
</head>
<body>
<nav></nav>
</body>
</html>
nav’in display’i block olduğu için zaten sayfayı yatay olarak olduğu gibi kaplayacaktır. Başka bir deyişle genişliği yüzde yüz olacaktır, sağa ve sola uzayacaktır ancak bunu görebilmek için bu örnekte navbara bir renk ve yükseklik verdim.
Hacım çok teşekkürler ancak biz siteyi kodlarken tüm body kısmını “container” divinin içine almıyor muyuz? Aldığımız zaman navbar bu container dışına nasıl çıkacak? Anlatabildim mi?
<body>, <html> dışında herhangi bir tagin içine alınmaz ki ?
Yok şöyle izah edeyim.
<!DOCTYPE html>
<html>
<head>
<title>Web Çalışması</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<nav>
<ul>
<li><a href="#">Deneme</a></li>
<li><a href="#">Deneme</a></li>
<li><a href="#">Deneme</a></li>
<li><a href="#">Deneme</a></li>
<li><a href="#">Deneme</a></li>
</ul>
</nav>
</div>
</body>
</html>
Buradaki gibi siteyi kodlamaya başlamadan önce tüm siteyi <div id="container"></div> içine almamız tavsiye ediliyor ya hani, ben de siteyi bu şekilde kodluyorum ancak navbar kısmını bu divin içinde kaldığı için sağa veya sola uzatamıyorum. Yani eğer container divimin width özelliği 960px ise, navbar da maksimum 960px oluyor. Eğer navbara width:100% özelliği verirsem, o zaman da yine container divinin içinden başlıyor ve sadece sağa doğru sonsuz uzanıyor.
Anlatabildim mi?
Biraz şüpheli bir tavsiye.
Böyle bir sorun yaratacaksa bundan kaçınmalısınız. Aksi takdirde mesela genişliği 960px olan bir container’ın içinden navbar gibi bir elementin ya da herhangi genişliğini parent elementin (container) dışına çıkarmak istediğiniz bir elementin genişliğini sabit değerler vererek belirlemek zorunda kalırsınız ve bu iyi bir fikir değil. Zaten child element’in parent element’in dışına çıkması durumu da pek olağan bir şey değil.
Yine de bunu yapmak istiyorsanız şöyle bir şey denenebilir:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navbar</title>
<style>
#container {
width: 960px;
}
body {
margin: 0;
}
nav {
background-color: black;
height: 20px;
}
</style>
</head>
<body>
<div id="container">
<nav></nav>
</div>
<script>
document.getElementsByTagName("nav")[0].style.width =
window.innerWidth + "px";
</script>
</body>
</html>
Ama ilkel.
Evet bu şekilde yaptığım zaman da istediğim gibi olmuyor. Ancak ben hangi siteyi kurcalarsam kurcalayayım, genellikle tüm siteyi bir div içine aldıklarını görüyorum. Bunun alternatif yöntemlerini nereden öğrenebilirim?
Container’a bahsettiğiniz türden, içindeki child elementleri kısıtlayabilecek türden stiller vermediğiniz sürece bu herhangi bir sorun yaratmaz. İsterseniz böyle bir container oluşturabilirsiniz ama dediğim gibi bu ve bunun gibi sorunlar göz önünde bulundurulmalı.
Bunu yazarken başka bir şey düşünmüştüm o yüzden şimdi geri alıyorum. Dediğiniz gibi zaten sıkça yapılan bir şey.
Eyvallah dostum. O halde bunu, container kullanarak nasıl yapabileceğimi anlatan birileri inşallah çıkar diyeyim 
Desteğin için teşekkürler 
"bu"ndan kastınız bir navbarı parent elementinin genişliğinin dışına çıkarıp yatay olarak sayfanın tamamını kaplamasını sağlamaksa bunu zaten göstermiştim:
Hacım bu kod sende çalışıyor mu? Bende çalışmıyor çünkü. Hatta resmini atayım:
Gördüğün gibi container divinin içinde kalıyor ve genişlemiyor.
Kodun tamamını doğru kopyaladığınızdan emin misiniz ? Çünkü iki sefer eksik alıntı yapmışsınız. Ayrıca evet, çalışıyor.
Tamamdır. Kusuruma bakma uğraştırdım seni de Javascript kullanılmış sanırım. Çalışacağım inşallah. Sağolasın
Bootstrap’a bakmanızı tavsiye ediyorum. Orada hazır ve çeşitli alternatifler mevcut. CSS’den daha iyi bence.
Teşekkürler hocam. CSSte derinleşmeden ona geçmeyi tavsiye eder misiniz?
Çok da ahkam kesmek istemiyorum çünkü derinlemesine bilmiyorum ama mesela ben kendim bir site yaptım ve hiç CSS bilmiyorum. CSS’in bazı hazır şablonlarını internetten aldım gerisini Bootstrap’le hallettim. Yani bana sorarsan CSS ile vakit kaybetme. Gerek yok.
Eyvallah hocam, teşekkür ederim yorumun için. İnşallah dikkate alacağım. En azından bootstrap’e de yöneleceğim diyelim
Bootstrap bir CSS framework’ü. Yani yine CSS kullanmış oluyorsunuz. “Javascript kullanma, React kullan, daha iyi” demeye benziyor.
Kendi fikrimi söylüyorum.
En azından bir blog sayfasının iskeletini görselleştirebilecek kadar CSS bilmenin gerektiğini düşünüyorum.
Dediğim gibi işin teorik kısmını çok bilmiyorum ben pratik yönüne bakıyorum. CSS öğrenmeden de site yapılabiliyor demek istiyorum. Siz söyleyince baktım. Bootstrap HTML, CSS, LESS (v3), SASS (v4) ve JavaScript dilleri kullanılarak hazırlanmış. Elde 3. nesil framework varken niye 2. nesil öğrenmekle zaman kaybedilsin ki. Öğrense daha mı iyi olur. Şüphesiz.
