मैं एक लेआउट बनाना चाहता हूं जहां मैं बाईं ओर एक छवि और दाईं ओर सामग्री प्रदर्शित करना चाहता हूं। सामग्री स्क्रॉल होने पर छवि स्थिर रहनी चाहिए।फिक्स्ड div पृष्ठभूमि
सीएसएस मैं उपयोग कर रहा हूँ:
<style type="text/css">
#page-container
{
margin:auto;
width:900px;
background-color:Black;
}
#header
{
height:150px;
width:650px;
}
#main-image
{
float:left;
width:250px;
height:500px;
background-image:url('../images/main-image.png');
position:fixed;
}
#content
{
margin-left:250px;
padding:10px;
height:250px;
width:630px;
background-color:Teal;
}
</style>
HTML: इस साइट पर समय की
<div id="page-container">
<div id="header"><img src="someimagelink" alt="" /></div>
<div id="main-image"></div>
<div id="content"></div>
</div>
एक बहुत और मुझे लगता है कि पृष्ठभूमि लगाव को समझ लिया है: निर्धारित पदों संपूर्ण व्यूपोर्ट में छवि और तत्व पर लागू नहीं है।
मेरा सवाल है कि मैं इस तरह के लेआउट बनाने के बारे में कैसे जा सकता हूं?
मैं उस छवि को पृष्ठभूमि छवि के रूप में नहीं देना चाहता, जैसे खिड़की का आकार बदल गया है, यह छिपी हो सकती है। मैं स्क्रॉलबार दिखाना चाहता हूं अगर खिड़की का आकार 900px से कम है (मेरी पृष्ठ चौड़ाई) ताकि छवि हर समय देखी जा सके।
यह कोड के साथ होता है, हालांकि मैं छवि को इसके बजाय अपने तत्व पर शुरू करना चाहता हूं।
मैं यह करने के बारे में कैसे जा सकता हूं ??
अग्रिम धन्यवाद :)
संपादित:
मैं सलाह मान ली और एक स्थिति कहा: # मुख्य छवि के लिए तय की संपत्ति। जैसा ऊपर दिखाया गया है एचटीएमएल और सीएसएस का उपयोग करना। अब, मैं हेडर को भी ठीक करना चाहता हूं ताकि यह हिल न सके। असल में, केवल मेरी सामग्री अनुभाग स्क्रॉल करना चाहिए। हालांकि, अगर मैं कोई स्थिति जोड़ता हूं: हेडर पर तय किया गया है, तो मेरी # मुख्य-छवि और # सामग्री अब मेरे शीर्षलेख के शीर्ष पर बैठती है। यदि मैं मार्जिन-टॉप जोड़ता हूं: 150px (क्योंकि मेरी हेडर ऊंचाई 150px है) # मुख्य-छवि पर, यह ठीक काम करता है और उचित रूप से नीचे चला जाता है। हालांकि यदि मैं मार्जिन-टॉप जोड़ता हूं: 150px #content पर, मेरा हेडर 150px से नीचे चला जाता है और अभी भी मेरे #content के शीर्ष पर बैठता है। क्या कोई यह बता सकता है कि यह क्यों हो रहा है? अग्रिम में धन्यवाद :)
आप एक नया सवाल के रूप में अपने संपादित repost करने के लिए चाहते हो सकता है। –