1

私はこれをすべて書き出しましたが、最終的なものを除いて、すべて完全に機能します

エレメント。クラス「defaultButtonStyle」のdivによって作成された青い長方形の中心に移動したいと思います。css で margin-top を使用しようとしましたが、役に立ちませんでした。他にアイデアはありますか？

<style>
body {background-color: #ebf0f3;}
.mainPicture img {height: 400px;
    width:600px; }
#gallery {position: relative; }
#gallery ul {list-style-type: none;
    width: 236px; 
    margin-left: -33px;
    margin-top: -15px; }
#gallery li { display: inline; 
     float: left;
     padding: 0px; }
#gallery img {border-style: solid: 10px; border-color: #ebf0f3; }
#gallery a { text-decoration: none;
             font-style: none;  
             color: #333; }
.popOut {cursor: default;
    list-style: none; }
.popOut a {cursor: default; }
.popOut a .preview {display: none; }
.popOut a:hover .preview {display: block;
    position: absolute;
    top: -20px;
    left: -45px;
    z-index: 1; }
.popOut img {background: #ebf0f3;
    border-color: #ebf0f3;
    border-style: solid;
    border-width: 2px;
    color: inherit;
    vertical-align: center;
    width: 100px;
    height: 67px; }
.popOut li {background-color: none;
    border-color: #ebf0f3;
    border-style: solid;
    border-width: 0px;
    color: inherit;
    display: inline;
    float: left;
    margin: 3px;
    padding: 0px;
    position: relative; }
.popOut .preview {border-color: #000;
    width: 200px;
    height: 134px; }
.popOut p {text-align: center; }
.defaultButtonStyle {background: #ebf0f3;
    border-color: #ebf0f3;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    vertical-align: top;
    width: 212px;
    height: 38px;
    margin-top: -43px;
    text-align: center; }
.defaultButtonStyle p .defaultImageText {top-margin: 100px; }
.popOut .center {align: center; }
#rightcol {margin-left: 237px;}
#rightcol .fixThisHeight {
    margin-top: 18px; }
</style>
<div id="container">
    <div class="mainPicture">
        <img alt="" id="JudgeBench" name="JudgeBench" src="http://PATH/files/pictures/JudgeBench.jpg" />
    </div>
    <div id="gallery">
        <ul class="popOut">
            <li>
                <a href="http://PATH/files/pictures/PodiumPlain3.html" target="AdditionalInfo" onClick="document.JudgeBench.src='http://PATH/files/pictures/PodiumPlain.jpg'">
                    <img alt="PodiumPlain" src="http://PATH/files/pictures/PodiumPlain.jpg" /><img alt="PodiumPlain" class="preview" src="http://PATH/files/pictures/PodiumPlain.jpg" />
                </a>
            </li>
            <li>
                <a href="http://PATH/files/pictures/PodiumRack4.html" onClick="document.JudgeBench.src='http://PATH/files/pictures/PodiumRack.jpg'" target="AdditionalInfo">
                    <img alt="PodiumRack" src="http://PATH/files/pictures/PodiumRack.jpg" /><img alt="PodiumRack" class="preview" src="http://PATH/files/pictures/PodiumRack.jpg" />
                </a>
            </li>
            <li>
                <a href="http://PATH/files/pictures/CounselTable3.html" onClick="document.JudgeBench.src='http://PATH/files/pictures/CounselTable.jpg'" target="AdditionalInfo">
                    <img alt="CounselTable" src="http://PATH/files/pictures/CounselTable.jpg" /><img alt="CounselTable" class="preview" src="http://PATH/files/pictures/CounselTable.jpg" />
                </a>
            </li>
            <li>
                <a href="http://PATH/files/pictures/PlasmaScreens3.html" onClick="document.JudgeBench.src='http://PATH/files/pictures/PlasmaScreens.jpg'" target="AdditionalInfo">
                    <img alt="PlasmaScreens" src="http://PATH/files/pictures/PlasmaScreens.jpg" /><img alt="PlasmaScreens" class="preview" src="http://PATH/files/pictures/PlasmaScreens.jpg" />
                </a>
            </li>
            <li>
                <a href="http://PATH/files/pictures/Stream_Projector3.html" onClick="document.JudgeBench.src='http://PATH/files/pictures/Stream_Projector.jpg'" target="AdditionalInfo">
                    <img alt="Stream_Projector" src="http://PATH/files/pictures/Stream_Projector.jpg" /><img alt="Stream_Projector" class="preview" src="http://PATH/files/pictures/Stream_Projector.jpg" />
                </a>
            </li>
            <li>
                <a href="http://PATH/files/pictures/AudioAids3.html" onClick="document.JudgeBench.src='http://PATH/files/pictures/AudioAids.jpg'" target="AdditionalInfo">
                    <img alt="AudioAids" src="http://PATH/files/pictures/AudioAids.jpg" /><img alt="AudioAids" class="preview" src="http://PATH/files/pictures/AudioAids.jpg" />
                </a>
            </li>
        </ul>
        <div id="rightcol">
            <iframe width="360px" height="319px" class="fixThisHeight" id="AdditionalInfo" name="AdditionalInfo" src="http://PATH/files/pictures/JudgeBench2.html" title="Information About Courtroom Technology"></iframe>
        </div>
        <div id="defaultButtonDiv" class="defaultButtonStyle">
            <a href="http://PATH/files/pictures/JudgeBench2.html" onClick="document.JudgeBench.src='http://PATH/files/pictures/JudgeBench.jpg'" target="AdditionalInfo">
                <img alt="Default Image" class="DefaultImage" "http://PATH/files/pictures/DefaultImageFinal.jpg" />
                    <div id="MoveTheTextAround" class="MoveTheTextAround">
                        <p class="defaultImageText">Default Image</p>
                    </div>
            </a>
        </div>
    </div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>Just some text</p>
4

1 に答える 1

1

正直なところ、どこにどの要素が必要かを静かに理解していなかったため、解決策を見つけていません..不明なソースにリンクされているため、画像を表示できません.

ただし、マージンがうまくいかなかった理由の 1 つは、そうであってはならないからかもしれません。

.defaultButtonStyle p .defaultImageText *{top-margin: 100px; }*

そのはず

.defaultButtonStyle p .defaultImageText {margin-top: 100px; }

試してみます。

于 2012-05-25T17:34:20.797 に答える