...

View Full Version : Help with Picture & Caption Positions within a DIV



TonySmith
02-18-2012, 07: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 &copy;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

jackdaniels
02-18-2012, 09:42 PM
Put the image and their captions in a wrapper div, then add css and float the one on the left:


<div class="captain one">
<div class="thumb"><img src="images/gilbert.jpg" alt="Brad Gilbert" /></div>
<div class="captions">Brad Gilbert</div>
</div>
<div class="captain two>
<div class="thumb"><img src="images/eby.jpg" alt="Stacy Eby" /></div>
<p><span class="captions">Stacy Eby</div>
</div>



.captain.one{
display:inline;
float:left;
}
.captain.two{
display:inline;
}

I separated the two captains into separate divs because the second doesn't need the float property, though I tend to believe it wouldn't make a difference either way. Also, because I didn't actually test the code I believe display:inline will work for this, maybe display:block instead. Good Luck.

You could also achieve the same thing doing tables, not that I'd recommend using them. ;)

TonySmith
02-18-2012, 09:49 PM
Thank you Jack. I'll try it it out! I tried something similar, but I had no idea about the display inline property. That is probably why it didn't work.

Tony Smith

waxdoc
02-18-2012, 10:07 PM
In an OLD demo site [notice <center></center>] http://artdemo.tripod.com, I created .picbox class to hold title and images together. See http://html5doctor.com/the-figure-figcaption-elements/ for info about new HTML5 <FIGURE> and <FIGCAPTION> elements which would achieve that effect.

A book entitled "Bulletproof Web Design" describes how to use definition lists <DL><DT><DD>___</DD></DT></DL> to hold together and position such elements.

Your containing <DIV> must be wide enough for photos+ padding+ border+ margin (times 2 for left/right) -- remember CSS "box model." Also remember CANNOT is one word.



<br clear="all" />
<div id="container">
<center>
&nbsp;&nbsp; <div class="picbox"><h3>Paintings</h3>
<img src="rembrandt.jpg" alt="Rembrandt" title="Rembrandt" /></div>
&nbsp;&nbsp; <div class="picbox"><h3>Prints</h3>
<img src="crspsey.jpg" alt="Cropsey" title="Cropsey" /></div>
&nbsp;&nbsp; <div class="picbox"><h3>Illustrations</h3>
<img src="vangogh.jpg" alt="vanGogh" title="vanGogh" /><div/>
</center>
</div> <!-- close id CONTAINER-->
<br clear="all" />


Today, I'd float: left; (with margins) inside a <div> wide enough to hold the images side-by-side IMCLUDING the margins.

miennh_coding
02-19-2012, 11:38 AM
hello,

you can use "float" attribute for each "div" tag



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum