I'm coding up my first real site using HTML5 and CSS3. It's a static, fixed-width site, and I'm just getting my feet wet with a project to help out my girlfriend's parents. I'm doing it for free and using this as a learning experience.
I'm nowhere near finished but I'm running into an issue with how the browser is interpreting my <sections> and <divs>. I've gone through the HTML and I'm pretty confident that all sections and divs are properly closed off, but when I inspect the site via Safari's web inspector, it's ending my <section class="mainContent> without including all of it's content. I'm suspicious that the CSS for the ".mainContent h1" where I "clear:both;" may be part of the problem. I've validated my site, and the only complaints are for how the gradients are being generated (which work for me, are from a book, and I'm pretty sure are unrelated to the issue I'm having). I certainly don't expect anyone to fix my code for me, but if someone could point me in the right direction to an article or otherwise, I'd be very grateful (as would my girlfriend's family).
Here's the HTML5:
And the CSS3:
I'm nowhere near finished but I'm running into an issue with how the browser is interpreting my <sections> and <divs>. I've gone through the HTML and I'm pretty confident that all sections and divs are properly closed off, but when I inspect the site via Safari's web inspector, it's ending my <section class="mainContent> without including all of it's content. I'm suspicious that the CSS for the ".mainContent h1" where I "clear:both;" may be part of the problem. I've validated my site, and the only complaints are for how the gradients are being generated (which work for me, are from a book, and I'm pretty sure are unrelated to the issue I'm having). I certainly don't expect anyone to fix my code for me, but if someone could point me in the right direction to an article or otherwise, I'd be very grateful (as would my girlfriend's family).
Here's the HTML5:
Code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Under Sink Water Filter Systems</title>
</head>
<body>
<div id="wrapper">
<header>
<nav>
<ul>
<li>Home</li>
<li>Product</li>
<li>F.A.Q.</li>
<li><img src="logo.jpg" alt="Aqua Systems Logo" />
<li>Company</li>
<li>Links</li>
<li>Contact</li>
</ul>
</nav>
<section id="productPitch">
<img src="productImage.jpeg" alt="Under sink reverse osmosis filter system">
<section id="productInfo">
<h1>Under Sink Water Filter System</h1>
<h2>Reverse Osmosis</h2>
</section>
</section>
</header>
<section class="mainContent">
<h1>Is bottled water REALLY that bad?</h1>
<div class="leftColumn">
<article class="Argument">
<h2>Environment</h2>
<p>An estimated <b>XXXX gallons of petroleum</b> are used to produce, distribute and dispose of plastic water bottles annually. The majority of bottles end up in landfills <b>producing XXXX tons of waste</b> every year. Bottled water companies engage in a practice called <b>Water Mining</b> that depletes areas of clean water sources.</p>
</article>
<article class="Argument">
<h2>Health</h2>
<p>An estimated <b>XXXX gallons of petroleum</b> are used to produce, distribute and dispose of plastic water bottles annually. The majority of bottles end up in landfills <b>producing XXXX tons of waste</b> every year. Bottled water companies engage in a practice called <b>Water Mining</b> that depletes areas of clean water sources.</p>
</article>
</div>
<div class="rightColumn">
<article class="Argument">
<h2>Cost</h2>
<p>An estimated <b>XXXX gallons of petroleum</b> are used to produce, distribute and dispose of plastic water bottles annually. The majority of bottles end up in landfills <b>producing XXXX tons of waste</b> every year. Bottled water companies engage in a practice called <b>Water Mining</b> that depletes areas of clean water sources.</p>
</article>
<article class="Argument">
<h2>Quality</h2>
<p>An estimated <b>XXXX gallons of petroleum</b> are used to produce, distribute and dispose of plastic water bottles annually. The majority of bottles end up in landfills <b>producing XXXX tons of waste</b> every year. Bottled water companies engage in a practice called <b>Water Mining</b> that depletes areas of clean water sources.</p>
</article>
</div>
<h1>Why is an under sink water filter system the SMART choice?</h1>
[COLOR="Red"] <!-- Browser is ending the mainContent section here, not sure why -->
[/COLOR]
<div class="leftColumn">
<article class="Argument">
<h2>Safe</h2>
<p>An estimated <b>XXXX gallons of petroleum</b> are used to produce, distribute and dispose of plastic water bottles annually. The majority of bottles end up in landfills <b>producing XXXX tons of waste</b> every year. Bottled water companies engage in a practice called <b>Water Mining</b> that depletes areas of clean water sources.</p>
</article>
<article class="Argument">
<h2>Great Tasting</h2>
<p>An estimated <b>XXXX gallons of petroleum</b> are used to produce, distribute and dispose of plastic water bottles annually. The majority of bottles end up in landfills <b>producing XXXX tons of waste</b> every year. Bottled water companies engage in a practice called <b>Water Mining</b> that depletes areas of clean water sources.</p>
</article>
</div>
<div class="rightColumn">
<article class="Argument">
<h2>Cost Effective</h2>
<p>An estimated <b>XXXX gallons of petroleum</b> are used to produce, distribute and dispose of plastic water bottles annually. The majority of bottles end up in landfills <b>producing XXXX tons of waste</b> every year. Bottled water companies engage in a practice called <b>Water Mining</b> that depletes areas of clean water sources.</p>
</article>
<article class="Argument">
<h2>Convenient</h2>
<p>An estimated <b>XXXX gallons of petroleum</b> are used to produce, distribute and dispose of plastic water bottles annually. The majority of bottles end up in landfills <b>producing XXXX tons of waste</b> every year. Bottled water companies engage in a practice called <b>Water Mining</b> that depletes areas of clean water sources.</p>
</article>
</div>
</section>
<footer>
<p>PlaceholderText</p>
</footer>
</div>
</body>And the CSS3:
Code:
body {
background-color: #1d1d18;
}
#wrapper {
width: 960px;
margin: 0 auto;
}
header {
color: black;
background-color: #dfdfdf;
font-family: "AppleGothic", "Trebuchet MS", sans-serif;
}
nav ul {
padding: 20px;
padding-top: 35px;
list-style-type: none;
}
nav li {
display: inline;
padding: 25px;
}
#productPitch {
padding: 30px;
/* fallback color */
background-color: #dfdfdf;
/* firefox 3.6+ */
background-image: -moz-linear-gradient(#858585, #dfdfdf);
/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient( linear, 0%, 0%, 0%, 100%, from(#858585), to(#dfdfdf));
/* Safari 5.1+ */
background-image: -webkit-linear-gradient(#858585, #dfdfdf);
height: 400px;
}
#productInfo {
float: right;
text-align: center;
}
.mainContent {
background-color: #081a3a;
font-family: Helvetica, sans-serif;
color: #edefd0;
}
.mainContent h1 {
text-align: center;
clear: both;
}
.rightColumn, .leftColumn {
text-align: left;
line-height: 25px;
float: left;
width: 400px;
margin: 20px;
}
footer {
color: white;
}
Last edited:
