css navbar with image

CSSを使用してnavbarを作成しようとしています。ナビゲーションリンクは、バーの中央の画像から均等に配置する必要があります。現時点では、次のようになります。css navbar with image

コード：

body { 
 
    background-image: url("../img/bg.jpg"); 
 
    margin-left: 0px; 
 
    margin-right: 0px; 
 
} 
 
div.menucontainer { 
 
    margin-top: 50px; 
 
    background-image: url("http://www.thevincentcollection.com/img/menubg.jpg"); 
 
    height: 35px; 
 
    box-shadow: 0px 5px 10px #000; 
 
    text-align: center; 
 
} 
 
IMG.vcmenulogo { 
 
    position: absolute; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    left: 0; 
 
    right: 0; 
 
    top: 10px; 
 
} 
 
.menulinks { 
 
    position: relative; 
 
    right: 0px; 
 
    list-style:none; 
 
    margin:0; 
 
    padding:0; 
 
    text-align:center; 
 
} 
 
.menulinks li { 
 
    display:inline; 
 
} 
 
.menulinks a { 
 
    display:inline-block; 
 
    padding:10px; 
 
} 
 
#footer { 
 
    position: fixed; 
 
    background-image: url("http://www.thevincentcollection.com/img/menubg.jpg"); 
 
    box-shadow: 0px -6px 5px 0px rgba(0,0,0,0.75); 
 
    width:100%; 
 
    height:20; 
 
    bottom:0; 
 
} 
 
P.footer { 
 
    text-align: center; 
 
    color: white; 
 
    font-size: 11px; 
 
    font-family: Arial; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>The Vincent Collection: Luxury in Haircare</title> 
 
    <link rel="stylesheet" href="css/main.css"> 
 
    </head> 
 
    <body> 
 
    <div class="menucontainer"> 
 
     <img class="vcmenulogo" src="http://www.thevincentcollection.com/img/vc-logo-menu.png" /> 
 
     <ul class="menulinks"> 
 
     <li><a href="/">Home</a></li> 
 
     <li><a href="/about/">About</a></li> 
 
     <li><a href="/work/">Products</a></li> 
 
     <li><a href="/contact/">Contact</a></li> 
 
     </ul> 
 
    </div> 
 
    <div id="footer"> <p class="footer">Copyright &copy; 2016 Salon on Wheels, LLC. All rights reserved.</p> </div> 
 
    </body> 
 
</html>

出典

2016-03-19 jon doe

実際の質問は何ですか？ –

これはおそらく助けることができます：http://stanhub.com/how-to-center-a-logo-in-unordered-list-navigation-using-css3-nth-child-selector/ – NormundsP

2番目と3番目の間にダミーを作り、liとしてimgを挿入してから削除position:absoluteから、positionの値とvertical-alignに関するいくつかの調整があれば、あなたが望むものがあります。

body { 
 
    background-image: url("../img/bg.jpg"); 
 
    margin: 0 
 
} 
 
.menucontainer { 
 
    margin-top: 50px; 
 
    background-image: url("http://www.thevincentcollection.com/img/menubg.jpg"); 
 
    height: 35px; 
 
    box-shadow: 0px 5px 10px #000; 
 
    text-align: center; 
 
} 
 
.menulinks { 
 
    position: relative; 
 
    top: -90px; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 
.menulinks li { 
 
    display: inline-block; 
 
    padding: 10px; 
 
    vertical-align: middle 
 
}

<div class="menucontainer"> 
 
    <ul class="menulinks"> 
 
    <li><a href="/">Home</a> 
 
    </li> 
 
    <li><a href="/about/">About</a> 
 
    </li> 
 
    <li> 
 
     <img class="vcmenulogo" src="http://www.thevincentcollection.com/img/vc-logo-menu.png" /> 
 
    </li> 
 
    <li><a href="/work/">Products</a> 
 
    </li> 
 
    <li><a href="/contact/">Contact</a> 
 
    </li> 
 
    </ul>

出典

2016-03-19 21:28:17 dippas

ありがとうございます。私はCSSに慣れていないので、このアプローチを試してみると失敗したために失敗しました。 –

あなたは '：）'を歓迎します – dippas

あなたは私のように2番目と3番目のボタンの間にいくつかのスペースを追加しようとしている場合 2番目と3番目の要素にクラスを与え、余裕を持てるように分かりました。または、2 ulの要素とマージンを

出典

2016-03-19 21:05:01 Ryuk

@joshuaの間に追加することもできます。これは@ryukと同様にgudのアプローチです。これを行うには、ダミーを2番目と3番目の間に作成します。li子供はそれを適切にマージンします。 Uがこれを行うことができますいずれか、

<ul class="menulinks"> <li><a href="/">Home</a></li> <li><a href="/about/">About</a></li> <li class="third"><a href="/work/">Products</a></li> <li><a href="/contact/">Contact</a></li> </ul>

.third{ margin-left: 10% }

か、あなたのHTMLを変更することができますli

 <ul class="menulinks"> 
     <li><a href="/">Home</a></li> 
     <li><a href="/about/">About</a></li> 
     <li class="dummy"></li> 
     <li><a href="/work/">Products</a></li> 
     <li><a href="/contact/">Contact</a></li> 
     </ul> 

.dummy{ 
    padding-left:10% 
}

出典

2016-03-19 21:12:09 rockStar

答えて

関連する問題