文章/答案/技术大牛

发布

社区首页 >问答首页 >奇怪的导航定位问题让我很困惑。

问奇怪的导航定位问题让我很困惑。
EN

Stack Overflow用户

提问于 2014-02-14 01:27:46

回答 2查看 62关注 0票数 1

我一直在我的第一个响应网站工作，我有一个问题，我的导航。

当我试图增加文本的大小时，我感到困惑的部分是主标题(#header_bar .heading h1 a)，而不是停留在#header_bar容器中。

我会努力做到这一点，而不使用任何定位或负利润，但我一直在紧缺。

我包括一个弹琴链接与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;}
}

html

css

responsive-design

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-02-14 01:44:31

添加以下CSS代码：

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

看，问题是徽标(#header_bar .heading h1 a)有float:left，因此它在没有上面的代码的情况下在标头栏外浮动，这就清除了浮点数并防止了问题的发生。

票数 0

Stack Overflow用户

发布于 2014-02-14 10:38:02

我用一个清晰的方法来整理像这样的问题

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom:1;clear: both; }

-apply .clearfix to #header_content

-changing #header_content到最小高度:250 to

-removing在#header_content_wrap上的高度

 <div id="header_content_wrap">
    <section id="header_content" class="clearfix">
       <h1>Lorem ipsum dolor.</h1>
       <h2>Lorem ipsum dolor sit amet, consectetur.</h2>
    </section>
 </div>

小提琴：http://jsfiddle.net/5J9LL/1/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21769174

复制

相似问题

问奇怪的导航定位问题让我很困惑。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问奇怪的导航定位问题让我很困惑。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问奇怪的导航定位问题让我很困惑。
EN