HTML5, CCS3 creating a template

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • nomad
    Recognized Expert Contributor
    • Mar 2007
    • 664
    #1

    HTML5, CCS3 creating a template

    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....
    NOTE when I place the footer wrapper on the bottom it does not move according to the flow of the readable region

    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

    Code:
    <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 • &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

    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
    Tags: None
    • martin631775
      Banned
      New Member
      • Dec 2012
      • 13
      #2
      my friend check out the code..
      and for more help <link removed>
      Code:
      <head>
<style>
body{
width:100%;
display:-webkit-box;
-webkit-box-pack:center;
}
header, section, footer, aside, hgroup {
display:block;
}
#big_wrapper{
max-width:1000px;
margin:20px 0px;
display:-webkit-box;
-webkit-box-orient: vertical ;
-webkit-box-flex:1;
}

#top_header{
background:#ff0000;
padding:10px;
margin:10px;
color:white;
}
#menu {
 margin:10px;
 background:blue;
 color:white;
}
#menu li{
 list-style:none;
 display:inline;
 margin:10px;
 padding:5px;
}
#new_div{
 display:-webkit-box;
 -webkit-box-orient:horizontal;
}
#main_section{
 border:2px solid black;
 -webkit-box-flex:1;
 margin:10px;
 padding:10px;
 
}
#aside_ad{
 border:2px solid green;
 background:#777;
 color:white;
 width:100px;
 margin:10px;
 padding:10px;
}
#my_footer{
 border:2px solid blue;
 margin:10px;
 padding:10px;
 text-align:center;
}
a:link{color:black}
a:visited{color:pink}
a:hover{color:red}
a:active{color:yellow}
a:focus{color:green}
</style>
</head>
<body>

<div id="big_wrapper">
<header id="top_header">
Header

</header>
<nav id="menu">
<div>
<ul>

<li>Home
</li>
<li>Nav2
</li>
<li>Nav3
</li>

</ul>
</div>
</nav>

<div id="new_div"style="width:900px;height:1000px; background-image:url(../images/fb.png),url(../images/google.png);url(../images/icon1.png);background-repeat:no-repeat;background-position:left top,right top,right bottom;">
<section id="main_section"
>
 <article id="article_1">
  <header>
  <h3>article header</h3>
  </header>
  <section>content </section>
  <footer>-by Rahul Khandelwal</footer>
 </article>
<article id="article_1">
  <header>
  <h3>article header</h3>
  </header>
  <section>content </section>
  <footer>-by Rahul Khandelwal</footer>
 </article>
 <article>
 <a href="http://www.google.co.in/">home</a>
 <a href="http://www.google.co.in/">about us</a>
 <a href="http://www.google.co.in/">contact us</a>
 <a href="http://www.google.co.in/">features</a>
 <progress min="0" max="50" value="30"style="color:blue;width:100%;height=70%;"></progress>
 </article>
</section>
<aside id="aside_ad">

Aside<br> content
</aside>
</div>



<footer id="my_footer">
footer
</footer>
</div>
</body>
      Last edited by Rabbit; Dec 31 '12, 08:51 AM. Reason: Link to outside site removed.

        Comment

        • nomad
          Recognized Expert Contributor
          • Mar 2007
          • 664
          #3
          Big thanks

          Wow a big thanks, will use this for other projects as well

            Comment

            Previous template Next
            Working...