css - HTML Layout, menu wordings spacing error and cannot justify to the centre -
i have make html, , there has menu on topbar.
[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]
the spacing between words wide. example, 'studying science', space between studying , science wide now. how decrease space? please see attachment
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
Post a Comment