1. घर
  2. सवाल और जवाब
  3. जावास्क्रिप्ट, मुझे नहीं पता कि मैं क्या कर रहा हूं

जावास्क्रिप्ट, मुझे नहीं पता कि मैं क्या कर रहा हूं

2012-03-27 11 views
5

मैं अपनी स्क्रीन रिज़ॉल्यूशन चौड़ाई के सापेक्ष तत्वों की चौड़ाई सेट करने के लिए जावास्क्रिप्ट का उपयोग करने की कोशिश कर रहा हूं। मैं थोड़ा सा समझाऊंगा क्यों ... मेरे पास यह छवि है: http://i.stack.imgur.com/HeXvu.pngजावास्क्रिप्ट, मुझे नहीं पता कि मैं क्या कर रहा हूं

मैं चाहता हूं कि यह मेरा हेडर बन जाए, मैं नहीं चाहता कि यह पूरी तरह से स्थिर छवि हो, मैं चाहता हूं कि शीर्षलेख के साथ हेडर स्केल करें स्क्रीन रिज़ॉल्यूशन, इसलिए मैं अपने सीएसएस और इस तरह एचटीएमएल कुछ ... की स्थापना की

HMTL:

<html> 
    <body> 
     <div class="globalContainer"> 
      <div id="headerMain"> 
       <div class="headerLeft"> 
       </div> 
       <div class="headerRight"> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

सीएसएस:

#headerMain { 
    height: 79px; 
    background-image: url(../img/global/middleHeader.png); 
    background-repeat: repeat-x; 
} 
.headerLeft { 
    width: 63px; 
    height: 79px; 
    background-image: url(../img/global/leftHeader.png); 
    background-repeat: no-repeat; 
    float: left; 
} 
.headerRight { 
    width: 63px; 
    height: 79px; 
    background-image: url(../img/global/rightHeader.png); 
    background-repeat: no-repeat; 
    float: right; 
}

अब, क्या मैं यहाँ करना कोशिश कर रहा हूँ, पूर्व परिभाषित डब्ल्यू है हेडर के बाएं और दाएं ठीक हिस्सों के लिए idths और ऊंचाई, और प्रारंभिक हेडर div (मध्य छवि पृष्ठभूमि के रूप में सेट के साथ) का उपयोग करें। यहां एकमात्र समस्या का सामना करना पड़ा है, यह मुख्य div (हेडर के मध्य भाग के साथ) की पृष्ठभूमि है, इस छवि के पीछे दिखाता है कि हेडर का सही वक्र है, जैसे: http://i.stack.imgur.com/XEq85.png

कैसे करें मैं यह करने के लिए चारों ओर मिलता है? जावास्क्रिप्ट का उपयोग करना एक तरीका था। यहां मैं जो सोच रहा था, सबसे पहले स्क्रिप्ट "स्क्रीन.विड्थ" का उपयोग कर उपयोगकर्ताओं की स्क्रीन चौड़ाई लाती है, फिर मान से "63" घटाएं (शीर्षलेख के दाएं घुमावदार भाग की चौड़ाई), और उस मान को मुख्य शीर्षलेख के रूप में सेट करें तत्व की चौड़ाई, जिसे सैद्धांतिक रूप से पृष्ठभूमि समस्या को ठीक करना चाहिए। एकमात्र समस्या यह है कि, मेरे पास कोई जावास्क्रिप्ट अनुभव नहीं है और मुझे कुछ भी नहीं करना है, मुझे पता है कि कुछ चीजों के बारे में मुझे पता है, क्योंकि ज्यादातर कुछ मैंने कुछ अन्य जेएस कोड कॉपी/चिपकाए हैं मेरे पृष्ठों का ... हाँ। बहुत बुरा। तो मैं क्या करूं? o_O

स्रोत

2012-03-27 Nyanja

+0

सही div बाहर ले जाने और इसे मुख्य div के ऊपर रखने का प्रयास करें ताकि यह एक भाई हो। –

+0

कृपया अपना प्रश्न एक वर्णनात्मक शीर्षक दें। –

उत्तर

1

आप headerMain div से बाहर छोड़ दिया और सही हैडर divs लेने की कोशिश कर सकते हैं और उन्हें में एक ही स्तर पर रखने डोम। तो फिर इस संशोधित सीएसएस का उपयोग करें:

#headerMain { height: 79px; background-image: url(../img/global/middleHeader.png); background-repeat: repeat-x; position:absolute; top:0px; left:63px; right:63px;} 

.headerLeft { width: 63px; height: 79px; background-image: url(../img/global/leftHeader.png); background-repeat: no-repeat; position:absolute; top:0px; left:0px;} 

.headerRight { width: 63px; height: 79px; background-image: url(../img/global/rightHeader.png); background-repeat: no-repeat; position:absolute; top:0px; right:0px;}

स्रोत

2012-03-27 02:27:22 KodeKreachor

+0

बहुत अच्छा काम किया, बहुत बहुत धन्यवाद! : ओ – Nyanja

+0

आपका स्वागत है – KodeKreachor

1

आप कुछ like this क्या करना चाहते हो सकता है:

<div id="header"> 
    <div class="leftCurve"></div> 
    <ul> 
     <li> 
      <a href="#">link</a> 
     </li> 
     <li> 
      <a href="#">link</a> 
     </li> 
     <li> 
      <a href="#">link</a> 
     </li> 
    </ul> 
    <div class="rightCurve"></div> 
</div>​ 

#header{ 
    overflow:hidden; 
    zoom:1; 
} 

#header > *{ 
    float:left; 
} 

#header .leftCurve{ 
    /*curve image*/ 
    width:100px; /*adjust dimensions accordingly*/ 
    height:100px; /*adjust dimensions accordingly*/ 
    background:blue; 
} 

#header .rightCurve{ 
    /*curve image*/ 
    width:100px; /*adjust dimensions accordingly*/ 
    height:100px; /*adjust dimensions accordingly*/ 
    background:blue; 
} 

#header ul{ 
    /*repeating bg image*/ 
    overflow:hidden; 
    zoom:1; 
    width: 20%; 
} 
#header ul li{ 
    float:left; 
    width:33%; /* 100/number of items, in percent */ 
} 

#header ul li a{ 
    display:block; 
    background:red; 
    border: 1px solid #0F0; 
}

स्रोत

2012-03-27 02:26:01 Joseph

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

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