5

私は最近 Twitter Bootstrap を使い始めましたが、1 つのことを除けばかなり直感的です。

現在、画像を含むラッパー (クラス.sliderwrap) を備えたサイトを構築していますが、最終的には画像スライダーに置き換えられます。画像/スライダーには、h1絶対に配置されたテキストがオーバーレイされています。

狭い画面幅では、ナビゲーション メニューがドロップダウンに変わります。ドロップダウンを開くと、 内の画像が押し下げられますが、押し下げられるのではなく、それ自体と絶対位置に配置されたテキスト.sliderwrapがオーバーラップします。.sliderwrapこれは明らかにh1テキストを台無しにするので、画像とともにページを下に移動したいと思います。

.sliderwrapドロップダウンの一部をオーバーラップさせるのではなく、ドロップダウン自体を押し下げるにはどうすればよいですか?

私が悩んでいるページはこちらです。(ドロップダウン自体のスタイルはまだ完成していません!)

4

2 に答える 2

4

これに対する最も簡単な解決策は、プライマリ メニューとセカンダリ メニューのフロートをクリアする必要があると考えています。

ご覧のとおり、次のものがあります。

<div class="navbar navbar-static-top">...</div>

また、次のものもあります。

<div class="secondmenu">...</div>

これらをクリアする最も簡単な方法は、.rowクラスまたは.row-fluid. また、これらの種類のことを明確にするために、可能な場合はコードに行を追加する習慣を身に付けることをお勧めします。

コードは次のようになります。

<div class="row">
  <div class="navbar navbar-static-top">...</div>
  <div class="secondmenu">...</div>
</div>

最後になりましたが、テキストはスライダー div に対して絶対的に配置されるのではなく、ブラウザーのクロムに対して配置されるため、スライダー コンテナーにそのコンテナー内にposition: relative設定されたすべての要素position: absolute(この場合は、h1) は、その親コン​​テナーに従って絶対に配置されます。

したがって、これもスタイルに設定します。

.sliderwrap {
  position: relative;
}

これでダブル メニューがほぼ修正され、スライダーとテキストがクリアされます。これがうまくいくかどうか教えてください。答えを明確にする必要がある場合は、うまくいく場合は、賛成票を投じるか、答えを受け入れることを忘れないでください。乾杯。

于 2013-08-02T12:52:07.040 に答える
0

これを試して

本文のhtml

<body class="blackley">
    <!--content goes here-->
    <!-- Navigation -->
    <div style="position: relative;">
        <div class="navbar navbar-static-top">
            <div class="navbar-inner">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span
                    class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                </a><a class="brand" href="#">
                    <img src="img/logo.png" class="logo" />Blackley Golf Club</a>
                <div class="firstmenu">
                    <div class="nav-collapse">
                        <ul class="nav">
                            <li><a href="#">Tee Bookings</a></li>
                            <li><a href="#">Societies</a></li>
                            <li><a href="#">Open Comps</a></li>
                            <li><a href="#">Functions</a></li>
                        </ul>
                        <form class="navbar-search pull-right">
                        <input type="text" class="search-query" placeholder="Search here...">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Navigation -->
    <!--begin second navigation -->
    <!--image slider -->
    <div class="sliderwrap">
        <div class="secondmenu">
            <div class="">
                <ul class="menu">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Course</a></li>
                    <li><a href="#">Pro Shop</a></li>
                    <li><a href="#">Membership</a></li>
                    <li><a href="#">Sections</a></li>
                    <li><a href="#">History</a></li>
                    <li><a href="#">News</a></li>
                </ul>
            </div>
        </div>
        <div class="friendlyclub container">
            <h1>
                Welcome to Blackley Golf Club
                <br />
                "The Friendly Club"</h1>
        </div>
        <img src="img/sliderphoto.png" alt="slider photo 1" />
    </div>
    </div>
    <div class="weather">
    </div>
    <!--Main content -->
    <div class="info">
        <div class="container">
            <div class="row">
                <div class="span4">
                    <div class="imgborder">
                        <img src="img/lake.png" />
                    </div>
                </div>
                <div class="span8">
                    <h2>
                        About Blackley Golf Club</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tellus tellus,
                        placerat vitae faucibus ut, luctus sit amet est. Proin mollis velit nec leo mollis
                        fringilla. Nunc vitae augue vitae elit feugiat malesuada. Integer libero nisi, sodales
                        a auctor eget, ultrices nec justo. Nullam ullamcorper neque erat, in faucibus enim
                        tristique non. Vivamus elementum est non urna mollis malesuada.</p>
                    <p>
                        Nunc vitae augue vitae elit feugiat malesuada. Integer libero nisi, sodales a auctor
                        eget, ultrices nec justo. Nullam ullamcorper neque erat, in faucibus enim tristique
                        non. Vivamus elementum est non urna mollis malesuada.</p>
                </div>
            </div>
        </div>
    </div>
    <!-- End row -->
    <div class="main-content container">
        <div class="row top-space">
            <div class="span4 news">
                <img src="img/newsphoto.png" alt="news photo" />
                <p>
                    June 27, 2013</p>
                <h2>
                    Experience this summer with a bit of a bite...</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tellus tellus,
                    placerat vitae faucibus ut, luctus sit amet est. Proin mollis velit nec leo mollis
                    fringilla. Nunc vitae augue vitae elit feugiat malesuada. Integer libero nisi, sodales
                    a auctor eget, ultrices nec justo. Nullam ullamcorper neque erat, in faucibus enim
                    tristique non</p>
                <p class="readmore pull-right">
                    + Read More</p>
            </div>
            <div class="span4 news">
                <img src="img/newsphoto.png" alt="news photo" />
                <p>
                    June 27, 2013</p>
                <h2>
                    Experience this summer with a bit of a bite...</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tellus tellus,
                    placerat vitae faucibus ut, luctus sit amet est. Proin mollis velit nec leo mollis
                    fringilla. Nunc vitae augue vitae elit feugiat malesuada. Integer libero nisi, sodales
                    a auctor eget, ultrices nec justo. Nullam ullamcorper neque erat, in faucibus enim
                    tristique non</p>
                <p class="readmore pull-right">
                    + Read More</p>
            </div>
            <div class="span4 news">
                <img src="img/newsphoto.png" alt="news photo" />
                <p>
                    June 27, 2013</p>
                <h2>
                    Putt a bit of drive into your summer</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tellus tellus,
                    placerat vitae faucibus ut, luctus sit amet est. Proin mollis velit nec leo mollis
                    fringilla. Nunc vitae augue vitae elit feugiat malesuada. Integer libero nisi, sodales
                    a auctor eget, ultrices nec justo. Nullam ullamcorper neque erat, in faucibus enim
                    tristique non</p>
                <p class="readmore pull-right">
                    + Read More</p>
            </div>
        </div>
        <!-- End row -->
        <div class="row">
            <div class="span12">
                <ul class="footernav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Course</a></li>
                    <li><a href="#">Pro Shop</a></li>
                    <li><a href="#">Membership</a></li>
                    <li><a href="#">Sections</a></li>
                    <li><a href="#">History</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Members Login</a></li>
                    <li><a href="#">Location</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
            <div>
                <!-- End row -->
            </div>
        </div>
        <!-- End container -->
        <!--End main content -->
        <div id="push">
        </div>
    </div>
    <div class="navbar-inverse">
        <div class="navbar-inner">
            <div class="container">
                <div class="pull-left">
                    <p class="footertext">
                        © 2003-2013 by Blackley Golf Course. All rights reserved.</p>
                </div>
                <div class="pull-right">
                    <p class="footertext">
                        Powered by Intelligolf</p>
                </div>
            </div>
        </div>
        <!-- JavaScripts -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <!--Typekit call -->
</body>

CSS をオーバーライドする

/* CUSTOM STYLING */

/* apply a natural box layout model to all elements */
*, *:before, *:after
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


body
{
    font-family: 'source-sans-pro' , sans-serif;
    font-weight: 400;
    background: #f6f7f0;
}

h2
{
    color: #0099ea;
    font-size: 18px;
    line-height: 20px;
    font-weight: 400;
}


/* NAVIGATION */

.navbar .brand
{
    color: #0099ea;
    line-height: 60px;
}

.navbar .brand .logo
{
    width: 70px;
}

.nav-collapse
{
    background-color: #fff;
    z-index: 1000;
    width: 100%;
}

.navbar-inner
{
    height: 80px;
    background: #ffffff;
}

.navbar-search
{
    line-height: 70px;
}

.navbar-search .search-query
{
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.nav li
{
    line-height: 60px;
}

.firstmenu
{
    float: right;
}


/* SECOND NAV MENU */

.secondmenu
{
    box-model: content-box;
    position: absolute;
    left: 3%;
    top: 20%;
    float: left;
}

.secondmenu .menu li
{
    list-style: none;
    text-align: right;
    font-size: 18px;
    background-color: #424242;
    border-bottom: 5px #fff solid;
    display: inline-block;
    float: right;
    clear: right;
    margin-bottom: 7px;
}

.secondmenu .menu li.active
{
    background-color: #0099ea;
}

.secondmenu .menu li a
{
    display: block;
    color: #fff;
    height: 20px;
    margin-top: 10px;
    padding: 10px 15px 15px 40px;
    line-height: 5px;
}



/* SLIDER */

.friendlyclub
{
    position: absolute;
    right: 160px;
    top: 100px;
    float: right;
}

.friendlyclub h1
{
    color: #fff;
    text-align: right;
    line-height: 50px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
}

.sliderwrap
{
    float: left;
    position: relative;
    width: 100%;
}

.sliderwrap img
{
    margin-bottom: 0;
    min-width: 100%;
    max-height: 600px;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.info
{
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}


.imgborder
{
    background: #f6f7f0;
}

.imgborder img
{
    padding: 7px;
}


.top-space
{
    margin-top: 50px;
    margin-bottom: 50px;
}

/* row of span4s, news */

.span4.news
{
    position: relative;
    padding: 30px 30px 20px 30px;
    min-height: 444px;
    background: #ffffff;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}

.span4.news h2
{
    margin-bottom: 15px;
}

.span4.news h3
{
    color: #999999;
    font-size: 18px;
    font-weight: 400;
}

.span4.news img
{
    margin: 0 0 20px 0;
    width: 100%;
}

.span4.news p.readmore
{
    position: absolute;
    text-transform: uppercase;
    bottom: 10px;
    right: 30px;
}


.imgborder
{
    padding: 10px;
}

.full-width
{
    width: 100%;
}

/* NAV ABOVE FOOTER */

.footernav
{
    margin-bottom: 10px;
    margin-left: 0;
}

.footernav li
{
    position: relative;
    left: 0;
    display: block;
    float: left;
    margin: 0 10px 0 0;
}

.footernav li:after
{
    content: ' /';
}

.footernav li:last-child:after
{
    content: ' ';
}

.footernav li a
{
    color: #424242;
}


/* FOOTER */
.push
{
    height: 40px;
}

.navbar-inverse
{
    margin-bottom: -40px;
}
.navbar-inverse .navbar-inner
{
    height: 40px;
    margin-top: 20px;
}

.navbar-inverse .navbar-inner .footertext
{
    color: #ffffff;
    line-height: 40px;
}


/* RESPONSIVE */

@media screen and (max-width: 980px)
{

    .firstmenu
    {
        clear: both;
        margin-right: -20px;
        display: block;
        position: relative;
    }

    .firstmenu
    {
        width: 50%;
        padding: 0;
    }

    .secondmenu
    {
        box-model: content-box;
        position: absolute;
        left: 3%;
        top: 20%;
        float: left;
    }

    .secondmenu li
    {
        text-align: left;
        float: left;
    }

    .secondmenu li a
    {
        text-align: left;
        float: left;
    }

    .secondmenu .menu li
    {
        list-style: none;
        text-align: right;
        font-size: 14px;
        border-bottom: 5px #fff solid;
        display: inline-block;
        float: left;
        clear: left;
        margin-bottom: 7px;
    }

    .secondmenu .menu li a
    {
        display: block;
        color: #777;
        height: 20px;
        margin-top: 10px;
        padding: 10px 15px 15px 40px;
        line-height: 5px;
    }

    .secondmenu .menu li + li a
    {
        margin-bottom: 2px;
    }
    .secondmenu .menu > li > a:hover, .secondmenu .menu > li > a:focus, .secondmenu .menu a:hover, .secondmenu .menu a:focus
    {
        background-color: #f2f2f2;
        text-decoration: none;
    }

    .secondmenu .menu > li > a, .secondmenu .menu a
    {
        padding: 9px 15px;
        display: block;
        width: 100%;
        font-weight: bold;
        color: #777777;
        margin-bottom: 0;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }
于 2013-08-02T12:40:18.250 に答える