0

ユーザーがアイコン上でマウスを動かすと表示されるポップアップボックスがあります。ホバーのCSSは次のとおりです：-

.profile-bubble {
background-color: #EDEDED;
border: 2px solid #666666;
font-size: 15px;
font-weight: bold;
line-height: 1.3em;
margin: 0.6% 2% 2% 90%;
padding: 10px;
position: absolute;
text-align: center;
width: 150px;
opacity: 0.9;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0 0 5px #888888;
-webkit-box-shadow: 0 0 5px #888888;

}

これは正常に機能しますが、問題は、画面のサイズを変更した場合、またはユーザーの解像度が私よりも小さい場合、アラートボックスが画面から消えることです。

このcssを修正して、画面のサイズに比例させるにはどうすればよいですか？

あなたの助けと時間をありがとう。

アップデート - - - - - - - - - - - - - - - - - - - - - - - - - -----これはヘッダーcssです：-

/* Header*/

ヘッダー{パディング-下：5px; }

#headerContainer {
height: 33px;
background-position: 10px 2px;
padding-top: 2px;

}

.headerProfileNotifications {
float: right;
padding-right: 4px;
margin: 3px;
position: relative;

}

.headerProfilePhoto {
float: right;
position: relative;
margin: 3px;

}

img {
border: 1px solid #D5D5D5;

}

img {
border: 1px solid #D5D5D5;

}

img:hover {
border: 2px solid #000000;

}

.headerProfileDetails {
float: right;
padding-right: 4px;
font-size: 11px;
text-align: right;

}

.headerProfileName {
margin-top: 2px;

}

.headerProfileEmail {
clear:both;
float:right;
margin-top: 0px;

}

およびhtml：-

<header>
        <div class="content-wrapper">
            <div id="headerContainer">
                <div class="headerProfileNotifications">
                        <img src="Images/" alt="notification" />
                </div>
                <div class="headerProfilePhoto">
                        <img src="Images/" alt="profile_photo" />
                </div>
                <div class="headerProfileDetails">
                    <div class="headerProfileName">
                            John Smith
                    </div>
                    <div class="headerProfileEmail">
                            john.smith@somemail.co.uk
                    </div>

                </div>
            </div>
         </div>
    </header>
4

2 に答える 2

0

幅と高さもパーセンテージにします-

width:50%;
height:50%;

そして、マージンやパディングなどを考慮する必要がないように、ボックスのサイズをボーダーボックスに変更します。そしてそれはすべて幅だけになります。

そしてそれに応じてそれを配置します（あなたは持っていますposition:absolute）-

top:20%;
left:20%;

画像とバブルはコンテナ内にある必要があり、コンテナ内に他の要素はありません。codepenで
この例を参照してください。このコンテナは相対的に配置する必要があります。

于 2013-03-25T10:30:09.617 に答える
0

leftcssにtopプロパティを入れてみてください：

.profile-bubble {
    background-color: #EDEDED;
    border: 2px solid #666666;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.3em;
    margin: 0.6% 2% 2% 90%;
    padding: 10px;
    position: absolute;
    text-align: center;
    width: 150px;
    opacity: 0.9;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-box-shadow: 0 0 5px #888888;
    -webkit-box-shadow: 0 0 5px #888888;
    left:25%; //<-------------------------------add this
    top:25%;  //<-------------------------------and this
 }
于 2013-03-25T10:34:55.843 に答える