www.webdeveloper.com
Results 1 to 2 of 2

Thread: Need Help with Vertical Align of Image Grid

  1. #1
    Join Date
    Oct 2013
    Posts
    8

    Need Help with Vertical Align of Image Grid

    Hey everyone,

    I need some help getting the images in my grid aligned. Not sure if its the images, or the grid itself.

    This is my code:

    HTML 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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<meta name="Owner" content="IUPUI" />
    	<meta name="keywords" content="IUPUI, Indianapolis, Indiana, IU, Purdue, School of Medicine, research, Dental, Nursing, Law, Business, Art School, college information" />
    	<meta name="description" content="" /> 
        <title>IUPUI Office of Campus Visit</title>
       
    
    
    <style type="text/css" media="screen">
    
    #content li {
    	font-size: 12px;
    	color:#2f2f2f;
    	padding-left: -15em; 
    
    }
    
    #tooltip{
    	position:absolute;
    	border:1px solid #333;
    	background:#f7f5d1;
    	padding:2px 5px;
    	color:#333;
    	display:none;
    	width: 300px;
    	height: 80px;
    	z-index: 101;
    }
    .navImage {
    	width: 150px;
    	height: 100px;
    	padding-bottom: 5px;
    	border-bottom: 2px #7D110C solid;
    }
    #content table td{
    	font-size: 15px;
    	font-weight: 400;
    	height: 150px;
    }
    #content td p {
    	margin-top: -5px;
    }
    #content table h4{
    	font-size: 15px; !important
    	font-family:"IUPUI Head", Arial, Helvetica, sans-serif;
    }
    #ambheadings h2 {
    	margin-left:160px; font-size:30px
    }
    #ambheadings h5 {
    	margin-left:70px; font-size:15px
    }
    #ambheadings h6 {
    	margin-left:140px; font-size:15px
    }
    </style>
    
    
    <!--#include virtual="/sitetools/head2.inc"-->
    	<!--#include virtual="../menu.inc"--> <!-- import navigation using ssi-->
          <img src="../images/ambassador_application.jpg" alt="IUPUI Campus Ambassadors at Spring Preview" width="800" height="342" />
        <!--#include virtual="../sideNav.inc"-->
    <div id="content">
    
    
    <br />
    <div id="ambheadings">
    <h2>Meet Our Ambassadors!</h2>
    <h6>Click on the images below to meet your ambassadors</h6>
    <br />
    <hr />
    <h5><a href="http://visit.iupui.edu/campus-ambassador-application/"</a>Click Here to Learn More About Becoming an Ambassador!</h5>
    </a>
    <br />
    </div
    ><!--<div><h1>Spring Preview for New Jaguars!</h1>
    <p>Registration is now open for IUPUI's four upcoming Spring Previews. This event will provide admitted freshmen with a taste of their future at IUPUI! :: <a href="/springpreview/">Learn more and sign up today!</a></p></div><hr />
    <h2>Visit IUPUI Today!</h2>
    <p>There is no better way to see if a school is the right fit for you than seeing it in person. The Office of Campus Visits at IUPUI offers four visit opportunities to guests throughout the year, as well as additional major visit events in the fall and spring. Plan your visit to IUPUI's world-class campus today by picking the option that best suits your needs!</p>  
    
    <!--
    <div id="spotlight">
    
    </div>
    -->
    <style type="text/css">
    .tg{
    	border-collapse:collapse;border-spacing:0;margin-top:20px;margin-left:5px;text-align:center;
    }
    .tg td{
    	font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;;border-width:1px;overflow:hidden;word-break:normal;
    }
    .tg th{
    	font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-width:1px;overflow:hidden;word-break:normal;
    }
    .tg p{
    	font-family:Arial, sans-serif;font-size:10.5px;
    }
    .tg td tg-s6z2{
    	vertical-align:auto;
    }
    
    </style>
    <table class="tg">
      <tr>
        <td class="tg-s6z2"><a href="http://visit.iupui.edu/ambassadors/Abe.html"><img src="../images/ambassador_images/Abe.JPG"/></a><br /><p>Abe</p><p>Major: Philosophy/Pre-Veterinary Medicine</p><p>Hometown: English, IN</p></td>
        <td class="tg-s6z2"><a href="http://visit.iupui.edu/ambassadors/Alexandra.html"><img src="../images/ambassador_images/Alexandra.jpg"/></a><br /><p>Alexandra</p><p>Major: Psychology</p><p>Hometown: Evansville, IN</p><br /></td>
        <td class="tg-s6z2"><a href="http://visit.iupui.edu/ambassadors/Aliyah.html"><img src="../images/ambassador_images/Aliyah.jpg"/></a><br /><p>Aliyah</p><p>Major: Elementary Education</p><p>Hometown: Fort Wayne, IN</p></td>
        <td class="tg-s6z2"><a href="http://visit.iupui.edu/ambassadors/Allison.html"><img src="../images/ambassador_images/Allison.JPG"/></a><br /><p>Allison</p><p>Major: Forensic Science. Biology Minor</p><p>Hometown: Carmel, IN</p></td>
        <td class="tg-s6z2"><a href="http://visit.iupui.edu/ambassadors/Angela.html"><img src="../images/ambassador_images/Angela.jpg"/></a><br /><p>Angela</p><p>Major: Toursim, Convention, & Event Management</p><p>Hometown: Fort Wayne, IN</p></td>
      </tr>
      <tr>
        <td class="tg-s6z2"><a href="http://visit.iupui.edu/ambassadors/Ashley.html"><img src="../images/ambassador_images/Ashley.jpg"/></a><br /><p>Ashley</p><p>Major: Visual Communications</p><p>Hometown: Lafayette, IN</p></td>
        <td class="tg-s6z2"><a href="http://visit.iupui.edu/ambassadors/Ashwin.html"><img src="../images/ambassador_images/Ashwin.jpg"/></a><br /><p>Ashwin</p><p>Major: Mechanical Engineering</p><p>Hometown: Coimbatore, India</p></td>
        <td class="tg-s6z2"><a href="http://visit.iupui.edu/ambassadors/Ayana.html"><img src="../images/ambassador_images/Ayana.jpg"/></a><br /><p>Ayana</p><p>Major: Exercise Science</p><p>Hometown: South Bend, IN</p></td>
        <td class="tg-s6z2"><a href="http://visit.iupui.edu/ambassadors/Bre'Anna.html"><img src="../images/ambassador_images/Bre'Anna.jpg"/></a><br /><p>Bre'Anna</p><p>Major: Biology (Pre-Med)</p><p>Hometown: Richmond, IN</p></td>
        <td class="tg-s6z2"><a href="http://visit.iupui.edu/ambassadors/Rebecca.html"><img src="../images/ambassador_images/Becky.jpg"/></a><br /><p>Becky</p><p>Major: Journalism and Spanish</p><p>Hometown: Indianapolis, IN</p></td>
        </tr>
    </table>
    Any help would be appreciated. Here is the live link. http://visit.iupui.edu/ambassadors/index.html

    Thanks

  2. #2
    Join Date
    May 2014
    Posts
    834
    .td tg { vertical-align:top; }

    NOT that you should be using tables for layout on this... but really ALL the markup of that page needs a good fixing/toss. Like the H6 that aren't the start of a subsection of the page, much less having no h5, h4, h3 preceding them, h2 before a H1, block level tags around inline-level ones (which no matter what the HTML 5 nutters say, doesn't work right yet), IE CC's for nothing, JavaScript doing CSS' job, STYLE inside BODY...

    It's a laundry list of how not to write HTML, hence the 38 validation errors and 56k of markup for 5k of plaintext and ~4 dozen content images, likely two or three times as much markup as should have been used.

    ... and that's without talking the inaccessible fixed width design mated to inaccessible fixed metric (px) fonts; which with the tables for non-tabular content and gibberish use of numbered headings results in this whole "accessibility, what's that?" vibe.

    Though said vibe and outdated/outmoded/invalid coding practices are entirely consistent with what I expect from an Educational Institution.
    Java is to JavaScript as Ham is to Hamburger.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles