Hepinize merhaba sevgili okurlarım ve Hayırlı Cumalar.
Bu gün sizlere ‘DİV Yerleştirme’ konusunu anlatacağım. HTML kodlarını kullanarak bu işlemi gerçekleştireceğiz. Öncelikle şöyle bir açıklama yapayım: Div sayfanın her yerine yerleştirebileceğiniz bir bloktur. İçine her türlü içerik girilebilir. Div’in asıl amacı sayfayı belirli bloklara bölerek içerik girişlerinin daha rahat yapılması, arka planların daha rahat atanması, özelliklerin daha rahat kullanılmasıdır.
Bir Divi ekranın tam ortasına yerleştirmek hemen hemen hepimizin ihtiyacı olmuştur. Tanımladığınız bir divi CSS kullanarak çok basit bir şekilde ekranın ortasına yerleştirebiliriz.
İlk olarak bir HTML sayfası oluşturun ve ekranın tam ortasında gözükmesini istediğimiz divi aşağıdaki gibi tanımlayın.
1 <div id="container">
2 <p>Ekranın Ortasına Gelecek Olan Div</p>
3 </div>
———————————————————————————-
Div için sabit bir genişlik ve yükseklik verelim.
1 #container {
2 width: 100px; 3 height: 100px; 4 background-color: #567; 5 } 1 #container { 2 width: 100px; 3 height: 100px; 4 background-color: #567; 5 position:absolute; 6 left: 50%; 7 top: 50%; 8 } 1 #container {
2 width: 100px; 3 height: 100px; 4 background-color: #567; 5 position:absolute; 6 left: 50%; 7 top: 50%; 8 margin-left: -50px; 9 margin-top: -50px; 10 } 1 <html>
2 <head> 3 <style> 4 #container 5 { 6 width: 100px; 7 height: 100px; 8 background-color: #567; 9 position: absolute; 10 left: 50%; 11 top: 50%; 12 margin-left: -50px; 13 margin-top: -50px; 14 } 15 </style> 16 </head> 17 <body style="background:#000"> 18 <div id="container"> 19 <p>Ekranın Ortasına Gelecek Olan Div</p> 20 </div> 21 </body> 22 </html>- emresupcin
- Html
- 1 Mart 2013 - 14:49
- 1 Yorum
- 5910 Görüntülenme
div div etiketi div etiketi kullanımı div tagı ekrana div terleştirme ekranın ortasına div html div etiketi html div tagı ortaya div yerleştirme
Merhaba hocam benim istediğim bir tane div ama full ekranı kaplayacak şekilde olması bunla ilgili yapılabilecek bir şey var mı?