0

下の図には 2 つの div があります。1 つはログイン フォームの部分で、もう 1 つは facebook と twitter のボタンの部分です。境界線を配置する必要がありますが、特定の長さで、赤いボックスの場所になります。

最初の div の幅は850pxで、2 番目のdiv は最初の30%です!

長さボーダーdiv

私が説明したことを願っています！

HTML

<div id="top">
    <!--Productos de limpieza Master Clean <img src="media/user_icon.png"/><span><a href="#login" id="inicia">Inicia sesión</a> ó <a href="registro.php" id="registro">registrate!</b></span>-->
    <div id="loginform">
        <form id="loginuser" name="loginuser" action="php/processFunctions.php" method="post">
            <input id="userLog" class="required" name="userLog" type="text" placeholder="Usuario"/>
            <input id="passLog" class="required" name="passLog" type="password" placeholder="Contraseña"/>
            <a href="#login" id="dologin" name="dologin">Iniciar</a> ó
            <a href="registro.php" id="dosignup" name="dosignup">Registrarse</a>
            <span id="errorlogin"></span>
        </form>
    </div>
    <span id="currentUser"></span>

    <!--<h4>Búscanos en:</h4>-->
</div>
<div id="topsocial">
    <ul id="socialmedia">
        <li><a href="http://www.twitter.com"><img src="media/twitter.png" alt="Siguenos" title="Siguenos en Twitter"/></a></li>
        <li><a href="http://www.facebook.com"><img src="media/facebook.png" alt="Like" title="Like en Facebook"/></a></li>
    </ul>
</div>

CSS

#top {
    height:50px;
    background:white;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left: 4px;
    -webkit-border-top-right: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.79);
    -moz-box-shadow:    0px 0px 18px rgba(50, 50, 50, 0.79);
    box-shadow:         0px 0px 18px rgba(50, 50, 50, 0.79);
    border: 5px solid black;
    border-bottom:none;
}
#topsocial{
    width:30%;
    padding: 5px;
    border-bottom-left-radius: 50% 75%;
    border-bottom-right-radius: 50% 75%;
    background:white;
    overflow:hidden;
    float:right;
    position: relative;
    -webkit-box-shadow: 0px 8px 16px rgba(50, 50, 50, 0.79);
    -moz-box-shadow:    0px 8px 16px rgba(50, 50, 50, 0.79);
    box-shadow:         0px 8px 16px rgba(50, 50, 50, 0.79);
    border: 5px solid black;
    border-top: none;
}

別の質問があります。ボックス シャドウを一番上から 2 番目の div #topsocial に移動する方法を終了または削除するにはどうすればよいですか?

4

3 に答える 3

1

マークアップと CSS を提供すると、より有用な回答が得られますが、最初の提案は、ログイン フォームと 850 ピクセルのラップ <div> 内に丸みを帯びた境界線を含む新しい <div> を作成することです。次に、facebook および twitter ブロックの左側にある <div> の内側に幅を設定しますが、境界線をわずかにオーバーラップさせます。次に、30% の <div> を上に拡張します。

更新: http://jsfiddle.net/zFa9n/

于 2012-07-03T19:45:51.097 に答える
1

<div>1つ目は境界線のあるボックスのサイズに設定でき、2つ目<div>は絶対位置に配置して境界線を覆うことができます。

その方法を示すためにjsFiddleを作成しました。私たちはあなたの HTML を持っていないので、それが役に立てば幸いです。

于 2012-07-03T19:47:24.387 に答える
0

どの画面幅でも問題なく動作するCSSコードだけに少し変更を加えました。必要な結果が得られます。気に入っていただければ幸いです。

#top {
    height:50px;
    background:white;
    border: 5px solid black;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left: 4px;
    -webkit-border-top-right: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.79);
    -moz-box-shadow:    0px 0px 18px rgba(50, 50, 50, 0.79);
    box-shadow:         0px 0px 18px rgba(50, 50, 50, 0.79);
}

#topsocial{
    position: relative;
    top:-5px;
    width:30%;
    float:right;
    padding: 5px;
    border: 5px solid black;
    border-top: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-bottomright: 4px;
    background:white;
    overflow:hidden;
    -webkit-box-shadow: 0px 8px 16px rgba(50, 50, 50, 0.79);
    -moz-box-shadow:    0px 8px 16px rgba(50, 50, 50, 0.79);
    box-shadow:         0px 8px 16px rgba(50, 50, 50, 0.79);
}
于 2012-12-14T02:49:20.223 に答える