SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast Darren Hoyt's Avatar
    Join Date
    May 2006
    Location
    Virginia, USA
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    default xhtml start page

    Hi guys,

    Apologies if this has already been discussed. Like most of you I start new projects with a generic markup template and css template already in place. I try to include every browser hack and set of generic objects that I know will be useful in almost every project. It would be cool to take a look at what you guys start with to maybe get some ideas. Here are my starter documents:

    XHTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en:us">
    
    <head>
    <title>Project Name</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <meta name="ROBOTS" content="ALL" />
    <meta name="author" content="" />
    
    <script language="JavaScript" src="/js/common.js" type="text/javascript"></script>
    
    <link type="text/css" href="/css/style.css" rel="stylesheet" media="all" />
    
    <link rel="shortcut icon" href="/images/favicon.ico" />
    
    </head>
    
    <body>
    
    
    
    <div id="wrapper">
    <div id="masthead"><h1 id="logo">Project Name</h1></div>
    
    <div class="left navbar"><?php include('/includes/nav.php'); ?></div>
    <div class="right content">asdfasdf</div>
    
    </div>
    
    <div id="footer"><?php include('/includes/footer.php'); ?></div> 
    </body>
    </html>

    CSS:

    Code:
    /* 
    TABLE OF CONTENTS
    
      HTML Elements
      Page Structure
      Navigation
      Headings
      Content Area
      Forms
      Footer
    
    
     COLOR CHART
    
      Yellow Highlight - #ffc 
      Bold Blue - #1678b7 
      Light Blue Background - #e5f6ff 
    
    */
    
    
    
    /* ---------- @ HTML Elements -----------*/
    
    
    body, html {	
    	padding: 0px 0px 20px 0px;
    	color:#666;
    	background: #FFF;
    	min-height:101%;
    	text-align:center;
    	font: 100% Arial,Verdana;
    }
    
    * { 
    	margin: 0px;
    	padding: 0px;
    } 
    
    p {	
    	margin: 15px 0px 15px 0px;
    }
    		
    a:link, a:visited {	
    	text-decoration:none;
    	color: #369; 
    }
    
    a:hover, a:active {	
    	color:#763107;
    }
    
    input, textarea, select {	
    	border: 1px solid #333;
    	padding: 3px;
    }
    
    img {	
    	border:none;
    }
    
    a.nohover:hover {	
    	border:none;
    	text-decoration: none;
    }
    
    *:focus { 
    	outline: none 
    }
    
    
    
    
    /* ---------- @ Page Structure -----------*/
    
    
    #wrapper {
    	background: url(/images/bg_wrapper.png);
    	margin-left: auto;
    	margin-right: auto;
    	font-size: 0.8em;
       }
    	   
    #masthead {
    	background: url(/images/bg_masthead.png);
    	height: 150px;
    }
    		   
    h1#logo {
    	width:150px;
    	background: url(/images/logo.png);
    	height: 150px;
    	text-indent:-9000px;
    	padding:0px;
    	margin:0px;
    }
    
    .content {	
    	background: #FFF;
    	padding: 0px}
    
    .left {	
    	float:left;
    }
    
    .right {	
    	float:right
    }
    
    br.clearfix {	
    	clear:both; 	
    	margin:0px !important; 
    	padding:0px !important; 
    	height: 1px; 
    	font-size: 1px; 
    	line-height: 1px; 
    }
    
    	
    
    /* ---------- @ Navigation -----------*/
    
    
    .navbar {	
    	margin: 0px;
    	padding: 17px 0px 0px 0px;
    	color:#FFF;
    	font-size: 11px;
    	width: 144px;
    }
    
    .navbar a, .navbar a:visited {	
    	color:#FFF;
    }
    	
    .navbar a:hover, .navbar a:active {	
    	color:#b3d9e8;
    }
    	
    .navbar ul {
    	margin: 0px;
    	padding: 0px;
    }
    	
    .nav li {
    }
    
    .navbar a {
    	display:block;
    	width: 122px;
    	height: 16px;
    	text-indent: -9000px;
    }
    
    a#linkname {
    	background:url(/images/nav_link.gif);
    }
    
    a#linkname:hover {
    	background:url(/images/nav_link_on.gif);
    }
    
    
    
    	
    		
    /* ---------- @ Headings -----------*/
    	
    h1 {
    	font-size: 1.4em;
    	}
    
    h2 {
    	font-size: 1.3em;
    }
    
    h3 {
    	font-size: 1.2em;
    }
    
    h4 {
    	font-size: 1.1em;
    }
    
    
    
    /* ---------- @ Content Area -----------*/
    
    
    
    
    
    /* ---------- @ Forms -----------*/
    
    .button {	
    	background: #D25710 ! important;
    	border:#F7ECD4 1px solid;
    	padding: 2px;
    	margin: 0px 2px 0px 0px;
    	color:#FFF;
    }
    
    .button:focus {	
    	padding:2px;
    	background: #BA4519 ! important;
    }
    		
    .button:hover {	
    	background: #BA4519 ! important;
    }
    
    
    
    
    /* ---------- @ Footer -----------*/
    
    #footer {
    	background: #000;
    	color:#7f99b3;
    	clear:both
    }

  2. #2
    SitePoint Wizard cmuench's Avatar
    Join Date
    Jul 2005
    Location
    At my computer
    Posts
    2,251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't currently use anything. I just find a template I like the feel of on oswd.org or openwebdesign.org and then I go from their. With your permission I would like to copy yours and go from there.

  3. #3
    SitePoint Enthusiast Darren Hoyt's Avatar
    Join Date
    May 2006
    Location
    Virginia, USA
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Of course, feel free.

    I would be tempted to use code from OSWD, but I'm not sure the templates would be in step with the particular & specialized design demands of most clients.

    Does no one else start new projects with templates of their own?

  4. #4
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Darren Hoyt
    Does no one else start new projects with templates of their own?
    I have a basic XHTML page with just the head contents but it doesn't have any prebuilt divs within the body. What I do do is have a bare-bones CSS stylesheet that I reuse again and again which has a few basic rules in it and generally speeds things up.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  5. #5
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    	"http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Index</title>
    
        <link type="text/css" href="/global/css/screen.css" rel="stylesheet" media="screen, projection">
        <link type="text/css" href="/global/css/print.css" rel="stylesheet" media="print">
    
        <script type="text/javascript" src="/global/js/"></script>
    
      </head>
      <body>
    
        <div id="page" class="index">
    
          <div id="header">
    
            <ol>
              <li><a title="" href="#">Link</a></li>
              <li><a title="" href="#">Link</a></li>
              <li><a title="" href="#">Link</a></li>
              <li><a title="" href="#">Link</a></li>
            </ol>
    
            <ul>
              <li><a title="" href="#">Link</a></li>
              <li><a title="" href="#">Link</a></li>
              <li><a title="" href="#">Link</a></li>
            </ul>
    
          </div> <!-- #header -->
    
        <hr>
    
          <div id="content-main">
    
            <h1>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing</a> elit</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sagittis est tempor odio. Suspendisse eu dolor. Quisque id sapien at ante iaculis vulputate. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam dignissim. Vivamus condimentum magna eget lectus. Nullam <a href="#">mauris erat, tempor</a> a, volutpat eu, vestibulum nec, leo. Nullam accumsan vestibulum ante. Ut et lectus. Duis nunc urna, pharetra ac, blandit laoreet, fermentum vel, libero. Aliquam erat volutpat.</p>
    
            <blockquote>
              <p>Morbi aliquam, ligula ac lobortis imperdiet, orci nunc vehicula justo, at posuere nisl metus vel lacus. Morbi ac quam. Ut convallis, leo vitae consequat fringilla, nisl.</p>
            </blockquote>
    
            <p>Praesent lectus massa, mattis non, consectetuer congue, vestibulum sed, tellus. Nam elementum tempus velit. Etiam eleifend dignissim nibh. Aliquam erat volutpat. Sed massa elit, interdum ac, dapibus sit amet, ornare eget, purus. Vestibulum convallis. Etiam urna dolor, hendrerit ac, nonummy vestibulum, fermentum at, erat. Sed vitae augue vitae purus fermentum volutpat. Etiam non nisi vitae odio eleifend pretium. Vestibulum <em>tempus lacinia quam</em>. Duis molestie mi et nibh. Vestibulum tellus odio, accumsan et, condimentum eget, auctor id, augue. Curabitur vel justo ut elit tempus feugiat. Morbi aliquam, ligula ac lobortis imperdiet, orci nunc vehicula justo, at posuere nisl metus vel lacus. Morbi ac quam. Ut convallis, leo vitae consequat fringilla, nisl enim bibendum orci, eu sollicitudin lorem orci a neque. Curabitur ultricies ipsum eu pede. Donec diam nunc, vestibulum nec, luctus quis, viverra quis, justo. Ut aliquam nulla hendrerit diam. Cras id diam. Aliquam erat volutpat. Quisque ultrices, lacus eu scelerisque semper, dui libero varius enim, ac tempus leo dolor eu elit. Duis nisl. Sed purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur ante. Aliquam erat volutpat. Sed ipsum lorem, elementum nec, blandit ac, mollis sed, erat.</p>
    
            <h2>Nunc ornare auctor augue.</h2>
            <p>Nunc ornare auctor augue. Nullam fringilla egestas quam. Nam egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam volutpat. Aenean dui pede, feugiat ac, sollicitudin et, egestas a, lacus. Nullam sit amet orci sit amet pede cursus tincidunt. Integer quam. Curabitur erat. Pellentesque quam diam, posuere in, tempor vel, cursus in, libero. Phasellus at mi. Morbi eleifend. In a nunc. In hac habitasse platea dictumst.</p>
    
            <ul>
              <li>Praesent lectus massa, mattis non&hellip;</li>
              <li>Nam elementum tempus velit</li>
              <li>Suspendisse sagittis est tempor odio</li>
            </ul>
    
            <h3>Praesent lectus massa, mattis non, consectetuer congue.</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sagittis est tempor odio. Suspendisse eu dolor. Quisque id sapien at ante iaculis vulputate. Cum <strong>sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus</strong> mus. Aliquam dignissim. Vivamus condimentum magna eget lectus. Nullam mauris erat, tempor a, volutpat eu, vestibulum nec, leo. Nullam accumsan vestibulum ante. Ut et lectus. Duis nunc urna, pharetra ac, blandit laoreet, fermentum vel, libero. Aliquam erat volutpat.</p>
            <p>Praesent lectus massa, mattis non, consectetuer congue, vestibulum sed, tellus. Nam elementum tempus velit. Etiam eleifend dignissim nibh. Aliquam erat volutpat. Sed massa elit, interdum ac, dapibus sit amet, ornare eget, purus. Vestibulum convallis. Etiam urna dolor, hendrerit ac, nonummy vestibulum, fermentum at, erat. Sed vitae augue vitae purus fermentum volutpat. Etiam non nisi vitae odio eleifend pretium. Vestibulum tempus lacinia quam. Duis molestie mi et nibh. Vestibulum tellus odio, accumsan et, condimentum eget, auctor id, augue. Curabitur vel justo ut elit tempus feugiat. Morbi aliquam, ligula ac lobortis imperdiet, orci nunc vehicula justo, at posuere nisl metus vel lacus. Morbi ac quam. Ut convallis, leo vitae consequat fringilla, nisl enim bibendum orci, eu sollicitudin lorem orci a neque. Curabitur ultricies ipsum eu pede. Donec diam nunc, vestibulum nec, luctus quis, viverra quis, justo. Ut aliquam nulla hendrerit diam. Cras id diam. Aliquam erat volutpat. Quisque ultrices, lacus eu scelerisque semper, dui libero varius enim, ac tempus leo dolor eu elit. Duis nisl. Sed purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur ante. Aliquam erat volutpat. Sed ipsum lorem, elementum nec, blandit ac, mollis sed, erat.</p>
    
          </div> <!-- #content-main -->
    
        <hr>
    
          <div id="content-sub">
    
            <p>Praesent lectus massa, mattis non, consectetuer congue, <a href="#">vestibulum sed, tellus</a>. Nam elementum tempus velit. Etiam eleifend dignissim nibh. Aliquam erat volutpat. Sed massa elit, interdum ac, dapibus sit amet, ornare eget, purus. Vestibulum convallis. Etiam urna dolor, hendrerit ac, nonummy vestibulum, fermentum at, erat. Sed vitae augue vitae purus fermentum volutpat. Etiam non nisi vitae odio eleifend pretium. Vestibulum tempus lacinia quam. Duis molestie mi et nibh. Vestibulum tellus odio, accumsan et, condimentum eget, auctor id, augue. Curabitur vel justo ut elit tempus feugiat. Morbi aliquam, ligula ac <a href="#">lobortis imperdiet</a>, orci nunc vehicula justo, at posuere nisl metus vel lacus. Morbi ac quam. Ut convallis, leo vitae consequat fringilla, nisl enim bibendum orci, eu sollicitudin lorem orci a neque. Curabitur ultricies ipsum eu pede. Donec diam nunc, vestibulum nec, luctus quis, viverra quis, justo. Ut aliquam nulla hendrerit diam. Cras id diam. Aliquam erat volutpat. Quisque ultrices, lacus eu scelerisque semper, dui libero varius enim, ac tempus leo dolor eu elit. Duis nisl. Sed purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur ante. Aliquam erat volutpat. Sed ipsum lorem, elementum nec, blandit ac, mollis sed, erat.</p>
    
          </div> <!-- #content-sub -->
    
        <hr>
    
          <div id="footer">
    
            <ol>
              <li><a title="" href="#">Link</a></li>
              <li><a title="" href="#">Link</a></li>
              <li><a title="" href="#">Link</a></li>
              <li><a title="" href="#">Link</a></li>
            </ol>
    
            <p>All contents &copy;2004&ndash;2006 <a title="" href="/">Company Name</a>. All rights reserved.</p>
    
          </div> <!-- #footer -->
    
        </div> <!-- #page -->
    
      </body>
    </html>
    You 'XHTML' guys are too cool for me.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •