Div etiketinin yardımı ile tema düzenini değiştirin

Div etiketinin yardımı ile tema düzenini değiştirin, Gelişen her web tasarımcısının önünde olduğu benzer biçimde, yarattıklarımı, masaları yada kutuları ne yazacağım sorusuyla karşı karşıya kaldım. Ben mantıklı madde ile devam sonucu aldı ve temel plyucy ve eksileri her iki seçenek tahmini: tema TABLO deyimi + eski çapraz tarayıcı, kanıtlanmış yolu kolay ve (mantıksal yapı) düzeninde anlaşılması kolay + + div kadar mevcut olmadığını özelliklere haizdir – Bir ayar yapmak mümkün değildir css – Oldukça fazla oranda gereksiz DIV + kodu sayfa kodunu yüklemez, güzelleştirmenize olanak sağlar + sayfanın herhangi bir yerinde informasyon görüntüleyebilir, koddaki konumu ne olursa olsun + tüm kontroller yoldam dosyası üstünden yapılır
Değişik tarayıcılar tarafınca oldukça kaprisli bir halde algılanıyor
– Oldukça mühim dezavantajları var, en azından dikey merkezleme eksikliği

. Ve benim için seviye boks boks olanaklarını keşfetme zamanımın geldiğine karar verdim, bilhassa dünya hala durmuyor ve kutular, yeni bir teknoloji.

Üç sütunlu div düzeni

Okuyucularla, aşama olarak üç sütunda bir kutu düzeni meydana getirmeye çalışacağız. Not Defteri ile boş bir html sayfası açıyorum ve ana sayfa parametrelerini buraya giriyorum:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>başlık</title>
</head>
<body>
</body>
</html>

Şimdi hangi kutulara ihtiyacımız bulunduğunu bulma zamanı:

– Hadar (şablonumuzun başı )
– Vrapper (“zarflama” divs – buna sığacak öteki tüm kutular)
– Konteyner (bu diva sol, sağ ve orta sütunlara haiz olacak)
– Sol div (sol sütun)
– Orta Div (orta sütun)
– Sağ Div (sağ sütun)
– Altbilgi (div, şablonumuzu kapatırken, çoğu zaman telif hakkını verir)

Şimdilik kafi tema. Onları sayfamıza yerleştirelim. Ilk olarak, bir sarmalayıcı yapacağız ve derhal altına bir altlık koyacağız, hemen sonra üstbilgiyi sarmalayıcıya koyacağız ve derhal başlığın altına, sütun divalarını düzenleyeceğimiz bir konteyner koyacağız:

<! DOCTYPE html> 
<html>
<head>
<meta http-equiv = "İçerik Türü" content = "text / html; charset = utf-8" />
<title> Seviye </ title>
<style ENGINE = " metin / css ">
</ style>
</ head>
<body>
<div id =" sarmalayıcı ">
<div id =" başlık "> </ div>
<div id =" container ">
<div id =" left "> </ div>
<div id =" sağ "> </ div>
<div id =" orta "> </ div>
</ div>
</ div>
<div id =" altbilgi "> </ div>
</ body>
</ html>

Gördüğünüz benzer biçimde her kimliğe kimliğimi verdim. Şimdi divasımızı birbirine bakılırsa konumlandırmamız gerekiyor:

<! DOCTYPE html>
<html>
<head>
<meta http-equiv = "İçerik Türü" content = "text / html; charset = utf-8" />
<title> Seviye </ title>
<yoldam türü = " text / css ">
#header
#container min-width: 800px; <! - minimum genişliği belirtin ->
#center marj: 0px 200px 0px 200px;
#left float: left ; genişlik: 200px;
#right float: sağ; genişlik: 200px;
#footer
</ style>
</ head>
<body>
<div id = "sarıcı">
<div id = "başlık"> </ div>
<div id = "container ">      <div id = "merkez"> </ div>
</ div>
</ div>
<div id = "altbilgi"> </ div>
</ body>
</ html>

Bu stilleri yükledikten sonrasında şablonumuz azca oldukca tamamlandı, sadece hepsi bu kadar değil. Lütfen dikkat: sol yada sağ sütuna içerik eklemeye başlarsanız – bu esnetilir ve altbilgiyi geçer. Bunun sebebi parametresi olan kutuların yüzmüş olduğu gerçeğidir: sol; yada şamandıra: sağ; Ana kutuyu (yerleştirildiği kutu) germeyin.
Bu problemi çözmek için, “container” kutusunun altına, clear parametresiyle başka bir boş kutu eklememiz gerekir: both; ve bundan sonrasında, içerik sütunlarda arttıkça kap gerilir:

<! DOCTYPE html>
<html>
<head>
<meta http-equiv = "İçerik Türü" content = "text / html; charset = utf-8" />
<title> Seviye </ title>
<yoldam türü = " text / css ">
#header
#container min-width: 800px; <! - minimum genişliği belirtilir ->
#center margin: 0px 0px 200px 200px;
#left float: left ; genişlik: 200px;
#right float: sağ; width: 200px;
#footer
.clear clear: both;
</ style>
</ head>
<body>
<div id = "sarıcı">
<div id = "başlık"> </ div>      <div id = "sağ"> </ div>
<div id = "orta"> </ div>
<div derslik = "temizle"> </ div>
</ div>
</ div>
<div id = "altbilgi "> </ div>
</ body>
</ html>

Fakat hepsi bu kadar değil …

Altbilgiyi ekranın altına yapıştırın

Sık sık, sayfada oldukca azca içerik olduğunda altbilginin altında çirkin bir geçiş oluşur ve bu da tasarımı tamamen bozabilir. Bunu önlemek için, ilkin ana divaya tarayıcı penceresinin yüksekliğine bakılırsa% 100 bir yükseklik vermemiz ve arkasından altbilgiyle, bilmemiz ihtiyaç duyulan altbilginin genişliğine getirmemiz gerekir.
İlk ilkin, diva’nın yüksekliğini id = wrapper ile% 100 olarak ayarlayın:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">/* Yükseklik ayarları 100% */
html, body height:100%;
#wrapper height:auto !important;height:100%;min-height:100%;
/* -- -- */#header height:100px;
#container /*  */
#center margin:0px 200px 0px 200px;
#left
#right float:right; width:200px;
#footer height:100px;
.clear
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
<div class="clear"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>

Ve şimdi ekranın ötesine geçen altbilgiyi yere taşıyoruz, bunun için onu en yükseğe çıkarıyoruz ve içeriğin altbilgiye girmemesi için başka bir boş div payanda kuracağız:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
html, body height:100%;
#wrapper height:auto !important;height:100%;min-height:100%;
#header height:100px;
#container /*  */
#center margin:0px 200px 0px 200px;
#left
#right float:right; width:200px;
#footer height:100px;margin-top:-100px; /*  */
.clear
#space height:100px; /* */
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
<div class="clear"></div>
<div id="space"></div> <!-- div- -->
</div>
</div>
<div id="footer"></div>
</body>
</html>

Hepsi bu kadar, her şeyi mümkün olduğunca detaylı bir halde açıklamaya çalıştım.