Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,472
There are 1354 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

TIP: Premade HTMLdocuments

Thread title: TIP: Premade HTMLdocuments
Reply    
    Thread tools Search this thread Display Modes  
05-18-2010, 12:05 AM
#1
Idiaao is offline Idiaao
Status: I'm new around here
Join date: Apr 2010
Location:
Expertise: programming
Software:
 
Posts: 6
iTrader: 0 / 0%
 

Idiaao is on a distinguished road

  Old  TIP: Premade HTMLdocuments

Hey all!

Just want to share one of my best tip that I use I am maybe not the only one that use this but I guess that everyone does not.

I have over 20 premade HTMLdocuments that I can choose from when I want code a new design.

Ex.

C(T(H-M)C2(L-R)F).html

The big capitals are ID's and small ones are classes. In the exampel I only have ID's. I know what all letter stand for because it's my document and I created the name.

div:Container
(
div:Top
(
div:Header()

ul:Menu()
)

div:content (this is C2)
(
div:left()
div:right()
)

div:footer()
)

Most of all sites are build in the same way so I don't want to waste time rebuilding a code over and over again. And if I get a new unique code I just add it to my library.

C(T(H-M)C2(L-R)F).html:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body
{
	background: ;
}

#container
{
	width: ;
	height: ;
	background: ;
}

#header
{
	width: ;
	height: ;
	background: ;
}

#menu 
{
	width: ;
	height: ;
}

#menu li 
{
	width: ;
	height: ;	
	list-style: ;
}

#content
{
	width: ;
	height: ;
}

#left
{
	width: ;
	height: ;
}

#right
{	
    width: ;
	height: ;
}

#footer
{	
    width: ;
	height: ;
}	
</style>
</head>

<body>
<div id="container">
   <!-- START ID:TOP -->
   <div id="top">
      <div id="header"></div>
   
      <!-- START ID:MENU -->
      <ul id="menu">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
      </ul>
      <!-- END ID:MENU -->
   </div>
   <!-- END ID:TOP -->
   
   <!-- START ID:CONTENT -->
   <div id="content">
       <div id="left"></div>
       <div id="right"></div>
   </div>
   <!-- END ID:CONTENT -->
   
   <div id="footer"></div>
  
</div>
</body>
</html>
And when I am done I just add my css to a .css file instead.

Pardon my really bad English and I hope this tip is useful for some of you out there!

Reply With Quote
05-18-2010, 01:14 AM
#2
cableguy is offline cableguy
Status: Member
Join date: Mar 2010
Location:
Expertise:
Software:
 
Posts: 156
iTrader: -1 / 0%
 

cableguy is an unknown quantity at this point

  Old

have you thought about using any of the excellent css frameworks/grids out there? (I mean in conjunction with your html "framework")

ex:
http://960.gs/
http://www.blueprintcss.org/
http://bluetrip.org/

Reply With Quote
Reply    


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed