SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Zealot fredep57's Avatar
    Join Date
    Aug 2009
    Location
    Pacific Northwest
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Center multiple divs?

    OK, I have a page (code below) that I would like to have work by having the images displayed in rows. However, there may be not be enough images to complete the row - go all the way across the displayed area. I would like (1) all the rows to be more centered horizontally in the display and (2) all the "excess" images (not able to fill the row) be centered horizontally.

    Tried some things I found on the web, but nothing seems to work.

    Please tell me where I went wrong.

    Oh, this is not live yet - still on development machine

    F

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Picture Page</title>
    
    
      <style type="text/css">
      @charset "utf-8";
      /* CSS Document */
      
      img {
        margin: 0 auto;
      }
      
      a {
        text-decoration: none;
        border: none;
        }
        
      div#albumJPG {
        display: block;
        margin: 5px auto;
        width:220 px; 
        font-size:80%; 
        font-color: magenta; 
        text-align:center; 
        float:left;
      }
      #header {
          /*    background-color: #FF3;  */
             color:#000;
          margin: -5px 0px 0px -10px;
      /*    height: 150px;   */
          font-size: 1.1em;
          padding: 10px 10px;
          border: solid 1px green;   
          text-align: center;
          vertical-align:middle;
          background-color:#0C3;
      }
      
      #mainContent {
          padding-left: 10px;
          padding-top: 2px;
          /*    background-color: #567;  */
      /*    border: solid 1px green;  */
          margin: 0 175px;
          position: relative;
      }
      
      .clear {
          clear: both;
      }
      
      .Mission p {margin-bottom: 10px; }
      
      h2, h3 {text-align:center; padding-top: 5px;}
      
      
      </style>
    
    </head>
    <body id="PagePictures" >
    <div  id="Wrapper" class="Container">
           <div id="leftcol">
    			<?php include_once('inc/MainNav.php'); ?>
    
           </div>
           <!-- end left column -->
           <div id="center-col">
              <div id="header">
                  <h1 class="Welcome">Pictures </h1>
                  <div class="Mission">
                      <p>Below are some of the albums we have for you to view</p>
                      <p></p>
                      <p style="font-size:.8em;">Click on an image view each ablum<br><br> We hope you enjoy these historical views!!</p>
                  </div>
              </div>
    <-- start of image(s) display   -->
              <div style="text-align: center;">
                <div id="albumJPG">
                  <a href="Pictures/display.php?album=1">
                  <img src="images/2010Flyer.jpg" width="220" > 2010 Show Pictures
                  </a>
                </div>
                <div id="albumJPG">
                  <a href="Pictures/display.php?album=1">
                  <img src="images/2010Flyer.jpg" width="220" > 2010 Show Pictures
                  </a>
                </div>            
                <div id="albumJPG">
                  <a href="#">
                  <img src="images/flyer09.jpg" width="220"> 2009 Show Pictures
                  </a>
                </div>
                <div id="albumJPG">
                  <a href="#">
                  <img src="images/flyer08.jpg" width="220"> 2008 Show Pictures
                  </a>
                </div>
                <div id="albumJPG">
                  <a href="#">
                  <img src="images/flyer07.jpg" width="220"> 2007 Show Pictures
                  </a>
                </div>
              <div>
    <-- end of images display , I hope!  -->
     <!-- oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo -->        
     <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
           </div>
           <!-- end center column -->
       
    </div>
    <!-- Container / Wrapper -->
    
    </body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Use display:inline-block as you can't center floats.

    Something like this.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Picture Page</title>
    <style type="text/css">
    @charset "utf-8";
    /* CSS Document */
      
    img,a img {
        border:none;
    }
    a {
        text-decoration: none;
        border: none;
    }
    .images{
        width:100%;
        text-align:center;
        margin:90;
        padding:0;
    }
    .images li {
        display:inline;
    }
    .images li a{
        margin: 5px;
        width:220px;
        display:inline-block;
        font-size:80%;
        font-color: magenta;
        text-align:center;
        vertical-align:top;
    }
    .images a img{
        background:red;/* for testing*/
        height:200px;/* for testing */
        width:220px;/* for testing */
        display:block;/* for testing */
    }
    #header {
        /*background-color: #FF3;  */
      color:#000;
        margin: -5px 0px 0px -10px;
        /* height: 150px;   */
      font-size: 1.1em;
        padding: 10px 10px;
        border: solid 1px green;
        text-align: center;
        vertical-align:middle;
        background-color:#0C3;
    }
    #mainContent {
        padding-left: 10px;
        padding-top: 2px;
        /*    background-color: #567;  */
      /*    border: solid 1px green;  */
      margin: 0 175px;
        position: relative;
        min-height:0;
        zoom:1.0;
    }
    .clear {
        clear: both;
    }
    .Mission p {
        margin-bottom: 10px;
    }
    h2, h3 {
        text-align:center;
        padding-top: 5px;
    }
    </style>
    </head>
    <body id="PagePictures" >
    <div  id="Wrapper" class="Container">
        <div id="leftcol">
            <?php include_once('inc/MainNav.php'); ?>
        </div>
        <!-- end left column -->
        <div id="center-col">
            <div id="header">
                <h1 class="Welcome">Pictures </h1>
                <div class="Mission">
                    <h2>Below are some of the albums we have for you to view</h2>
                    <p>Click on an image view each album</p>
                    <p>We hope you enjoy these historical views!!</p>
                </div>
            </div>
            <!-- start of image(s) display   -->
            <ul class="images">
                <li><a href="Pictures/display.php?album=1"><img src="images/2010Flyer.jpg" width="220" > 2010 Show Pictures</a></li>
                <li><a href="Pictures/display.php?album=1"><img src="images/2010Flyer.jpg" width="220" > 2010 Show Pictures</a></li>
                <li><a href="#"><img src="images/flyer09.jpg" width="220"> 2009 Show Pictures</a></li>
                <li><a href="#"><img src="images/flyer08.jpg" width="220"> 2008 Show Pictures</a></li>
                <li><a href="#"><img src="images/flyer07.jpg" width="220"> 2007 Show Pictures</a></li>
            </ul>
            <!-- end of images display , I hope!  -->
        </div>
    </div>
    </body>
    </html>
    Use a list for the images and no need for a class on every list as they can all be targetted via the parent.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You could try something like this:

    Code:
    div.albumJPG {
        display: inline-block;
        margin: 5px auto;
        width:220 px; 
        font-size:80%; 
        font-color: magenta; 
        text-align:center; 
        /* float: left;  remove this */
      }
    But note that I've changed div#albumJPG to div.albumJPG, as you have multiple instances of that div, and you should never use an id more than once on a page, so change each

    Code:
    <div id="albumJPG">
    to

    Code:
    <div class="albumJPG">
    EDIT: Better answer by Paul above.

  4. #4
    SitePoint Zealot fredep57's Avatar
    Join Date
    Aug 2009
    Location
    Pacific Northwest
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul. That works - was trying to do something that could/should not be done???

    ralph.m - tried yours and it did not work. Will use Paul's solution for now.

    R


Bookmarks

Posting Permissions

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