PattyMcFatPat01 : Design 6 « Templates « HTML / CSS






PattyMcFatPat01

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Language" content="en-us"/>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<style type='text/css'>
/* PattyMcFatPat01 */


* {
   padding:0;
   margin:0;
}

html, body {
  height: 100%;
}

body {
  text-align: left;
  margin:0 auto;
  padding:0;
  color:#fff;
  font-style:normal; 
  font-variant:normal;
  font-weight:normal;
  font-size:10px;
  font-family:Verdana, Tahoma, Arial, sans-serif;
  background:#4d4d4d url('PattyMcFatPat01-images/bg.gif') repeat-y top center;
}

#page {
  width:634px;
  margin:0 auto;
}

#header {
  height:99px;
  width:634px;
  margin: 0 auto;
  background: url('PattyMcFatPat01-images/header.gif') no-repeat;
  padding:0px;
}

.text {
  color: #FFF;
  background: url('PattyMcFatPat01-images/footer.gif') no-repeat left bottom;
  width:600px;
  padding-left:15px; padding-right:15px; padding-top:40px; padding-bottom:20px
}
/**************************** menu ****************************/


#menu {
  padding:0;
  margin:0x;
  float: left;
  width: 150px;
  color:#ffffff;
  background: url('PattyMcFatPat01-images/menubg.gif') repeat-y;
}

.menu{
  background: url('PattyMcFatPat01-images/menubgbtm.gif');
  height:20px;
  margin:0;
  padding:0;
  width:150px;
}

#menu ul {  
  list-style:none;
  width:150px;
  margin:0 0 0 10px;
  padding:0;
  font-size:1.1em;
}  

#menu li {
  margin-bottom:4px;
}

#menu li a {
  margin: 5px 5px 5px 5px;
  color:#ffffff;
  text-decoration: none;
}  
  
#menu li a:hover {
  color:#999;
  text-decoration: none;
}  

#menu a {
  margin: 5px 5px 5px 5px;
  color:#ffffff;
  text-decoration: none;
}

#menu a:hover {
  color:#cccccc;
  text-decoration: none;
}


/**************************** content ****************************/

#content {
  float:right;
  padding:0 0 40px 0;
}

.post{
  padding:10px 0 10px 0;
  width:464px;
  background: url('PattyMcFatPat01-images/bottompost.gif') no-repeat bottom;
}

.post p{
  padding:10px;
}

.post p img{
  float:right;
}

a{
  color:#000;
}

a:hover{
  color:#fff;
}

h1{
  color:#fff;
  font-size:30px;
  padding: 20px 0 10px 10px;
}

h2{
  font-family:times, "Times New Romans", serif;
  color:#fff;
  font-size:16px;
  margin: 10px 0 10px 10px;
}

h3{
  font-family:times, "Times New Romans", serif;
  color:#ffff99;
  font-size:20px;
  font-weight:normal;
  border-bottom:1px solid #525252;
}

h3 img{
  float:left;
}

#footer{
  position:fixed;
  bottom:0;
  width:100%;
  background:#000;
  border-top:1px solid #ccc;
  text-align:center;
  color:#ffffff;
  clear:both;
  padding:3px 0;
  -moz-border-radius:3px;
  font-size:10px;
  filter:alpha(opacity=50);
  opacity: 0.5;
  -moz-opacity:0.5;
}
  
#footer a {
  font-weight:bold;
  color:#FFFFFF;
  font-size:10px;
}

#footer a:hover {
  font-weight:bold;
  color:#85c329;
  font-size:10px;
}

</style>


<title>page</title>
</head>

  <body>
  
    <div id="page">
  
      <div id="header">
    
        <h1>PattyMcFatPat01</h1>
    
      </div>
  
      <div id="menu">
    
        <h2>Pages</h2>
        <ul>
          <li><a href="index.html">Link</a></li>
                  <li><a href="index.html">Link</a></li>
                  <li><a href="index.html">Link</a></li>
                   <li><a href="index.html">Link</a></li>
                  <li><a href="index.html">Link</a></li>
                   <li><a href="index.html">Link</a></li>
                </ul>  
                
        <h2>Category</h2>
        <ul>
          <li><a href="index.html">Link</a></li>
                  <li><a href="index.html">Link</a></li>
                  <li><a href="index.html">Link</a></li>
                </ul>  
                
        <h2>Meta</h2>
        <ul>
          <li><a href="index.html">Login</a></li>
                  <li><a href="index.html">Site Admin</a></li>
                  <li><a href="index.html">XHTML</a></li>
                </ul>  
                
                <div class="menu"></div>

      </div>
        
      <div id="content">
      
        <div class="post">
      
          <h3>
          <img src="PattyMcFatPat01-images/new.gif" width="50" height="50" alt="new entry" />Blog Entry # 2</h3>
          
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
          sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
          magna aliquam erat volutpat. Ut wisi
          <a href="#">
          enim ad minim</a> veniam, quis nostrud exerci tation 
          ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
          consequat.
          <a href="#">
          Duis autem</a> vel eum iriure dolor in hendrerit in 
          vulputate velit esse molestie consequat, vel illum dolore eu.</p>
      
          <p>Posted in
          <a href="#">Fratelli</a>
          
          </p>
        
        </div>
        
        <div class="post">
      
          <h3>Blog Entry # 1</h3>
          
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
          sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
          magna aliquam erat volutpat. Ut wisi
          <a href="#">
          enim ad minim</a> veniam, quis nostrud exerci tation 
          ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
          consequat.
          <a href="#">
          Duis autem</a> vel eum iriure dolor in hendrerit in 
          vulputate velit esse molestie consequat, vel illum dolore eu.</p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
          sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
          magna aliquam erat volutpat. Ut wisi
          <a href="#">
          enim ad minim</a> veniam, quis nostrud exerci tation 
          ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
          consequat.&nbsp; vel eum iriure dolor in hendrerit in 
          vulputate velit esse molestie consequat, vel illum dolore eu.</p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
          sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
          magna aliquam erat volutpat. Ut wisi
          <a href="#">
          enim </a>veniam, quis nostrud exerci tation 
          ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
          consequat. vel eum iriure dolor in hendrerit in 
          vulputate velit esse molestie consequat, vel illum dolore eu.</p>
      
          <p>Posted in
          <a title="View all posts in Fratelli" rel="category tag" href="#">
          Fratelli</a></p>
        
        </div>

      </div>
           
    </div>
          
    <div id="footer">
      
      <a href="http://www.developdaly.com">Develop Daly</a>
      
    </div>
           
  </body>

</html>

   
    
    
  








Related examples in the same category

1.newave
2.newdarkside
3.newday
4.newera
5.newfangled
6.newgreeny
7.newgreys
8.newhorizon
9.news portal
10.news-print
11.newsbeat
12.newsflash
13.newsportal
14.newsroll
15.newstheme
16.newwave-business-inc
17.new_rise
18.NiceSite
19.nimbuslike
20.nixed
21.noimages
22.noname1
23.nonzero
24.nothingfanzy
25.nourish
26.nowhere
27.NuahSwirl
28.nullbullum
29.numerology
30.o-no-typography
31.obsess
32.obsession
33.obtanium
34.office-plants
35.offlimits
36.offrecord
37.oheon_com_110100021
38.ohgreenworld
39.Okeanos
40.old-wall
41.oldarchitecture
42.Olive
43.one-penny
44.one_two_three
45.online-edu
46.onlinemoviestore
47.oodles
48.openyourwindows
49.opposed
50.optimal-touch
51.orchidaceae
52.ordinaire
53.ormeggiare
54.ornamental
55.ornate
56.OrngBlu
57.oswd_blozilla
58.our-work
59.ourhouse
60.outdoorv1.0
61.outliers
62.outoftheblue
63.outtabox
64.oxidation
65.package
66.paddy-harvest
67.pagedrape
68.paivi-k
69.paleforest
70.palmtrees
71.pamphlet
72.pancorbo
73.papira
74.paradigm
75.paradise1983
76.parchmenter
77.particle
78.particles
79.pastel
80.pastelco
81.pastelflowers
82.pastries
83.path-fider
84.patternmaker
85.PattyMcFatPat03
86.pc
87.Pear Template
88.pear
89.pedestrian
90.penchantforphotos
91.pencilpink
92.people
93.perfectblemish
94.performance
95.perplex
96.personified
97.pillars
98.pills
99.pinnacle
100.Pistachio
101.pixabella
102.pixabella04
103.pixabella06
104.pixelationingreen
105.plaidshirt
106.plainandsimple
107.planning-feed
108.pluralism
109.plurkified
110.pointspace
111.pollinate
112.pollinating
113.pollination