CSS help

Discussion in 'CSS' started by yogesh sarkar, May 7, 2007.

  1. #1
    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?
     
    yogesh sarkar, May 7, 2007 IP
  2. jrd1mra

    jrd1mra Peon

    Messages:
    243
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #2
    posting your css snippet or site would help me help you :)
     
    jrd1mra, May 7, 2007 IP
  3. yogesh sarkar

    yogesh sarkar Well-Known Member

    Messages:
    1,740
    Likes Received:
    75
    Best Answers:
    0
    Trophy Points:
    140
    #3
    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.
     
    yogesh sarkar, May 7, 2007 IP
  4. jrd1mra

    jrd1mra Peon

    Messages:
    243
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #4
    #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
     
    jrd1mra, May 7, 2007 IP
  5. yogesh sarkar

    yogesh sarkar Well-Known Member

    Messages:
    1,740
    Likes Received:
    75
    Best Answers:
    0
    Trophy Points:
    140
    #5
    Thanks Jrd1mra, but it didn't work :
     
    yogesh sarkar, May 7, 2007 IP
  6. clicyu

    clicyu Peon

    Messages:
    22
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #6
    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/
     
    clicyu, May 7, 2007 IP