need help with footer h3 background-color. 2

csphard · Mar 26, 2014

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

vacunita · Mar 26, 2014

i see several errors in your CSS and your HTML

CSS:

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

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

HTML:

<footer>
[COLOR=#5C3566]<h3>[/color]Compete against the rest of the world in the Wings For Life World Run.
You can register online until April 20, 2014, at [b]<a[/b] href="#">wingsforelifeworldrun.com[COLOR=#5C3566]</h3>[/color]
[b]</a>[/b]
</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

csphard · Mar 26, 2014

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>

datamasher · Mar 26, 2014

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)

spamjim · Mar 27, 2014

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/

spamjim · Mar 27, 2014

datamasher said:
Notice that I've also added

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.

vacunita · Mar 27, 2014

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

datamasher · Mar 27, 2014

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

Steve
(Datamasher)

vacunita · Mar 28, 2014

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

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

need help with footer h3 background-color. 2

csphard

Programmer

vacunita

Programmer

csphard

Programmer

datamasher

Technical User

spamjim

Instructor

spamjim

Instructor

vacunita

Programmer

datamasher

Technical User

vacunita

Programmer

Similar threads

Part and Inventory Search

Sponsor