HTML divin arkaplanı

5 Tem 2013
133
0
html bir kodlama yapıyorum.ana olarak 3 tane div yaptım.2'si kenarda boşluklar bırakmak için diğeri normal görünümün yapılacağı yer.

ancak dive yüklediğim arkaplan büyük olduğu için diğer divler aşağı kayıyor.Ben bu arkaplanı nasıl küçültebilirim?
 

ALcatraz'

Kıdemli Üye
30 May 2013
4,338
4
İstanbul
Kod:
<div id="tamEkranArdAlan"><img src="[COLOR=Red]url[/COLOR]" width="100%" height="100%" /></div> 
<div id="icerik">
 ... 
</div

Sayfamızı içerik ve ardalan resmi olarak ikiye ayırıyoruz.

Kod:
html, body {height:100%; margin:0; padding:0;}

Sayfanın boşluklarını sıfırlıyoruz.

Kod:
#tamEkranArdAlan {     position:fixed;      top:0;      left:0;      width:100%;     height:100%; }

Zemine yerleştirilecek resmi sabitleyip üstten ve soldan başlangıç noktasına yerleştiriyoruz ve genişlik ve yükseklik değerini %100 veriyoruz.
Kod:
#icerik {     position:relative;      z-index:1;      width:650px;      padding:20px;     font:14px/1.8em Arial;      margin:40px auto;      border-radius:10px;     color:#333;     background-color:#fff }

İçerik alanını postion:relative; z-index:1 değeri atayarak içerikteki seçilme ve linklerde sorun olmasını engelliyoruz. Diğer tanımlar içerik alanının görselliğini ayarlamak içindir.
Bu kodlar ie6 hariç çalışırken ie6’da çalışmıyor ie6’da çalışması için


Kod:
*html {     overflow-y:hidden; }  *html body {     overflow-y:auto; }  *html #tamEkranArdAlan {     position:absolute;      z-index:-1; }  *html #icerik{     position:static;     padding:20px; }


ie6 postipon:fixed desteklemediği için postion:absolute değeri tanımlıyoruz. İçerik alanınıda postion:static tanımlıyoruz. Kaydırma çubuğu sorunlarını halletmek için body ve html tanımlarımızı yapıyoruz.
Sonuç olarak tüm tarayıcılarda çalışan sayfa zeminini kapsayan zemin resmi tanımlamış olduk.


Kod:
<div id="tamEkranArdAlan"><img src="url" width="100%" height="100%" /></div> <div id="icerik"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus luctus mattis. Phasellus tortor mi, sagittis ac porttitor non, imperdiet vitae diam. Fusce sit amet ipsum lorem. Cras nunc leo, luctus blandit volutpat eget, fermentum ac dui. Quisque massa lacus, condimentum et mollis id, fringilla placerat quam. Aenean sagittis posuere elementum. Suspendisse eget magna mauris, in pellentesque ipsum. Nulla mi lacus, <a href="#">sagittis quis</a> pretium vel, volutpat vel nulla. Nunc fringilla interdum enim eget tempus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus pellentesque, lacus id dictum ullamcorper, quam ante congue nulla, vel dignissim diam risus ac est. Curabitur nec neque leo, eget venenatis sapien. In eget velit at arcu pharetra vulputate. Vestibulum vel dui eget eros aliquam fringilla. Donec massa eros, rhoncus fringilla laoreet ut, tincidunt eu augue. Sed luctus diam id lectus venenatis laoreet. Maecenas lacus lorem, mollis et ornare vel, facilisis eu enim. Aliquam congue, diam non imperdiet sagittis, erat lacus lacinia nunc, vitae dignissim est diam non augue. Nulla facilisi.</p>  <p>Suspendisse ut urna quis nisi condimentum fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin vehicula feugiat nibh, eget iaculis lacus dictum eu. In hac habitasse platea dictumst. Nullam malesuada porttitor accumsan. Integer malesuada massa quis purus sollicitudin lacinia. Mauris viverra cursus augue nec lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum nisi risus, suscipit quis dignissim eu, hendrerit a purus. Nunc nec risus nunc, quis elementum nunc. Nam eleifend feugiat mollis. Proin ipsum sem, pulvinar eget auctor sit amet, aliquet in purus. Sed eget ipsum sapien. Sed a nibh nec eros tincidunt hendrerit vel eu justo. Cras at tortor justo, id congue odio. Phasellus eget mauris eget ante iaculis cursus in et sem. Sed sed condimentum arcu. Nullam vel erat at erat pretium dignissim.</p>  <p>Suspendisse mollis sagittis augue, in fringilla ipsum posuere at. Nam convallis massa sed metus mattis id dictum lectus lacinia. Maecenas ac adipiscing leo. Duis vitae mi nisi. Nulla lectus ligula, ultricies quis vestibulum pharetra, tempus auctor enim. Nunc imperdiet tortor ligula. Sed ultrices placerat leo at dapibus. Ut suscipit lacinia posuere. Maecenas sit amet risus molestie est elementum sodales quis eu leo. Suspendisse molestie purus ac lectus rutrum hendrerit.</p>  <p>Vestibulum lobortis purus vel lorem tempus fermentum. In lobortis dui ut felis scelerisque vitae molestie justo ornare. Vestibulum metus nisi, porttitor vitae blandit vitae, tincidunt quis enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla eget libero et neque rhoncus sodales in sit amet ipsum. Mauris malesuada semper mauris quis sollicitudin. Duis et ante vulputate nisl pulvinar congue nec sit amet lacus. Proin faucibus, turpis in imperdiet accumsan, libero ligula rhoncus nulla, et placerat justo felis eget purus. Vestibulum ultrices nunc quis orci pretium ultrices. Fusce vitae diam ipsum, tempor placerat purus. Sed auctor nibh sit amet elit interdum sollicitudin.</p>  <p>Proin fringilla, lectus vel cursus pharetra, orci metus posuere turpis, eget pulvinar lorem ipsum non sapien. Curabitur eu elit quam, in condimentum purus. Nulla ornare euismod velit in luctus. Morbi tristique pretium pretium. Phasellus tincidunt sagittis tincidunt. Duis pretium, ipsum imperdiet vestibulum ornare, urna ipsum vestibulum sapien, in consequat ipsum lorem eget dui. Aenean egestas mi vel diam iaculis eget lacinia metus ullamcorper. Suspendisse ut elementum odio. Aenean suscipit interdum lorem, et facilisis odio mattis a. Maecenas sit amet ipsum orci. Duis tempor ipsum eu orci imperdiet at luctus erat mollis.</p> </div>

Kaynak : Sayfa Zeminini Tamamen Kaplayan Resimler Tanımlamak
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.