Html 5 And Css3 Creating A Template

nomadrw · 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: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

haku · January 6, 2013

What exactly is your question? Or in other words, what are you having troubles with, and trying to solve?

cooky24 · January 6, 2013

I am not ok now, i do not want to see these codes.

Sign In

Html 5 And Css3 Creating A Template

Recommended Posts

nomadrw

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

cooky24

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information