Jump to content
lnewman1230

Changing size of navigation bar with HTML

Recommended Posts

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;}

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...