nomadrw Posted December 24, 2012 Share Posted December 24, 2012 I'm trying to figure out how to make a template objects (like you would in HTML3) where you can set up readable regions. Reason for this is I have a 12 page website it that shows my work, ie my reel, graphic.... You would have your 1. header wrapper section ( ie log and menu area) 2. this is where I would want a readable regions 3. have another readable region 4 then have your footer wrapper section Here is my html 5 <body> <!-- header-wrap --> <div id="header-wrap"> <header> <!-- <hgroup> <h1><a href="index.html"></a></h1> </hgroup> --> <nav> <ul> <li><a href="#main">Home</a></li> <li><a href="#services">Graphics</a></li> <li><a href="#portfolio">Web</a></li> <li><a href="#about-us">My Reel</a></li> <li><a href="#styles">Media</a></li> <li><a href="#styles">Bio</a></li> <li><a href="#contact">Contact Info</a></li> <li><a href="#styles">Links</a></li> </ul> </nav> </header></div> <!--logo and information --> <!-- header-wrap --> <div id="logo-wrap"> <logo> <lgroup> <h1><a href="index.html"> </a></h1> <h3>Welcome to my website</h3> </lgroup> <nav> <ul> <li>Phone: 714-504-8895 • </li> <li>e-mail: <a href="#mailto:[email protected]">damonwongdesign</a></li></ul> </nav> </logo></div> ///---this is where i want to place the readable regions--// ///--this is where I would like to have the footer wrapper---/// </body> </html> This is part of the ccs3 code /* ------------------------------------------------------ STRUCTURE --------------------------------------------------------- */ #header-wrap { width: 100%; height: 45px; z-index: 99999; position: fixed; top: 0; left: 0; } header { position: relative; width: 940px; height: 45px; margin: 0 auto; } /*new information*/ logo-wrap { width: 100%; height: 65px; /* z-index: 99999; */ position: fixed; top: 65px; left: 0; } logo { position: relative; width: 940px; height: 65px; margin: 0 auto; } /*end of new information*/ /* ------------------------------------------- Header -------------------------------------------- */ /*header hgroup { position: absolute; background: url(../images/xxxxdesign.gif) no-repeat; height: 61px; width: 340px; display: block; top: 10px; left: 0; */ } header hgroup h1 a { text-indent: -9999em; display: block; height: 31px; width: 130px; } header hgroup h3 { text-indent: -9999em; height: 0; } /* Main Navigation */ header nav { float: right; margin-top: 25px; } header nav ul { font: bold 12px/25px Helvetica, Arial, Sans-serif; margin-right: -5px; padding: 0; list-style: none; } header nav ul li { float: left; } header nav ul a:link, header nav ul a:visited { color: #c5c4c4; margin-right: 20px; text-shadow: 0 -1px 0 rgba(10, 10, 10, 1); } header nav ul a:hover, header nav ul a:active { color: #17a231 } /*new information ie logo and contact info*/ /* Logo */ logo lgroup { position: absolute; background: url(../images/xxxx.gif) no-repeat; height: 61px; width: 340px; display: block; top: 45px; /*controls height*/ left: 0; } logo lgroup h1 a { text-indent: -9999em; display: block; height: 65px; width: 340px; } logo lgroup h3 { text-indent: -9999em; height: 0; } /* Main Navigation */ logo nav { float: right; margin-top: 60px; /*controls height*/ } logo nav ul { font: bold 12px/25px Helvetica, Arial, Sans-serif; margin-right: -5px; padding: 0; list-style: none; } logo nav ul li { float: left; } logo nav ul a:link, header nav ul a:visited { color: #000000; margin-right: 20px; text-shadow: 0 -1px 0 rgba(10, 10, 10, 1); } logo nav ul a:hover, logo nav ul a:active { color: #17a231 } /*end of new information*/ Any help would be great. Thanks Damon Quote Link to comment https://forums.phpfreaks.com/topic/272339-html-5-and-css3-creating-a-template/ Share on other sites More sharing options...
haku Posted January 6, 2013 Share Posted January 6, 2013 What exactly is your question? Or in other words, what are you having troubles with, and trying to solve? Quote Link to comment https://forums.phpfreaks.com/topic/272339-html-5-and-css3-creating-a-template/#findComment-1403548 Share on other sites More sharing options...
cooky24 Posted January 6, 2013 Share Posted January 6, 2013 I am not ok now, i do not want to see these codes. Quote Link to comment https://forums.phpfreaks.com/topic/272339-html-5-and-css3-creating-a-template/#findComment-1403578 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.