SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image replacement drop downs (marketplace)

    Hi guys.

    I am making a CSS/html webpage with an image replacement CSS menu - which i need to add drop downs to. The locations button should have a 3 drop-down options: Sydney, Melbourne and Brisbane. But i have no idea how to get this to work (and have failed a few times trying).

    Additionally, I have also run into some problems with an image-replacement menu i have made:
    • In FireFox, the menu is pushed to the right about 40pixels, not sure why
    • The background image doesnt repeat 100% in firefox


    It works fine in IE6 though.

    If anyone can tell me/show me how to solve these problems i will be grateful.

    I wanted to put this as a job on sitepoint marketplace, but am not sure which category this sort of thing goes into? if anyone knows which category i can list this under i will gladly put it on marketplace as i would like to reward any help (because i just paid for 10 credits and want to use them).
    Attached Files Attached Files

  2. #2
    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)
    Save your credits for now. I'll see what I can do to help you (by the way, this would go under "Looking to Hire").

    By the way, the menu problem isn't just in Firefox, it's in Opera as well.

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mitcho, you might find this useful

    CSS tabs menu with dropdown

    It uses a combination of sliding doors, background image replacement and the suckerfish dropdown menu's and sounds like it's exactly what you're trying to achieve.

  4. #4
    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)
    I would have done that myself, but I didn't feel like messing with his images, so I'm just working around what he has (while re-writing his page as well).

  5. #5
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Dan.

    Thanks for your quick response. Thanks for letting me know about the marketplace as well - i wasnt sure whether the 'looking to hire' section was more for actually placing job ads, but now i know so thanks for that.

    Also appreciate your 'free' help - you know i have found the free community support on forums to be on most occasions better quality than paid support - something about the intrinsic motivation people have to help as opposed to extrinsic motivation.

    Really appreciate you taking a look at these problems for me, and if you would like me to move it to the marketplace to give you some sort of reward let me know.

    Thank you

  6. #6
    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)
    Ok, here's the rewrite, including a basic dropdown menu. The dropdown won't work in IE 6 without either the Suckerfish script or a .htc file (I prefer the .htc file). Let me know which one you prefer (an external JavaScript file or a .htc file I can write directly into the stylesheet) and I'll show you how to plug it in.

    The HTML and CSS aren't perfect, but it is "good enough for government work" as the old saying goes around here. All the images are the same, but they will have to be referenced differently if you're going to keep the stylesheet in a separate styles folder.

    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>Ozzie Ozzie Ozzie</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<meta http-equiv="Content-Style-Type" content="text/css" />
    	<meta http-equiv="imagetoolbar" content="no" />
    	<meta name="description" content="A brief description of what the current page is about 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">
    		<h1>Ozzie</h1>
    		<ul id="menu">
    			<li id="home-nav"><a href="#" rel="tag"><span></span>Home</a></li>
    			<li id="about-nav"><a href="#" rel="tag"><span></span>About</a></li>
    			<li id="locations-nav">
    				<a href="#" rel="tag"><span></span>Locations</a>
    				<ul>
    					<li><a href="#">Sydney</a></li>
    					<li><a href="#">Melbourne</a></li>
    					<li><a href="#">Brisbane</a></li>
    				</ul>
    			</li>
    			<li id="catalogue-nav"><a href="#" rel="tag"><span></span>Catalogue</a></li>
    			<li id="contact-nav"><a href="#" rel="tag"><span></span>Contact</a></li>
    		</ul>
    		<div id="content">
    			<img id="banner" src="images/sc_lifestyle_banner.jpg" width="740" height="151" alt="Live the Life!" title="" />
    			<div class="wrapper">
    				<h2>Welcome to Australia</h2>
    				<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>
    			</div>
    		</div>
    		<div id="sidebar">
    			<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>
    		</div>
    		<div id="footer">
    			<em>Copyright & #169; 2007</em> <!-- stupid vBulletin - remove the space from the amphersand and the hash mark so you can use the copyright symbol, oh and this comment too -->
    		</div>
    	</div>
    </body>
    </html>
    And the CSS that goes with it:

    Code CSS 2.1:
    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, textarea, tt, var {
    	margin: 0;
    	padding: 0;
    }
     
    body {
    	background: #7B7B7B;
    	color: #000;
    	font: normal 12px/14px verdana, arial, helvetica, sans-serif;
    	letter-spacing: 1px;
    }
     
    img {
    	border: 0;	/* this squashes a Firefox bug */
    	display: block;
    }
     
    #container {
    	background: #FFF url("images/centre-bg.gif") center center repeat-y;
    	color: inherit;
    	margin: 0 auto;
    	padding: 0 10px;
    	width: 760px;
    }
    	h1 {
    		background: #FFF url("images/header-bg.gif") top left repeat-x;
    		color: inherit;
    		font-size: 28px;
    		line-height: 30px;
    		height: 69px;
    		overflow: hidden;
    		padding: 10px 0 0 10px;
    		width: 750px;
    	}
     
    	#menu {
    		background: #FFF;
    		color: inherit;
    		height: 35px;
    		line-height: 35px;
    		list-style: none;
    		margin: -18px auto 0 auto;
    		padding: 0 10px;
    		width: 740px;
    	}
    		#menu li {
    			display: inline;
    			float: left;
    			position: relative;
    		}
     
    		#menu a, #menu span {
    			background: #FFF url("images/sc_menu.gif") 0 0 no-repeat;
    			display: block;
    			height: 35px;
    			position: relative;
    			text-align: center;
    			text-decoration: none;
    			width: 144px;
    		}
     
    		#menu span {
    			display: block;
    			float: none;
    			margin-bottom: -35px;
    			z-index: 1;
    		}
     
    		#home-nav a, #contact-nav a, #home-nav span, #contact-nav span {
    			width: 154px;
    		}
     
    		#home-nav a:hover span {
    			background-position: 0 -35px;
    		}
     
    		#about-nav span {
    			background-position: -154px 0;
    		}
     
    		#about-nav a:hover span {
    			background-position: -154px -35px;
    		}
     
    		#locations-nav span {
    			background-position: -298px 0;
    		}
     
    		#locations-nav a:hover span {
    			background-position: -298px -35px;
    		}
     
    		#catalogue-nav span {
    			background-position: -442px 0;
    		}
     
    		#catalogue-nav a:hover span {
    			background-position: -442px -35px;
    		}
     
    		#contact-nav span {
    			background-position: -586px 0;
    		}
     
    		#contact-nav a:hover span {
    			background-position: -586px -35px;
    		}
     
    		#menu li:hover ul {
    			min-height: 1%;
    			left: 0;
    			z-index: 2;
    		}
    			#menu ul {
    				position: absolute;
    				left: -999em;
    			}
    				#menu ul li {
    					height: 24px;
    					line-height: 24px;
    				}
     
    				#menu ul a {
    					background-color: #EEE;
    					background-image: none;
    					display: block;
    					height: 24px;
    					line-height: 24px;
    				}
     
    	#content {
    		background: #FFF url("images/content-bg.gif") center center repeat-y;
    		float: left;
    		margin-right: -224px;
    		padding-top: 10px;
    		width: 100%;
    	}
    		#banner {
    			margin: 0 auto 10px auto;
    		}
     
    		#content .wrapper {
    			margin-right: 224px;
    			padding: 0 10px;
    		}
    			#content p {
    				margin: 6px 0;
    			}
     
    	#sidebar {
    		background: #F63;
    		color: #FFF;
    		float: left;
    		margin-top: 171px;
    		padding: 14px 10px 10px 10px;
    		text-align: right;
    		width: 194px;
    	}
     
    	#footer {
    		background: #EFEFEF;
    		clear: left;
    		color: #999;
    		font: 10px/14px verdana, arial, helvetica, sans-serif;
    		height: 29px;
    		padding-top: 15px;
    		text-align: center;
    	}

    I have no idea what's going inside the content area or the sidebar, so I just put my own brand of placeholder text in there. I also don't know how large you want the font sizes for the headings to be - these should be manually set since you can never rely on the browser defaults.

    Speaking of font sizes, I really don't like setting font sizes in pixels - they make it impossible for Internet Explorer users to resize the text. If you want, I can re-code that so IE users can resize it; this will also include my own defaults for heading elements as well.

    As for the dropdown menu, I don't know how you want the dropdown to look, so I left it plain for now. Should you want the hover state on the Locations tab to remain when the dropdown appears, just ask and I'll see what I can do about that for you.

  7. #7
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    WOW - that has to be the biggest forum response i have ever got! Thanks so much!

    That would be great if:

    > i could get the HTC file or where to download it, i am pretty sure that its the best way to do it from what i have read.

    > i will manually set the headings. i think i will just create some graphic headers and do an image replacement technique on them.

    > I have always used pixel dimensions so its interesting to know that it is a problem with resizing. if you could tell me what to use instead (points, picas?) and i will begin using them instead from this day forth. thanks!

    > it would be good to have the hover state left on for the locations tab when the drop down appear, but if its too difficult then i dont mind.

    Thank you so much, and as i said if you would like some kind of extrinsic motivation let me know. intrinsically speaking you have helped one person out tremendously today!

  8. #8
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by csswiz View Post
    Mitcho, you might find this useful

    CSS tabs menu with dropdown

    It uses a combination of sliding doors, background image replacement and the suckerfish dropdown menu's and sounds like it's exactly what you're trying to achieve.

    Sorry forgot to reply to this one - ive tried a tutorial like that, but because my one uses buttons with different sizes on the left and right sides, as well as text appearing on the graphics it was a little far from what im trying to achieve. thanks anyway. Ive found this article to be good to, but again the images are fixed in width

  9. #9
    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)
    If the top heading (above the menu) is going to be for your logo, I'd just use a DIV with an image instead of the H1, and then move the H1 to the content area (replacing the H2).

    Of course, that would require changing the H1 selector in the stylesheet to #header (or whatever ID you give to the DIV).

    You can get the .htc file here (instructions are also included).
    http://www.xs4all.nl/~peterned/csshover.html

    As for font sizes, I personally set the font size and leading (line height in CSS) to 85&#37;/140% on the body and then use EMs to scale from there. Points, picas and other absolute measurements are best used for printing (though there are occasions where points are appropriate for browser screens - they don't come up very often though).

    With regard to the hover state, I'd put the hover state on the list item and leave it there. This may require messing with the spans though, but I'm not 100% sure on that (would have to test it to find out).

    And just out of curiosity, what do you mean by "extrinsic motivation"?

  10. #10
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    intrinsic motivation is when your motivated by internal factors: ie the drive to do good or just feeling good about doing something, without getting a reward for your efforts.

    extrinsic motivation is when some sort of reward is involved in order for you to become motivated, like money for instance.

  11. #11
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By the way, which version of the htc file should i use?

  12. #12
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And finally, is there a way to make it a drop down menu as opposed to a drop line menu? when i rollover the locations tab the options appear in a horizontal line. it would be more flexible if they droped down so i can add more in the future.

    thanks!

    EDIT: ps the menu is a proper drop down in firefox, but i drop line menu in IE6
    See attachment for screenshot
    Attached Images Attached Images
    Last edited by mitcho; Oct 22, 2007 at 17:30. Reason: see attachment

  13. #13
    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)
    Quote Originally Posted by mitcho View Post
    intrinsic motivation is when your motivated by internal factors: ie the drive to do good or just feeling good about doing something, without getting a reward for your efforts.

    extrinsic motivation is when some sort of reward is involved in order for you to become motivated, like money for instance.
    Oh, that.

    Quote Originally Posted by mitcho View Post
    By the way, which version of the htc file should i use?
    I'd use the latest version.

    Quote Originally Posted by mitcho View Post
    And finally, is there a way to make it a drop down menu as opposed to a drop line menu? when i rollover the locations tab the options appear in a horizontal line. it would be more flexible if they droped down so i can add more in the future.

    thanks!

    EDIT: ps the menu is a proper drop down in firefox, but i drop line menu in IE6
    See attachment for screenshot
    Yes, you can do that. I can't approve attachments (Advisors, Team Leaders, Administrators and SitePoint staff can though), so I'll just have to wait to see what the attachment is, unless you can find a way to host it externally.

  14. #14
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  15. #15
    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)
    Ok, to fix IE 6, just add float: none; to the #menu ul li style rule.

  16. #16
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And one last question if i may. the 29px high footer, is there a way to anchor it permanently at the footer of the page, and therefore extend the body background to 100&#37; height so the space in between the footer and the content looks like it is connected?

    does that make sense?

  17. #17
    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)
    Yeah, it's possible. I even thought about doing it when I re-wrote your template, but I decided not to at the time because I didn't know if you wanted it.

  18. #18
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That would be great if you could tell me what i need to add to the footer and content styles to get this to happen?

  19. #19
    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)
    It'll require changing the HTML, which I'm normally loathe to do, but here you go. You will have to change the background color from #EFEFEF to #FFFFFF on your centre-bg.gif file or else there will be problems.

    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>Ozzie Ozzie Ozzie</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<meta http-equiv="Content-Style-Type" content="text/css" />
    	<meta http-equiv="imagetoolbar" content="no" />
    	<meta name="description" content="A brief description of what the current page is about 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="wrap">
    		<h1>Ozzie</h1>
    		<ul id="menu">
    			<li id="home-nav"><a href="#" rel="tag"><span></span>Home</a></li>
    			<li id="about-nav"><a href="#" rel="tag"><span></span>About</a></li>
    			<li id="locations-nav">
    				<a href="#" rel="tag"><span></span>Locations</a>
    				<ul>
    					<li><a href="#">Sydney</a></li>
    					<li><a href="#">Melbourne</a></li>
    					<li><a href="#">Brisbane</a></li>
    				</ul>
    			</li>
    			<li id="catalogue-nav"><a href="#" rel="tag"><span></span>Catalogue</a></li>
    			<li id="contact-nav"><a href="#" rel="tag"><span></span>Contact</a></li>
    		</ul>
    		<div id="content">
    			<img id="banner" src="images/sc_lifestyle_banner.jpg" width="740" height="151" alt="Live the Life!" title="" />
    			<div class="wrapper">
    				<h2>Welcome to Australia</h2>
    				<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>
    			</div>
    		</div>
    		<div id="sidebar">
    			<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>
    		</div>
    	</div>
    </div>
    <div id="footer">
    	<em>Copyright & #169; 2007</em> <!-- again, remove the space between & and # -->
    </div>
    </body>
    </html>
    And the CSS that goes with it (this will replace the stylesheet I originally provided).

    Code CSS 2.1:
    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, textarea, tt, var {
    	margin: 0;
    	padding: 0;
    }
     
    html, body {
    	height: 100%;
    }
     
    body {
    	background: #7B7B7B url("images/centre-bg.gif") center center repeat-y;
    	color: #000;
    	font: normal 12px/14px verdana, arial, helvetica, sans-serif;
    	letter-spacing: 1px;
    }
     
    img {
    	border: 0;  /* this squashes a Firefox bug */
    	display: block;
    }
     
    #container {
    	background: url("images/centre-bg.gif") center center repeat-y;
    	color: inherit;
    	margin: 0 auto -44px auto;
    	min-height: 100%;
    	padding: 0 10px;
    	width: 760px;
    }
     
    * html #container {
    	height: 100%;
    }
    	#wrap {
    		background: #FFF;
    		float: left;
    		/* normally I'd put the 44px bottom padding here, but Firefox 2.0.0.8 is choking on it */
    		width: 100%;
    	}
    	/* I did not want to do this, but unless there's some OTHER stupid Firefox 2.0.0.8 bug I'm not aware of, this will have to be done. */
    	*:first-child+html #wrap {
    		padding-bottom: 44px;
    	}
     
    	/* I did not want to do this, but unless there's some OTHER stupid Firefox 2.0.0.8 bug I'm not aware of, this will have to be done. */
    	* html #wrap {
    		padding-bottom: 44px;
    	}
    		h1 {
    			background: #FFF url("images/header-bg.gif") top left repeat-x;
    			color: inherit;
    			font-size: 28px;
    			line-height: 30px;
    			height: 69px;
    			overflow: hidden;
    			padding: 10px 0 0 10px;
    			width: 750px;
    		}
     
    		#menu {
    			background: #FFF;
    			color: inherit;
    			height: 35px;
    			line-height: 35px;
    			list-style: none;
    			margin: -18px auto 0 auto;
    			padding: 0 10px;
    			width: 740px;
    		}
    			#menu li {
    				display: inline;
    				float: left;
    				position: relative;
    			}
     
    			#menu a, #menu span {
    				background: #FFF url("images/sc_menu.gif") 0 0 no-repeat;
    				display: block;
    				height: 35px;
    				position: relative;
    				text-align: center;
    				text-decoration: none;
    				width: 144px;
    			}
     
    			#menu span {
    				display: block;
    				float: none;
    				margin-bottom: -35px;
    				z-index: 1;
    			}
     
    			#home-nav a, #contact-nav a, #home-nav span, #contact-nav span {
    				width: 154px;
    			}
     
    			#home-nav a:hover span {
    				background-position: 0 -35px;
    			}
     
    			#about-nav span {
    				background-position: -154px 0;
    			}
     
    			#about-nav a:hover span {
    				background-position: -154px -35px;
    			}
     
    			#locations-nav span {
    				background-position: -298px 0;
    			}
     
    			#locations-nav a:hover span {
    				background-position: -298px -35px;
    			}
     
    			#catalogue-nav span {
    				background-position: -442px 0;
    			}
     
    			#catalogue-nav a:hover span {
    				background-position: -442px -35px;
    			}
     
    			#contact-nav span {
    				background-position: -586px 0;
    			}
     
    			#contact-nav a:hover span {
    				background-position: -586px -35px;
    			}
     
    			#menu li:hover ul {
    				min-height: 1%;
    				left: 0;
    				z-index: 2;
    			}
    				#menu ul {
    					position: absolute;
    					left: -999em;
    				}
    					#menu ul li {
    						float: none;
    						height: 24px;
    						line-height: 24px;
    					}
     
    					#menu ul a {
    						background-color: #EEE;
    						background-image: none;
    						display: block;
    						height: 24px;
    						line-height: 24px;
    					}
     
    		#content {
    			background: #FFF url("images/content-bg.gif") center center repeat-y;
    			float: left;
    			margin-right: -224px;
    			width: 100%;
    		}
    			#banner {
    				margin: 10px auto;
    			}
     
    			#content .wrapper {
    				margin-right: 224px;
    				padding: 0 10px;
    			}
    				#content p {
    					margin: 6px 0;
    				}
     
    		#sidebar {
    			background: #F63;
    			color: #FFF;
    			float: left;
    			margin-top: 171px;
    			padding: 14px 10px 10px 10px;
    			text-align: right;
    			width: 194px;
    		}
     
    #footer {
    	background: #EFEFEF;
    	clear: left;
    	color: #999;
    	height: 29px;
    	margin: -44px auto 0 auto;
    	padding-top: 15px;
    	text-align: center;
    	width: 760px;
    }
    	#footer em {
    		font: normal 10px/14px verdana, arial, helvetica, sans-serif;
    	}

  20. #20
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you - kindly appreciated all the effort you have put in.

    So is it bad having the footer at the bottom of pages normally? is this something not generally done?

    Hey i just noticed i took your posted over the 8000 mark! good work!

  21. #21
    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)
    It's something a lot of people don't seem to know how to do apparently. Either that or their clients don't seem to want it.


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
  •