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:[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

Link to comment
https://forums.phpfreaks.com/topic/272339-html-5-and-css3-creating-a-template/
Share on other sites

  • 2 weeks later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.