2

我制作了一个网页，该网页在我的计算机上的 IE 9 浏览器中运行良好，但自从将其上传到网络后，这 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 回答