Jump to content

Html 5 And Css3 Creating A Template


nomadrw

Recommended Posts

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

Link to comment
Share on other sites

  • 2 weeks later...
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.