Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Html 5 And Css3 Creating A Template

Started by nomadrw, Dec 24 2012 03:42 PM

template html5 css3

Please log in to reply

2 replies to this topic

#1 nomadrw

Member

Members
19 posts

Posted 24 December 2012 - 03:42 PM

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 &#8226; &nbsp;</li>
<li>e-mail: <a href="#mailto:www.damonwongdesign@yahoo.com">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