3

我目前正在设计一个网站，但我所有的容器都包装在较小的屏幕上。我已经尝试了我知道该怎么做的所有事情，但没有运气修复它。

这是我的 CSS 代码：

body {
    background: url("../img/bg_main.jpg") no-repeat top center;
}
#ani2 {
    position: absolute;
    width: 43px;
    height: 66px;
    margin: 0 auto;
    left: 56%;
    top: -1%;
    background-color: transparent;
    z-index: 1;
}
#logimg1 {
    position: absolute;
    width: 250px;
    height: 25px;
    text-align: center;
    top: 0%;
    left: 0%;
    padding-top: 0px;
    display: block;
    font-size: 13px;
    font-family:"Segoe UI Light", "Myriad Pro", Tahoma, Arial, sans-serif;
    z-index: 1;
}
#ani1 {
    position: absolute;
    width: 43px;
    height: 66px;
    margin: 0 auto;
    left: 35.3%;
    top: -1%;
    background-color: transparent;
    z-index: 1;
}
#logo {
    width: 251px;
    height: 107px;
    background: transparent url(../img/plogoW.png) no-repeat top center;
    margin: 0 auto;
    padding-top: 0px;
    display: block;
    text-indent: -9999px;
    cursor: pointer;
}
#menu {
    width: 700px;
    height: 20px;
    border-radius: 4px;
    text-align: center;
    background-color: #FFD900;
    margin: 0 auto;
    padding-top: 0px;
    display: block;
    font-size: 13px;
    font-family:"Segoe UI Light", "Myriad Pro", Tahoma, Arial, sans-serif;
}
#menu a {
    text-decoration: none;
}
#menu a:link {
    color:black;
}
#menu a:visited {
    color:black;
}
#menu a:hover {
    color:#134896;
}
#menu a:active {
    color:black;
}
#container {
    overflow: visible;
    position: absolute;
    width: 400px;
    height: 408px;
    border-radius: 4px;
    background-color: #FFFFFF;
    left: 25.75%;
    top: 22%;
    padding-top: 0px;
    display: block;
    font-size: 13px;
    font-family:"Segoe UI", "Myriad Pro", Tahoma, Arial, sans-serif;
    z-index: 1;
}
#login {
    overflow: visible;
    position: absolute;
    width: 250px;
    height: 200px;
    border-radius: 4px;
    background-color: #FFFFFF;
    left: 65.22%;
    top: 22%;
    margin: 0 auto;
    padding-top: 0px;
    display: block;
    font-size: 13px;
    font-family:"Segoe UI Light", "Myriad Pro", Tahoma, Arial, sans-serif;
    z-index: 1;
}
.centered {
    text-align: center;
}
#eemenu {
    overflow: visible;
    position: absolute;
    width: 250px;
    height: 200px;
    border-radius: 4px;
    background-color: #FFFFFF;
    left: 65.22%;
    top: 52%;
    padding-top: 0px;
    display: block;
    font-size: 13px;
    font-family:"Segoe UI Light", "Myriad Pro", Tahoma, Arial, sans-serif;
    z-index: 1;
    white-space:nowrap;
}
.sep {
    height: 1px;
    width: 200px;
    background: #0093FE;
    margin: 0 auto;
}
#loginstat {
    overflow: visible;
    text-align:center;
    font-family:"Segoe UI", "Myriad Pro", Tahoma, Arial, sans-serif;
    white-space:nowrap;
}
#web {
    min-width:900px;
}

我的 HTML：

<div id="web">
    <div id="topcontainer">
        <div id="imga">
            <div id="ani1">
                <img src="img/3__.gif"></img>
            </div>
            <div id="ani2">
                <img src="img/2_.gif"></img>
            </div>
        </div>
        <div id="logo"></div>
        <div id="menu">Home</div>
    </div>
    <div id="container">ContentPlaceholder</div>
    <div id="login">
        <img src="img/bar.png">
        <div id="logimg1">Status</div>
        </img>
        <br />
        <div id="loginstat">Logged in as _________.</div>
    </div>
    <div id="eemenu">
        <div class="centered">Links</div>
        <div class="sep"></div>
    </div>
</div>

很高兴有任何建议！

4

1 回答 1

1

我不确定 - 因为很难准确地确定你在寻找什么......但我的猜测是，根据你的 HTML / CSS，你正在尝试完成这样的事情：

http://jsfiddle.net/TroyAlford/QArPM/3/

http://jsfiddle.net/TroyAlford/QArPM/4/

http://jsfiddle.net/TroyAlford/QArPM/5/ <-- Updated based on comments/clarification

如果准确的话，问题在于您正在做一些非常有针对性的块样式和绝对定位。我继续清理所有代码，将您的 CSS 类组合成更多的 DRY（不要重复自己）表单 - 并以 700 像素的最小宽度布置网站（这似乎是您要进行的操作）为了）。

一般来说 - 避免做z-index你正在做的绝对定位的事情。布局几乎总是很糟糕，并成为维护的噩梦。

相反，我建议研究盒子模型并了解更多关于元素、block和液体布局的知识。对这些术语中的任何一个进行一些谷歌搜索将为您提供一些有价值的学习资源 - 并且，请随时提出您可能在这里遇到的任何其他问题 - 我将尝试回复以根据需要调整示例以让您确切了解您正在寻找。inline-blockfloat

希望能帮助到你！

特洛伊

于 2013-02-26T23:46:49.603 回答