标题导航中断更改浏览器调整大小

时间:2014-01-09 05:58:15

标签: html css

为什么标题导航会因更改浏览器大小而中断?怎么解决?我尝试了不同的方法,但我没有发现问题!我请求某人解释并解决问题。请帮忙。

HTML

<!DOCTYPE>
<html="en">
    <head>
        <title>NewsHour24</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <header>
            <div class="logo">
                <img src="imgs/logo.png" alt="News Hour 24 logo"/>
            </div>
            <nav>
            <div class="header-nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Technology</a></li>
                    <li><a href="#">Health</a></li>
                    <li><a href="#">Sports</a></li>
                    <li><a href="#">Education</a></li>
                    <li><a href="#">Entertainment</a></li>
                    <li><a href="#">Support</a></li>
                    <li><a href="#">Sign Up</a></li>
                </ul>
            </div>
            </nav>
        </header>           <!-------------*Header ends here*-------------->

        <div class="content-area">
            <div class="content">
                <h1>News Hour 24</h1>
                <p>NH24 is a free online NEWS site. NH24 stands for News Hour 24. Our aim is to circulate truth,unbiased and latest news of 24 hours.NH24 covers all news  </p> 
                <p>You can easily update and share news with us.Your collaboration is our expectation</p>

                <h3>header3</h3>
                <p>paragraph paragraph paragraph</p>
            </div>

            <footer>

            <p>Footer</p>

            <ul>
                <li><a href="#">Home</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Technology</a></li>
                    <li><a href="#">Health</a></li>
                    <li><a href="#">Sports</a></li>
                    <li><a href="#">Education</a></li>
                    <li><a href="#">Entertainment</a></li>
                    <li><a href="#">Support</a></li>
                    <li><a href="#">Sign Up</a></li>
            </ul>
            </footer>
        </div>
    </body>

</html>

CSS:

    /**
    * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/)
    * Richard Clark (http://richclarkdesign.com)
    * http://cssreset.com
    */
    html, body, div, span, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    abbr, address, cite, code,
    del, dfn, em, img, ins, kbd, q, samp,
    small, strong, sub, sup, var,
    b, i,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section, summary,
    time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    }
    body {
    line-height:1;
    }
    article,aside,details,figcaption,figure,
    footer,header,hgroup,menu,nav,section {
    display:block;
    }
    nav ul {
    list-style:none;
    }
    blockquote, q {
    quotes:none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content:'';
    content:none;
    }
    a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    }
    /* change colours to suit your needs */
    ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
    }
    /* change colours to suit your needs */
    mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
    }
    del {
    text-decoration: line-through;
    }
    abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
    }
    table {
    border-collapse:collapse;
    border-spacing:0;
    }
    /* change border colour to suit your needs */
    hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
    }
    input, select {
    vertical-align:middle;
    }

    /*-------------------------------------CSS RESET ENDS----------------------------*/

    body {

        background-color: #7CB038;
         width:auto;
     }
    header {

        width:auto;
        background:red;
        height: 150px;
    }   
    .logo{

        float: left;
        clear: both;
        margin:10px 5px 1px 110px;
        width:200px;
        height:66px;

    }

    nav {
        display:block;
        padding:0;
        font-size: 1.3em;
        text-align:center;
        padding:0;
        list-style-type:none;
        margin: 0px 5px 10px 0px;
        height:50px;



    }
    nav ul li {

        display: inline;
        border-right:5px solid #fff ;
        padding:10px;

          }

    nav a{
        display:inline-block; 
        text-decoration: none;
        color:white;
        display:inline-block;

    } 

    .content-area{
        margin: 0 auto;
        font-family: sans-serif; open-sans;
        width:60%;
    }

1 个答案:

答案 0 :(得分:0)

如果您希望菜单不破,请设置固定宽度。

更新小提琴 - http://jsfiddle.net/begtw/6/

  • 删除了您不需要的标签
  • 将部分class es更改为id s(像div#content-area这样的元素每页都是唯一的,因此每页只使用一次id更有意义)
  • 将徽标id直接添加到徽标图片中。图像位于左侧

HTML

 <header>
       <img src="imgs/logo.png" id="logo" alt="News Hour 24 logo" />
       <nav id="nav-header">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Technology</a></li>
                <li><a href="#">Health</a></li>
                <li><a href="#">Sports</a></li>
                <li><a href="#">Education</a></li>
                <li><a href="#">Entertainment</a></li>
                <li><a href="#">Support</a></li>
                <li><a href="#">Sign Up</a></li>
            </ul>
        </nav>
    </header>  

CSS - 固定宽度。 #logo绝对定位。

nav#nav-header {
    display:block;
    padding:0;
    font-size: 1em;
    padding:0;
    list-style-type:none;
    margin: 15px 5px 10px 160px; /*Large left margin to fit #logo*/
    height:50px;
    float: left;
    width: 1100px;
}

#logo{
    position: absolute;
    left: 10px; top: 10px;
}

这将修复您的菜单。对于较小的屏幕尺寸,您可能需要更多的灵活性,但是:)

玩一场比赛并将其变成你自己的比赛。

萨姆