导航栏不会完全向左移动？

时间：2015-09-07 22:51:11

标签： html css navigation media-queries nav

我的导航栏不会完全向左移动，这意味着当我尝试使用媒体查询时，这是一个问题。我将发布下面的所有代码，以便您可以自己尝试;显然图像会丢失，但是，你会发现如果你将浏览器的大小缩小到移动大小（你会看到它何时捕捉）导航栏如何从左侧跳出而在代码中没有代码告诉它这样做......我可以在我的代码编辑器中看到它，当它没有任何东西时突出显示它周围的蓝色框！

希望你能提供帮助，我真的很感激任何看过这个的人。

enter image description here

HTML：

    <!DOCTYPE HTML>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="description" content="Recognition | Macast Designs">
  <title>Recognition | Macast Designs</title> 

      <!-- Support for different device widths -->
      <meta name="viewport" content="width=device-width,initial-scale=1.0">

      <!-- CSS Reference -->
      <link rel="stylesheet" type="text/css" href="_css/styles.css">

      <!-- Favicon -->
      <link rel="apple-touch-icon" sizes="57x57" href="_favicon/apple-touch-icon-57x57.png">
      <link rel="apple-touch-icon" sizes="60x60" href="_favicon/apple-touch-icon-60x60.png">
      <link rel="apple-touch-icon" sizes="72x72" href="_favicon/apple-touch-icon-72x72.png">
      <link rel="apple-touch-icon" sizes="76x76" href="_favicon/apple-touch-icon-76x76.png">
      <link rel="apple-touch-icon" sizes="114x114" href="_favicon/apple-touch-icon-114x114.png">
      <link rel="apple-touch-icon" sizes="120x120" href="_favicon/apple-touch-icon-120x120.png">
      <link rel="apple-touch-icon" sizes="144x144" href="_favicon/apple-touch-icon-144x144.png">
      <link rel="apple-touch-icon" sizes="152x152" href="_favicon/apple-touch-icon-152x152.png">
      <link rel="apple-touch-icon" sizes="180x180" href="_favicon/apple-touch-icon-180x180.png">
      <link rel="icon" type="image/png" href="_favicon/favicon-32x32.png" sizes="32x32">
      <link rel="icon" type="image/png" href="_favicon/favicon-194x194.png" sizes="194x194">
      <link rel="icon" type="image/png" href="_favicon/favicon-96x96.png" sizes="96x96">
      <link rel="icon" type="image/png" href="_favicon/android-chrome-192x192.png" sizes="192x192">
      <link rel="icon" type="image/png" href="_favicon/favicon-16x16.png" sizes="16x16">
      <link rel="manifest" href="/_favicon/manifest.json">
      <meta name="msapplication-TileColor" content="#ffffff">
      <meta name="msapplication-TileImage" content="/mstile-144x144.png">
      <meta name="theme-color" content="#ffffff">

      <!--Typekit -->
      <script src="//use.typekit.net/kxu8xoj.js"></script>
      <script>try{Typekit.load({ async: true });}catch(e){}</script>
      </head>
    <header>
        <div id="branding">
            <h4>Macast Designs</h4>
            <img src="_images/md-logo.png" alt="Macast Designs Logo">
            <h5>Bringing Design to Life</h5>
        </div>
      <nav id="page-navigation">
          <ul>
                <li><a href="index.html">Home</a></li>
                    <ul class="top-menu">
                        <li><a href="_portfolio/photography.html"  onclick="return false">Photography</a>
                        <ul class="sub-menu">
                            <li><a href="_portfolio/_photography/bmc-himley-mini-show-2015.html">BMC Himley Mini Show 2015</a></li>
                            <li><a href="_portfolio/_photography/kinver-snow.html">Kinver Snow</a></li>
                            <li><a href="_portfolio/_photography/mini-runs-collection.html">"Mini Runs" Collection</a></li>
                            <li><a href="_portfolio/_photography/hofner-bass.html">Hofner Bass</a></li>
                            <li><a href="_portfolio/_photography/nature.html">Nature</a></li>
                            <li><a href="_portfolio/_photography/haynes-motor-museum.html">Haynes Motor Museum</a></li>
                            <li><a href="_portfolio/_photography/miscellaneous.html">Miscellaneous</a></li>
                            <li><a href="_portfolio/_photography/classic-mini.html">Classic Mini</a></li>
                        </ul>
                    </li>
                        <li><a href="_portfolio/graphic-design.html"  onclick="return false">Graphic Design</a>
                        <ul class="sub-menu">
                            <li><a href="_portfolio/_graphic-design/story-bag-artwork.html">"Story Bag" Artwork</a></li>
                            <li><a href="_portfolio/_graphic-design/business-cards.html">Business Cards</a></li>
                            <li><a href="_portfolio/_graphic-design/logo-design.html">Logo Design</a></li>
                            <li><a href="_portfolio/_graphic-design/the-mexican-job.html">"The Mexican Job"</a></li>
                            <li><a href="_portfolio/_graphic-design/magazine-covers.html">Magazine Covers</a></li>
                            <li><a href="_portfolio/_graphic-design/wpap-artwork.html">WPAP Artwork</a></li>
                            <li><a href="_portfolio/_graphic-design/lyric-posters.html">Lyrics Posters</a></li>
                        </ul>
                    </li>
                        <li><a href="_portfolio/3d-modelling.html">3D Modelling</a></li>
                    </ul>
                <li><a href="about.html">About</a></li>
                <li><a href="recognition.html">Recognition</a></li>
          </ul>
      </nav>
    </header>
  <body>
      <article>
          <div id="content">
      <h1>Recognition</h1><hr color="darkgrey">
                  <div id="recognition-description-container">
      <h2>Winner of Mini Mania, Inc. 2014 Classic Mini Calendar Competition - December 2014, January 2015.</h2>
      <p>I received notification that two out of a possible three images that were sent had been chosen for the final vote by the general public. The vote was created on Facebook, with two images for each month to choose between.</p>
      <p>My photographs were in the final for the Cover and for December. December was a clear win, but the Cover votes were so close that they decided to use the other entry as the Cover Photograph and mine as January for their 2015 MiniMania Calendar.</p>
                      <p id="calendar-images">
                          <img src="_images/_recognition/mini-mania-calendar-front.jpg" width="41%" alt="Mini Mania Calendar Front"><img src="_images/_recognition/mini-mania-calendar-back.jpg" width="41%" alt="Mini Mania Calendar Back"></p>
      <h2>Featured in Mini Magazine.</h2>
      <p>In every magazine, they feature a select few of the fan's cars, so I decided to send some photographs to them. They were very impressed and asked for some words to go with the images so it could be published in their magazine.</p>
      <div class="recognition-images">
          <img src="_images/_recognition/mini-magazine.PNG" width="80%" alt="Mini Magazine">
      <h2>Featured in British Mini Club's Magazine.</h2>
      <p>After I had sent a photograph for my latest membership card to the British Mini Club, the owner of the club loved the photograph I had sent them and said that my Mini would “make a great feature in the clubs magazine”. I therefore sent more photographs to them to be published with a few words from myself.</p>
      <img src="_images/_recognition/bmc-magazine.jpg" width=80% alt="British Mini Club Magazine">
              </div>
              </div>
          </div>
      </article>
    </body>
    <footer>
        <p>&copy; Macast Designs | All rights reserved</p>
        <div id="youtube-link">
            <a href="https://www.youtube.com/MacastDesigns" target="_blank"><img src="_images/_social/YouTube-icon.png" alt="Macast Designs Youtube"></a></div>
        <div id="facebook-link">
            <a href="https://www.facebook.com/MacastDesigns" target="_blank"><img src="_images/_social/FB-logo.png" alt="Macast Designs Facebook"></a></div>
                <div id="linkedin-link">
                    <a href="https://www.linkedin.com/in/macastdesigns" target="_blank"><img src="_images/_social/LinkedIn-logo.png" alt="Macast Designs LinkedIn"></a>
        </div>
    </footer>
</html>

CSS：

    /*navigation*/
#page-navigation
{
    width: 70%;
    height: 53px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}

#page-navigation ul li
{
    color: white;
    list-style: none;
    background-color: darkslategray;
    width: 9em;
    float: left;
}

li
{
    position: relative;
}

li.title
{
    display: none;   
}

li a
{
    display: block;
    color: white;
    line-height: 1.3em;
    padding: 1em;
    text-align: center;
}

li a:link
{
    text-decoration: none;
}

li a:visited
{
    text-decoration: none;
    color: white;
}

li a:hover, .top-menu > li:hover > a
{
    background-color: rgb(48,48,48);
}

li a:active
{
    background-color: dimgray;
}

ul.sub-menu
{
    width: auto;
    height: auto;
    position: absolute;
    left: -9000em;
    overflow: hidden;
}

ul.sub-menu li
{
    clear: left;
    float: none;
    margin-left: -2.5em;
    z-index: 1000;
}

.top-menu li:hover ul
{
    left: 0;
}

ul.sub-menu li a
{
    height: auto;
    border-bottom: 1px solid gray;
    padding: .4em 1em;
    background-color: dimgray;
    padding-top: 1em;
    padding-bottom: 1em;
}

ul.sub-menu li:last-child a
{
    border-bottom: none;
}

ul.sub-menu li a:hover
{
    background-color: darkslategray;
}

ul.sub-menu li a:active
{
    background-color: gray;
}

ul.top-menu
{
    padding: 0;   
}

/*branding*/
#branding
{
    width: 200px;
    height: auto;
    line-height: 0.1em;
    margin-right: 130px;
    margin: 0 auto;
    clear: both;
}

#branding img
{
    width: 100px;
    height: auto;
    float: right;
    margin-right: 47px;
    margin-top: -10px;
}

h4
{
    font-weight: 500;
    font-size: 1.3em;
    text-align: center;
}

h5
{
    font-weight: 100;
    font-size: 1em;
    text-align: center;
    clear: right;
    line-height: 30px;
    margin-bottom: 14px;
}
/*body*/
body
{
    width: 90%;
    height: auto;
    margin: 0 auto;
    background-color: white;
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-size: 100%;
    color: black;
    overflow-y: scroll;
}

/*content*/
#content
{
    width: 80%;
    overflow: auto;
    background-color: rgb(48, 48, 48);
    color: white;
    margin: 0 auto;
    padding: 2%;
}

h1
{
    font-weight: 700;
    font-size: 2em;
    margin-bottom: 0.1em;
    margin-top: 0.3em;
}

h2
{
    font-weight: 500;
    font-size: 1.7em;
    margin-top: 0em;
    margin-bottom: 0em;
}

h3
{
    font-weight: 500;
    font-size: 1.5em;
    margin-top:  0.5em;
    margin-bottom: 0.1em;
}

p
{
    font-weight: 300;
    font-size: 1.1em;
    line-height: 1.3em;
    margin-top: 0.3em;
    margin-bottom: 0.5em;
}

/*about*/
#portrait img
{
    clear: right;
    display: block;
    float: right;
    margin-right: 14%;
    margin-bottom: 2%;
    margin-top: 30px;
    box-shadow: 0px 3px 14px 0.5px rgb(15, 15, 10);
}

/*equipment*/
#equipment-container
{
    float: left;
    width: 35%;
    height: auto;
    color: white;
    padding: 20px;
}

#equipment li
{
    font-weight: 400;
    font-size: 1.1em;
    line-height: 1.3em;
    margin-top: 0.1em;
    margin-bottom: 0.5em;
}

/*images*/
#image-container img
{
    clear: right;
    float: right;
    display: block;
    position: relative;
    margin-bottom: 15px;
}

#image-container-shadow img
{
    clear: right;
    display: block;
    float: right;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 15px;
    box-shadow: 0px 3px 14px 0.5px rgb(15, 15, 10);
}

#vertical-art-container img
{
    clear: right;
    display: block;
    float: right;
    margin-right: 100px;
    margin-bottom: 15px;
    margin-top: 20px;
    box-shadow: 0px 3px 14px 0.5px rgb(15, 15, 10);
}

/*recognition*/
#recognition-description-container
{
    padding: 5px;
    color: white;
    font-size: 1.2em;
}

.recognition-images img
{
    padding: 5px;
    display: block;
    margin: 0 auto;
}

#calendar-images
{
    text-align: center;
}

#calendar-images img
{
    padding: 8px;
}

/*story bags*/
#noah-ark-container img
{
    float: right;
    display: block;
    margin-right: 10px;
}

#story-bag-container img
{
    float: right;
    display: block;
    clear: right;
    margin-right: 15%;
}

/*3d modelling*/
#classic-mini-advert
{
    margin-bottom: 15px;
}

/*footer*/
footer
{
    height: 50px;
    width: auto;
    margin-top: 25px;
    margin-bottom: 25px;
}

footer p
{
    float: left;
    margin-left: 125px;  
    margin-top: 10px;
}

#youtube-link img
{
    float: right;
    width: auto;
    height: 35px;
    margin-right: 130px;
    margin-top: 3px;
}

#facebook-link img
{
    float: right;
    width: auto;
    height: 35px;
    margin-right: 20px;
    margin-top: 3px;
}

#linkedin-link img
{
    float: right;
    width: auto;
    height: 35px;
    margin-right: 20px;
    margin-top: 3px;
}

/*Mobile Styles*/
@media screen and (max-width : 480px)
{   
    /*navigation*/
    #page-navigation
    {
        height: 175px;
        width: 330px;
        margin-left: -40px;
    }

    /*content*/
    #content
    {
        width: 90%;
        overflow: hidden;
        background-color: rgb(48, 48, 48);
        color: white;
        margin: 0 auto;
        padding: 10px;
    }

    h1
    {
        font-weight: 700;
        font-size: 1.5em;
        margin-bottom: 0.1em;
        margin-top: 0.3em;
    }

    h2
    {
        font-weight: 500;
        font-size: 1.3em;
        margin-top: 0em;
        margin-bottom: 0em;
    }

    h3
    {
        font-weight: 500;
        font-size: 1.1em;
        margin-top:  0.5em;
        margin-bottom: 0.1em;
    }

    p
    {
        font-weight: 300;
        font-size: 1em;
        line-height: 1.3em;
        margin-top: 0.1em;
        margin-bottom: 0.5em;
    }

    /*equipment*/
    #equipment-container
    {
        width: 88%;
        height: auto;
        color: white;
        padding: 20px;
    }

    #equipment li
    {
        font-weight: 400;
        font-size: 1.1em;
        line-height: 1.3em;
        margin-top: 0.1em;
        margin-bottom: 0.5em;
    }

    /*images*/
    #image-container img
    {
        float: left;
        display: block;
        margin: 0 auto;
        margin-top: 5px;
        margin-bottom: 5px;
        width: 100%;
    }

    #image-container-shadow img
    {
        float: left;
        display: block;
        margin: 0 auto;
        margin-top: 5px;
        margin-bottom: 5px;
        width: 100%;
        box-shadow: 0px 3px 14px 0.5px rgb(15, 15, 10);
    }

    #vertical-art-container img
    {
        display: block;
        float: left;
        width: 100%;
        margin: 0 auto;
        margin-top: 5px;
        margin-bottom: 5px;
        box-shadow: 0px 3px 14px 0.5px rgb(15, 15, 10);
    }

    /*about*/
    #portrait img
    {
        display: block;
        float: left;
        width: 100%;
        box-shadow: 0px 3px 14px 0.5px rgb(15, 15, 10);
    }

    /*story bags*/
    #noah-ark-container img
    {
        float: left;
        display: block;
        width: 100%;
    }

    #story-bag-container img
    {
        float: left;
        display: block;
        width: 100%;
    }

    /*recognition*/
    .recognition-images img
    {
        display: block;
        width: 100%;
        padding: 0px;
        margin-bottom: 17px;
    }

    #calendar-images img
    {
        width: 100%;
        padding: 0px;
    }   

    /*footer*/
    footer
    {
        height: 100px;
        width: 100%;
        margin-top: 25px;
        margin-bottom: 25px;
    }

    footer p
    {
        font-size: 1em;
        text-align: center;
        margin-bottom: 25px;
        margin-left: 15px;
    }

    #youtube-link img
    {
        clear: both;
        margin-right: 20px;
        margin-top: 3px;
        margin-bottom: 8px;
    }

    #facebook-link img
    {
        margin-bottom: 8px;
    }

    #linkedin-link img
    {
        margin-bottom: 8px;   
    }
}

1 个答案:

答案 0 :(得分：0)

我不是这方面的专家，但我首先会为各种列表项打开和关闭标记的缩进。

相关问题
最新问题