jimi
/
aair-one
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Design a.html with 960px grid

master
jimi 15 years ago
committed by jimi
parent
ddd91ebc10
commit
0ca9a4058d
10 changed files with 262 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      public/1.html
  2. 121
      public/a.html
  3. 33
      public/grid.txt
  4. BIN
      public/images/sprinter_1.png
  5. BIN
      public/images/sprinter_2.png
  6. BIN
      public/images/vans.png
  7. 57
      public/stylesheets/grid.css
  8. 30
      public/stylesheets/grids.css
  9. 24
      public/stylesheets/layout.css
  10. 8
      public/stylesheets/reset-fonts-base.css

7
public/1.html
View File

@ -11,9 +11,12 @@
<link rel="stylesheet" type="text/css" href="stylesheets/yui-3.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/layout.css" />
<style type="text/css" media="screen">
#header { border-top: solid 0.23em #00c000; padding: 0.46em 0; }
#nav li a { padding: 0.08em 0.23em; margin: 0.23em 0.85em; }
#header { border-top: solid 0.154em #00c000; padding: 0.462em 0; }
#nav li a { padding: 0 0.231em; margin: 0.077em 0.846em; }
#nav li a:hover { background-color: #008d00; }
#main, #sidebar { padding: 0 0.385em; }
#content { padding-top: 0.769em; }
#sidebar { padding-top: 0.769em; }
</style>
<script type="text/javascript" src="javascripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

121
public/a.html
View File

@ -0,0 +1,121 @@
<!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" xml:lang="en" lang="en">
<head>
<title>Air-one Services</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="author" content="J.Infield" />
<meta name="description"
content="Quality Commercial, Residential, and Industrial HVAC and Plumbing Services" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="stylesheets/reset-fonts-base.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/grids.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/layout.css" />
<style type="text/css" media="screen">
#header { border-top: solid 0.154em #00c000; padding: 0.462em 0; }
#nav li a { padding: 0 0.231em; margin: 0.077em 0.846em; }
#nav li a:hover { background-color: #009e00; }
</style>
<script type="text/javascript" src="javascripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#badge").hover(function() {
$(this).attr("src","images/badge3.png");
},function() {
$(this).attr("src","images/badge2.png");
});
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<img id="badge" alt="Air-one Logo" src="images/badge2.png" class="left" />
<img id="gallery" alt="Gallery" src="images/sprinter_1.png" class="right" />
</div>
<!-- id="header" -->
<div id="menu">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Commercial</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- id="menu" -->
<div id="content">
<div id="main">
<h1>Article Title Here</h1>
<p>Lorem ipsum dolor sit amet, consectetuer <span class="caps">HVAC</span>
adipiscing elit. Donec odio. Quisque <del>Audi</del> <i>Ferarri</i> volutpat mattis eros.
Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non,
semper suscipit, posuere a, pede.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Nunc dignissim risus id metus.</li>
<li>Cras ornare tristique elit.</li>
<li>Vivamus vestibulum nulla
<acronym title="Cascading Style Sheets"><span class="caps">CSS</span></acronym>
nec ante.</li>
<li>Praesent placerat risus quis eros.</li>
</ul>
<p>Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non.</p>
<blockquote>
<p>&#8220;Donec nec justo eget felis facilisis fermentum.
Aliquam porttitor mauris sit amet orci.&#8221;</p>
</blockquote>
<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero
eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus.
Praesent elementum about hendrerit tortor. Sed semper lorem at felis.
Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc
sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
<h1>Industry News</h1>
<ul>
<li>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est.</li>
<li>Donec odio. Quisque volutpat mattis eros.</li>
<li>Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis.</li>
</ul>
</div>
<div id="sidebar">
<h1>About Us</h1>
<p>
Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a
ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero
dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius,
adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque
mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies
ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
</p>
<img alt="family" src="images/family.jpg" />
<p>Ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue.
Morbi purus libero, faucibus adipiscing, commodo quis, gravida. Sed
semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi
neque euismod dui. Duis suscipit vulputate nulla vitae adipiscing.
Curabitur et aliquam sem. Nulla iaculis libero nec mi vestibulum at
dapibus mauris imperdiet. Aenean egestas eros ut lectus hendrerit
sodales.</p>
</div>
<!-- id="sidebar" -->
</div>
<!-- id="content" -->
<div id="footer">
<p>&copy;2009 J.Infield &mdash; All Rights Reserved</p>
</div>
<!-- id="footer" -->
<div id="selector">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
<a href="#" rel="5">5</a>
</div>
<!-- id="selector" -->
</div>
<!-- id="container" -->
</body>
</html>
<!-- © Copyright 2010 J.Infield. All Rights Reserved. -->

33
public/grid.txt
View File

@ -0,0 +1,33 @@
13px yui grid values:
1px 0.077
2px 0.154
3px 0.231
4px 0.308
5px 0.385
6px 0.462
7px 0.538
8px 0.615
9px 0.692
10px 0.769
11px 0.846
12px 0.923
13px 1.000
16px 1.231
180px 13.846
220px 16.923
240px 18.462
300px 23.077
360px 27.692
600px 46.154
640px 49.231
720px 55.385
740px 56.923
840px 64.615
900px 69.231
950px 73.077
960px 73.846

BIN
public/images/sprinter_1.png
View File

Side by Side

After

Width: 640  |  Height: 240  |  Size: 304 KiB

BIN
public/images/sprinter_2.png
View File

Side by Side

After

Width: 640  |  Height: 240  |  Size: 268 KiB

BIN
public/images/vans.png
View File

Side by Side

After

Width: 640  |  Height: 240  |  Size: 303 KiB

57
public/stylesheets/grid.css
View File

@ -0,0 +1,57 @@
body {
/* center the page */
text-align: center;
margin-left: auto;
margin-right: auto;
}
/* 950 centered (doc2) */
.yui-d2 {
margin: auto;
text-align: left;
width: 73.076em;
*width: 71.25em;
}
.yui-t6 {
margin: auto;
text-align: left;
width: 100%;
}
.yui-t6 .yui-main {
float: left;
/* IE: preserve layout at narrow widths */
margin-right: -25em;
}
/* t6 narrow block = equivalent of 300px */
.yui-t6 .yui-b {
float: right;
width: 23.0769em;
*width: 22.50em;
}
.yui-t6 .yui-main .yui-b {
margin-right: 24.0769em;
*margin-right: 23.475em;
}
/* yui-main */
.yui-main .yui-b {
position: static;
}
.yui-main {
width: 100%;
}
.yui-main .yui-b {
float: none;
width: auto;
}
.yui-b {
position: relative;
_position: static;
}

30
public/stylesheets/grids.css
View File

@ -0,0 +1,30 @@
body {
text-align: center; /* center body content */
}
#container {
text-align: left;
margin: 0 auto;
width: 73.846em; /* 73.846em 960px width */
*width: 72.00em; /* 97.5% adjust for IE */
}
#content {
overflow: hidden;
width: auto;
padding: 0.769em 0 0 0; /* 0.769em 10px top */
}
#main {
float: left;
padding: 0 0.385em; /* 5px horiz. padding */
width: 49.231em; /* 48.231em 640px width */
*width: 48.00em;
}
#sidebar {
float: right;
padding: 0 0.385em; /* 5px horiz. padding */
width: 23.077em; /* 23.077em 300px width */
*width: 22.50em;
}

24
public/stylesheets/layout.css
View File

@ -4,19 +4,19 @@ html {
}
body {
margin: 1.5em;
margin: 1.462em;
font-family: Ariel, sans-serif;
color: #f0f0f0;
}
h1,h2,h3 {
margin: 0 0 1em 0;
margin: 0 0 13px 0;
font-variant: small-caps;
}
blockquote {
margin: 0 4em 1em 4em;
padding: 0.5em;
padding: 0.462em;
}
blockquote p {
font-size: 131%;
@ -26,11 +26,6 @@ blockquote p {
margin: 0;
}
#content, #sidebar {
/*background-color: #e2ffe2;*/
padding-top: 0.5em;
}
#header {
background-color: none;
overflow: hidden
@ -56,25 +51,22 @@ blockquote p {
#nav li {
list-style: none;
float: left;
margin-right: 0.5em;
margin-right: 0.462em;
position: relative; }
#nav li a {
text-decoration: none;
text-transform: uppercase;
color: #444;
float: left;
padding: 0.5em 1em; }
padding: 0.462em 1em; }
#nav li a:hover {
color: #111;
background-color: #00af00;
}
#main { padding: 0 0.46em; }
#sidebar { padding: 0.77em 0.46em; }
#sidebar > img {
float: left;
padding-right: 0.46em;
padding-right: 0.462em;
}
#footer {
@ -82,9 +74,9 @@ blockquote p {
}
#footer p {
text-align: center;
padding: 1.5em 0;
padding: 1.462em 0;
color: #777;
border-top: solid 0.46em #00c000;
border-top: solid 0.231em #00c000;
font-family: Georgia, serif;
font-size: 77%;
font-style: italic;

8
public/stylesheets/reset-fonts-base.css
View File

@ -0,0 +1,8 @@
/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 3.0.0
build: 1549
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}h1{font-size:138.5%;}h2{font-size:123.1%;}h3{font-size:108%;}h1,h2,h3{margin:1em 0;}h1,h2,h3,h4,h5,h6,strong{font-weight:bold;}abbr,acronym{border-bottom:1px dotted #000;cursor:help;}em{font-style:italic;}blockquote,ul,ol,dl{margin:1em;}ol,ul,dl{margin-left:2em;}ol li{list-style:decimal outside;}ul li{list-style:disc outside;}dl dd{margin-left:1em;}th,td{border:1px solid #000;padding:.5em;}th{font-weight:bold;text-align:center;}caption{margin-bottom:.5em;text-align:center;}p,fieldset,table,pre{margin-bottom:1em;}input[type=text],input[type=password],textarea{width:12.25em;*width:11.9em;}