0

我的网站经过 css 和 html 验证，但浏览器缩放对齐中断。我不是 CSS 专业人士。请告诉我需要更改哪些css代码。网站在这里

这是标题栏上使用的图像的样式。

  #title {
    height : 90px;
    background : #f3f4f5;
    text-decoration : none;
    }
    #title > img.tp {
    float : right;
    }
    #title > img.redzone {
    padding-top : 1%;
    margin-left:15%;
    }
    #title > img.ctoc {
    float : left;
    }
    #title > img.fp {
    position:absolute;
    float:left;
    margin-left:6%;
    margin-top:10px;
    }

*这是左右列的样式。*

#contact_container {
position:absolute;
width : 15%;
margin-left:4.5%;
margin-top:30px;
float:left;
height : auto;
padding-top:2%;
background-image : url(img/transparent.jpg);
}
#contact_container > img
{
    padding-left:26%;
}
#content_container {
position:absolute;
padding-top : 2%;
margin-top:30px;
width : 15%;
float:right;
margin-left : 80%;
background-image : url(img/transparent.png);
text-align : center;
}
#content_container > hr
{
    width:80%;
    border-style:groove;
}
#contact_container > hr
{
    width:80%;
    border-style:groove;
}
#content_container > ul
{
    text-align:center;
}
#contact_container > ul
{
    text-align:center;
}

这些是菜单和滑块的一般样式

#gallery {
border : #ccc solid 1px;
background : #ffffff url(img/panel.jpg) repeat-x bottom center;
width : 920px;
overflow : hidden;
}
#menu2 {
list-style : none;
width : auto;
height : 43px;
background : #014464;
border : #002232 solid 1px;
margin-top : 30px;
margin-right : auto;
margin-bottom : 5px;
margin-left : auto;
padding-left : 30px;
}

任何形式的帮助表示赞赏。
即使是一些好的参考资料也会有所帮助

4

1 回答 1

2

这不仅仅是在变焦上。当浏览器宽度改变时，它也会中断。在此处查看屏幕截图：http: //imgur.com/OHiyQ

你有一个有趣的混合相对/绝对定位元素以及一些浮动。你最好的办法是去掉那些不同的风格，在你的标记中以正确的顺序（从左到右）获取你的内容，然后从那里获取它。

这是一个非常有用的流体宽度、三列 CSS 布局示例，看看它是如何在其中完成的（并阅读随附的文章），这将真正帮助您使布局正常工作。

http://www.maxdesign.com.au/articles/css-layouts/three-liquid/

祝你好运！

于 2012-07-08T14:32:18.613 回答