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

いくつかのフロートとともに、相対/絶対位置要素の興味深い混合物があります。最善の策は、これらの異なるスタイルを取り除いて、マークアップで正しい順序 (左から右) でコンテンツを取得してから、そこから取得することです。

これは可変幅の 3 列の CSS レイアウトの非常に便利な例です。そこでどのように行われたかを見てください (添付の記事を読んでください)。これは、レイアウトをうまく機能させるのに本当に役立ちます。

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

幸運を！

于 2012-07-08T14:32:18.613 に答える