twitter bootstrap-Dropdown-z-index und Transparenz, Sichtbarkeit Probleme

Ich habe Probleme mit meinem twitter-bootstrap-dropdown-Menüs immer versteckt unter Objekte und auch mit seiner Transparenz. Beispiel: http://pictorious-web-qa.herokuapp.com

twitter bootstrap-Dropdown-z-index und Transparenz, Sichtbarkeit Probleme

  1. Menü z-index geht unter dem Profil-Foto, wenn der Bildschirm
    schrumpft auf rund 400px breit. Ich habe in der media-query
    konnte keine z-index-Einstellungen.

    Sehen http://pictorious-web-qa.herokuapp.com/profiles/albert für eine
    Beispiel.

  2. Ich will, dass die Transluzenz in das nav-Menü aber wollen, die
    solide Deckkraft dropdown-Menü Elemente. Ich habe die Deckkraft auf
    der Menü container direkt an, aber das schien nicht, etwas zu ändern.

  3. Auch das Menü hat einen z-index problem mit dem vimeo-video auf der home
    Seite http://www.pictorious.com wenn Sie verkleinern der Bildschirm-Breite unten
    wo der nav-bar-Menü überlappt das video. Ich hab auch schon versucht
    festlegen der z-index ohne Erfolg, und nicht sicher sind, wie Sie den wmode-in
    die vimeo-Standard-iframe-embed-Technik

Es ist ein standard-twitter bootstrap-nav:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <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="/">Pictorious!</a>
      <div class="btn-group pull-right" id="nav-login">
            <a class="btn"  href="/login">Sign-In</a>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="/">Home</a></li>
          <li><a href="/challenges">Challenges</a></li>
                    <li><a href="/about">About</a></li>

                        <form class="navbar-search pull-left form-search" action="/search">
                            <input type="text" class="search-query span2" placeholder="Search" name="keyword">
                        </form>
                    </li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>

Das einzige, was zu ändern scheint auf den überlappenden Foto ist der Margen und Polsterung auf die kleinere media queries.

  • Wo ist ein code? Wo sind die screenshots? Bitte, Fragen Sie nicht, zum Debuggen einer website für Sie.
  • code-snippet Hinzugefügt und screenshot Hinzugefügt
InformationsquelleAutor MonkeyBonkey | 2013-04-23
Schreibe einen Kommentar