私のナビゲーションバーの中心を作成する

ナビゲーションバーを画面の中央に配置したいと思っています。ナビゲーションバーのために私はリストを作成しました。私はリンクを失うよりも、テーブル要素を使ってみました。私の目標は、ロゴの下にナビゲーションバーを配置することだけです。私のナビゲーションバーの中心を作成する

font-size: 48px; 
 
} 
 

 
.img { 
 
    
 
    text-align: center; 
 
} 
 

 

 

 
.table { 
 
\t /*display: table; Allow the centering to work */ 
 
\t margin: 0 auto; 
 
} 
 

 
ul#horizontal-list { 
 
\t min-width: 100%; 
 
\t list-style: none; 
 
\t padding-top: 20px; 
 
\t } 
 
\t ul#horizontal-list li { 
 
\t \t display: inline; 
 
\t } 
 

 

 

 
.logo { 
 
/* top: 200px;*/ 
 
    position: relative; 
 
    text-align: center; 
 

 
} 
 

 

 

 
ul { 
 
\t float: center; 
 
position: relative; 
 
    text-align: center; 
 
    /*margin-left: auto; 
 
    margin-right: auto;*/ 
 

 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
/* overflow: hidden;*/ 
 
    background-color: white; 
 
     z-index: -2; 
 

 
} 
 

 
li { 
 
    float: left; 
 
    border-top:3px solid #C5908E; 
 
    border-bottom:3px solid #C5908E; 
 

 
     padding: 5px; 
 
} 
 

 
li:first-child { 
 
    border-left: 3px solid #C5908E; 
 
} 
 
li:last-child { 
 
    border-right: 3px solid #C5908E; 
 
} 
 

 
/*to change font */ 
 
li a { 
 

 

 
\t text-align: center; 
 
    display: inline; 
 
    color: #484846; 
 
    font-size: 30px; 
 
    font-family: 'Poiret One', cursive; 
 
    
 
    padding: 5px ; 
 
    text-decoration: none; 
 
} 
 

 

 
.links a:link {color:#484846; background-color:transparent; text-decoration:none} 
 
.links a:visited {color:#484846; background-color:transparent; text-decoration:none} 
 
.links a:hover {color:#C5908E; background-color:transparent; text-decoration:none} 
 
.links a:active {color:#484846; background-color:transparent; text-decoration:none} 
 

 

 
.wrapper { 
 
  /*padding: 20px;*/ 
 
  text-align: center; 
 

 
} 
 
</style>

<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet"> 
 

 

 
<style> 
 
@font-face { 
 
font-family: 'Poiret One', cursive; 
 

 

 

 

 
<div class= "title"> 
 

 

 
</div> 
 

 

 

 
\t <title> 
 
\t Kristin Fincken 
 
\t </title> 
 

 

 

 

 

 

 

 
</div> 
 

 

 
</head> 
 
<body> 
 

 

 

 

 

 

 
\t 
 
</div> 
 

 
<div class="wrapper"> 
 
<br> 
 

 

 
<div class="logo"> 
 
<img src="images/logo.png" usemap="#rec"> 
 
</div> 
 
    
 
</div> 
 

 
<br> 
 
<br> 
 
<br> 
 
<div class ="links" > 
 

 

 
    <div class="table"> 
 
<ul id="horizontal-list"> 
 

 
<li><a href="html/design.html" >Design </a></li> 
 
    <li><a href="html/photo.html"> Photo </a></li> 
 
    
 
    <li><a href="html/web.html">Web</a></li> 
 
    <li><a href="html/word.html">Words</a></li> 
 
    </font> 
 
    
 
</ul> 
 
</div> 
 

 
</div> 
 

 

 

 
</body> 
 
</html>

出典

2017-02-08 Kristin

のためにあなたのコードを検証する必要があります。 –

ヘルプを受けたい場合はスニペットを修正してください。 –

そのためにテーブルを使用しないでください。このhttp://codepen.io/mlegg10/pen/EZdxbd を見てくださいまた、あなたのHTMLはクリーンアップの多くを必要とするすべてのエラーhttps://validator.w3.org/nu/

$(function() { 
 
    $('a.page-scroll').bind('click', function(event) { 
 
     var $anchor = $(this); 
 
     $('html, body').stop().animate({ 
 
      scrollTop: $($anchor.attr('href')).offset().top 
 
     }, 1500, 'easeInOutExpo'); 
 
     event.preventDefault(); 
 
    }); 
 
}); 
 

 
// Highlight the top nav as scrolling occurs 
 
$('body').scrollspy({ 
 
    target: '.navbar-fixed-top' 
 
}) 
 

 
// Closes the Responsive Menu on Menu Item Click 
 
$('.navbar-collapse ul li a').click(function() { 
 
    $('.navbar-toggle:visible').click(); 
 
});

.navbar-default .navbar-brand { 
 
    font-family: 'Poiret One', cursive; 
 
    color: #1ee2e7; 
 
} 
 

 
.navbar-default .navbar-brand:hover, 
 
.navbar-default .navbar-brand:focus, 
 
.navbar-default .navbar-brand:active, 
 
.navbar-default .navbar-brand.active { 
 
    color: #fec503; 
 
} 
 

 
.navbar-default .navbar-collapse { 
 
    border-color: rgba(255,255,255,.02); 
 
} 
 

 
.navbar-default .navbar-toggle { 
 
    border-color: #1ee2e7; 
 
    background-color: #1ee2e7; 
 
} 
 

 
.navbar-default .navbar-toggle .icon-bar { 
 
    background-color: #fff; 
 
} 
 

 
.navbar-default .navbar-toggle:hover, 
 
.navbar-default .navbar-toggle:focus { 
 
    background-color: #1ee2e7; 
 
} 
 

 
.navbar-default .nav li a { 
 
    text-transform: uppercase; 
 
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; 
 
    font-weight: 400; 
 
    letter-spacing: 1px; 
 
    color: #fff; 
 
} 
 

 
.navbar-default .nav li a:hover, 
 
.navbar-default .nav li a:focus { 
 
    outline: 0; 
 
    color: #1ee2e7; 
 
} 
 

 
.navbar-default .navbar-nav>.active>a { 
 
    border-radius: 0; 
 
    color: #fff; 
 
    background-color: #1ee2e7; 
 
} 
 

 
.navbar-default .navbar-nav>.active>a:hover, 
 
.navbar-default .navbar-nav>.active>a:focus { 
 
    color: #fff; 
 
    background-color: #17d0d5; 
 
} 
 

 
@media(min-width:768px) { 
 
    .navbar-default { 
 
     padding: 25px 0; 
 
     border: 0; 
 
     background-color: transparent; 
 
     -webkit-transition: padding .3s; 
 
     -moz-transition: padding .3s; 
 
     transition: padding .3s; 
 
    } 
 

 
    .navbar-default .navbar-brand { 
 
     font-size: 2em; 
 
     -webkit-transition: all .3s; 
 
     -moz-transition: all .3s; 
 
     transition: all .3s; 
 
    } 
 

 
    .navbar-default .navbar-nav>.active>a { 
 
     border-radius: 3px; 
 
    } 
 

 
    .navbar-default.navbar-shrink { 
 
     padding: 10px 0; 
 
     background-color: #222; 
 
    } 
 

 
    .navbar-default.navbar-shrink .navbar-brand { 
 
     font-size: 1.5em; 
 
    } 
 
}

<!-- Navigation --> 
 
    <nav class="navbar navbar-default navbar-fixed-top navbar-shrink"> 
 
     <div class="container"> 
 
      <!-- Brand and toggle get grouped for better mobile display --> 
 
      <div class="navbar-header page-scroll"> 
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
        <span class="sr-only">Toggle navigation</span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
       <a class="navbar-brand page-scroll" href="#page-top">Kristin Fincken</a> 
 
      </div> 
 

 
      <!-- Collect the nav links, forms, and other content for toggling --> 
 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
       <ul class="nav navbar-nav navbar-right"> 
 
        <li class="hidden active"> 
 
         <a href="#page-top"></a> 
 
        </li> 
 
        <li class=""> 
 
         <a class="page-scroll" href="design.html">Design</a> 
 
        </li> 
 
        <li class=""> 
 
         <a class="page-scroll" href="photos.html">Photos</a> 
 
        </li> 
 
        <li class=""> 
 
         <a class="page-scroll" href="web.html">Web</a> 
 
        </li> 
 
        <li class=""> 
 
         <a class="page-scroll" href="words.html">Words</a> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
      <!-- /.navbar-collapse --> 
 
     </div> 
 
     <!-- /.container-fluid --> 
 
    </nav>

出典

2017-02-08 21:19:10 mlegg

非常に参考になってくれてありがとう、私はちょうどw3の学校からのナビゲーションバーのレイアウトを使用 – Kristin

私のナビゲーションバーの中心を作成する

答えて

関連する問題