html - CSS 最小幅が正しく動作しない

Question

次のコードでは、上部のロゴを min-width: 800px に設定しているため、ユーザーがサイズを変更してナビゲーションを台無しにすることはできません。ただし、何らかの理由で機能していません。誰かが私が間違っていることを教えてもらえますか?

<!DOCTYPE html>
<html>
<head>
    <title>css example</title>

<style type="text/css">

#logo {
    background-color: black;
    width: 100%;
    color: rgb(255,200,0);
    height: 100px;
    min-width: 800px;
}

#logo p {
    display: inline;
    padding: 0;
}

#logo img {
    padding: 10px;
    padding-top: 15px;
    vertical-align: middle;
}

#logo h1 {
    display: inline;
    padding-right: 25px;
    vertical-align: middle;
    float: right;

}

#logo a {
    vertical-align: middle;
    float: right;
    color: rgb(255, 200, 0);
    text-decoration: none;
    font-size: 1.1em;
    margin:0;
    padding: 15px;
}

body {
    font-size: 100%;
    font-family: Arial, Helvetica, Verdana;
    margin: 0;
}

#contents {
    border: 1px solid black;
    width: 90%;
    min-height: 650px;
    height:auto !important;
    margin: 0 5%;
    margin-top: 15px;
    padding: 5px;
    border-radius: 5px;
}

#navMenu {
    width: 100%;
    height: 32px;
    background-color:rgb(255,200,0);
    border:1px #000 solid;
    font-weight:bold;
    margin-left: -2px;
}

#navMenu ul{
    margin:0;
    padding:0;
    line-height:32px;
    border:1px #000 solid;
}

#navMenu li{
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    background-color:rgb(255,200,0);
    float:left;
    border:1px #000 solid;
}

#navMenu ul li a{
    text-align:center;
    text-decoration:none;
    height:30px;
    width:150px;
    display:block;
    color:#000;

}

#navMenu ul ul{
    position:absolute;
    visibility:hidden;
    top: 31px;
    margin-left: -2px;

}

#navMenu ul li:hover ul{
    visibility: visible;

}

#navMenu ul li:hover {
    background-color:rgb(255,200,0);
}

#navMenu a:hover {
    background-color:#000;
    color:rgb(255,200,0);
}


</style>

</head>

<body>

<div id="logo">

    <p>
        <img src="demo.gif" >
    </p>

    <h1>Comic Book Subscriber Management</h1>
    <!--
    <p><a href="#">LOG-IN </a></p>
    <p><a href="#">CONTACT US </a></p>-->

</div>

<div id="navMenu">
    <nav>
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">PROFILE</a></li>
            <li><a href="#">MANAGE SUB</a>
            <ul>
                <li><a href="#">VIEW TITLES</a></li>
                <li><a href="#">ADD TITLE</a></li>
                <li><a href="#">MODIFY TITLE</a></li>
                <li><a href="#">REMOVE TITLE</a></li>
            </ul>
            </li>
            <li><a href="#">NEW RELEASES</a></li>
            <li><a href="#">E-MAIL</a></li>
        </ul>
    </nav>
</div>

<div id="contents">

    <p>This is just some dummy text. Dummy. </p>

</div>

</body>
</html>

score 0 · Accepted Answer

これを試して

#logo {
    background-color: black;
    width: 800px;
    color: rgb(255,200,0);
    height: 100px;
    margin-left:auto;
    margin-right:auto;
}

score 0 · Accepted Answer

あなたmin-widthはコンテナ上にあり<div>ますが、あなたがしようとしていることを行うには、おそらくimgそれ自体が必要になるでしょう。

別のオプションは、背景画像として設定することdiv#logoですが、それがユースケースに適しているかどうかはわかりません.

score 0 · Accepted Answer

@media Query で要件が満たされている場合は、@media Query を使用してください

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

score 0 · Accepted Answer

**use like this it vii work in mozila nd chrome**    
for IE u need to use  css3-mediaqueries.js


@media screen and (min-width: 800px) 
    {
        #logo {
        background-color: black;
        width: 100%;
        color: rgb(255,200,0);
        height: 100px;
        width: 800px;

    }

html - CSS 最小幅が正しく動作しない

4 に答える 4

Related

Reference