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 (Don't Repeat Yourself) フォームに結合し、サイトを 700px の最小幅でレイアウトしました (これはあなたが行っているように見えました)。為に）。

z-index一般に、あなたが行っている絶対配置を行うことは避けてください。ほとんどの場合、レイアウトにとってひどいものであり、メンテナンスの悪夢になります。

block代わりに、ボックス モデルを研究し、inline-block要素、float、リキッド レイアウトについてさらに学習することをお勧めします。これらの用語のいずれかでいくつかの Google 検索を行うと、学習するための貴重なリソースが得られます。また、ここで他に質問がある場合はお気軽に質問してください。正確に何を得るために必要に応じて例を調整して返信します。あなたが探しています。

それが役に立てば幸い！

トロイ

于 2013-02-26T23:46:49.603 に答える