html - 古怪的导航定位问题让我很困惑。

标签 html css responsive-design

我一直在开发我的第一个响应式网站，但我遇到了导航问题。

每当我尝试增大文本大小时，我感到困惑的部分是主标题 (#header_bar .heading h1 a) 并没有留在#header_bar 容器内。

我会尝试在不使用任何定位或负边距的情况下实现这一目标，但我一直做空。

我包括一个 jsfiddle 链接，其中包含 css 重置到位。我希望这是足够的信息，我真的很感谢花时间看这个的人。

非常感谢!

http://jsfiddle.net/Leo12534/5J9LL/ 

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Anna Paulette</title>

    <!-- CSS FILES BEING LINKED -->
    <link rel="stylesheet" href="reset.css" />
    <link rel="stylesheet" href="styles.css" />

</head>

<body>
    <div id="header_wrap">
        <section id="header_bar">
            <div class="heading">
                <h1><a href="#">Test TestTest</a>
                </h1>
            </div>

            <nav>
                <ul>
                    <li><a href="#">Test</a>
                    </li>
                    <li><a href="#">Test</a>
                    </li>
                    <li><a href="#">Test</a>
                    </li>
                    <li><a href="#">Test</a>
                    </li>
                    <li><a href="#">Test</a>
                    </li>
                    <li><a href="#">Test</a>
                    </li>
                </ul>
            </nav>


        </section>
    </div>
    <!-- end header_wrap -->

    <div id="header_content_wrap">

        <section id="header_content">
            <h1>Lorem ipsum dolor.</h1>
            <h2>Lorem ipsum dolor sit amet, consectetur.</h2>
        </section>
        <!-- End header Content -->
    </div>

    <div id="header_dirt">
    </div>
    <!-- End header dirt -->

    <div id="content_wrap">

        <section id="main_content">
            <h1>Test Test Test</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex deserunt dignissimos officia est perferendis ut neque dolorum nesciunt quis quaerat. Quod, sunt, itaque, officia, quaerat esse similique doloremque quasi ex soluta adipisci illo ea quas officiis
                <cite>ratione odit magnam provident repellat inventore ab perspiciatis neque architecto rerum expedita</cite>.
                <strong>Quas, at!</strong>
            </p>
            <p><a href="www.google.com">www.google.com</a>
            </p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex deserunt dignissimos officia est perferendis ut neque dolorum nesciunt quis quaerat. Quod, sunt, itaque, officia, quaerat esse similique doloremque quasi ex soluta adipisci illo ea quas officiis ratione odit magnam provident repellat inventore ab perspiciatis neque architecto rerum expedita. Quas, at!</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, vero, ullam quam perferendis deserunt vel quasi voluptatem sapiente impedit natus sequi dolorum sunt eveniet aut.</p>
        </section>

        <section id="sidebar_content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, architecto alias quam consequatur cum voluptatum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, dolor.</p>

            <ul>
                <li>test test</li>
                <li>test test</li>
                <li>test test</li>
                <li>test test</li>
            </ul>
        </section>

        <section id="sidebar_content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, architecto alias quam consequatur cum voluptatum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, dolor.</p>

            <ul>
                <li>test test</li>
                <li>test test</li>
                <li>test test</li>
                <li>test test</li>
            </ul>
        </section>

    </div>
    <!-- end content_wrap -->

    <div id="footer_wrap">
        <section id="footer">
            <nav>
                <ul>
                    <li>test</li>
                    <li>tes</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                </ul>
            </nav>

        </section>
        <!-- End footer -->
    </div>

    <!-- end footer_wrap -->

</body>

</html>


@import url(http://fonts.googleapis.com/css?family=Amatic+SC:400,700);
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700,400italic,600italic,700italic);


/*-----------------------------------------------------------------
// Global Styles Styling
-----------------------------------------------------------------*/
body {
  color: #fff;
  background: url("") #AAAAAA repeat -20px -110px; 
}

body p, ul li {
  font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

a:link, a:visited {
  text-decoration: none;
  outline: none;
  color: #fc6b35;
}
a:hover {
  color: #ba3b0d;
}
body cite {
  font-style: italic;
}
body strong {
  font-weight: bold;
}

h1 {
  font-weight: normal;
  font-size: 36px;
}

h2 {
  font-weight: normal;
  font-size: 30px;

}

h3 {
  font-size: 22px;
  font-weight: normal;

}

h4 {
  font-size: 18px;
  font-weight: normal;
}

/*-----------------------------------------------------------------
// Header Styling
-----------------------------------------------------------------*/
#header_wrap {
  background-color:#001F3F;
  position:relative;
  top:0;
  -moz-box-shadow: 0px 2px 15px 0px #bebebe; 
  -webkit-box-shadow: 0px 2px 15px 0px #bebebe; 
  box-shadow: 0px 2px 15px 0px #bebebe; 
  clear: both;
}

#header_bar {
  background-color: #fdfdfd !Important;
  width:75%;
  margin: 0 auto;
  position: relative;
}

#header_bar .heading {
    clear: both;
    width: 100%;
    height: 100%;
    display: block;
}

#header_bar .heading h1 {
  display:block;
  float:left;
  height:100%;
clear:left;
}

#header_bar .heading h1 a {   
  color:#CFB590;
  font-family: 'Amatic SC', cursive;
  font-size: 2.2em;
  font-weight:700;
  height:100%;
}

#header_bar .heading h1 a:hover {   
  color:#49281F;
}

#header_bar nav { /* width: 50%; */ text-align:right; /* float: right; */ clear: right; /* background-color: orange; */ /* width: 680px; */ height: 100%;}
#header_bar nav ul {  list-style: none;   padding: 0px;   margin: 0px; font-weight: bold;   /* float: left; */  height: 100%;}
#header_bar nav ul li { display: inline-block; }
#header_bar nav ul li a { 
  display: block; 
  padding: 20px 20px; 
  text-decoration: none;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(78, 68, 60, 0.5);
  -webkit-transition: color 0.2s ease-in-out;
  -moz-transition: color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
  font-family: 'Josefin Sans', sans-serif;

}
#header_bar nav ul li a:hover { background-color: #CFB590; color: #fff; }


#header_content_wrap {
  background: url("") #FF4136 repeat-x -20px -110px; 
  width:100%;
  height:250px;

}

#header_content {
  width:75%;
  height:100%;
  margin: 0 auto;
  background: #85144B url("") no-repeat 0px 10px; 
}

#header_content h1 {
  margin: 0;
  padding: 0 0 15px 0;
  font-family: "Tungsten A", "Tungsten B", Helvetica, Arial, sans-serif;
  font-size: 1.8em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  float:right;
  margin-top:20px;
  clear:both;
  color:#C96879;
}

#header_content h2 {
  float:right;
  clear:both;
}

#header_dirt {
  background: url("") #FF851B repeat-x -20px -110px; 
  width:100%;
  height:25px;
  clear: both;
}

/*-----------------------------------------------------------------
// Content Styling
-----------------------------------------------------------------*/
#content_wrap {
      background-color:#111111;    
  width:75%;
  margin: 0 auto;
  height:100%;
  overflow:hidden;

  clear: both;
}

#content_wrap p {
  margin:1.041666666667%; /*10 / 960*/
  line-height: 1.375em;

}

#main_content {
  width:65%; /* 672 / 960 */
  float:left;
  padding:1.041666666667%; /*10 / 960*/
  margin:1.041666666667%; /*10 / 960*/
  background-color: rgba(49, 44, 44, 0.2);
  background: rgba(49, 44, 44, 0.2);
}

#sidebar_content {
  width:26%; /* 288 / 960 */
  float:left;
  background-color: #001F3F;
  padding:1.041666666667%; /*10 / 960*/
  margin:1.041666666667%; /*10 / 960*/
  background-color: rgba(49, 44, 44, 0.2);
  background: rgba(49, 44, 44, 0.2);
}

/*-----------------------------------------------------------------
// Footer Styling
-----------------------------------------------------------------*/
#footer_wrap {
  background-color:#85144B;
  clear:both;
  position:relative;
  bottom:0;
  left: 0;
  height: 120px;
  width: 100%;
}

#footer {
  width:75%;
  margin:0 auto;
  background-color:#3D9970;
}

/*-----------------------------------------------------------------
// MEDIA QUERIES
-----------------------------------------------------------------*/

@media screen and (min-width: 951px) {
  h1 {font-size: 36px;} #header_bar .heading h1 a {text-align: center;}
}
@media screen and (max-width: 950px) {
  h1 {font-size: 24px;} #header_bar .heading h1 a {text-align: center;}
}
@media screen and (max-width: 749px) {
  h1 {font-size: 22px;} #header_bar .heading h1 a {text-align: center;}
}
@media screen and (max-width: 569px) {
  h1 {font-size: 20px;} #header_bar .heading h1 a {text-align: center;}
}
@media screen and  (max-width: 321px) {
  h1 {font-size: 18px; } #header_bar .heading h1 a {text-align: center;} #header_bar nav ul li a { font-size:12px;}
}

/*Navigation*/
@media (max-width:48.000em){
  #header_bar .heading h1 {width:100%;text-align: center;}
  #header_bar nav ul {  width: 100%; font-weight: normal;  }
  #header_bar nav ul li { width: 100%;  text-align: center;  }
  #header_bar nav ul li a { padding: 10px -10px; border-bottom: 1px solid #ccc; display: block;  padding:10px; margin:0;}
}

最佳答案

添加此 CSS 代码:

#header_bar nav:after { content:""; display:block; clear:both; }

看，问题是 Logo (#header_bar .heading h1 a) 有 float:left，因此它在没有上面的代码的情况下漂浮在标题栏之外，清除 float 并防止你的问题。

关于html - 古怪的导航定位问题让我很困惑。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21769174/

上一篇：html - 移动视口(viewport)无法打开适合屏幕的页面

下一篇：css - 制作一个 Sass mixin，将部分 CSS 写入不同的 CSS 文件

相关文章：

Javascript 比较 localStorage 的 2 个检查

html - 创建一个具有固定大小但居中元素的 Css Button

javascript - 使用当前页面 URL 自动填充文本字段值

html - 使用最大宽度的 bootstrap col

javascript - Bootstrap 3 - 如果将 <p> 插入其中，则列中的第一个 <div> 会破坏布局

html - CSS 清晰的理解

javascript - 使用 document.write 编写 HTML 导致尝试嵌入 YouTube 时出错

javascript - 如何使用 javascript 创建轮播并使用按键将鼠标悬停在上一张和下一张图片上？

jquery - 如何使我的本地滚动偏移与此固定标题一起使用？

html - 修复了键盘进入屏幕时移动浏览器中的元素问题

©2024 IT工具网  联系我们