I am currently editing a template so I can use it for my website, I don’t know much about CSS so I need your help guys. At this moment the navigation bar is limited till the point where the navigation option is, I would like to extend it to whole length of the page (before the footer starts). Could you please tell me what I need to do to make this happen?
Here is the CSS Code body { font-family: tahoma, helvetica, arial, sans-serif; font-size: 12px; text-align: left; background: url(images/page_bg.gif); } html, body, #wrapper, h1 { margin: 0; padding: 0; } th, td { font-size: 10px; } img { border: 0; } #wrapper { margin: auto; text-align: left; width: 810px; position: relative; } h1, h2, h3 { font-size: 18px; } h1 { margin: 0; padding: 0; } h2 { margin: 0 0 5px 0; padding: 0; } h3 { padding: 4px 0 0 0; } .block { display: block; } .clear { clear: both; height: 2px; padding-top: 0; margin-top: 0; margin-bottom: 3px; font-size: 1px; } .left { float: left; margin: 1px 8px 0px 0px; } .softright { text-align: right; } .readmore { text-align: right; } /* ***** */ #inner { border-left: 2px solid #fff; border-right: 2px solid #fff; background: white; color: black; margin-bottom: 12px; } #header { background: url(images/header_bg.gif) repeat-x; padding-top: 9px; position: relative; } #header img { display: block; } #nav, #nav a { color: white; font-weight: bold; text-decoration: none; } #nav a:hover { text-decoration: underline; } #browse { float: left; width: 160px; margin: 0; padding: 0; background: white; border-bottom: 2px solid white; } #browse dt { background: #c80000 url(images/dt_bg.gif) bottom repeat-x; color: #fff; margin: 2px 2px 1px 2px; padding: 6px 0; text-align: center; font-weight: bold; } #browse dd { background: #227293; border-bottom: 1px solid #659db4; padding: 0; margin: 0 2px; } #browse dd a { color: white; font-weight: bold; text-decoration: none; display: block; padding: 3px 22px; } * html #browse dd { padding: 3px 22px; padd\ing: 0; } * html #browse dd a { display: inline; di\splay: block; } #browse dd a:hover { background: #74a7b7; } #browse .first { padding-top: 10px; } #browse .last { padding-bottom: 8px; border-bottom: 1px solid white; } #body { float: right; width: 640px; margin: 2px 1px 0 0; border: 1px solid #e5e5e5; position: relative; } #body p { margin: 1em 0; padding: 0; } #body .leftbox, #body .rightbox { margin-top: 5px; color: #464646; } #body .leftbox { float: left; width: 250px; } #body .rightbox { float: right; width: 252px; margin-right: 18px; border-left: 1px solid #e5e5e5; } * html #body .rightbox { margin-right: 10px; } #body .br { border-bottom: 1px solid #e5e5e5; } #body .readmore { margin-top: -0.5em; margin-bottom: 0; padding-bottom: 0; } #body .readmore a { color: #ad1c1c; } #body .readmore a:hover { color: #f73838; } #body h3 { text-align: center; font-family: "Keble Condensed", "KebleCondensed", "arial narrow", helvetica, arial, sans-serif; font-size: 15px; font-weight: normal; color: #5d5d5d; padding: 0 0 0 18px; margin: 1px 0 3px 0; } #footer { background: #c80000 url(images/footer_bg.gif) repeat-x; padding: 8px 8px 5px 8px; position: relative; text-align: center; border-bottom: 2px solid white; } #footer, #footer a { font-weight: bold; color: white; text-decoration: none; } #footnav { position: absolute; text-align: right; right: 10px; top: 0px; padding: 8px 0 5px 0; } Code (markup): The CSS being used for the Nav bar is under the tag browse #browse { float: left; width: 160px; margin: 0; padding: 0; background: white; border-bottom: 2px solid white; } #browse dt { background: #c80000 url(images/dt_bg.gif) bottom repeat-x; color: #fff; margin: 2px 2px 1px 2px; padding: 6px 0; text-align: center; font-weight: bold; } #browse dd { background: #227293; border-bottom: 1px solid #659db4; padding: 0; margin: 0 2px; } #browse dd a { color: white; font-weight: bold; text-decoration: none; display: block; padding: 3px 22px; } * html #browse dd { padding: 3px 22px; padd\ing: 0; } * html #browse dd a { display: inline; di\splay: block; } #browse dd a:hover { background: #74a7b7; } #browse .first { padding-top: 10px; } #browse .last { padding-bottom: 8px; border-bottom: 1px solid white; } Code (markup): This is the theme I am planning to use www.freewebsitetemplates.com/preview/onlinemoviestore/ I have changed a few things, the search option isn't there any more along with a couple more changes.
#browse { float: left; width: 160px; height:100% margin: 0; padding: 0; background: white; border-bottom: 2px solid white; } I added a height attribute in there. try playing with that and see what happens
add more dd in html *how many u need* for more buttons but i think u need a faux column here. alistapart.com/articles/fauxcolumns/