TonySmith
02-18-2012, 06:04 PM
I'm trying to achieve this layout:
http://www.hector.wcitac.org/~wsmit/cheerleading/mockup.jpg
The problem is that I can not get the images side by side with the captions centered underneath them on the web page as they are in the mockup.
The actual is page is here: http://www.hector.wcitac.org/~wsmit/cheerleading/
and here is the <!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Wildcat Cheerleaders | Homework #5</title>
<link rel="stylesheet" type="text/css" href="cheerleading.css" media="screen"/>
</head>
<body>
<div id="header">
<div id="heading">
<h1> Cheerleading </h1>
</div>
<div id="logo">
<p> <img src="images/logo.png" alt="Wilmington University logo" /> </p>
</div>
</div>
<div id="container">
<div id="textbox">
<h2> Who Says Cheerleading<br />isn’t a Sport? </h2>
<p>The 2011-2012 Wilmington University Cheerleading season opened in August with a trip to the University of Scranton
for UCA cheer camp. Each year the team attends a camp during the summer to bring the new team closer together and learn new skills.
This year’s camp was very successful and helped put the team in a good position to move into the season.</p>
<p>With the start of the new academic year in September the cheerleaders were hard at work both in the classroom and out in the
community. The year really kicked off with a performance at the Breast Cancer Soccer game as well as numerous appearances at
the Kidney Walk and Light the Night Walk. Hoopfest was another great opportunity for the cheerleaders to get in front of the
largest crowd of the year and give them a great performance! </p>
</div>
<div id="photos">
<p><img src="images/team_photo.jpg" alt="Wilmington University Cheerleaders" /></p>
<h2>2011 - 2012 Team Captains</h2>
<p><img src="images/gilbert.jpg" alt="Brad Gilbert" /></p>
<p><span class="captions">Brad Gilbert</span></p>
<p><img src="images/eby.jpg" alt="Stacy Eby" /></p>
<p><span class="captions">Stacy Eby</span></p>
</div>
</div>
<p id="footer">
Layout ©2012, Walter A. Smith III
<em> <br />
Images used on this website are property of Wilmington College and may not be used without
permission.
<br />
They are used here for educational purposes only.
</em>
</p>
</body>
</html>
Here is my CSS:
body {
background-color: #006633;
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
margin: 0px;
}
h1,h2 {
color: #006633;
font-family: "Times New Roman", Times, Georgia, serif;
}
h2 {
font-size: 185%;
line-height: 1.2;
text-align: center;
}
#header {
width: 760px;
background-color: white;
border-top: black solid 3px;
border-left: black solid 3px;
border-right: black solid 3px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
#logo {
background-color: white;
}
#heading {
background-color: white;
color: #006633;
font-size: 24px;
font-family: "Times New Roman", Times, Georgia, serif;
float: right;
}
#container {
width: 800px;
background: #ffffff url(images/gradient.jpg) repeat-x;
margin-left: auto;
margin-right: auto;
border: black solid 3px;
}
#footer {
color: white;
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
text-align: center;
line-height: 1.6em;
}
#textbox {
width: 390px;
border: #006633 solid 2px;
background: white;
padding: 20px;
line-height: 1.6em;
margin: 20px;
text-align: justify;
float: left;
}
#photos {
margin: 20px 20px 20px 436px;
text-align: center;
}
.captions {
color: #006633;
font-family: "Times New Roman", Times, Georgia, serif;
font-size: 130%;
line-height: 1;
text-align: center;
font-weight: bold;
}
If anyone could help, I would greatly appreciate it. I've tried every technique I can think of, but none of them work. I could make an image out of the whole thing, but I'd rather learn how to do it correctly with XHTML and CSS.
Tony Smith
http://www.hector.wcitac.org/~wsmit/cheerleading/mockup.jpg
The problem is that I can not get the images side by side with the captions centered underneath them on the web page as they are in the mockup.
The actual is page is here: http://www.hector.wcitac.org/~wsmit/cheerleading/
and here is the <!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Wildcat Cheerleaders | Homework #5</title>
<link rel="stylesheet" type="text/css" href="cheerleading.css" media="screen"/>
</head>
<body>
<div id="header">
<div id="heading">
<h1> Cheerleading </h1>
</div>
<div id="logo">
<p> <img src="images/logo.png" alt="Wilmington University logo" /> </p>
</div>
</div>
<div id="container">
<div id="textbox">
<h2> Who Says Cheerleading<br />isn’t a Sport? </h2>
<p>The 2011-2012 Wilmington University Cheerleading season opened in August with a trip to the University of Scranton
for UCA cheer camp. Each year the team attends a camp during the summer to bring the new team closer together and learn new skills.
This year’s camp was very successful and helped put the team in a good position to move into the season.</p>
<p>With the start of the new academic year in September the cheerleaders were hard at work both in the classroom and out in the
community. The year really kicked off with a performance at the Breast Cancer Soccer game as well as numerous appearances at
the Kidney Walk and Light the Night Walk. Hoopfest was another great opportunity for the cheerleaders to get in front of the
largest crowd of the year and give them a great performance! </p>
</div>
<div id="photos">
<p><img src="images/team_photo.jpg" alt="Wilmington University Cheerleaders" /></p>
<h2>2011 - 2012 Team Captains</h2>
<p><img src="images/gilbert.jpg" alt="Brad Gilbert" /></p>
<p><span class="captions">Brad Gilbert</span></p>
<p><img src="images/eby.jpg" alt="Stacy Eby" /></p>
<p><span class="captions">Stacy Eby</span></p>
</div>
</div>
<p id="footer">
Layout ©2012, Walter A. Smith III
<em> <br />
Images used on this website are property of Wilmington College and may not be used without
permission.
<br />
They are used here for educational purposes only.
</em>
</p>
</body>
</html>
Here is my CSS:
body {
background-color: #006633;
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
margin: 0px;
}
h1,h2 {
color: #006633;
font-family: "Times New Roman", Times, Georgia, serif;
}
h2 {
font-size: 185%;
line-height: 1.2;
text-align: center;
}
#header {
width: 760px;
background-color: white;
border-top: black solid 3px;
border-left: black solid 3px;
border-right: black solid 3px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
#logo {
background-color: white;
}
#heading {
background-color: white;
color: #006633;
font-size: 24px;
font-family: "Times New Roman", Times, Georgia, serif;
float: right;
}
#container {
width: 800px;
background: #ffffff url(images/gradient.jpg) repeat-x;
margin-left: auto;
margin-right: auto;
border: black solid 3px;
}
#footer {
color: white;
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
text-align: center;
line-height: 1.6em;
}
#textbox {
width: 390px;
border: #006633 solid 2px;
background: white;
padding: 20px;
line-height: 1.6em;
margin: 20px;
text-align: justify;
float: left;
}
#photos {
margin: 20px 20px 20px 436px;
text-align: center;
}
.captions {
color: #006633;
font-family: "Times New Roman", Times, Georgia, serif;
font-size: 130%;
line-height: 1;
text-align: center;
font-weight: bold;
}
If anyone could help, I would greatly appreciate it. I've tried every technique I can think of, but none of them work. I could make an image out of the whole thing, but I'd rather learn how to do it correctly with XHTML and CSS.
Tony Smith