Changing size of navigation bar with HTML

[lnewman1230]

Hi, I need some help. I haven't worked with HTML in a long time and need to edit my website. My web developer friend designed the current template for my website, but he's been too busy to help me edit it. My website is available here: http:///NBCnewman.weebly.com I am in desperate need of some more main content space, but I don't wish to move to a horizontal navigation bar. In looking at my current navigation bar on the left, I believe I can get a bit more content space by making the navigation bar a bit narrower. But, I don't know how to change that in my HTML code (I don't even know what portion of my code refers to the navigation bar). Or, is there a way to make everything wider - my header image and move things out to the left and right a bit into the gray area on the sides so that I have some more white main content space in the middle? I hope what I'm saying makes sense! Please help. I am pasting the HTML code for my web design below in the hopes that someone can tell me where I do this and what code to use. Thank you!! *|* { margin:0pt; padding:0pt;}body { background: transparent url(background2.gif) repeat-x center top; background-color:#333333; font-family:"lucida grande", arial, sans-serif; font-size:12px; color:#464e54; margin:0; padding:0;}p { line-height:1.5;;}h1, h2, h3{ line-height:1.5;;}#wrapper { width:960px; margin:0pt auto; overflow: hidden}#top-buffer { height:30px;}#header { overflow: hidden;}.weebly_header {float:left;background: transparent url(headerNew.jpg) no-repeat center top;width:100%;height:233px; }#sitename-area { background: transparent url(sitename_background.gif) no-repeat center top; width:290px; height:226px; float:right; border-style:solid; border-width:0px border-color:#666666}#sitename { color:#924a2e; font-size:2em; font-weight:bold; padding:50px 20px 20px 20px; text-align:center; width:264px;}#content-wrapper { background: transparent url(content_background.gif) repeat-y center top; overflow: hidden;}a:link, a:hover, a:visited { color:#924a2e; font-weight: bold; text-decoration:underline;} #navigation { float:left; width:246px; height:100%; margin-top:40px; font-family:"lucida grande", arial, sans-serif; font-size:1.3em;} #navigation ul { float:left; position:relative; margin:5px 0 10px 15px; list-style-type:none; }#navigation li { display:block; font-size:1em; padding:11px 0 0 10px; margin:0; width:200px; height:27px; border-bottom:1px solid #d7d5c4; text-align:left;}*html #navigation li { margin-right:4px;}#navigation a:link { float:left; display:block; padding:11px 0 0 10px; margin:-11px 0 0 -10px; width:200px; height:27px; color:#565040; font-weight:normal; text-decoration:none;} #navigation a:visited { color:#565040; font-weight:normal; text-decoration:none;}#navigation a:hover { background-color:#98b4b1; display:block; padding:11px 0 0 10px; margin:-11px 0 0 -10px; width:200px; height:27px; color:#924a2e; font-weight:bold; text-decoration:none;}#active a:link { color:#924a2e; font-weight: bold; text-decoration:none;}#active a:hover { color:#924a2e; font-weight: bold; text-decoration:none;}#active a:visited{ color:#924a2e; text-decoration:none; font-weight: bold; }#content { float:right; width:674px; min-height:400px; height:auto !important; height:400px; background-color:#f8f7f1; padding:30px 20px 30px 20px;}*html #content{ padding-top:35px;}img.image-left { margin-right:15px; float:left;}img.image-right { margin-left:15px; float:right;}#footer { float:left; width:960px; margin:20px 0 30px 0;}#footer-contents { float:left; color:#ebe9dc; font-family:"lucida grande", "lucida sans", arial, sans-serif; padding:12px 0 0 20px; width:940px; height:28px;}*html #footer-contents { margin-top:-5px;}input { background-color:#fff; border:1px solid #999; font-size:12px;}textarea { background-color:#fff; border:1px solid #999; font-size:12px;} /****************************** flyout menus ******************************/ #weebly-menus .weebly-menu-wrap { z-index: 5000;} #weebly-menus .weebly-menu { padding: 0; margin: 0; list-style: none;} #weebly-menus .weebly-menu li { float: left; clear: left; width: 170px; text-align: left;} #weebly-menus .weebly-menu li a { position: relative; display: block; width: 100%; height:25px; background: #b5b299; border-right: 1px solid #d7d5c4; border-left: 1px solid #d7d5c4; border-bottom: 1px solid #d7d5c4; text-decoration: none; font-size: 11px; font-weight: normal; line-height:1; padding:8px 0 5px 2px; color: #924a2e;} #weebly-menus .weebly-menu li a:hover { background: #98b4b1; font-weight: bold; } #weebly-menus span.weebly-menu-title { display: block; padding: 5px 10px;} #weebly-menus span.weebly-menu-more { background: transparent url(http://images.weebly.com/weebly/images/submenu_arrow.gif) no-repeat center top; display: block; position: absolute; right: 5px; top: 0; font-family: Courier; height: 28px; line-height: 29px; padding:3px 0 3px 0;}

[newseed]

There are quite a number of places you need to change. The overall framework will require to edit the width for #navigation and #content. Then you will need to edit the menu so that it fits: #navigation li and #navigation a:link. Also edit #wsite-menus .wsite-menu li width. So whatever you subtract from your navigation overall width be sure to add that number to content css. There might a couple of other places but it should get you going in the right direction.