Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Help with Picture & Caption Positions within a DIV

    I'm trying to achieve this layout:


    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
    Code:
     <!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:

    Code:
    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
    Last edited by TonySmith; 02-18-2012 at 06:40 PM.

  • #2
    New Coder
    Join Date
    Feb 2012
    Posts
    11
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Put the image and their captions in a wrapper div, then add css and float the one on the left:

    Code:
    <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>
    Code:
    .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.
    Last edited by jackdaniels; 02-18-2012 at 08:48 PM.

  • Users who have thanked jackdaniels for this post:

    TonySmith (02-18-2012)

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #4
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    how about this ?

    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.

    Code:
    <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.

  • #5
    New Coder
    Join Date
    Dec 2010
    Posts
    32
    Thanks
    5
    Thanked 2 Times in 2 Posts
    hello,

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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •