css - HTML Layout, menu wordings spacing error and cannot justify to the centre -


i have make html, , there has menu on topbar.

http://i1127.photobucket.com/albums/l622/sugarboylovephoto/screenshot2013-05-20at24031pm_zps2dd74d4d.png

[url=http://s1127.photobucket.com/user/sugarboylovephoto/media/screenshot2013-05-20at24031pm_zps2dd74d4d.png.html][img]http://i1127.photobucket.com/albums/l622/sugarboylovephoto/screenshot2013-05-20at24031pm_zps2dd74d4d.png[/img][/url]

  1. the spacing between words wide. example, 'studying science', space between studying , science wide now. how decrease space? please see attachment

  2. how move menu wordings centre , on top of grey bar?

here code menu bar

<div id="header">         <div class="head-padding"></div>         <div id="head"><img src="images/head01.png" width="1010" height="106"></div>         <div id="nav" class="navbgimg">              <a href="#about">about</a>             <a href="#studying">studying science</a>             <a href="#ssci">about ssci</a>              <a href="#highlights">programme highlights </a>              <a href="#life">student life</a>              <a href="#fun">fun fact</a>              <a href="#tips">interview tips</a>  </div>             <div id="headwhite"><img src="images/head02.png" width="1010" height="20"></div>          </div> 

here css menu bar

*{ margin: 0 auto;}   h1 {     font-family: "source-sans-pro";     font-size: 8pt; }  body {     background:#2848ad;      margin: 0 auto;      font-family: "source-sans-pro",sans-serif;     height:6078px; }  copyright {     margin: 0 auto;      font-family:"source-sans-pro";      font-size: 6pt; }   #header {     position:fixed;     z-index:1;     margin-top:0px;     margin-left:auto;     margin-right:auto;     height:160px;      width:100%; }  #head {     margin-top:0px;     margin-left:auto;     margin-right:auto;     background:#204ab4;      height:106px;      width:1010px; }  .navbgimg {     background-image: url(../images/menubar01.png);     margin-left:auto;     margin-right:auto;     width:1010px;     height:34px;  }  #nav {     font-style: normal;     font-weight: 400;     font-size: 11pt;     margin-left:auto;     margin-right:auto;     margin-top:0px;     height:34px;      width:1010px;     word-spacing:20px; }  #headwhite {     margin-left:auto;     margin-right:auto;     height:20px;      width:1010px; }  #page1 {     position:relative;     top:150px;     height:390px;     width:1010px;     background:#00c9e5; } 

its because using "word-spacing"

word-spacing:20px; 

inside #nav

if you, i'll instead:

#nav {     font-style: normal;     font-weight: 400;     font-size: 11pt;     margin-left:auto;     margin-right:auto;     margin-top:0px;     height:34px;      width:1010px;     text-align: center   <---------------- require center menu  }  #nav { padding-right: 20px; display:inline-block; } 

edit

updated above code support centered menu


Comments

Popular posts from this blog

.htaccess - First slash is removed after domain when entering a webpage in the browser -

Automatically create pages in phpfox -

c# - Farseer ContactListener is not working -