Question

For the last few days I have been designing a layout for my website based on some art I drew. The layout turned out great on Chrome and Firefox and then I checked IE and it looked horrible.

我知道,只有IE 7支持固定的职位,但它不为我工作......我尝试了十几部不同的法典,这些法典应让形象走向底层,而我所布设的层次却有多少,这并不奏效。

http://lindsiria.net/

如你所见,我有两个问题。我的全局布局被移走,我的主要旗帜形象并非处于底层。我很想知道,有人是否能够研究这一法典,帮助我找到解决这一令人厌恶的错误的办法。我希望我将这一权利张贴在前面。

<code>
<!-- language: lang-css -->

* { margin:0;}
body {
    background-color:#2397b6;
    background-image: url("mainbackgroundrepeat1"); 
    background-repeat: repeat-x;
    background-position:bottom;
    background-attachment:fixed;
    height:100%;
    }

a:link { color:#2b8c56;}
a:visited {color:#2b8c56;}
a:hover {color:#f0faef;}

#banner_wrap{
    width: 100%;
    display: block;
    position:fixed;
    bottom:0;
    margin-left:800px;
    width:500px;
    z-index:-1; 
    height: 353px;

}

#logo_wrap {
    position:absolute;
    width:600px;
        margin-left:200px;
    margin-top:2px;
 }

#wrap {
    position:absolute;
    width: 580px;
    min-height:100%;
    height: auto;
    margin: 180px 0 -353px 180px;
    background-color:#b2d6df;
    border: 10px solid #2b8c56;
    text-align: left;
        padding: 10px;
 }

#footer {
    font-size: .75em;
    font-style: italic;
    text-align: left;

}
/* START NAVIGATION */

#centeredmenu {
   float:left;
   width: 600px;
   margin-left:180px;
   margin-top:100px;
   background:#b2d6df;
   border: 10px solid #2b8c56;
   overflow:hidden;
   position:absolute;
}
#centeredmenu ul {
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
#centeredmenu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
#centeredmenu ul li a {
   display:block;
   width: 77px;
   padding:9px;
   margin:0 12px 0 12px;
   border-bottom: 4px solid #5bc668;
   color:#000;
   text-decoration:none;
   font-variant:small-caps;
   letter-spacing:2px;
   font-weight:500;
   line-height:.7em;
}
#centeredmenu ul li a:hover {
   border-bottom:4px solid #f0faef;
   color:#000000;
}
/* END NAVIGATION */
</code>

Answer 1

您的<代码> 编号-up确实需要工作范围,但随着你经验的增多,你将获得更好的理解。相反,使用一种负面的<代码>z-index,并在div的底层打上>> 标识-up的形象,另一种可能的解决办法是把你的网页打上一个包装代码。这比你更长,把<条码>背井离层贴到你的海洋电离层,并贴上<条码>。

www.un.org/Depts/DGACM/index_spanish.htm See this updated, and now working edition, JSfiddle: 。 http://jsfiddle.net/84qAg/1/。

希望这一帮助和最好的帮助。

Answer 2

浏览器以静坐方式展示你的网站,这就是你布局被打破的原因。改变您的手法

<!doctype html>

另外,请指出,绝对定位对创造布局不利。

Answer 3

我不是试图说明什么拖网会解决你的问题,而是建议采取不同的战略,对你的主要内容进行标识和打断。首先,不要把案文内容直接放在你身上,而是用碎块来区分段落,将其放在段落中。他们不停地阻挡了部分内容,并将为你们的内容创造自然的分离(如果重新使用一些圆点,你很可能需要把某些比对准的风格添加到你的段落中。) 第二,如果你要再次使用职位:绝对,然后使用顶层:左边,等等,把你的内容放在位置,而不是边。

Answer 4

我可以想象,你为什么要这样做。为什么需要你的立场:你的情况是固定和绝对的。仅加上一只 d子,作为身体元素的直接孩子,把其他所有 d子放在身边,就给它留下了一种余地:零汽车,将其集中起来。诸位也可给予其职位:在座的相对和其他四分之四:进一步yl。即便在IE9中,你们的布局也遭到破坏。搬走所有平价。你的设计非常简单。你可以这样说。

div#wrapper
{
width: 960px;
margin: 0 auto;
}

Next put the image in the div#banner_wrap in the background image of the body element, Since the body element has already a fixed background image property, it will work out the same and inthis way you would not need to add another div.

Answer 5

Try to change banner_wrap to

    #banner_wrap{
    position:fixed;
    z-index:-1; 
    right: 0px;
bottom: 0px;

}

友情链接