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!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

need help with footer h3 background-color. 2

Status
Not open for further replies.
csphard

csphard

Programmer
Apr 5, 2002
194
0
0
US
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
 
Sort by date Sort by votes
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
 
Upvote 0 Downvote
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>

 
Upvote 0 Downvote

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)

 
Upvote 0 Downvote
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
Click to expand...

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.
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Hi Phil,
many thanks for the explanation. I am beginning to understand floated elements a lot better now.

Steve
(Datamasher)
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
317
spamjim
spamjim
LyndonOHRC
  • Locked
  • Question
Need advice with printing on check stock
Replies
5
Views
67
LyndonOHRC
LyndonOHRC
CoolBreeze007
  • Locked
  • Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
39
CoolBreeze007
CoolBreeze007
geneg28
  • Locked
  • Question
NEED HELP WITH CREATING LINKS
Replies
6
Views
76
geneg28
geneg28
caykamanj1966
  • Locked
  • Question
Sorting a grid list using iframe associated with Google Drive
Replies
0
Views
60
caykamanj1966
caykamanj1966

Part and Inventory Search

Sponsor

Back
Top