×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Contact US

*
*
*
*

Thanks. We have received your request and will respond promptly.

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

need help with footer h3 background-color.
2

thread215-1729214

need help with footer h3 background-color.

need help with footer h3 background-color.

(OP)
My problem as that change the background-color for h3 in the footer.
fills up the section as well as the footer.

footer h3 {background-color:red;}

I do not understand why. footer h3 should tell it that I only want the h3
background color to red.

What am I missing?
<html>
<head>
<title>test</title>
<style>
body,ul,li,h1,h2,h3,h4,h5,h6,a {margin:0;padding:0;font-family:georgia;}
body {text-align:center;font-size:11px;}
#container {width:800px;text-align:left;margin:0 auto;}
header {height:200px;text-transform:uppercase;font-size:25px;font-family:arial narrow;} /* line-height:25px; */
header h1 {font-size:60px;}
header span {color:white;background-color:black;}
section ul {list-style:none;}
section li {width: 380px;font-family:arial;font-size:15px;float:left;margin:30px 0 0 ;}
section h2 {text-transform:uppercase;font-size:25px;}
footer {}
h3 {background-color:red;}
</style>
</head>
<body>
<div id="container">

<header>
<h1>Global gathering</h1>
<span>wings for life world run</span> a starter's gun on six continents. the first worldwid running race in
sports history gets under way in may 2014. anyone who wants to race against the rest of the world can take part.
here are the details:
</header>

<section>
<ul>
<li><h2>1. the way it works</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li><h2>2. the chaser</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li><h2>3. the courses</h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li><h2>4. the results</h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li><h2>5. the participants</h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li><h2>6. the mission </h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
</section>
<footer>
<h3>Compete against the rest of the world in the Wings For Life World Run.
You can register online until April 20, 2014, at <a href="#">wingsforelifeworldrun.com</h3>
</a>
</footer>
</div>
</body>
</html>

Howard

RE: need help with footer h3 background-color.

i see several errors in your CSS and your HTML

CODE --> CSS

footer {}
h3 {background-color:red;}

Your h3 color will applies to all h3s in your page. not just the one in the footer.


CODE --> HTML

<footer>
<h3>Compete against the rest of the world in the Wings For Life World Run.
You can register online until April 20, 2014, at <a href="#">wingsforelifeworldrun.com</h3>
</a>
</footer>

Your link is incorrectly closed outside of the h3.

But also since your footer has notihng else but the h3, there's nothing else in your footer where the other background can be seen through.

Basically your h3 is covering the entire footer.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: need help with footer h3 background-color.

(OP)
It still gives the same results..


<html>
<head>
<title>test</title>
<style>
body,ul,li,h1,h2,h3,h4,h5,h6,a {margin:0;padding:0;font-family:georgia;}
body {text-align:center;font-size:11px;}
#container {width:800px;text-align:left;margin:0 auto;}
header {height:200px;text-transform:uppercase;font-size:25px;font-family:arial narrow;} /* line-height:25px; */
header h1 {font-size:60px;}
header span {color:white;background-color:black;}
section ul {list-style:none;}
section li {width: 380px;font-family:arial;font-size:15px;float:left;margin:30px 0 0 ;}
section h2 {text-transform:uppercase;font-size:25px;}
footer h3 {background-color:red;}
</style>
</head>
<body>
<div id="container">

<header>
<h1>Global gathering</h1>
<span>wings for life world run</span> a starter's gun on six continents. the first worldwid running race in
sports history gets under way in may 2014. anyone who wants to race against the rest of the world can take part.
here are the details:
</header>

<section>
<ul>
<li><h2>1. the way it works</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li><h2>2. the chaser</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li><h2>3. the courses</h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li><h2>4. the results</h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li><h2>5. the participants</h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li><h2>6. the mission </h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
</section>
<footer><h3>Compete against the rest of the world in the Wings For Life World Run.
You can register online until April 20, 2014, at <a href="#">wingsforelifeworldrun.com</a></h3>

</footer>
</div>
</body>
</html>

RE: need help with footer h3 background-color.


Hi,
I've spotted that you haven't closed the ul tag, and as your using html5 elements it's advisable to include
the html5 doctype.

The following code seems to display as you intended ( I've tried it in Firefox, Explorer and Chrome on Windows 8 )

CODE

<!DOCTYPE HTML>
<html>
<head>

<title>test</title>

<style>
body ul,li,h1,h2,h3,h4,h5,h6,a {margin:0;padding:0;font-family:georgia;}
body {text-align:center;font-size:11px;}
#container {width:800px;text-align:left;margin:0 auto;}
header {height:200px;text-transform:uppercase;font-size:25px;font-family:arial narrow;} 
header h1 {font-size:60px;}
header span {color:white;background-color:black;}
section ul {list-style:none;}
section li {width: 380px;font-family:arial;font-size:15px;float:left;margin:30px 0 0 ;}
section h2 {text-transform:uppercase;font-size:25px;}
footer {clear:left;}
footer h3 {background-color:red;}
</style>

</head>

<body>

<div id="container">

	<header>
		<h1>Global gathering</h1>
		<span>wings for life world run</span> a starter's gun on six continents.
                the first worldwid running race in sports history gets under way in may
                2014. anyone who wants to race against the rest of the world can take part.
		here are the details:
	</header>

	<section>
		<ul>
			<li>
			<h2>1. the way it works</h2>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
                        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
			</li>

			<li>
			<h2>2. the chaser</h2>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
                        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
			</li>

			<li>
			<h2>3. the courses</h2>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
                        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
			</li>

			<li>
			<h2>4. the results</h2>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
                         nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
			</li>

			<li>
			<h2>5. the participants</h2>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
                        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
			</li>

			<li>
			<h2>6. the mission </h2>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
                         nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
			</li>
		</ul>
	</section>

	<footer>
		<h3>
		Compete against the rest of the world in the Wings For Life World Run.
		You can register online until April 20, 2014, at <a href="#">wingsforelifeworldrun.com</a>
		</h3>
	</footer>

</div>

</body>
</html>

Notice that I've also added

CODE

footer {clear: left;}
to the css code. This is the only way I could stop the red colour flooding the section background as
well as the footer.

Perhaps if Phil Vacunita reads this he could shed some light as to why this is necessary as I don't
know why this should cure the problem

Hope this helps

Steve (Datamasher)

RE: need help with footer h3 background-color.

This discussion spans a couple hours. You can get instant results by simply using HTML & CSS validation.

http://validator.w3.org/

Instant access to this service from any page you have open in your browser is also obtained through the very handy "web developer" browser extension.

http://chrispederick.com/work/web-developer/



RE: need help with footer h3 background-color.

Quote (datamasher)

Notice that I've also added

CODE --> CSS

footer {clear: left;}

to the css code. This is the only way I could stop the red colour flooding the section background as
well as the footer.

Perhaps if Phil Vacunita reads this he could shed some light as to why this is necessary as I don't
know why this should cure the problem

For this particular situation, a clear "left" will work, but a clear "both" is ideal for a footer... in case a right float is added later to the page.

The web developer browser extension can outline page elements to illustrate how far up the footer actually appears because of the floated li elements. You can also hit F12 in your browser to bring up the native development tools. The element inspector can also highlight the footer's actual area when other items float.

RE: need help with footer h3 background-color.

You could also add an overflow:hidden or even auto to your UL. and it would solve the problem better than a clear, since it can is applied to the containing element rather than to an unrelated element which means later on, you won't know why the clear is there.

The reason this happens is because floated elements do not contribute to their parents height, and without an overflow, they just fall outside their parent. So basically your floated elements where falling into the footer pushing down the h3, which increased the footers height.

If you want to use floats, make sure the containing parents have an overflow set, so they can contain the floated elements.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: need help with footer h3 background-color.

Hi Phil,
many thanks for the explanation. I am beginning to understand floated elements a lot better now.

Steve
(Datamasher)

RE: need help with footer h3 background-color.

Glad I could help Steve.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login
Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close