सीएसएस: पृष्ठ के शीर्ष पर पतला बैनर (इस पृष्ठ पर नारंगी जैसा)

मुझे इस पृष्ठ पर नारंगी अधिसूचना की तरह पेज के शीर्ष पर एक पतला बैनर डालना होगा। मुझे इसे पूरी तरह से तैनात करने की आवश्यकता है, क्योंकि जब आप उस पर क्लिक करते हैं तो उसे ड्रॉप करना होगा (वर्तमान पृष्ठ पर, वर्तमान पृष्ठ को नीचे नहीं दबाएं)। बैनर को खिड़की की पूरी चौड़ाई फैलाने की जरूरत है लेकिन सामग्री को बीच में 800px के भीतर होना चाहिए। मैंने इसे पहले से ही बनाया है लेकिन मुझे सीएसएस की स्थिति में परेशानी हो रही है।सीएसएस: पृष्ठ के शीर्ष पर पतला बैनर (इस पृष्ठ पर नारंगी जैसा)

धन्यवाद !!

स्रोत

2009-10-15 JD Isaacks

नीचे एक उदाहरण है। मुख्य #banner तत्व पूर्ण स्क्रीन फैलाता है और position: absolute; top: 0; left: 0 का उपयोग करके व्यूपोर्ट के शीर्ष पर पिन किया जाता है। width: 100% इसे पूर्ण चौड़ाई खींचता है।

#banner-content वह जगह है जहां आप अपनी सामग्री डालते हैं। यह चौड़ाई में 800px पर केंद्रित और तय है। मैंने इसके चारों ओर एक सीमा रखी है ताकि आप देख सकें।

नोट: मैंने डिफ़ॉल्ट पैडिंग को साफ़ करने के लिए सभी तत्वों के मार्जिन और पैडिंग को 'रीसेट' भी किया है। आप अपने अंतिम आवेदन में एरिक मेयर के Reset CSS जैसे कुछ का उपयोग करना चाह सकते हैं।

<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>

स्रोत

2009-10-15 14:40:50 Olly

मैंने इसी तरह के मुद्दे पर शोध करते समय इसके लिए एक पहेली बनाई: http://jsfiddle.net/marvo/FJZfW/ – Marvo

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

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

#banner_contents { 
    width: 800px; 
}

दो divs बनाने के समान सरल होना चाहिए ... मुख्य सामग्री सामग्री को लपेटती है और इसे केन्द्रित करती है।

स्रोत

2009-10-15 14:34:08 espais

यह ओपी की आवश्यकता नहीं होगी। यह पाठ को केंद्रित करेगा, लेकिन आंतरिक div नहीं। बाहरी मार्जिन: 0 ऑटो भी अनावश्यक है। – alex

सीएसएस: पृष्ठ के शीर्ष पर पतला बैनर (इस पृष्ठ पर नारंगी जैसा)

उत्तर

संबंधित मुद्दे