CSS: Sayfanın üstündeki ince afiş (bu sayfadaki turuncu renkli gibi)

Sayfanın üst kısmına, bu sayfada bulunan turuncu bildirim gibi ince bir afiş yapıştırmalıyım. Yine de tam olarak konumlandırılmalıyım, çünkü üzerine tıkladığınızda aşağıya inmeniz gerekir (geçerli sayfa üzerinden, geçerli sayfayı aşağıya itmemek). Banner, pencerenin tüm genişliğini germek zorundadır, ancak içeriğin ortada 800 piksel içinde olması gerekir. Zaten yapmışım ama CSS'nin konumlandırmasında sorun yaşıyorum.CSS: Sayfanın üstündeki ince afiş (bu sayfadaki turuncu renkli gibi)

Teşekkürler!

kaynak

2009-10-15 JD Isaacks

Aşağıda bir örnektir. Ana #banner öğesi, tam ekranı uzatır ve position: absolute; top: 0; left: 0'u kullanarak görünümün üstüne sabitlenir. width: 100%, tam genişliğini uzatır.

İçeriğinizi koyduğunuz yer, #banner-content'dur. Bu, 800px genişliğinde ortalanmış ve sabitlenmiştir. Görebildiğiniz için etrafına bir sınır çizdim.

Not: Ayrıca, varsayılan dolgulamayı temizlemek için tüm öğelerin kenar boşluklarını ve dolgularını 'sıfırladım'. Son uygulamanızda Eric Meyer'in Reset CSS gibi bir şey kullanmak isteyebilirsiniz.

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>Test</title> 
    <style type="text/css" media="screen"> 
    * { 
     margin: 0; 
     padding: 0; 
    } 

    div#banner { 
     position: absolute; 
     top: 0; 
     left: 0; 
     background-color: #DDEEEE; 
     width: 100%; 
    } 
    div#banner-content { 
     width: 800px; 
     margin: 0 auto; 
     padding: 10px; 
     border: 1px solid #000; 
    } 
    div#main-content { 
     padding-top: 70px; 
    } 
    </style> 
</head> 

<body> 
    <div id="banner"> 
    <div id="banner-content"> 
    This is your banner text, centered and fixed at 800px in width 
    </div> 
    </div> 
    <div id="main-content"> 
    <p>Main page content goes here</p> 
    </div> 
</body> 
</html>

kaynak

2009-10-15 14:40:50 Olly

Benzer bir sorunu araştırırken bunun için bir keman oluşturdum: http://jsfiddle.net/marvo/FJZfW/ – Marvo

#banner { 
    position: absolute; 
    top: 0px; 
    left: 0px; 

    margin: 0 auto; 
    text-align: center; 
} 

#banner_contents { 
    width: 800px; 
}

İki div yapmak kadar basit olmalı ... ... en önemlisi içeriği sarar ve ortalar.

kaynak

2009-10-15 14:34:08 espais

Bu, OP'nin gerektirdiği şeyi yapmayacaktır. Metni ortalayacak, ama iç div değil. Dış kenar boşluğu: 0 otomatik de yedeklidir. – alex

CSS: Sayfanın üstündeki ince afiş (bu sayfadaki turuncu renkli gibi)

cevap

İlgili konular