A First Complete Jazz Calendar Draft

Contact Us or call 1-877-932-8228
A First Complete Jazz Calendar Draft

A First Complete Jazz Calendar Draft

Our next pass at rendering the design matches the original specs: the individual-gig elements sit in the main content well, and the sidebar holds the correct content. The featured gigs are each an <article> (of class "performance"), sized and floated so that they display two across in the focus area of the page.

We've rendered the design successfully - one might take issue with the graphic design choices, perhaps, but we have achieved our first goal: the original design specs are realized as good web code. But the page is inflexible - resize your browser or view the design on a mobile device and the page remains exactly the same. Our next task is to introduce some flexibility into the page.

Jazz Calendar elements

Code Sample:

FlexibleGrids/Demos/jazzcalfirstdraftcomplete.html



  Jazz Calendar - Local Live Jazz Music Events
  
  



	
Jazz Calendar

Local jazz info

Welcome

Jazz Calendar is the resource for local jazz performances in our community. Stop back often to learn about upcoming gigs, read reviews of past concerts, and stay in touch with the jazz scene in our area.

Jazz Calendar
123 Fake Street, Sometown, USA | 555-123-4567

The outer markup is exactly the same as in our first draft: the #container div wraps the whole site, #main sits inside it, and #maincontent and #sidebar float left and right, respectively. We've added elements inside #maincontent - each article of class performance represents one upcoming gig, with title, image, and detail content.

Code Sample:

FlexibleGrids/Demos/css/jazzcalfirstdraftcomplete.css
body {
	background-image:url('../images/bg_page_notes.gif');
	font-family:Arial,sans-serif;
}

a {
	text-decoration:none;
	color:#a65c4c;
}

#container {
	width:960px;
	margin:0 auto;
	background:#fff5ea;
}

#main {
	width:900px;
	margin:0 auto 53px auto;
	background-color:#c0cbd0;
}

header {
	background-color:#a67947;
	padding:0 0 0 36px;
}

header h3#tagline {
	float:right;
	font-size:12px;
	color:#fff;
	font-style:italic;
	margin:36px 36px 0 0;
}

nav {
	background-color:#2d5668;
	padding:10px 0 10px 36px;
}

nav ul {
	display:inline;
}

nav ul li {
	display:inline;
}

nav ul li a {
	color:#fff;
	text-decoration:none;
	margin-right:10px;
}

#main #maincontent {
	width:494px;
	float:left;
	padding:36px;
	background-color:#ffedd9;
}

#main #maincontent h2 {
	font-size:22px;
	font-weight:bold;
}

#main #maincontent .performance {
	margin:36px 0 0 0;
	width:230px;
	float:left;
}

#main #maincontent .performance img {
	margin:0 10px 10px 0;
}

#main #maincontent .performance h3 {
	font-size:20px;
}

#main #maincontent .performance h3 a {
	color:#2D5668;
	text-decoration:none;
}

#main #sidebar {
	width:259px;
	float:right;
	padding:36px;
}

#main #sidebar h3 {
	font-style:italic;
	font-size:20px;
}

#contactinfo {
	clear: both;
	background-color:#a67947;
	padding:10px 0 10px 36px;
}
#contactinfo p {
	color:#fff;
}

We give each article of class performance a fixed width (230 pixels) and float it left, so that the gigs display two-across inside of their #maincontent container.

Next