Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member djsquid's Avatar
    Join Date
    Aug 2011
    Location
    Staffordshire
    Posts
    15
    Member #
    28854
    Hey guys,

    I am making a product page and laying all the products out into like a Grid, 4 across and 3 down, and I want each one to be set out with a thumbnail and then the text underneath both been a link.

    I have set it up but have no idea how to get the text link underneath the thumbnail link, I've tried the vertical align method but still nothing? any suggestions with the CSS?


    HTML Code:
     <div id="content">
                <div id="productcontentholder">
                <h1>Products</h1>
                    <div class="product_cat">
                        <div class="products">
                            <div id="aboards">
                            <a href="#">Aboards<img src="Images/productthumbail.png" /></a>
                            </div>
                            <div id="banner">
                            <a href="#">Banner<img src="Images/productthumbail.png" /></a>
                            </div>
                            <div id="building_signage">
                            <a href="#">Building Signage<img src="Images/productthumbail.png" /></a>
                            </div>
                             <div id="business_stationary">
                            <a href="#">Business Stationary<img src="Images/productthumbail.png" /></a>
                            </div>
                        </div>
                        <div class="products">
                             <div id="design_services">
                            <a href="#">Design Services<img src="Images/productthumbail.png" /></a>
                            </div>
                             <div id="fitting_service">
                            <a href="#">Fitting Services<img src="Images/productthumbail.png" /></a>
                            </div>
                             <div id="general_signage">
                            <a href="#">General Signage<img src="Images/productthumbail.png" /></a>
                            </div>
                             <div id="magnetics">
                            <a href="#">Magnetics<img src="Images/productthumbail.png" /></a>
                            </div>
                        </div>
                          <div class="products">
                             <div id="stickers">
                            <a href="#">Stickers<img src="Images/productthumbail.png" /></a>
                            </div>
                             <div id="vehicle_graphics">
                            <a href="#">Vehicle Graphics<img src="Images/productthumbail.png" /></a>
                            </div>
                             <div id="window_graphics">
                            <a href="#">Window Graphics<img src="Images/productthumbail.png" /></a>
                            </div>
                             <div id="3d_lettering">
                            <a href="#">3D Lettering<img src="Images/productthumbail.png" /></a>
                            </div>
                        </div>
    
                    </div>
                </div>
            </div>

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    I can't see your css... but you could try : text-align: center; for the divs that have the text you want to center... Just a Guess though

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    I have used a gallery page exactly like what you're describing numerous times. So many times, in fact, I pulled the code aside into a folder so I can just copy/paste it when I need to.
    Here it is: http://roedesigns.com/clients/gallery/
    Feel free to use it. I even zipped it here: http://roedesigns.com/clients/gallery/gallery.zip
    djsquid likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #4
    Junior Member djsquid's Avatar
    Join Date
    Aug 2011
    Location
    Staffordshire
    Posts
    15
    Member #
    28854
    Hi Ronald,

    That is exactly what I'm trying to achieve, thats fantastic thank you so much! very much appreciated.


  6. #5
    Junior Member
    Join Date
    Oct 2011
    Posts
    5
    Member #
    29690
    Hi. Thanks a bunch for this post. It worked well although a random dot came to my image. The link to my site is [edited: removed Link m3n0tu18 please Read the Forum Rules before posting again] -- if someone could please help me fix the red dot it would be wonderful.

  7. #6
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,473
    Member #
    28473
    Liked
    265 times
    Quote Originally Posted by Brandon33, post: 222227
    Hi. Thanks a bunch for this post. It worked well although a random dot came to my image. The link to my site is [edited: removed Link m3n0tu18 please Read the Forum Rules before posting again] -- if someone could please help me fix the red dot it would be wonderful.
    I suggest Brandon you create a new thread requesting help rather than posting in someone else's thread.
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:27 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com