SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Help - Putting a border around navigation bar?

    Hi, i have recently got into CSS. I am just finishing off my template but i have one problem - the bottom of my navigation bar has no boder around it. Ive messed with it for ages trying to fix it but i cant do it. Any ideas?

    Thanks.



    Code:
    html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
    dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
    a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
    strong, sub, sup, tt, var {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	background: #FFF;
    	color: #000;
    	font: normal 85%/140% tahoma, verdana, arial, helvetica, sans-serif;
    	letter-spacing: 1px;
    }
    
    h1, h2, h3, h4, h5, h6 {
    	font-family: tahoma, garamond, times, serif;
    	font-weight: bold;
    }
    
    h1 {
    	font-size: 1.75em;
    	line-height: 1.8em;
    }
    
    h2 {
    	font-size: 1.5em;
    	line-height: 1.55em;
    }
    
    h3 {
    	font-size: 1.05em;
    	line-height: 1.1em;
    }
    
    h4 {
    	font-size: 0.95em;
    	line-height: 1em;
    }
    
    h5 {
    	font-size: 0.85em;
    	line-height: 0.9em;
    }
    
    h6 {
    	font-size: 0.75em;
    	line-height: 0.8em;
    }
    
    img {
    	border: 0;                                /* fixes firefox bug */
    	display: block;
    }
    
    #container {
    	background: #ff9933 url("images/nav.png") top left repeat-y;
    	color: #FFF;
    	margin: 0 auto;
    	width: 750px;
    }
    
    #header {
    	height: 200px;
    }
    
    #menu {
    	float: left;
    	list-style: none;
    	width: 200px;
    }
    	#menu li {
    		float: left;
    		width: 200px;
    	}
    
    	#menu a {
    		background: transparent;
    		color: #FFF;
    		display: block;
    		font: 20px/15px georgia, helvetica, sans-serif;
    		height: 1%;
    		margin-left: 25px;
    		padding: 8px 0;
    		text-decoration: none;
    		text-indent: 0px;
    	}
    	#menu a:hover {
    		color: #FFD700;
    	}
    
    #content {
    	background: #FFF;
    	color: #000;
    	margin-left: 200px;
    	min-height: 400px;
    }
    
    * html #content {
    	height: 400px;                              /* for ie */
    }
    	#content .wrapper {
    		border-bottom: 1px solid #000;
    		border-right: 1px solid #000;
    		border-left: 1px solid #000;
    		margin-right: 1px;
    		padding: 1em;
    	}
    
    	#content p {
    		margin: 0.5em 0;
    	}
    
    #footer {
    	background: #FFF;
    	clear: left;
    	color: #000;
    	padding-top: 16px;
    	text-align: center;
    }
    	#footer em {
    		border-top: 2px solid #000;
    		display: block;
    		font: normal 100%/140% tahoma, helvetica, sans-serif;
    		margin: 0 auto;
    		padding: 0.5em 3em;
    		width: 24em;                                                        /* DO NOT CHANGE THIS VALUE */
    	}

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>Ben Davies - Come to the Fair!</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<meta http-equiv="Content-Style-Type" content="text/css" />
    	<meta http-equiv="imagetoolbar" content="no" />
    	<meta name="description" content="A brief (160 character, including spaces) description of the current page goes here." />
    	<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished" />
    	<link rel="stylesheet" type="text/css" href="screen.css" media="screen,projection" />
    </head>
    <body>
    <div id="container">
    	<div id="header">
    		<img src="images/banner.png" width="750" height="200"/>
    	</div>
    	<ul id="menu">
    		<li><a href="home.htm">Home</a></li>
    		<li><a href="planning.htm">Planning</a></li>
    		<li><a href="logo.htm">Logo</a></li>
    		<li><a href="flyer.htm">Flyer</a></li>
    		<li><a href="banner.htm">Banner</a></li>
    		<li><a href="wristband.htm">Wristband</a></li>
    		<li><a href="cd_case.htm">CD Case</a></li>
    		<li><a href="digital_poster.htm">Digital Poster</a></li>
    	</ul>
    	<div id="content">
    		<div class="wrapper">
    			<h1>Welcome to my eportfolio!</h1>
    			<p>
    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vitae dolor quis diam
    				sodales sodales. Quisque massa leo, sagittis sed, rhoncus vitae, convallis nec, orci.
    				Fusce lorem. Nullam ac dui. Mauris quis risus. Mauris volutpat. Ut sollicitudin magna
    				ac arcu. Aliquam velit. Donec commodo tempus urna. Mauris mi purus, rutrum vel, aliquet
    				ut, faucibus eget, purus. Phasellus tellus libero, iaculis ut, tempor malesuada,
    				elementum et, urna. Proin vehicula viverra sapien. Integer eleifend, tortor et
    				hendrerit vulputate, lectus enim pharetra risus, quis blandit nibh dui sed neque. Nunc
    				nec odio vel odio porta fermentum. Sed quis arcu. Donec tristique scelerisque nibh. Nam
    				lacinia libero a sem. Nunc volutpat, dui rutrum euismod sodales, ipsum dui accumsan
    				libero, id consequat quam lorem vitae orci.
    			</p>
    			<p>
    				Cras eu justo. Duis ornare ultrices urna. Integer eros. Nulla sagittis viverra purus.
    				Sed massa quam, eleifend hendrerit, laoreet vel, auctor sit amet, nunc. Donec
    				scelerisque. Cras sodales. Nulla facilisi. Ut molestie. Quisque rhoncus, nulla non
    				auctor tincidunt, lectus sapien laoreet metus, non laoreet elit purus sollicitudin
    				nulla. Praesent eget lacus sit amet sem elementum molestie. Etiam mattis eros quis
    				libero.
    			</p>
    			<p>
    				Vestibulum et massa. Cras pharetra metus ut quam. Fusce ac lectus. Nunc quis nibh ut
    				tellus placerat mattis. Duis mi dolor, pharetra at, consectetuer in, aliquet eget,
    				lacus. Ut malesuada mi sed ipsum. Integer tristique libero et lacus. Duis hendrerit,
    				lectus sit amet porta rhoncus, ipsum quam placerat nunc, ac porta quam turpis ut erat.
    				Vestibulum molestie, metus sit amet malesuada eleifend, lorem est dignissim nibh, a
    				imperdiet turpis mauris a tortor. Nam porttitor lacus sed tellus. Phasellus tempus. In
    				hac habitasse platea dictumst. Vivamus magna. In in sem. Morbi tristique metus at magna.
    				Sed luctus laoreet turpis. Curabitur egestas varius nibh. Fusce condimentum pretium
    				augue. Nam sollicitudin rutrum turpis. Quisque imperdiet.
    			</p>
    			<p>
    				Integer turpis arcu, hendrerit id, lacinia non, volutpat quis, quam. Nunc pharetra.
    				Vestibulum posuere lorem vitae odio. Donec risus mi, accumsan sed, mattis ut, gravida
    				vehicula, massa. Duis auctor dui eu tellus. Nam hendrerit pulvinar est. Aenean nunc. In
    				consectetuer. Duis rutrum sollicitudin tellus. Donec rutrum mollis eros. Aliquam eget
    				odio vel pede rutrum dictum.
    			</p>
    			<p>
    				Suspendisse potenti. In elit. Nunc nibh. Proin ac enim. Nulla tellus. Nunc ipsum mi,
    				ornare dictum, hendrerit lobortis, pellentesque sit amet, magna. Sed dui nisi, dictum
    				ac, auctor eu, tincidunt nec, nunc. Donec mattis, nisi non posuere accumsan, nulla sem
    				congue elit, sit amet eleifend velit lacus sed dui. Duis urna est, iaculis non,
    				malesuada ut, faucibus sit amet, dui. Nunc elementum, augue sed auctor imperdiet, risus
    				nibh nonummy erat, in rutrum mi felis eu augue. Phasellus eros. Phasellus scelerisque
    				pede id nisl. Sed ornare, ante ac laoreet blandit, sem lacus feugiat diam, eget
    				consectetuer lorem massa in massa. Fusce commodo lectus vitae quam.
    			</p>
    		</div>
    	</div>
    	<div id="footer">
    		<em>Copyright &#169 ; 2007, Ben Davies.</em>
    	</div>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bit hard without seeing the accompanying html, but it would look like the only place you have defined a border is around a div within #content, so how would you expect a border on the bottom of the nav div? I would suggest removing the bottom border from #content .wrapper and putting a top border on #footer.

    OK. so now have html - same suggestion applies.

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    Bit hard without seeing the accompanying html, but it would look like the only place you have defined a border is around a div within #content, so how would you expect a border on the bottom of the nav div? I would suggest removing the bottom border from #content .wrapper and putting a top border on #footer.

    OK. so now have html - same suggestion applies.
    Thanks, adding a top border to the footer sorted it.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, that's my code.

    All you had to do was move the borders from .wrapper to #content and you would have been set (though you may have had to fudge with the side margins a bit).

    (by the way, if anyone is wondering why there's a space between the 9 and the semicolon, vBulletin processes them when they're intact)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •