JavaScript，不知道我在做什么

Question

I am trying to use JavaScript to set an elements width relative to their screen resolution width. 我正在尝试使用JavaScript来设置相对于屏幕分辨率宽度的元素宽度。 I'll explain a bit why... I have this image: http://i.stack.imgur.com/HeXvu.png 我会解释一下为什么......我有这个形象： http ： //i.stack.imgur.com/HeXvu.png

I want this to be my header, by I don't want it to be a fully static image, I want the header to scale with the screen resolution, so I set up my CSS and HTML something like this... 我希望这是我的标题，我不希望它是一个完全静态的图像，我希望标题与屏幕分辨率一致，所以我设置我的CSS和HTML这样的东西......

HMTL: HMTL：

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

CSS: CSS：

#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;
}

Now, what I am trying to do here is, have predefined widths and heights for the left and right cured parts of the header, and use initial header div (with the middle image set as background). 现在，我在这里要做的是，为头部的左右固化部分预定义宽度和高度，并使用初始标题div（中间图像设置为背景）。 The only problem I have encountered here is this, the background of the main div (one with the middle part of the header), shows behind the image that is the right curve of the header, like this: http://i.stack.imgur.com/XEq85.png 我在这里遇到的唯一问题是这个，主div的背景（一个带有标题的中间部分），显示在图像后面是标题的右曲线，如下所示： http：//i.stack .imgur.com / XEq85.png

How do I get around to doing this? 我该如何解决这个问题？ One way I could think of was to use JavaScript. 我能想到的一种方法是使用JavaScript。 Here's what I was thinking, first the script fetches the users screen width using "screen.width," then subtract "63" from the value (the width of the right curved part of the header), and set that value as the main header element's width, which should theoretically fix the background issue. 这就是我的想法，首先脚本使用“screen.width”获取用户屏幕宽度，然后从值（标题的右弯曲部分的宽度）中减去“63”，并将该值设置为主标题元素的宽度，理论上应该解决背景问题。 The only problem is, I have little to no JavaScript experience and don't know how to do anything, the only reason I know of the few things I do, is mostly because I have copy/pasted a few other JS codes in a few of my pages... Yeah. 唯一的问题是，我几乎没有JavaScript经验而且不知道如何做任何事情，我知道我做的一些事情的唯一原因，主要是因为我已经复制/粘贴了一些其他JS代码我的页面...是的 Pretty bad. 很糟糕。 So, what do I do? 那么，我该怎么办？ o_o O_O

Answer 1

以下是您要实现的目标的实例 - http://jsfiddle.net/Tq33c/ 。

Answer 2

you might wanna do something 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;
}

 

Answer 3

You could try taking the left and right header divs out of the headerMain div and placing them at the same level in the DOM. 您可以尝试从headerMain div中取出左右标题div并将它们放在DOM中的相同级别。 Then use this modified CSS: 然后使用这个修改过的CSS：

#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;}

JavaScript，不知道我在做什么

问题描述

3 个解决方案

解决方案1
2 2012-03-27 02:44:38

解决方案2
1 2012-03-27 02:26:01

解决方案3
1 已采纳 2012-03-27 02:27:22

JavaScript，不知道我在做什么

问题描述

3 个解决方案

解决方案1 2 2012-03-27 02:44:38

解决方案2 1 2012-03-27 02:26:01

解决方案3 1 已采纳 2012-03-27 02:27:22

解决方案1
2 2012-03-27 02:44:38

解决方案2
1 2012-03-27 02:26:01

解决方案3
1 已采纳 2012-03-27 02:27:22