Okay, I admit I was lousy at DIV tags before HTML5. However, 4.01 is leaving us, and I'm making a new site, and wanted to do it right in HTML5/CSS3. Nothing fancy, just wanted...
THIS content
To appear to be inside the book. Horizontally speaking, the middle of the book is to repeat along the Y axis. And the footer should be at the footer.
The Html Code:
The Css Code:
Image of Error:
I am trying to figure out what else to do as "float bottom" I know is wrong.
THIS content
Code:
THIS DOES NOT WORK! Recipe: About this recipe, and the lovely blurbage that makes people want to know more. I see it as rattling garbage`. Serves: No. Prep time: No. Ingredients: 1/2 tsp. whatever 1/2 blurbage etc. Free of: How to Make: 1.
The Html Code:
Code:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title> Allergic Vegetarian: Recipes for all Allergies </title> <link rel="stylesheet" href="http://www.allergicvegetarian.com/css/AVav.css" /> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk /html5.js"></script> <![endif]--> </head> <body> <header> <hgroup> <h1> Allergic Vegetarian </h1> <h2> Better Healthy Living for Life </h2> </hgroup> </header> <nav> <ul> <li><a href="http://www.allergicvegetarian.com/recipe/vegan/vegan.html"> Vegan </a></li> <li><a href="http://www.allergicvegetarian.com/recipe/vegetarian/vegetarian.html"> Vegetarian </a></li> <li><a href="http://www.allergicvegetarian.com/recipe/dairy/dairyfree.html"> Dairy & Egg Free </a></li> <li><a href="http://www.allergicvegetarian.com/recipe/fish/fishfree.html"> Seafood & Seaweed Free</a></li> <li><a href="http://www.allergicvegetarian.com/recipe/corn/cornfree.html"> Gluten & Corn Free </a></li> <li><a href="http://www.allergicvegetarian.com/recipe/garlic/garlicfree.html"> Garlic & Onion Free</a></li> <li><a href="http://www.allergicvegetarian.com/recipe/nut/nutfree.html"> Nuts & Peanut Free</a></li> <li><a href="http://www.allergicvegetarian.com/recipe/8/8free.html"> "top 8" free </a></li> <li><a href="http://www.allergicvegetarian.com/recipe/9/9free.html"> "top 8" + onion & garlic free</a></li> <li><a href="http://www.allergicvegetarian.com/recipe/kyt/kytf.html"> Kyt Friendly </a></li> <li><a href="http://www.allergicvegetarian.com/recipe/notes/notes.html"> Notes & Warnings </a></li> <li><a href="http://www.allergicvegetarian.com/recipe/notes/aboutus.html"> About Us </a></li> </ul> </nav> <!-- ABOVE SHOULD BE FINE --> <article> <div class="topbk"> <br> <br> THIS DOES NOT WORK! </div> <div class="middlebk"> <br> <br> <section class="leftfirst"> <header> <hgroup> <h2> Recipe: </h2> <h3> </h3> </hgroup> </header> <p> About this recipe, and the lovely blurbage that makes people want to know more. I see it as rattling garbage`. </p> </section> <section class="leftsecond"> <header> <hgroup> <h3> Serves: No. Prep time: No. </h3> <h3> Ingredients: </h3> </hgroup> </header> <p> 1/2 tsp. whatever <br> 1/2 blurbage <br> etc. </p> </section> <section class="rightfirst"> <header> <hgroup> <h2> Free of: </h2> <h3> How to Make: </h3> </hgroup> </header> <p> <!-- 20 of, by default --> <ol> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ol> </p> </section> </div> <div class="bottombk"> <br> <br> <br> <br> </div> </article> <aside> Try my...<br> <a href="http://www.allergicvegetarian.com/build/build.html"> "Build Your Own Recipe TM" </a> </aside> <footer> <p> © 2010 by Kytriya. All rights reserved. </p> </footer> </body> </html>
The Css Code:
Code:
* {
font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}
body {
width: 980px; margin: 0px auto;
background-color: #337711;
}
header h1 {
font-size: 28px; margin: 0px; color: #cc99ee; text-shadow: 2px 2px 5px #000;
}
header h2 {
font-size: 20px; padding: 4px; margin: 0px; color: #cc99ee;
font-style: italic;
}
header h3 {
font-size: 18px; padding: 4px; margin: 0px; color: #cc99ee;
font-style: italic;
}
/* HERE IS PART OF THE PROBLEM: Book Image Coding */
.leftfirst {padding: 10px; float: left; background-color: #cc99ee}
.leftsecond {padding: 8px; float: left;}
.rightfirst {padding: 10px; float: right;}
.topbk { background: url(/css/img/topbk.gif) no-repeat; width="960px" height="40px"; margin:0; padding:0; position: relative;}
.middlebk { background: url("/css/img/middlebk.gif") repeat-y; position: relative;}
.bottombk { background: url("/css/img/bottombk.gif") no-repeat; position: relative;}
/* END OF BOOK IMAGE CODING */
nav ul {
list-style: none; padding: 2px; display: table-row-group;
clear: right; background-color: #000;
padding-left: 4px; height: 24px;
}
nav ul li {
display: inline-table; padding: 2px 20px 5px 10px;
border-left: thin solid #bdb76b;
border-top: thin solid #bdb76b;
border-right: thin solid #bdb76b;
border-bottom: thin solid #bdb76b;
height: 24px; border-right: 1px solid #bdb76b;
}
nav ul li a {
color: #bdb76b; text-decoration: none;
font-size: 16px; font-weight: bold;
}
nav ul li a:hover {
color: #fff;
}
article > header time {
font-size: 14px; display: block; width: 26px;
padding: 2px; text-align: center; background-color: #999955;
color: #fff; font-weight: bold; -moz-border-radius: 6px;
-webkit-border-radius: 6px; border-radius: 6px; float: left;
margin-bottom: 10px;
}
article > header time span {
font-size: 10px; font-weight: normal;
text-transform: uppercase;
}
article > header h3 {
font-size: 20px; float: left;
margin-left: 14px;
}
article > header h3 a {
color: #993333;
}
article > section header h3 {
font-size: 16px;
}
article p {
clear: both; background-color: #e3e293; padding: 6px;
}
/* kingsthingsitalic may need TT changed to whatever it really is. */
aside{margin-top: 10px; float: right; display: inline; width: 430px; /* 430px */margin-right: -850px;position: relative;}
aside h2{padding: 5px 30px; margin-top: -8px;}
aside h3{font-family: 'kingsthingsitalic TT', arial, serif; margin-top: 10px; margin-left: 30px; margin-right: 125px; margin-bottom: 0px; font-size: 16px;
line-height: 21px; font-weight: bold; text-decoration:underline;
-webkit-transition: color .1s ease-out; -moz-transition: color .3s ease-out; -o-transition: color .3s ease-out; transition: color .3s ease-out;}
aside p{ margin: 20px 30px; }
/* OBVIOUSLY WRONG */
footer p {
float: bottom;
text-align: center; font-size: 12px;
color: #888; margin-top: 24px;
}
/* e7e6ac! e3e293 =2 */
I am trying to figure out what else to do as "float bottom" I know is wrong.
Comment