The Pickup Soccer Site - Exercise

Contact Us or call 1-877-932-8228
The Pickup Soccer Site - Exercise

The Pickup Soccer Site

Duration: 20 to 30 minutes.

In this exercise, you will create the first page of a site dedicated to listing local soccer (football, if you aren't in the US!) games - a place for folks to find pickup games at local fields where anyone can join in the game. The recreational soccer player who might not be interested in joining a formal league can find a game, and those looking for players to join their game can list the location and time for their games.

The screenshot below shows the design specs. We'll render the design first as a fixed-width, pixel-based page. Your assignment is as follows:

Pickup Soccer design comp

  1. Open FlexibleGrids/Exercises/pickupsoccerinflexible/index.html and FlexibleGrids/Exercises/pickupsoccerinflexible/css/style.css in your editor.
  2. Edit HTML and CSS:
    • Use a 960px-wide div for the container of the page;
    • Style the left main column as 593px; style the right sidebar column as 259px wide;
    • Display the individual game listings, with each div as 286px wide;
    • Add margins and padding as necessary.

Solution:

FlexibleGrids/Solutions/pickupsoccerinflexible/index.html



  Soccer Pickup
  
  



  

Upcoming Games

Barry Park

Sundays, around 2pm; near the back of the largest field

Lakeside Park

Sundays, around 2pm; near the back of the largest field

Schiller Elementary School

Sundays, around 2pm; near the back of the largest field

Central High

Sundays, around 2pm; near the back of the largest field

Adams Park

Sundays, around 2pm; near the back of the largest field

Soccer Pickup: Your guide to finding a game.

A nav tag wraps an unordered list for the navigation elements. We use divs of class game to render the individual game listings.

Solution:

FlexibleGrids/Solutions/pickupsoccerinflexible/css/style.css
body {
	font-family:Georgia,serif;
	background-image:url('../images/bg_grass.jpg');
}

a {
	text-decoration:none;
	color:#4040AD;
}

a:hover {
	text-decoration:underline;
}

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

header {
	background-color:#d0b462;
}

header #logo {
	margin:10px 0 10px 36px;
}

nav {
	padding:10px 36px 10px 36px;
	float:right;
}

nav ul {
	display:inline;
}

nav ul li {
	display:inline;
}

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

#maincontent {
	width:593px;
	padding:10px 0 36px 36px;
	float:left;
}

#maincontent h1 {
	font-size:36px;
	margin:5px 0 20px 0;
}

#maincontent .game {
	float:left;
	width:286px;
	line-height:14px;
	font-size:14px;
	margin:5px;
}

#maincontent .game img {
	float:left;
	margin:0 10px 0 0;
}	

#sidebar {
	width:259px;
	float:right;
	padding:36px;
	color:#333;
	line-height:20px;
}

#sidebar h3 {
	font-style:italic;
	font-size:20px;
	margin:0 0 5px 0;
}

#footerinfo {
	clear: both;
	background-color:#151570;
	padding:10px 0 10px 36px;
}

#footerinfo p {
	color:#fff;
}

We float the two main columns left (#maincontent, at 593 pixels wide) and right (#sidebar, at 259 pixels wide). The nav element floats right. Individual .game elements float left, with a width half that of the containing element.

Next