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
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.
CODE --> CSS
Your h3 color will applies to all h3s in your page. not just the one in the footer.
CODE --> HTML
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.
<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
Notice that I've also added
CODE
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.
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.
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.
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.
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.
----------------------------------
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