2

私は自分のコンピューターの IE 9 ブラウザーで問題なく動作する Web ページを作成しましたが、それを Web にアップロードしてから、3 つの要素 (フッターと一緒に並べて表示する必要がある) があちこちに配置されてしまいます。firefox、safari、IEの中で、一番表示が良さそうなブラウザはIEです。考えられる限りのことはほとんど試しました。このページの div のいくつかは、Photoshop で行った透明な背景を使用しています。どんなアイデアでも大歓迎です。

HTML:

<!DOCTYPE html >
<html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css"
        href="123.css"/>
        <head>
            <META http-equiv="Content-Style-Type" content="text/css">
        </head>
        <body>
            <div class="wrapper">
                <table width="1000px" height="40px" style="background-color:#494545;">
                    <tr>
                        <td width="700"></td>
                        <td width="50" margin="10"><a href="html\home.html">
                            <img src="flag1.jpg" border="0"></a></td>
                        <td width="50" margin="10"><a href="html\home.html">
                            <img src="flag2.jpg" border="0"></a></td>
                        <td width="50" margin="10"><a href="html\home.html">
                            <img src="flag3.jpg" border="0"></a></td>
                    </tr>
                </table>
                <div id="topdiv">
                    <image src="graphics/toplogo.png">
                </div>
                <div class="main">
                        <ul>
                            <li >
                                <br/><br/><br/><br/>
                            <li>
                                <br/><br/><br/><br/>
                            <li>
                                <br/><br/><br/><br/>
                            <li>
                        </ul>
                    <div class="text">
                        text goes here
                    </div>
                    <div class="right">
                        <strong>Promotions</strong>
                        <br/>
                        <br/>
                        div>
                    </div>
                    <div class="footer"></div>
                </div>
        </body>
</html>

そしてCSS：

body {
    background-image: url("graphics/backtab.png");
    background-repeat: repeat;
    margin: 0;
    padding: 0;
}
.wrapper {
    background-image: url("graphics/contrana.png");
    width: 1000px;
    text-align: left;
    margin: 0 auto;
}
#topdiv {
    width: 1000;
    height: 180;
    text-align: left;
    position: relative;
    margin-top: 0;
    padding-top: 0;
    display: block;
}
.main {
    width: auto position :relative;
    margin: 0 auto;
    background-image: url("graphics/tr.jpg");
    border: 5px solid #0A1379;
    padding-top: 60;
    padding-left: 50;
    display: block;
    overflow: visible;
}
ul {
    background-color: white;
    width: 150px;
    margin-top: 60px;
    float: left;
    margin-right: 50;
    padding: 40;
    border: 2px solid black;
    filter: alpha(opacity=70);
    opacity: 0.7;
}
li {
    list-style-type: none;
    text-decoration: none;
    font-weight: bold;
}
a:link {
    color: black;
    font-family: verdana;
    text-decoration: none;
    list-style-type: none;
    outline: 0;
}
a:visited {
    color: black;
    font-family: verdana;
    list-style-type: none;
    text-decoration: none;
    outline: 0;
}
a:hover {
    color: #EE9613;
    font-family: verdana;
    text-decoration: none;
    font-family: verdana;
    list-style-type: none;
    outline: 0;
}
a:active {
    color: black;
    font-family: verdana;
    text-decoration: none;
    font-family: verdana;
    list-style-type: none;
    outline: 0;
}
.text {
    background-image: url("graphics/textback.png");
    width: 500px;
    float: left;
    font-family: verdana;
    font-size: 14;
    padding: 10px 15px;
    margin-top: 70px;
    word-spacing: 10px;
    color: black;
    line-height: 18px;
    text-align: left;
    margin-right: 15px;
    display: inline;
    border: 2px solid black;
}
.right {
    width: 190px;
    float: right;
    margin-top: 60;
    background-image: url
    ("graphics/advertback.png");
    margin-right: 20;
    border: 2px solid black;
}
#footer {
    width: 1000px;
    height: 50px;
    background-image: url

    ("graphics/footer.jpg");
    background-repeat: repeat-x;
    text-align: center;
    padding-top: 15;
    font-family: verdana;
    font-size: 12px;
    text-color: white;
    margin: 0 auto;
    font-weight: bold;
}
4

1 に答える 1

1

コードにエラーがあり、ラッパー div が閉じられておらず、閉じられていない他のタグもあります。たくさんのタグを使用する代わりに、<br/>パディングとマージンを使用する必要があります。

これは基本的な 3 列の CSS レイアウトです。コードを修正するよりも、これを使用する方が簡単です。

HTML

<div id="container">
        <div id="header">
        <p>Header</p>
    </div>
    <div id="primary">
        <p>Primary Sidebar</p>
    </div>
    <div id="content">
        <p>Main content</p>
    </div>
    <div id="secondary">
        <p>Secondary Sidebar</p>
    </div>
    <div id="footer">
        <p>Footer</p>
    </div>
</div>

CSS

#container {
    width: 960px;
    margin: 0 auto;
}
#primary {
    float: left;
    width: 240px;
}
#content {
    float: left;
    width: 480px;
}
#secondary {
    float: left;
    width: 240px;
}
#footer {
    clear: both;
}
于 2012-05-19T21:55:30.850 に答える