Getting an element to "reset"

Printable View

Mar 20, 2011, 11:46
swizcore

Getting an element to "reset"

Im not sure of the proper terminology but if you look at the page Im working on, I need the image of the two buildings to "reset" in the layout. In the code you'll see I have the image after the dark sidebar, How do I get the image to always sit under the navigation, regardless of the sidebar's height? As it is coded now(px placement) Im still having inconsistent display issue between Firefox and Safari.
Thanks

N.O.C.F.A.
Mar 20, 2011, 11:59
rguy84

I am having issues as to what you want to do exactly. Do you want the two buildings to sit under the nav on the right and have the gray box to show under the NOCFA text?
Mar 20, 2011, 12:35
swizcore

Yes exactly. I can set margins to get it where I want but I would prefer to code it so it always sits under the nav regardless of the height of the sidebar(which is what my px placement depends on now).
Mar 20, 2011, 13:50
swizcore

As it stands now, it displays properly in Firefox, but displays improperly in two different ways on Safari and IE.
Mar 21, 2011, 09:52
swizcore

Anyone?

Specifically, the image of the two buildings at my link below is positioning completely differently in IE, Firefox and Safari.
Its correct in Firefox, too high and covering the navigation in Safari and of course, a cluster F in IE.
Any help is greatly appreciated.

N.O.C.F.A.

Some aspects of both HTML and CSS need to be adjusted to make the design solid. Here are changes I'd make for the design to work consistently with browsers dating back to IE6.

Firstly, switch to a strict DOCTYPE. I'm aware of no reason for using transitional HTML4 on a new site.

Fix Validation errors:

1) Close meta elements in the head with > rather than /> (which is for XHTML only).
2) Add alt attributes to img elements.

Add a basic margin and padding CSS reset.

Set body font size to 100%, and specify font sizes to elements where required. Setting font sizes in pixels is best avoided as it prevents resizing text in certain browsers.

Next, decide whether the layout is intended to be fixed or flexible width. #sitecontainer is currently set to a fixed width of 943px whereas the widths of #sidebarcontainer and #homecontent are set in ems. This disparity produces a fragile layout that will break if the viewer either uses a larger default font size in their browser or uses text-only zoom.

So, given that the outer container has a fixed width, I'll assume that to be your intention.

#header, being a block element, automatically fits the width of its parent #sitecontainer so there's no need to set width or clear there, just the background and height.

#nav is more suited to being an unordered list than a div. Float it right, position with top and right margins and set li elements to display:inline;

#sidebarcontainer, to line up its right edge with the left edge of "STATION 8" needs a width of 313px. It does not need to occupy the full width, so clear:both; is not needed.

Remove the div containers from the imgs in #rbcontent, and center them by adding a CSS rule to set imgs in #rbcontent to display:block;margin:0 auto; - depending on how and whether images are deployed within #rbcontent on other pages, you may prefer to swap to using a class.

Remove inappropriate <br> tags, which have been used to create space. It's best to use padding or margin for this.

Remove the span with the class "whitebody". As the content here is paragraphs of text, use p rather than span. Swap   characters, which have been used to force new lines with <br>, which is the appropriate element for this.

Add width and height attributes to img elements as it allows the browser to reserve space before the page is finally rendered, providing faster page load.

Float #homecontent left. This removes the need to position with negative margins (which would not have been reliable in this instance).

A fix will also need to be added to display transparent PNG24 images such as nocfa_symbol.png in IE6, but I'll leave that for now.

Edit: Added link text to #nav anchors and negative text-indent to move them out of the viewport.

Code HTML4Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
 
<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<meta name="description" content="NOCFA. North Oakland County Fire Association serves Holly and Rose Townships.a"> 
		<meta name="keywords" content="Fire, Fire Fighting, Oakland County, Michigan, Station 8,">
		<title>N.O.C.F.A.</title>
		<link href="css/indev.css" rel="stylesheet" type="text/css" media="all">
		<link rel="shortcut icon" href="favicon.ico">
		</head>
	<body>
		<div id="sitecontainer">
			<div id="header">
				<ul id="nav">
					<li><a href="indev.html" class="homebutton">Home</a></li>
					<li><a href="stations.html" class="stationsbutton">Stations</a></li>
					<li><a href="rigs.html" class="rigsbutton">Rigs</a></li>
					<li><a href="photos.html" class="photosbutton">Photos</a></li>
					<li><a href="contact.html" class="contactbutton">Contact</a></li>
					<li><a href="safety.html" class="safetybutton">Safety Education</a></li>
				</ul>
			</div>
			<div id="sidebarcontainer">
				<div class="rbcontent">
				<img src="img/nocfa_symbol.png" width="191" height="172" alt="NOCFA symbol">
					<p>Welcome to the home of the North Oakland County Fire Authority (NOCFA) located in Holly, Michigan.<br> Our fire department proudly protects and serves the residents of Holly Township and Rose Township.<br> Our primary response area is 69 square miles and is the largest in Oakland County.</p>
					<p>The members of the NOCFA are very proud of the level of protection we provide to our community. These galleries have been put together to share with you our responses and some of the unique incidents in which we are called upon for help.</p>
					<p>The NOCFA delivers a full range of fire and emergency services from 3 fire/medical stations.<br> We provide 24/7 fire suppression, rescue services, Hazmat Operations/Technical services.<br> In addition, we have 1 Basic Life Support Ambulance and 2 Advanced Life Support Ambulance for medical transports.<br> Our county company and radio designation is station 8.</p>
					<p>Thanks for checking out our site and don’t hesitate to contact us via the form on the contact page.</p>
					<p>-NOCFA Team</p>
					<img src="img/pubsafety.jpg" width="150" height="157" alt="Public Education">
					<p>Visit our Public Education Page for useful Information and Safety Guides</p>
					</div>
				<div class="rbbot">
					<div></div>
				</div>
			</div>
			<div id="homecontent">
				<img src="img/home_mainpic.jpg" width="630" height="191" alt="Views of the NOCFA Fire Station">
</div>
		</div>
	</body>
</html>

Code CSS:

/* margin and padding reset */
 
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}
 
body {
    font: 100%/1.3 Arial, Lucida, Verdana, sans-serif;
    color: #2f2f2f;
    background: #ececec;
}
 
#sitecontainer {
    width: 943px;
    margin: 10px auto;
	overflow:hidden;
}
 
#header {
	background: url(../img/nocfa_header.png) no-repeat;
	height: 105px;
}
 
#nav {
	float: right;
    margin: 78px 4px 0 0;
}
 
#nav li {
	display:inline; /* list items on a single line */
	}
 
#nav a {
	text-indent: -999em;
}
 
.homebutton {
	height: 27px;
	width: 55px;
	background-image: url(../img/nav_home.png);
	float: left;
}
 
.homebutton:hover {
	background-position: -55px 0;
}
 
 
.stationsbutton {
	height: 27px;
	width: 78px;
	background-image: url(../img/nav_stations.png);
	float: left;
}
 
.stationsbutton:hover {
	background-position: -78px 0;
}
 
.rigsbutton {
	height: 27px;
	width: 50px;
	background-image: url(../img/nav_rigs.png);
	float: left;
}
 
.rigsbutton:hover {
	background-position: -50px 0;
}
 
.photosbutton {
	height: 27px;
	width: 71px;
	background-image: url(../img/nav_photos.png);
	float: left;
}
 
.photosbutton:hover {
	background-position: -71px 0;
}
 
.contactbutton {
	height: 27px;
	width: 76px;
	background-image: url(../img/nav_contact.png);
	float: left;
}
 
.contactbutton:hover {
	background-position: -76px 0;
}
 
.safetybutton {
	height: 27px;
	width: 140px;
	background-image: url(../img/nav_safety.png);
	float: left;
}
 
.safetybutton:hover {
	background-position: -140px 0;
}
 
#sidebarcontainer { 
	background: url(../img/nt.gif) repeat;
	width: 313px;
	float:left;
}
 
.rbtop div {
	background: url(../img/tl.gif) no-repeat top left;
}
 
.rbtop {
	background: url(../img/tr.gif) no-repeat top right;
}
 
.rbbot div {
	background: url(../img/bl.gif) no-repeat bottom left;
	height: 7px;
 
}
.rbbot {
	background: url(../img/br.gif) no-repeat bottom right;
	height: 7px;
}
 
.rbtop div, .rbtop {
	height: 7px;
}
 
.rbbot div, .rbbot {
	clear: both;
}
 
.rbcontent {
	padding: 7px;
}
 
.rbcontent p {
	color:#fff;
	font-size: 0.8125em;
	margin: 1em auto;
}
 
.rbcontent img { /* centers imgs */
	display:block;
	margin:0 auto;
}
 
#homecontent {
	width:630px;
	float:left;
	}
 
 
/* @group Text Styles */
 
.rbcontent p {
	color:#fff;
	font-size: 0.8125em;
}
 
.bodycapsgreen {
  text-transform: uppercase;
  color: #8cc63f;
  font: bold 14px/1.3 Arial, sans-serif;
}
 
.bodyboldgreen {
  color: #8cc63f;
  font: bold 13px/1.3 Arial, Lucida, Verdana, sans-serif;
}
 
.bodyboldwhite {
  color: #ffffff;
  font: bold 13px/1.3 Arial, Lucida, Verdana, sans-serif;
}
 
.staffnames {
  color: #8cc63f;
  font: bold 15px/1.2 Arial, Lucida, Verdana, sans-serif;
}
 
.staffcertified {
  color: #ffffff;
  font: bold 15px Arial, Lucida, Verdana, sans-serif;
}
 
.bodyboldgray {
  color: #b3b3b3;
  font: bold 13px/1.3 Arial, Lucida, Verdana, sans-serif;
}
 
.bodybolddark {
  color: #404040;
  font: bold 12px/1.3 Arial, sans-serif;
}
 
.bodybold {
  font: bold 13px/1.5 Arial, sans-serif;
}
 
.hours {
	color: #8cc63f;
	font: bold 14px/1.3 Arial, sans-serif;
}
 
.tagline {
	color: #404040;
	font: bold 14px/1.3 Arial, sans-serif;
}
 
.copyrighttextwhite {
	color: #ffffff;
	font: 10px Arial;
}
 
/* @group Text Links */
a { 
	color: #8cc63f;
	font: bold 13px Arial;
	text-decoration: underline;
}
 
a:hover {
	color: #8cc63f;
	font: bold 13px Arial;
	text-decoration: underline;
}

Mar 21, 2011, 11:37
swizcore

Wow, I owe you a huge thank you. I've received assistance on these forums a few times now and your breakdown made more sense to me than ever. Really appreciate it, especially the coding update.

A few clarifications:
1. I've been told before that my nav should be in the li format, can you explain why its better to do it that way?

2. What is the purpose of the "overflow:hidden" on sitecontainer?

3. What was my primary error that was keeping "homecontent" from "butting up" to the bottom of the navigation links without specifying the huge negative margin?

Thanks again, very cool of you to take the time.
Mar 21, 2011, 12:12
Victorinox

Quote:

Originally Posted by swizcore

1. I've been told before that my nav should be in the li format, can you explain why its better to do it that way?

It's simply using an appropriate rather than a generic element to contain the anchors. A list indicates that the items are grouped together for a reason.

Quote:

2. What is the purpose of the "overflow:hidden" on sitecontainer?

Enables it to clear the floated child elements. If you apply a background color to #sitecontainer, view it and then remove overflow:hidden; you'll see that the background color no longer appears under #homecontent. It doesn't currently make a visible difference to your page but it adds what many would consider an expected behaviour to the layout.

Quote:

3. What was my primary error that was keeping "homecontent" from "butting up" to the bottom of the navigation links without specifying the huge negative margin?

#sidebarcontainer not being floated left.
Mar 21, 2011, 16:20
swizcore

Gotcha, thanks again.

How about this, Since I have the sitecontainer margin set at "10px auto" (because I want a bit of space above the header and the site centered), how do I make the copyright footer sit on the bottom of the browser window without that 10px margin below it?
Mar 21, 2011, 18:05
Victorinox

Your original link currently returns a 404. Do you have an online example showing the footer?
Mar 21, 2011, 18:37
swizcore

Oops, sorry about that. I had to change the suffix to php for the news posting system.

N.O.C.F.A.
Mar 21, 2011, 19:45
Victorinox
margin: 10px auto; sets 10px margin on the top and bottom of #sitecontainer, so add a 0 value for the bottom (the single "auto" continues to apply the right and left values).
Code CSS:

#sitecontainer { margin: 10px auto 0; overflow: hidden; width: 943px; }
If #footer only needs to contain a short copyright notice I'd remove the span, which is a generic inline element, and adds no meaning to the content. The CSS from .footer can be transferred to #footer.
Code HTML4Strict:

<div id="footer">All Content Copyright 2011 NOCFA.org</div>
Also, rather than using float and left margin on #footer, I suggest clear:both; and margin:0 auto; which allow it to occupy the full width and be centered.
Code CSS:

#footer { color: white; font-size: 0.625em; font-weight: bold; background: url(../img/nocfa_footer.jpg) no-repeat; clear: both; margin: 0px auto; text-align: center; width: 348px; }
Mar 21, 2011, 20:07
swizcore

Awesome.
I was trying to use a clear for the footer but apparently couldn't figure out the proper combination of attributes to get it to fly.

I also didn't realize that I could add the 0 on the sitecontainer margin and still have the auto(center) stick. Good to know.

Thank you, I've literally pulled more away from understanding CSS from your guidance today than the last 6 sites I've stumbled my through finishing.
Mar 22, 2011, 09:08
swizcore

Is it possible to set a style for all images within an ID to be centered like you showed me how to do with a class?
Mar 22, 2011, 09:53
Victorinox
Yes, just use a selector with img after the ID, same as with the class. e.g.
Code CSS:

#something img {display:block;margin:0 auto;}
Note that an ID takes precedence over a class, so if you had a nested element with a class within the ID and imgs within that element needed a different alignment from that set on the ID it wouldn't be sufficient to set this with a class selector alone but to include the parent ID in the selector e.g.
Code HTML4Strict:

<div id="something"> <div class="other"><img src="else.png"></div> </div>
Code CSS:

.other img {display:inline;margin:10px 0 0 20px;} /* won't work */ #something .other img {display:inline;margin:10px 0 0 20px;} /* will work */
One thing to remember though is that less specific, i.e. shorter, selectors allow browsers to compute CSS more quickly, so if there are likely to be a lot of exceptions to a rule it can be better to use a class on individual elements rather than tie them all to an ID and have to create long selectors to override it.
Mar 22, 2011, 10:00
swizcore

Ok got it.

Regarding the footer. Is there a way to get it to "stick" to the bottom of the browser window when the rest of the site content doesn't reach the bottom of the browser window?
Optimally, I'd like it to stay a minimum of 50px below the site content but never "floating" above the bottom of the browser window.
Mar 22, 2011, 10:48
Victorinox

Ah! Now you got me. Something I've never sought to do. There are others here who'll be able to help so either read through existing threads on "Sticky Footers" or start a new one of your own. Good luck with the rest of your project.
Mar 22, 2011, 14:12
swizcore

Thanks for all your help!
Mar 22, 2011, 14:23
Victorinox

You're welcome.
Mar 22, 2011, 14:50
Paul O'B

Quote:

Originally Posted by swizcore

Ok got it.

Regarding the footer. Is there a way to get it to "stick" to the bottom of the browser window when the rest of the site content doesn't reach the bottom of the browser window?
Optimally, I'd like it to stay a minimum of 50px below the site content but never "floating" above the bottom of the browser window.

The sticky footer faq is here and then scroll down to the latest edit for the most up to date version. It's not as complicated as it sounds but does need to be done right. Start a new thread if you have problems implementing it.
Mar 23, 2011, 19:27
swizcore

Thanks for that link Paul. I was able to implement it quite easily.