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
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    Hi Im trying to sort of get a wallpaper gallery going.
    However, Im having problems coding some of the CSS, its not behaving the way i expect.

    Example
    HTML Code:
    <!--This is a row with 3 wallpapers-->
    <div class="wallpaperRow">
         <!--this is 1 wallpaper box-->
         <div class="wallpaper">
               <img src="test.jpg" class="wallpaperThumb">
         </div>
         <div class="wallpaper">
               <img src="test.jpg" class="wallpaperThumb">
         </div>
         <div class="wallpaper">
               <img src="test.jpg" class="wallpaperThumb">
         </div>
    </div>
    CSS:
    .wallpaperRow{
    width: 800px;
    height: 250px;
    }

    .wallpaper{
    width: 250px;
    height: 250px;
    }

    .wallpaperThumb{
    width: 200px;
    height: 200px;
    }

    This is JUST an example. Im not asking about the code, Im asking about how to go about coding it
    Im not quite sure if i should use a
    wallpaper row DIV, then 3 inner divs
    If i do this, they dont display next to each other, they display vertically.
    Ive tried setting the wallpaper div to display: inline;
    Ive also tried using span tags instead, but i get undesired effects.
    The span tag doesnt stretch to accomodate the image.

    Should i use inner divs, or span tags or p tags or ?

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    The best approach in this case is actually a list. What you are essentially doing is listing wallpapers. Thus, you mark it up semantically (i.e., meaningfully) as a list. Then you can use CSS to make it look like what you want. Specifically, the HTML for what you're doing would look like:

    HTML Code:
    <ul class="wallpapers">
        <li><img src="test.jpg" class="thumb" /></li>
        <li><img src="test2.jpg" class="thumb" /></li>
        <li><img src="test3.jpg" class="thumb" /></li>
    </ul>
    Then, your CSS:

    Code:
    ul.wallpapers
    {
        width: 800px;
    
        margin: 0;
        padding: 0;
    
        overflow: hidden;
    }
    
    ul.wallpapers li
    {
        display: block;
    
        float: left;
    
        margin: 0 0 0 8px;
        padding: 25px;
    }
    
    ul.wallpapers li img.thumb
    {
        width: 200px;
        height: 200px;
    }
    This sets up the ul element to act as the container for its lis with width 800px. It also zeros out padding and margin to counteract any browser defaults. Next, it sets every li to display as a block, meaning that it can take width and height directives, and, generally speaking, lives on its own line and contains elements inside it. We also float the lis left. This basically pulls the li out of the page flow that it would usually be in (because of the block display, this would be one li per line) and pushes it off to the left. Since every li will be like this, they will be aligned next to each other. We also set the padding to 25px to give the thumbs 25px of space on each side, and set the left margin to 8px which should space the lis out enough that they're evenly spaced through the 800px width of their container. Finally, we set the image to have its same width and height.

    The 8px left margin may need some tweaking -- you'll have to look at it and figure out if it works for you. This way, you also get automatic rows of three just because of the width and when they wrap. As a side note, the overflow: hidden is to get around the issue that, when you float elements, they are pulled out of the flow. This means that typically their containing element (in this case the ul) collapses to a zero or near-zero height. overflow: hidden makes the containing element expand to contain the lis, meaning that any non-floating content after the list will still flow correctly.

  4. #3
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    Hey man.
    This worked AMAZINGLY.

    Originally I had
    1 css div class = wallpaperRow
    3 css div classes = wallpaper1, wallpaper2, wallpaper3
    All absolutely positioned, floated left, etc etc

    Quite a mess of PHP code to detect every 3rd item and end the appropriate wallpaper row div, more php code to check if the item being printed was the last item, to end the wallpaperrow div early.

    You reduced both my CSS and my PHP quite a bit THANK YOU

    http://alldeathnote.com/wallpapers.php
    Heres the final result, all images, image text, links, etc
    are pulled from a database

    Thanks shadow, youre awesome

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Death Note!! Er.. I mean... Nice to know it helped :aimangel:

  6. #5
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    haha you like death note too?!?!?
    xD

    im excited about the site, im trying to include more n more content and the way
    i have this wallpaper section setup is amazing

    just plug in urls, link, linktext, imgtext, and boom
    already have it generating the pg links based on how many wallpapers are there,
    already have variables to limit certain # of wallpapers per page


    and already made $1.00 off adsense !!!!!!!!! Lol
    you got msn? maybe we could chat for a bit

  7. #6
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Unfortunately I don't have much time to chat these days. Product going beta very soon, needs to be feature complete this weekend... Anyway, keep us updated on how the site goes


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