0

私のウェブサイトのヘッダーにある 3 つの div に関する問題があります: http://www.pianoson.nl。

私が欲しいもの：

  • middlemenu は、左メニューと右メニューの間のスペースを埋める必要があります。ブラウザを小さくすると、中央のメニューだけも小さくなります。

  • 中央のメニューは最小限の幅にする必要があるため、その中のテキストが混乱することはありません。

  • 現時点では、ある時点で rightmenu が leftmenu の下にドロップダウンしますが、3 つのメニューは常に上部に一緒にある必要があります。

    これがcss/htmlで可能になることを願っています。

    前もって感謝します！

    HTML ページ:

    <body>
    <div id="menu">
        <div id="leftmenu">
            <a href="http://www.pianoson.nl">
                <div class="key white"ID="home">
                    <img src="http://www.pianoson.nl/images/home_32.png"></img>
                </div></a>

            <div class="key black"ID="Csharp"></div>

            <a href="http://www.pianoson.nl/genres.htm">
                <div class="key white"ID="repertoire">
                    <img src="http://www.pianoson.nl/images/music2_32.png"></img>
                </div></a>

            <div class="key black"ID="Dsharp"></div>

            <a href="http://www.pianoson.nl/samples.htm">
                <div class="key white "ID="samples">
                    <img src="http://www.pianoson.nl/images/music_32.png"></img>
                </div></a></div>

        <div ID="middlemenu"></div>

        <div id="rightmenu">

            <a href="https://www.linkedin.com/e/fpf/184174635">
                <div class="key white "ID="linkedin">
                    <img src="http://www.pianoson.nl/images/linkedin_32.png"></img>
                </div></a>

            <div class="key black"ID="Csharp"></div>

            <a href="https://www.facebook.comthijs.waleson">
                <div class="key white"ID="facebook">
                    <img src="http://www.pianoson.nl/images/facebook_32.png"></img>
                </div></a>

            <div class="key black"ID="Dsharp"></div>

            <a href="https://plus.google.com/u/0/112443072032497378793/">
                <div class="key white "ID="googleplus">
                    <img src="http://www.pianoson.nl/images/google_32.png"></img>
                </div></a></div>
    </div>

    そしてcssページ：

    body {
background-color: #F2F2F2;
width: auto;
overflow: hidden;}

div {
display: inline-block;}

#middlemenu {
height: 230px;
float: none;
width: 100%;
border: 1px solid #000000;
position: relative;
border-radius: 5px;
z-index: 1;}

.key {
    float: left;
border-radius: 5px;
border: 1px solid #000000;
position: relative;
    text-align:center;}

.white {
background-color: #FFFFFF;
height: 230px;
width: 40px;
z-index: 2;}

.black {
background-color: #000000;
height:150px;
width: 24px;
    z-index: 3;
    margin-left:-15px;
    margin-right: -15px;}

.white:hover { 
background-color: #FFFFFF;
height: 345px;
width: 60px;
z-index: 1;}

.key:hover img {
position: static;
vertical-align: -335px;
bottom: 5px;
padding: 14px;}

#menu{
width: 100%;
display: inline;
position: relative;}

#leftmenu{
float: left;}

#rightmenu{
float: right;}

div a div img{
vertical-align: -210px;
position: static;
bottom:5px; 
color: #000000;}
    • 4

    1 に答える 1

    1

    これはあなたが探しているものですか..

    cssをこれに変更します

    body {
    background-color: #F2F2F2;
    width: auto;
    overflow: hidden;
}
div {
}
#middlemenu {
    height: 230px;
    margin-left: 130px;
    margin-right: 130px;
    min-width:300px;
    border: 1px solid #000000;
    position: relative;
    border-radius: 5px;
    z-index: 1;
}
#menu {
    width: 100%;
    position: relative;
}
#leftmenu {
    float: left;
}
#rightmenu {
    float: right;
    position:absolute;
    top:0;
    right:0;
}
div a div img {
    vertical-align: -210px;
    position: static;
    bottom:5px;
    color: #000000;
}
.key {
    float: left;
    border-radius: 5px;
    border: 1px solid #000000;
    position: relative;
    text-align:center;
}
.white {
    background-color: #FFFFFF;
    height: 230px;
    width: 40px;
    z-index: 2;
}
.black {
    background-color: #000000;
    height:150px;
    width: 24px;
    z-index: 3;
    margin-left:-15px;
    margin-right: -15px;
}
.white:hover {
    background-color: #FFFFFF;
    height: 345px;
    width: 60px;
    z-index: 1;
}
.key:hover img {
    position: static;
    vertical-align: -335px;
    bottom: 5px;
    padding: 14px;
}
    于 2013-08-13T17:38:26.547 に答える