尝试让Nav菜单和徽标在网格中对齐

时间：2015-08-07 21:30:46

标签： html css twitter-bootstrap

我正在为网站制作响应式导航菜单。我将标题图像更改为图像滑块但是现在在index.html页面上，导航菜单不再与网站网格对齐。

在＆＃39; about＆＃39;，＆＃39; services＆＃39;和菜单定位完美的联系页面。 在index.html页面中，我有css代码来定位导航栏和徽标位置：绝对;但是另一页上的其他导航是位置相对的。

我希望每个页面上的所有导航菜单都对齐，这样当用户更改页面时没有明显的区别。在小屏幕上可能并不明显，但是当您比较索引和移动设备上的页面时，很明显导航不在正确的网格中。

有人能指出我正确的方向吗？ 这是现场网站的链接 http://shaneogrady.me/navtest/

HTML 

<!DOCTYPE html>
<html>
<head>
    <title> HELLO </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content=""><script> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
    <script src="js/jquery-1.11.1.min.js"></script>

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,800,700,600' rel='stylesheet' type='text/css'>

    <link href="css/animate.css" rel="stylesheet" type="text/css" media="all">
    <script src="js/wow.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <script>
         new WOW().init();
    </script>

    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event) {        
                event.preventDefault();
                $('html,body').animate({scrollTop:$(this.hash).offset().top},900);
            });
        });
    </script>
</head>

<body>
<div id="home" class="banner a-banner">
    <div class="container" style="  position: relative; z-index: 5; top: 0%; left: 5%;">
        <div class="head-logo">
            <a href="index.html"><img src="images/logo.png" alt="" /></a>
        </div>
        <div class="top-nav">
            <span class="menu"><img src="images/menu.png" alt=""></span>
            <ul class="nav1">
                <li class="hvr-sweep-to-bottom"><a href="contact.html">Contact<i><img src="images/nav-but5.png" alt=""/></i></a></li>
                <li class="hvr-sweep-to-bottom"><a href="services.html">Services<i><img src="images/nav-but3.png" alt=""/></i></a></li>
                <li class="hvr-sweep-to-bottom"><a href="about.html">About<i><img src="images/nav-but2.png" alt=""/></i></a></li>
                <li class="hvr-sweep-to-bottom active"><a href="index.html">Home<i><img src="images/nav-but1.png" alt=""/></i></a></li>
                <div class="clearfix"></div>
            </ul>
            <script>
                $( "span.menu" ).click(function() {
                    $( "ul.nav1" ).slideToggle( 300, function() {});
                });
            </script>
        </div>
    </div>

<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
    <ol class="carousel-indicators">
        <li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#bs-carousel" data-slide-to="1"></li>
        <li data-target="#bs-carousel" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner">
        <div class="item slides active">
            <div class="slide-1">
                <div class="overlay"></div>
            </div>
            <div class="hero">
                <hgroup>
                    <h1>Batman</h1>        
                    <h3>Batman</h3>
                </hgroup>
                <div class="see-button">
                    <a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="about.html" role="button">See More</a>
                </div>
            </div>
        </div>
        <div class="item slides">
            <div class="slide-2">
                <div class="overlay"></div>
            </div>
            <div class="hero">        
                <hgroup>
                    <h1>Superman</h1>        
                    <h3>Superman</h3>
                </hgroup>       
                <div class="see-button">
                    <a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="about.html" role="button">See More</a>
                </div>
            </div>
        </div>
        <div class="item slides">
            <div class="slide-3">
                <div class="overlay"></div>
            </div>
            <div class="hero">        
                <hgroup>
                    <h1>Spiderman</h1>        
                    <h3>Spiderman</h3>
                </hgroup>
                <div class="see-button">
                    <a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="services.html" role="button">See More</a>
                </div>
            </div>
        </div> 
    </div>
</body>
</html>

CSS 

body{
    background:#fff;
    font-family: 'Open Sans', sans-serif;
}
body a {
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -o-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -ms-transition: 0.5s all;
}
.banner{
  background: url(../images/banner2.jpg) no-repeat 0px 0px #eeece9;
  min-height: 855px;
  background-size: cover;
  position: relative;
}
.head-logo{
  float: left;
}
.head-logo a {
  display: block;
  margin-top: 3.5em;
}
.top-nav{
  float: right;
  width: 70%;
}
.top-nav ul{
  padding:0;
  margin:0;
}
.top-nav ul  li {
  display: inline-block;
  width: 20%;
  margin-right: .4em;
  display:block;
  float: right;
  line-height:38px;
  margin:0;
  padding:0;
  position:relative;
}
.top-nav ul  li.active{
    background: #5abc5e;
}
.top-nav ul li a{
color: #FFF;
  font-size: 18px;
  margin-right: .4em;
  float: left;
  padding: 3em 0em 3em 1.4em;
  text-align: center;
  width: 79%;
}
.top-nav ul li a i{
  display: block;
  margin-top: 1em;
  color: #FFF;
  font-size: 11px;
  font-style: italic;
}
.top-nav ul li a:hover{
    text-decoration:none;
}

/********************************/
/*       Fade Bs-carousel       */
/********************************/
.fade-carousel {
    position: relative;
    height: 100vh;
}
.fade-carousel .carousel-inner .item {
    height: 100vh;
}
.fade-carousel .carousel-indicators > li {
    margin: 0 2px;
    background-color: #f39c12;
    border-color: #f39c12;
    opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
  width: 10px;
  height: 10px;
  opacity: 1;
}

/********************************/
/*          Hero Headers        */
/********************************/
.hero {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(0,0,0,.75);
      -webkit-transform: translate3d(-50%,-50%,0);
         -moz-transform: translate3d(-50%,-50%,0);
          -ms-transform: translate3d(-50%,-50%,0);
           -o-transform: translate3d(-50%,-50%,0);
              transform: translate3d(-50%,-50%,0);
}
.hero h1 {
    font-size: 6em;    
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.fade-carousel .carousel-inner .item .hero {
    opacity: 0;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s; 
}
.fade-carousel .carousel-inner .item.active .hero {
    opacity: 1;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s;    
}

/********************************/
/*            Overlay           */
/********************************/
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: #080d15;
    opacity: .3;
}

/********************************/
/*       Slides backgrounds     */
/********************************/
.fade-carousel .slides .slide-1, 
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
  height: 100vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.fade-carousel .slides .slide-1 {
  background-image: url(../images/banner2.jpg); 
}
.fade-carousel .slides .slide-2 {
  background-image: url(../images/squad.jpg);
}
.fade-carousel .slides .slide-3 {
  background-image: url(../images/roadside.jpg);
}

/********************************/
/*          Media Queries       */
/********************************/
@media screen and (min-width: 980px){
    .hero { width: 980px; }    
}
@media screen and (max-width: 640px){
    .hero h1 { font-size: 4em; }    
}

/* Sweep To Bottom */
.hvr-sweep-to-bottom {
  display: inline-block;                                           
  vertical-align: middle;
  -webkit-transform: translateZ(0);
    -o-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
    -o-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
    -ms-osx-font-smoothing: grayscale;
        -o-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
    -o-transition-property: color;
  -moz-transition-property: color;
  -ms-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-sweep-to-bottom:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #5abc5e;
  -webkit-transform: scaleY(0);
    -o-transform: scaleY(0);
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
    -o-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
    -o-transition-property: transform;
  -moz-transition-property: transform;
  -ms-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
      -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
        -o-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -ms-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active {
  color: white;
}
.hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

.banner-bottom-grids{
    margin: 5em 0;
}
.banner-bottom-left{
  padding: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0;
}
.banner-bottom-left h3{
  color: #000;
  font-size: 37px;
  margin: 0;
  line-height: 1.2em;
  font-weight: 300;
}
.banner-bottom-left h5{
  color: #969696;
  font-size: 14px;
  margin: 1em 0;
  line-height: 1.8em;
}
.banner-bottom-left h5 span{
    display:block;
}
.banner-bottom-left p{
color: #333333;
  font-size: 14px;
  margin: 0;
  line-height: 1.8em;
  font-weight: 600;
}
.banner-bottom-right img{
    width:100%;
}
.see-button{
  margin-top: 1em;
}
.see-button a{
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1em 4em;
  outline: none;
  background: #393939;
  border: none !important;
  border-radius:0;
  }
.jumbotron.banner-bottom-left {
  background: none;
}
/*------------------ Slider Part starts Here----------*/
#slider2,
#slider3 {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  margin: 0 auto;
}
.rslides_tabs {
  list-style: none;
  padding: 0;
  background: rgba(0,0,0,.25);
  box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
  -moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
  font-size: 18px;
  list-style: none;
  margin: 0 auto 50px;
  max-width: 540px;
  padding: 10px 0;
  text-align: center;
  width: 100%;
}
.rslides_tabs li {
  display: inline;
  float: none;
  margin-right: 1px;
}
.rslides_tabs a {
  width: auto;
  line-height: 20px;
  padding: 9px 20px;
  height: auto;
  background: transparent;
  display: inline;
}
.rslides_tabs li:first-child {
  margin-left: 0;
}
.rslides_tabs .rslides_here a {
  background: rgba(255,255,255,.1);
  color: #fff;
  font-weight: bold;
}
.events {
  list-style: none;
}
.callbacks_container {
  position: relative;
  float: left;
  width: 100%;
}
.callbacks {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
}
.callbacks li {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
.callbacks img {
  position: relative;
  z-index: 1;
  height: auto;
  border: 0;
}
.callbacks .caption {
    display: block;
    position: absolute;
    z-index: 2;
    font-size: 20px;
    text-shadow: none;
    color: #fff;
    left: 0;
    right: 0;
    padding: 10px 20px;
    margin: 0;
    max-width: none;
    top: 10%;
    text-align: center;
}
.callbacks_nav {
    position: absolute;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    top: 52%;
    left: 0;
    opacity: 0.7;
    z-index: 3;
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    height: 61px;
    width: 55px;
    background: transparent url("../images/themes.png") no-repeat left top;
    margin-top: -65px;
}
.callbacks_nav:active {
  opacity: 1.0;
}
.callbacks_nav.next {
  left: auto;
  background-position: right top;
  right: 0;
}
#slider3-pager a {
  display: inline-block;
}
#slider3-pager span{
  float: left;
}
#slider3-pager span{
    width:100px;
    height:15px;
    background:#fff;
    display:inline-block;
    border-radius:30em;
    opacity:0.6;
}
#slider3-pager .rslides_here a {
  background: #FFF;
  border-radius:30em;
  opacity:1;
}
#slider3-pager a {
  padding: 0;
}
#slider3-pager li{
    display:inline-block;
}
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
}
.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
}
.rslides li{
  position: relative;
  display: block;
  float: left;
}
.rslides img {
  height: auto;
  border: 0;
  width:100%;
}
.callbacks_tabs{
  list-style: none;
  position: absolute;
  top: 78%;
  z-index: 999;
  left: 45%;
  padding: 0;
  margin: 0;
}
.slider-top{
    text-align: center;
    padding:10em 0;
}
.slider-top h1{
    font-weight:700;
    font-size:48px;
    color:#010101;
}
.slider-top p{
    font-weight:400;
    font-size:20px;
    padding:1em 7em;
    color:#010101;
}
.slider-top ul.social-slide{
    display:inline-flex;
    margin: 0px;
    padding: 0px;
}

2 个答案:

答案 0 :(得分：0)

你可能想尝试从头开始逐步指导重建你的css，看看有什么改变了什么。如果更改不适用，请尝试在最后添加！important（如：{ width : 30% !important;}），有时Bootstrap有点占有欲。
也许在position : absolute ; right :0; top:0;中投掷一个.top-nav并从那里开始构建将会有所帮助。

答案 1 :(得分：0)

  

position: absolute的元素相对于。position: absolute   最近的祖先（而不是相对于   视口，像固定一样）

     

left允许元素相对定位   使用right，top，bottom或left: 0（包含   block是最近的祖先节点，其位置为relative，   绝对的或固定的。

要修复它，只需将right: 0和.container添加到left，这会使div拉伸到文档宽度。

这里有一个最小的代码段示例（不使用right，div.relative { position: relative; height: 200px; border: 3px solid #8AC007; } div.absolute { position: absolute; height: 100px; border: 3px solid blue; display: block; }）：

＆＃13;
＆＃13; 
<div class="relative">This
    <div>element has position: relative;
        <div class="absolute">This
            <div>element has position: absolute;</div>
        </div>
＆＃13; 
left: 0
＆＃13;
＆＃13;
＆＃13;

现在使用right: 0，div.relative { position: relative; height: 200px; border: 3px solid #8AC007; } div.absolute { position: absolute; height: 100px; border: 3px solid blue; display: block; left: 0; right: 0; }

＆＃13;
＆＃13; 
<div class="relative">This
    <div>element has position: relative;
        <div class="absolute">This
            <div>element has position: absolute;</div>
        </div>
＆＃13; 
Return RedirectToAction("Index", New With {.ct = Request.Url.Segments(1)})
＆＃13;
＆＃13;
＆＃13;

Check this out to full information

相关问题
最新问题