Tumblrの水平ナビゲーションバーの問題（CSS/HTML）

自分のサイトの水平ナビゲーションバーを中央に配置するのに問題があります。現時点では右に並んでいます。ウェブサイトのURLはwww.vintagemagpies.tumblr.comです。Tumblrの水平ナビゲーションバーの問題（CSS/HTML）

#nav { 
    width:1000px; 
    background-color: #FFFFFF; 
    text-align: center; 
    display:table; 
    padding:0; 
    margin:0 auto; 
    list-style-type:none; 
    white-space:nowrap;} 
    #nav ul { 
list-style: none; 
width: 1000px; 
margin: 0 auto; 
padding: 0; 
    } 
    #nav li { 
float: left; } 
    #nav li a { 
display: block; 
padding: 8px 35px; 
text-decoration: none; 
    font-family: EnglishEssay; 
color: #AAAAAA; 
    font-size: 16pt;} 
    #nav li a:hover { 
color: #000000; 
background-color: #fff; }

とHTML：：ここではCSSのです

<div id="nav"> 
    <ul> 
    <li><a href="http://vintagemagpies.tumblr.com/about">about</a></li> 
    <li><a href="http://stores.ebay.co.uk/VINTAGE-MAGPIES">shop</a></li> 
    <li><a href="http://vintagemagpies.tumblr.com/contact">contact</a></li> 
    <li><a href="https://twitter.com/#!/vintagemagpies">twitter</a></li> 
    <li><a href="http://www.facebook.com/vintagemagpies">facebook</a></li> 
    <li><a href="http://fashionfinder.asos.com/user/Vintage%20Magpies/profile"> 
    fashionfinder</a> 
    </li> 
    </ul> 
    </div>

が画面の中央にブロック全体を取得しようとすると、上記の以前のテーマCSSとうまく働いたが、私は最近変更されていると、今それがあります右に並ぶ。

それはコード内の他の場所にある問題は、ここですべてがある場合には：

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

<title>{block:SearchPage} 
    Search results for "{SearchQuery}" - {/block:SearchPage} 
    {block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title> 
<link rel="shortcut icon" href="{Favicon}" /> 
<link rel="alternate" type="application/rss+xml" href="{RSS}" /> 


<style type="text/css"> 


    body { 
    background: {color:Background} url('{image:Background}'); 
    margin: 30px 0px 0px 340px; 
    font: Normal 13px {font:Body}; 
    color: #666; 
    } 

    #container { 
    width: 520px; 
    height: 100%; 
    margin: 15px 0px 15px 0px; 
    padding: 10px; 
    background-color: #FFF; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    } 

    #header h1 { 
    font: 50px {font:Title}; 
    margin: 0px 0px -5px -230px; 
    } 

    #header h1 a { 
    color: {color:Title}; 
    text-decoration: none; 
    } 

    #header h1 a:hover { 
    color: {color:Title Hover}; 
    } 

    #nav { 
    width:1000px; 
    background-color: #FFFFFF; 
    text-align: center; 
    display:table; 
    padding:0; 
    margin:0 auto; 
    list-style-type:none; 
    white-space:nowrap;} 
    #nav ul { 
list-style: none; 
width: 1000px; 
margin: 0 auto; 
padding: 0; 
    } 
    #nav li { 
float: left; } 
    #nav li a { 
display: block; 
padding: 8px 35px; 
text-decoration: none; 
    font-family: EnglishEssay; 
color: #AAAAAA; 
    font-size: 16pt;} 
    #nav li a:hover { 
color: #000000; 
background-color: #fff; } 


    #right { 
    position: absolute; 
    left: 895px; 
    font: 12px {font:Body}; 
    line-height: 15px; 
    width: 212px; 
    background-color: #fff; 
    padding: 10px; 
    color: {color:Description}; 
    margin: 15px 0px 0px 0px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    } 


    #left { 
    position: absolute; 
    left: 105px; 
    font: 12px {font:Body}; 
    line-height: 15px; 
    width: 200px; 
    background-color: #fff; 
    padding: 10px; 
    color: {color:Description}; 
    margin: 15px 0px 0px 0px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    } 

    h1 { 
    color: {color:Title}; 
    margin: 0px 0px 10px 0px; 
    font-weight: normal; 
    font-size: 40px; 
    letter-spacing: -1px; 
    } 

    h1 a { 
    color: {color:Title}; 
    text-decoration: none; 
    } 

    #description { 
    color: {color:Description}; 
    font-size: 9px; 
    line-height: 18px; 
    padding-right: 70px; 
    margin-bottom: 5px; 
    } 

    .date { 
    margin: 10px 0px 10px 0px; 
    padding: 5px 5px 5px 10px; 
    font: 12px {font:Date}; 
    text-align: left; 
    letter-spacing: -1px; 
    text-transform: uppercase; 
    background: {color:Date Background}; 
    } 

    .date a { 
    color: {color:Date}; 
    text-decoration: none; 
    } 

    .date a:hover { 
    color: {color:Date Hover}; 
    text-decoration: none; 
    } 

    .sideheader { 
    margin: 10px 0px 15px 0px; 
    color: {color:Sidebar Header}; 
    font-size: 12px; 
    text-align: left; 
    letter-spacing: 0px; 
    text-transform: uppercase; 
    border-bottom: solid 1px #444; 
    } 


    a { 
    text-decoration: none; 
    color: {color:Links}; 
    } 

    a:hover { 
    color: {color:Links Hover}; 
    text-decoration: none; 
    } 


    .post-footer p.reblogged { 
    font-size:10px; 
    color: {color:Text Color}; 
    padding:5px 0; 
    } 

    .post-footer p.reblogged a { 
    text-decoration: none; 
    background-repeat: no-repeat; 
    background-position: center left; 
    padding: 2px 0 2px 18px; 
    } 

    div.post { 
    margin: 0px 10px 40px 10px; 
    position: relative; 
    } 

    div.post img.permalink { 
    border-width: 0px; 
    width: 23px; 
    height: 9px; 
    position: absolute; 
    top: 5px; 
    right: 5px; 
    display: none; 
    } 

    div.post:hover img.permalink { 
    display: block; 
    } 


    div.post h2 { 
    font: 18px {font:Body}; 
    text-transform: uppercase; 
    letter-spacing: -1px; 
    margin: 0px 0px 10px 0px; 
    } 

    div.post h2 a { 
    color: {color:Text Color}; 
    text-decoration: none; 
    } 

    div.post h2 a:hover { 
    color: {color:Links Hover}; 
    text-decoration: none; 
    } 


       /* Regular Post */ 

    .post .regular { 
    font-size: 12px; 
    color: {color:Text Color}; 
    line-height: 17px; 
    text-align: justify; 
    } 

    .post .regular img { 
    max-width: 100%; 
    } 

    .post .regular blockquote { 
    font-style: italic; 
    } 

     /* Photo Post */ 

    div.post div.photo img { 
    border-width: 0px; 
    } 

    div.post div.photo div.caption { 
    font-size: 12px; 
    text-align: justify; 
    margin: 10px 0px 0px 0px; 
    color: {color:Text Color}; 
    } 

    div.post div.photo div.caption a { 
    color: {color:Links}; 
    } 

    div.post div.photo div.caption a:hover { 
    color: {color:Links Hover}; 
    text-decoration: none; 
    } 

     /* Quote Post */ 

    div.post div.quote { 
    padding: 0px 15px 0px 15px; 

    } 

    div.post div.quote span.quote { 
    font-size: 20px; 
    color: {color:Text Color}; 
    line-height: 22px; 
    } 

    div.post div.quote div.source { 
    font-size: 13px; 
    text-align: right; 
    color: {color:Text Color}; 
    } 

    div.post div.quote div.source a { 
    color: {color:Links}; 
    } 

    div.post div.quote div.source a:hover {  
    color: {color:Links Hover}; 
    } 

     /* Link Post */ 

    div.post div.link { 
    color: #222; 
    margin-top: 15px; 
    font-size: 18px; 
    letter-spacing: -1px; 
    } 

    div.post div.link a.link { 
    margin-top: 10px; 
    color: {color:Post Link}; 
    padding: 5px; 
    background: {color:Post Link Background}; 
    text-decoration: none; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    } 

    div.post div.link a:hover.link { 
    color: {color:Post Link Hover}; 
    } 

    div.post div.link div.description { 
    margin-top: 20px; 
    font-size: 12px; 
    letter-spacing: 0px; 
    line-height: 17px; 
    text-align: justify; 
    color: {color:Text Color}; 
    } 

    .post .link span.description blockquote { 
    font-style: italic; 
    } 

     /* Conversation Post */ 

    div.post div.conversation ul { 
    list-style-type: none; 
    margin: 0px; 
    padding: 0px 0px 0px 1px; 
    } 

    div.post div.conversation ul li { 
    font-size: 12px; 
    padding: 4px 0px 4px 8px; 
    color: #fff; 
    margin-bottom: 1px; 
    } 

    div.post div.conversation ul li span.label { 
    font-weight: bold; 
    } 
    div.post div.conversation ul li.odd { 
    background-color: {color:Conversation Background 1}; 
    } 

    div.post div.conversation ul li.even { 
    background-color: {color:Conversation Background 2}; 
    } 

    /* Audio Post */ 

    div.post div.audio div.caption { 
    margin: -60px 0px 0px 0px; 
    color: #222222; 
    font-size: 12px; 
    text-align: justify; 
    } 

    div.post div.audio div.caption a { 
    color: #6DA856; 
    } 

    div.post div.audio div.caption a:hover { 
    color: #F7C852; 
    } 

    #radio { 
    margin: auto; 
    padding: 86px 0px 0px 87px; 
    width: 310px; 
    height: 189px; 
    background: transparent 
    url(http://static.tumblr.com/dbcxhwx/HhBke90up/3173070506_79130bdc2d_o.png) 
    no-repeat; 
    } 

    /* Video Post */ 

    div.post div.video div.caption { 
    margin: 10px 0px 0px 0px; 
    color: #222; 
    font-size: 12px; 
    text-align: justify; 
    } 

    div.post div.video div.caption a { 
    color: {color:Links}; 
    } 

    div.post div.video div.caption a:hover { 
    color: {color:Links Hover}; 
    } 


    #navigation { 
    font-size: 14px; 
    text-transform: uppercase; 
    color: {color:Text Color}; 
    } 

    #navigation a { 
    color: {color:Links}; 
    text-decoration: none; 
    } 

    #navigation a:hover { 
    color: {color:Links Hover}; 
    text-decoration: none; 
    } 

    #credits { 
    margin-top: 11px; 
    font-size: 8px; 
    text-align: left; 
    letter-spacing: 1px; 
    color: {color:Text Color}; 
    } 

    #credits a { 
    color: {color:Links}; 
    } 

    #credits a:hover { 
    color: {color:Links Hover}; 
    text-decoration: none; 
    } 

    #comment { 
    display: inline; 
    letter-spacing: normal; 
    font-size: 11px; 
    text-align: right; 
    margin: 0px 0px 0px 10px;  
    } 

    #comment a { 
    text-decoration: none; 
    color: {color:Comment}; 
    } 

    #comment a:hover { 
    text-decoration: none; 
    color: {color:Comment Hover}; 
    } 

    .following { 
    margin-top: 5px; 
    margin-bottom: 5px; 

    } 

    .following a img { 
    border: 1px solid {color:Flickr}; 
    padding: 1px; 
    margin: 1px; 
    } 

    .following a img:hover { 
    border: 1px solid {color:Flickr Hover}; 
    padding: 1px; 
    margin: 1px; 
    } 

    #twitter { 
    color: {color:Text Color}; 
    font-family: 'Lucida Grande', Gill Sans MT, sans-serif; 
    font-size: 10px; 
    text-align: left; 
    width: 225px; 
    margin: 0px 0px 0px -35px; 
    padding: 0px 0px 0px 0px; 
    } 

    #twitter ul { 
    list-style-type:none; 
    } 

    #twitter li { 
    margin-bottom: 5px; 
    border-bottom: 1px dotted; 
    padding-bottom: 5px; 
    } 

    #twitter a { 
    color: {color:Links}; 
    } 

    #flickr { 
    width:220px; 
    height:154px; 
    padding: 0px 0px 0px 0px; 
    margin: 10px 10px -40px 15px; 
    } 

    #flickr img { 
    float: left; 
    margin:0 5px 5px 0px; 
    background: white; 
    padding: 3px; 
    width: 50px; 
    height: 50px; 
    border: 1px solid {color:Flickr}; 
    } 

    #flickr a img:hover { 
    border: 1px solid {color:Flickr Hover}; 
    } 

    #tags { 
    float: right; 
    text-align: right; 
    color: {color:Text Color}; 
    font-size: 10px; 
    margin: -25px 0px 30px 0px 
    } 

    ol.notes { 
    padding: 0px; 
    margin: 25px 0px; 
    list-style-type: none; 
    border-bottom: solid 1px #ccc; 
    } 

    ol.notes li.note { 
    border-top: solid 1px #ccc; 
    padding: 10px; 
    } 

    ol.notes li.note img.avatar { 
    vertical-align: -4px; 
    margin-right: 10px; 
    width: 16px; 
    height: 16px; 
    } 

    ol.notes li.note span.action { 
    font-weight: bold; 
    } 

    ol.notes li.note .answer_content { 
    font-weight: normal; 
    } 

    ol.notes li.note blockquote { 
    border-color: #eee; 
    padding: 4px 10px; 
    margin: 10px 0px 0px 25px; 
    } 

    ol.notes li.note blockquote a { 
    text-decoration: none; 
    } 

    {CustomCSS} 

    </style> 
    {block:Description} 
    <meta name="description" content="{MetaDescription}" />{/block:Description} 

    <div id="header"> 
     <h1> 
    <a href="/"><center><img src="https:/" alt="MUSINGS" width= "1000px" 
    align= "center"/></center></a></h1> 
    </div> 
    <div id="nav"> 
    <ul> 
    <li><a href="http://vintagemagpies.tumblr.com/about">about</a></li> 
    <li><a href="http://stores.ebay.co.uk/VINTAGE-MAGPIES">shop</a></li> 
    <li><a href="http://vintagemagpies.tumblr.com/contact">contact</a></li> 
    <li><a href="https://twitter.com/#!/vintagemagpies">twitter</a></li> 
    <li><a href="http://www.facebook.com/vintagemagpies">facebook</a></li> 
    <li><a href="http://fashionfinder.asos.com/user/Vintage%20Magpies/profile"> 
    fashionfinder</a></li> 
    </ul> 
    </div> 
    </head> 

    <body> 


    <!-- Left Sidebar --> 

    <div id="left"> 

    <!-- Description --> 

    <p class="sideheader"><strong>About</strong></p> 

    {block:Description} 
     {Description} 
    {/block:Description} 


    </div> 

    <!-- Right Sidebar --> 


    <div id="right"> 

    <!-- Search --> 


    <p class="sideheader"><strong>Find</strong></p> 
    <center> 
    <form action="/search" method="get"> 
    <input type="text" name="q" value="{SearchQuery}"/> 
    <input type="submit" value="Search"/> 
    </form> 

    {block:SearchPage}<center><font size="3"> 
    {SearchResultCount}</font> <font size="1">Result(s) found</font></center> 
    {/block:SearchPage} <br> 
    </center> 


    <div id="credits"> 
    Powered by <a href="http://tumblr.com">Tumblr</a> 
    </div> 


    </div> 





    <!-- Permalink Dates --> 


    <div id="container"> 

    {block:Posts} 


     {block:NewDayDate} 
    <div class="blogtitletwo"> 

    </div> 
      <div class="date"> 
       <a href="{Permalink}">{DayOfMonth} {Month} {ShortYear}</a> 
       <div id="comment"> 

    <a href="{Permalink}#disqus_thread">Comments</a> 
    {block:NoteCount} | 
    <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount} 
    </div> 
      </div> 
    {/block:NewDayDate} 

    {block:SameDayDate} 
    <div class="blogtitletwo"> 

    </div> 
      <div class="date"> 
       <a href="{Permalink}">Posted: {12Hour}:{Minutes} {CapitalAmPm}</a> 
       <div id="comment"> 

    <a href="{Permalink}#disqus_thread">Comments</a> 
    {block:NoteCount} | 
    <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount} 
    </div> 
      </div> 
    {/block:SameDayDate} 


    <!-- Begin Tumblr Posts --> 


     <div class="post"> 

    <!-- Text Posts --> 


      {block:Regular} 
      <div class="regular"> 
      {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title} 
        {Body} 
    </div> 
      {/block:Regular} 


    <!-- Photo Posts --> 


      {block:Photo} 
      <div class="photo"> 
       <center> 
       {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag} 

       </center> 
        {block:Caption} 
         <div class="caption">{Caption}</div> 
        {/block:Caption} 
        </div> 
      {/block:Photo} 


    <!-- Quote Posts --> 


      {block:Quote} 
       <div class="quote"> 
        <span class="quote"> 
         <strong>&#147;</strong> {Quote} 
        </span> 
       {block:Source}<div class="source">&mdash; {Source}</div>{/block:Source} 
       </div> 
      {/block:Quote} 


    <!-- Link Posts --> 

      {block:Link} 
       <div class="link"> 
        <center><a href="{URL}" class="link" {Target}>{Name}</a></center> 
        {block:Description} 
         <div class="description">{Description}</div> 
        {/block:Description} 
       </div> 
      {/block:Link} 

    <!-- Chat Posts --> 

      {block:Conversation} 
       <div class="conversation"> 
       {block:Title}<h2><a href="{Permalink}">{Title}</a></h2> {/block:Title} 
        <ul> 
         {block:Lines} 
         <li class="{Alt}"> 
         {block:Label}<span class="label">{Label}</span> {/block:Label} 
         {Line} 
        </li> 
        {/block:Lines} 
       </ul> 
       </div> 
      {/block:Conversation} 


    <!-- Audio Posts --> 

      {block:Audio} 
       <div class="audio"> 
        <div id="radio"> 
        {AudioPlayerBlack} 
         </div> 
        {block:Caption} 
         <div class="caption">{Caption}</div> 
        {/block:Caption} 
       </div> 
      {/block:Audio} 


    <!-- Video Posts --> 

      {block:Video} 
       <div class="video"> 
        {Video-500} 
        {block:Caption} 
         <div class="caption">{Caption}</div> 
        {/block:Caption} 
       </div> 
      {/block:Video} 
     </div> 



    <!-- Reblogging Information --> 


    <div class="post-footer"> 


     {block:RebloggedFrom} 

    <p class="reblogged"> 
    Reblogged: <a href="{ReblogParentURL}" 
    style="background-image:   
    url({ReblogParentPortraitURL-16});"> 
    {ReblogParentName}</a></p> 

       {/block:RebloggedFrom} 


    <!-- Tagging Information --> 

    {block:HasTags} 
    <div id="tags"> 
     Tags: 
    {block:Tags} <a href="{TagURL}">{Tag}</a> {/block:Tags}  
    </div> 
    {/block:HasTags} 

    </div> 


    {block:PostNotes} 
    {PostNotes} 
    {/block:PostNotes} 


    {/block:Posts} 


{block:IfDisqusShortname} 
{block:Permalink} 
<div id="disqus"> 
<div id="disqus_thread"></div> 
    <script type="text/javascript"  
    src="http://disqus.com/forums/ 
    {text:Disqus Shortname}/embed.js"></script> 
    <noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref"> 
    View the discussion thread.</a> 
    </noscript> 
</div> 
{/block:Permalink} 
<script type="text/javascript"> 
//<![CDATA[ 
(function() { 
    var links = document.getElementsByTagName('a'); 
    var query = '?'; 
    for(var i = 0; i < links.length; i++) { 
    if(links[i].href.indexOf('#disqus_thread') >= 0) { 
    query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&'; 
    } 
    } 
    document.write('<script charset="utf-8"type="text/javascript" 

    src="http://disqus.com/forums/ 
    {text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>'); 
})(); 
//]]> 
</script> 
{/block:IfDisqusShortname} 















    <!-- Page Navigation --> 

     <div id="navigation"> 
    <p align="center"> 
     {block:PreviousPage} 
      <a href="{PreviousPage}">&larr; Previous</a> 
     {/block:PreviousPage} 
    &#8226; 
     {block:NextPage} 
     <a href="{NextPage}">Next &rarr;</a> 
     {/block:NextPage}  
    </p> 
    </div> 
    </body>

は、誰かが助けることができると思います。また、ブログ記事の間に休憩を取ろうとするが、それは別の日のことだ！おかげ

出典

2012-03-06 spncrh

位置を#navするには、以下のCSSを追加してください：相対; 左：-153px。ここで

おかげ

出典

2012-03-06 12:23:29 paul

ページのプレビューでは機能しましたが、保存時には閉じていて、左に移動していて、ヘッダーイメージと本体が行外です。 – spncrh

実際にはhtml構造は整然としたものではありません。私はちょうどこのケースの解決策を提供しました。ありがとう – paul

はい、私は時間がかかりますし、ファイルを取得するにはFTP情報が必要ですか、GmailやSkypeで話すべきですか？ – paul

がヒントです：私はプロのHTML/CSSのWebデザイナーだありませんが、私は、このメソッドを使用します。 margin:0 autoを使用すると、何かを中心に置くことができます。またはdivに配置して中心に合わせることができます：<div align="center"></div>。

そして、あなたは<br>を使用したりすることができますCSSのできるブログ記事間の休憩のために：

margin-top:10px;

乾杯。

出典

2013-10-14 15:47:57

Tumblrの水平ナビゲーションバーの問題（CSS/HTML）

答えて

関連する問題