#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    31
    Rep Power
    66

    CSS Gallery titles help please.


    Hey guys I'm needing some help here on what I hope is an easy solution for experienced HTML/CSS users.
    I have read much in books and googled a lot but for some reason I cannot find what I specifically need so I'm sure I still have a lot to learn
    but I don't know what exactly to read and I'm very frustrated right now.

    I've spent the last 7 to 8 days making this page/script and I know this will be an easy one but I lack the CSS experience and I can't find where to get it.
    There is a lot more to my php script/page than I'm including because I don't want to complicate the situation.

    I am making an image gallery. I have two different kinds of images which reside in the same directory.
    Code 1 images, and Code 2 images. Their filename determines if they are Code 1 or Code 2 and I parse this well using php.

    The problem I have not been able to solve is :

    How do I create unique headings for each of the different types of images?

    Code 1 images should have their own heading, "Code 1 images :" and appear above and centered the Code 1 images in red.
    Code 2 images should have their own heading, "Code 2 images :" and appear above and cenered in white.



    Like this but centered :

    ------------------------Code 1 Images :
    caption---------caption----------caption---------caption--
    image1---------image2----------image3---------image4
    caption---------caption----------caption---------caption--



    ------------------------Code 2 Images :
    caption---------caption----------caption----------caption--
    image1---------image2----------image3----------image4-
    caption---------caption----------caption----------caption--

    caption---------caption----------caption----------caption--
    image5---------image6----------image7---------image8-
    caption---------caption----------caption----------caption--


    I am already successfully outputting images in different rows but I'm totally stuck on making those text headers above each type of image rows.

    Below you will find the markup of what I have currently.
    I am not sure if my CSS is correct but things are looking mostly correct so far. I have tried many many times so I may have extra CSS that does nothing at this point.

    I welcome any corrections because I am still learning and I really want to learn how to do this well and correctly
    I say mostly correct because I've noticed things don't look exactly centered which is what I'm striving for but for now I'm focused on trying to get my row headers working.
    I also haven't exactly figured out the captions text being nicely spaced or centered.

    Thanks for your help in advance.


    <!DOCTYPE HTML>
    <html><body><head><meta charset="utf-8">
    <title>My Title</title>
    <h1>Header 1 </h1>
    <div id="gallery">
    <table>

    <tr>
    <h2> Code 1 images : <h2>

    <td>
    <p style="code:1">fistname lastname <a href="image/path"><img src="image/path" alt="Pic unavailable" width="280" height="200"></a>date taken</p>
    </td>

    <td>
    <p style="code:1">fistname lastname <a href="image/path"><img src="image/path" alt="Pic unavailable" width="280" height="200"></a>date taken</p>
    </td>

    <td>
    <p style="code:1">fistname lastname <a href="image/path"><img src="image/path" alt="Pic unavailable" width="280" height="200"></a>date taken</p>
    </td>

    </tr>


    <tr>

    <td>
    <p style="code:2">firstname lastname <a href="image/path"><img src="image/path" alt="Pic unavailable" width="280" height="200"></a>date taken</p>
    </td>

    <td>
    <p style="code:2">firstname lastname <a href="image/path"><img src="image/path" alt="Pic unavailable" width="280" height="200"></a>date taken</p>
    </td>

    <td>
    <p style="code:2">firstname lastname <a href="image/path"><img src="image/path" alt="Pic unavailable" width="280" height="200"></a>date taken</p>
    </td>

    <td>
    <p style="code:2">firstname lastname <a href="image/path"><img src="image/path" alt="Pic unavailable" width="280" height="200"></a>date taken</p>
    </td>

    </tr>
    </table>


    <style type="text/css">
    h1 {text-align:center;color:#C0C0C0;font-weight: normal;font-family:"Palantino", Times, serif;font-size:42px;}
    h2 {text-align:center;color:red;font-weight: normal;font-family:"Palantino", Times, serif;font-size:42px;}
    h3 {text-align:center;color:white;font-weight: normal;font-family:"Palantino", Times, serif;font-size:42px;}

    #gallery { margin:0 auto; width:800px; }
    #gallery code:1{ float:left; margin: 2px;letter-spacing:1px; word-spacing:5px; text-align:center; vertical-align:top; width:200px; display:table-cell; display:inline-table; color:#E31230; }

    #gallery p{ float:left; margin: 2px;letter-spacing:1px; word-spacing:5px; text-align:center; vertical-align:top; width:200px; display:table-cell; display:inline-table; color:#E31230; }
    #gallery a:hover img {border:1px solid #0000ff;}
    </style>

    <body bgcolor="#000000"> </body></html>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    31
    Rep Power
    66
    Over +70 reads and no help?

    Does that mean most people don't understand what I wrote or don't have the CSS experience needed to help?
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Your post is rather long which tends to scare a lot of people off. Also there's no guarantee that you'll get an answer.

    It seems that you're unaware of the HTML "class" attribute.
    Class and ID Selectors
    When should I use a class and when should I use an ID?
    Use class with semantics in mind
    The Meaning of Semantics Take II: Naming Conventions for Class and ID in CSS
    Using Firefox to Wage a Class War

    A <table> is a poor choice of markup for this. I would recommend using a <ul>.

    Also an <h2> may not be the direct child of a <tr> nor a <table>.

    Try this:
    Code:
    <!DOCTYPE html>
    <html lang="en"><head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">/* <![CDATA[ */
    ul.gallery {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	text-align: center;
    }
    ul.gallery li {
    	display: inline;
    	display: -moz-inline-stack; /* for old versions of Firefox */
    	display: inline-block;
    	vertical-align: top;
    	text-align: left;
    	min-width: 280px;
    	border: 2px solid #444;
    	margin-bottom: .3em;
    }
    *:first-child+html ul.gallery li {display:inline} /* for IE7 */
    * html ul.gallery li {display:inline} /* for IE6 */
    ul.gallery a {
    	display: block;
    }
    ul.gallery .name,
    ul.gallery .date {
    	display: block;
    }
    ul.gallery .name {
    	color: #f33;
    	text-align: center;
    }
    ul.gallery .group2 .name {
    	color: #fff;
    }
    /* ]]> */</style>
    </head>
    <body>
    
    <ul class="gallery">
    	<li class="group1"><a href="#">
    		<span class="name">fistname lastname</span>
    		<img  src="image/path" alt="Pic unavailable">
    		<span class="date">date taken</span></a>
    	</li>
    	<li class="group1"><a href="#">
    		<span class="name">fistname lastname</span>
    		<img  src="image/path" alt="Pic unavailable">
    		<span class="date">date taken</span></a>
    	</li>
    	<li class="group1"><a href="#">
    		<span class="name">fistname lastname</span>
    		<img  src="image/path" alt="Pic unavailable">
    		<span class="date">date taken</span></a>
    	</li>
    	<li class="group2"><a href="#">
    		<span class="name">fistname lastname</span>
    		<img  src="image/path" alt="Pic unavailable">
    		<span class="date">date taken</span></a>
    	</li>
    	<li class="group2"><a href="#">
    		<span class="name">fistname lastname</span>
    		<img  src="image/path" alt="Pic unavailable">
    		<span class="date">date taken</span></a>
    	</li>
    	<li class="group2"><a href="#">
    		<span class="name">fistname lastname</span>
    		<img  src="image/path" alt="Pic unavailable">
    		<span class="date">date taken</span></a>
    	</li>
    </ul>
    
    </body>
    </html>
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo