i'm coding first real site using html5 , css3. it's static, fixed-width site, , i'm getting feet wet project out girlfriend's parents. i'm doing free , using learning experience.
i'm near finished i'm running issue how browser interpreting <sections> , <divs>. i've gone through html , i'm pretty confident sections , divs closed off, when inspect site via safari's web inspector, it's ending <section class="maincontent> without including of it's content. i'm suspicious css ".maincontent h1" "clear:both;" may part of problem. i've validated site, , complaints how gradients being generated (which work me, book, , i'm pretty sure unrelated issue i'm having). don't expect fix code me, if point me in right direction article or otherwise, i'd grateful (as girlfriend's family).
here's html5:
and css3: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 bad?</h1> <div class="leftcolumn"> <article class="argument"> <h2>environment</h2> <p>an estimated <b>xxxx gallons of petroleum</b> used produce, distribute , dispose of plastic water bottles annually. majority of bottles end in landfills <b>producing xxxx tons of waste</b> every year. bottled water companies engage in practice called <b>water mining</b> depletes areas of clean water sources.</p> </article> <article class="argument"> <h2>health</h2> <p>an estimated <b>xxxx gallons of petroleum</b> used produce, distribute , dispose of plastic water bottles annually. majority of bottles end in landfills <b>producing xxxx tons of waste</b> every year. bottled water companies engage in practice called <b>water mining</b> 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> used produce, distribute , dispose of plastic water bottles annually. majority of bottles end in landfills <b>producing xxxx tons of waste</b> every year. bottled water companies engage in practice called <b>water mining</b> depletes areas of clean water sources.</p> </article> <article class="argument"> <h2>quality</h2> <p>an estimated <b>xxxx gallons of petroleum</b> used produce, distribute , dispose of plastic water bottles annually. majority of bottles end in landfills <b>producing xxxx tons of waste</b> every year. bottled water companies engage in practice called <b>water mining</b> depletes areas of clean water sources.</p> </article> </div> <h1>why under sink water filter system smart choice?</h1> [color="red"] <!-- browser ending 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> used produce, distribute , dispose of plastic water bottles annually. majority of bottles end in landfills <b>producing xxxx tons of waste</b> every year. bottled water companies engage in practice called <b>water mining</b> depletes areas of clean water sources.</p> </article> <article class="argument"> <h2>great tasting</h2> <p>an estimated <b>xxxx gallons of petroleum</b> used produce, distribute , dispose of plastic water bottles annually. majority of bottles end in landfills <b>producing xxxx tons of waste</b> every year. bottled water companies engage in practice called <b>water mining</b> 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> used produce, distribute , dispose of plastic water bottles annually. majority of bottles end in landfills <b>producing xxxx tons of waste</b> every year. bottled water companies engage in practice called <b>water mining</b> depletes areas of clean water sources.</p> </article> <article class="argument"> <h2>convenient</h2> <p>an estimated <b>xxxx gallons of petroleum</b> used produce, distribute , dispose of plastic water bottles annually. majority of bottles end in landfills <b>producing xxxx tons of waste</b> every year. bottled water companies engage in practice called <b>water mining</b> depletes areas of clean water sources.</p> </article> </div> </section> <footer> <p>placeholdertext</p> </footer> </div> </body>
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; }
what mean, it's ending maincontent div without including it? content isn't included? information below "why under sink water filter system smart choice?"
Forums Special Interests Web Design and Development
- iPhone
- Mac OS & System Software
- iPad
- Apple Watch
- Notebooks
- iTunes
- Apple ID
- iCloud
- Desktop Computers
- Apple Music
- Professional Applications
- iPod
- iWork
- Apple TV
- iLife
- Wireless
No comments:
Post a Comment