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
    Join Date
    May 2007
    Posts
    5
    Member #
    15246
    I am trying to create bassicly the same effect as you see here:
    http://www.wwe.com/superstars/raw/

    The images in rows with the background light grey background.
    I tried using the CCS sheet http://www.wwe.com/styles/v3/global.css?2 in my lay out but it does not allign the images in such fasion.

    Any help would be very apreciated.

    Thanks in advance!

  2.  

  3. #2
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    What markup are you using? Most likely you will want an unordered list to do this, or perhaps some divs... Like:

    HTML Code:
    <div class="row">
       <img src="img.jpg" alt="image" />
       <h2>Name</h2>
       <p>
          Details here
       </p>
    </div>
    or something. Then using CSS, float left the image, header and paragraph. Done.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  4. #3
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,716
    Member #
    5580
    Liked
    718 times
    Show us the actual link to your site so we can see how things look.

    ... and I'm going to add ...

    All of those small photos in a grid are "tabular".
    That's really what a <table> is made for.
    Don't get hung-up on not using tables if you're
    going to use them for what they're designed.

    In your case, I would certainly use a table.


  5. #4
    Junior Member
    Join Date
    May 2007
    Posts
    5
    Member #
    15246
    steax, I was using
    Code:
    <div id="content-body" class="full">
    
                        <div id="superstar-list">
    
                            
                                <div id="superstar-box">
                                     <div id="superstar-img">
                                         <a href="/superstars/raw/armandoestrada/">
                                            
                                                <img src="/content/media/images/Superstars/29278/4018304" /><img src="/content/media/images/Superstars/29278/4018282" />
                                            
                                        </a>
                                    </div>
                                    <div id="superstar-txt">
                                        <a href="/superstars/raw/armandoestrada/">Armando Estrada</a>
    
                                    </div>
                                </div>
                            
                                <div id="superstar-box">
                                     <div id="superstar-img">
                                         <a href="/superstars/raw/candice/">
                                            
                                                <img src="/content/media/images/Superstars/29278/4009648" />
                                            
                                        </a>
                                    </div>
                                    <div id="superstar-txt">
    
                                        <a href="/superstars/raw/candice/">Candice</a>
                                    </div>
                                </div>
    Now i did not up the images to my server so of course there not showing up but the layout is stil a row of images going straight down the page, not horizontal as on WWE.com

    @mlseim this way seemed pretty self explanitory so that is why i choose it. Everything was laid out so all i would need is to modify the code bits to my images and profile pages and it was all said and done. I suck at coding tables. Try to do it in vBulletin soem times and they never come out right. Could you perhaps show me a code snipet I could use instead of this if tables would be a better way. I am not picky as to which method i use.

  6. #5
    Senior Member bluntknife's Avatar
    Join Date
    Jan 2003
    Location
    Bucks UK
    Posts
    288
    Member #
    451
    Try adding 'clear:both' to the 'superstar-box' definition. I think on your site it's called 'wrestler'.
    Hardly the sharpest thing in the drawer.
    Design | Life | Outdoors | Ryukin Radio

  7. #6
    Junior Member
    Join Date
    May 2007
    Posts
    5
    Member #
    15246
    I decided to use a diffrent style of laying out the images, but thank you all! I'm sure I will be back!


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 12:30 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com