Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    428
    Thanks
    18
    Thanked 26 Times in 26 Posts

    Creating a "table" from an unordered list

    I need to create a sort of table effect, if that's what you would call it, using an unordered list. Basically, what I have is one list of images that I need to convert to a dynamically changing grid, so it adjusts based on the users screen size. I don't have much problem with the sizing aspects, however some images have text underneath and it throws it all off. For instance, if the first image of a row has text and the second, then in the next row the first image will be under the second instead of the first. The only time this doesn't happen is if the last image has text as well, but it's all dynamic so I can't guess what does and doesn't have text.

    Basically I want to accomplish these tasks:
    • Make the list dynamic to the page to adjust image count on different sizes (done)
    • Allow for text to be placed under an image, causing that entire row's height to increase and allow room to display
    • Cut out empty whitespace for text in rows without it


    When a row has a picture that has mixed images (with and without text), the next row starts after where the previous row has text. So if image 1 and 3 (of 6) on row 2 have text, then row 3 starts under image 4 and distorts the grid.

    Also I can't show pictures of what its doing for certain reasons so don't ask, however I can post the CSS/HTML structure:
    PHP Code:
    <div>
                <ul class="img-list thumbnails clearfix" data-toggle="gallery-options">
    <?php foreach($images as $row) { ?>
                    <li class="img-item">
                        <?php if($has_text) { ?>
                        <a href="<?php echo site_url().'image/...'?>" class="thumbnail"><img id="img-<?php echo '...'?>" src="<?php echo site_url().'image/...'?>" alt="<?php echo preg_replace('/\.(jpg|png|gif|mp4|m4v|flv)$/'''$row->file); ?>" class="img-img img-rounded" /></a>
                        <?php } else { ?>
                        <a href="<?php echo site_url(); ?>img/..." class="thumbnail" title="<?php echo '...'?>"><img id="img-<?php echo '...'?>" src="<?php echo site_url(); ?>img/..." alt="<?php echo '...'?>" class="img-img img-rounded" /></a>
                        <p align="center"><?php echo '...'?></p>
                        <?php ?>
                    </li>
    <?php ?>
                </ul>
            </div>
    Code:
    .img-list {
    	display: table-row !important;
    }
    .img-item {
    	display: table-cell !important;
    	/*height: 215px !important;*/
    	max-width: 190px !important;
    	margin: 0 15px 20px 15px !important;
    }
    .img-img {
    	/*height: 100% !important;*/
    	max-height: 100% !important;
    	max-width: 100% !important;
    }
    That's just some CSS I was playing around with, I'm not sure what needs fixed.

    Yes I also know using !important isn't best practice, however it's overwriting some rules in other public stylesheets (such as bootstrap), plus it's in a custom css file, so anything in it is different compared to the original template source.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Please post the generated HTML, not the raw PHP code. I can’t imagine that what you have works at all, at least in some way. As far as I remember, to emulate a table you need an element with a display value of “table”; just a table-row as topmost element doesn’t do any good. Table rows are generated automatically, even if no element exists that has this CSS value. However, table cells are always on one line unless you have several rows which obviously you don’t have.

    What I would recommend is to make the list items display as inline block. This should ensure they wrap properly and look grid-like.

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    428
    Thanks
    18
    Thanked 26 Times in 26 Posts
    I seem to have fixed this issue by using the following code:
    Code:
    .img-list {
    	list-style: none;
    	margin: 0 auto;
    }
    .img-item {
    	width: 162px !important;
    	min-height: 91px !important;
    	max-height: 185px !important;
    	display: -moz-inline-stack;
    	display: inline-block;
    	vertical-align: top;
    	margin: 10px 15px 10px 15px !important;
    }
    .img-item:nth-child(7n+1) {
    	clear: left;
    }
    .img-img {
    	max-height: 133px;
    	max-width: 100%;
    }
    I'm still working out the sizing issues to have it fit better. The only problem with using :nth-child() is it's not responsive, meaning if the user cant fit all 7 images across their scree, it will cut and break apart, but it's something and its easier to see it broken that way rather than lines starting halfway across other lines and mixing it up.

    As for the HTML, here's a small sample:
    PHP Code:
    <ul class="img-list thumbnails clearfix" data-toggle="gallery-options">
        <
    li class="img-item">
            <
    a href="lock-6.png" class="thumbnail" title="Some random text."><img src="lock-6.png" class="img-img img-rounded"/></a>
            <
    p align="center">Some random text.</p>
        </
    li>
        <
    li class="img-item">
            <
    a href="lock-6.png" class="thumbnail" title="Some random text."><img src="lock-6.png" class="img-img img-rounded"/></a>
            <
    p align="center">Some random text.</p>
        </
    li>
        <
    li class="img-item">
            <
    a href="lock-6.png" class="thumbnail" title="Some random text."><img src="lock-6.png" class="img-img img-rounded"/></a>
            <
    p align="center">Some random text.</p>
        </
    li>
        <
    li class="img-item">
            <
    a href="lock-6.png" class="thumbnail" title="Some random text."><img src="lock-6.png" class="img-img img-rounded"/></a>
            <
    p align="center">Some random text.</p>
        </
    li>
        <
    li class="img-item">
            <
    a href="lock-6.png" class="thumbnail" title="Some random text."><img src="lock-6.png" class="img-img img-rounded"/></a>
            <
    p align="center">Some random text.</p>
        </
    li>
        <
    li class="img-item">
            <
    a href="http://example.com/image/..." class="thumbnail"><img src="http://example.com/image/..." class="img-img img-rounded"/></a>
        </
    li>
        <
    li class="img-item">
            <
    a href="http://example.com/image/..." class="thumbnail"><img src="http://example.com/image/..." class="img-img img-rounded"/></a>
        </
    li>
        <
    li class="img-item">
            <
    a href="http://example.com/image/..." class="thumbnail"><img src="http://example.com/image/..." class="img-img img-rounded"/></a>
        </
    li>
        <
    li class="img-item">
            <
    a href="http://example.com/image/..." class="thumbnail"><img src="http://example.com/image/..." class="img-img img-rounded"/></a>
        </
    li>
        <
    li class="img-item">
            <
    a href="http://example.com/image/..." class="thumbnail"><img src="http://example.com/image/..." class="img-img img-rounded"/></a>
        </
    li>
        <
    li class="img-item">
            <
    a href="lock-6.png" class="thumbnail" title="Some random text."><img src="lock-6.png" class="img-img img-rounded"/></a>
            <
    p align="center">Some random text.</p>
        </
    li>
        <
    li class="img-item">
            <
    a href="lock-6.png" class="thumbnail" title="Some random text."><img src="lock-6.png" class="img-img img-rounded"/></a>
            <
    p align="center">Some random text.</p>
        </
    li>
        <
    li class="img-item">
            <
    a href="lock-6.png" class="thumbnail" title="Some random text."><img src="lock-6.png" class="img-img img-rounded"/></a>
            <
    p align="center">Some random text.</p>
        </
    li>
        <
    li class="img-item">
            <
    a href="lock-6.png" class="thumbnail" title="Some random text."><img src="lock-6.png" class="img-img img-rounded"/></a>
            <
    p align="center">Some random text.</p>
        </
    li>
        <
    li class="img-item">
            <
    a href="lock-6.png" class="thumbnail" title="Some random text."><img src="lock-6.png" class="img-img img-rounded"/></a>
            <
    p align="center">Some random text.</p>
        </
    li>
        <
    li class="img-item">
            <
    a href="http://example.com/image/..." class="thumbnail"><img src="http://example.com/image/..." class="img-img img-rounded"/></a>
        </
    li>
        <
    li class="img-item">
            <
    a href="http://example.com/image/..." class="thumbnail"><img src="http://example.com/image/..." class="img-img img-rounded"/></a>
        </
    li>
        <
    li class="img-item">
            <
    a href="http://example.com/image/..." class="thumbnail"><img src="http://example.com/image/..." class="img-img img-rounded"/></a>
        </
    li>
        <
    li class="img-item">
            <
    a href="http://example.com/image/..." class="thumbnail"><img src="http://example.com/image/..." class="img-img img-rounded"/></a>
        </
    li>
        <
    li class="img-item">
            <
    a href="http://example.com/image/..." class="thumbnail"><img src="http://example.com/image/..." class="img-img img-rounded"/></a>
        </
    li>
        <
    li class="img-item">
            <
    a href="lock-6.png" class="thumbnail" title="Some random text."><img src="lock-6.png" class="img-img img-rounded"/></a>
            <
    p align="center">Some random text.</p>
        </
    li>
        <
    li class="img-item">
            <
    a href="lock-6.png" class="thumbnail" title="Some random text."><img src="lock-6.png" class="img-img img-rounded"/></a>
            <
    p align="center">Some random text.</p>
        </
    li>
        <
    li class="img-item">
            <
    a href="lock-6.png" class="thumbnail" title="Some random text."><img src="lock-6.png" class="img-img img-rounded"/></a>
            <
    p align="center">Some random text.</p>
        </
    li>
        <
    li class="img-item">
            <
    a href="lock-6.png" class="thumbnail" title="Some random text."><img src="lock-6.png" class="img-img img-rounded"/></a>
            <
    p align="center">Some random text.</p>
        </
    li>
        <
    li class="img-item">
            <
    a href="lock-6.png" class="thumbnail" title="Some random text."><img src="lock-6.png" class="img-img img-rounded"/></a>
            <
    p align="center">Some random text.</p>
        </
    li>
        <
    li class="img-item">
            <
    a href="http://example.com/image/..." class="thumbnail"><img src="http://example.com/image/..." class="img-img img-rounded"/></a>
        </
    li>
        <
    li class="img-item">
            <
    a href="http://example.com/image/..." class="thumbnail"><img src="http://example.com/image/..." class="img-img img-rounded"/></a>
        </
    li>
        <
    li class="img-item">
            <
    a href="http://example.com/image/..." class="thumbnail"><img src="http://example.com/image/..." class="img-img img-rounded"/></a>
        </
    li>
        <
    li class="img-item">
            <
    a href="http://example.com/image/..." class="thumbnail"><img src="http://example.com/image/..." class="img-img img-rounded"/></a>
        </
    li>
        <
    li class="img-item">
            <
    a href="http://example.com/image/..." class="thumbnail"><img src="http://example.com/image/..." class="img-img img-rounded"/></a>
        </
    li>
        <
    li class="img-item">
            <
    a href="lock-6.png" class="thumbnail" title="Some random text."><img src="lock-6.png" class="img-img img-rounded"/></a>
            <
    p align="center">Some random text.</p>
        </
    li>
        <
    li class="img-item">
            <
    a href="lock-6.png" class="thumbnail" title="Some random text."><img src="lock-6.png" class="img-img img-rounded"/></a>
            <
    p align="center">Some random text.</p>
        </
    li>
        <
    li class="img-item">
            <
    a href="lock-6.png" class="thumbnail" title="Some random text."><img src="lock-6.png" class="img-img img-rounded"/></a>
            <
    p align="center">Some random text.</p>
        </
    li>
        <
    li class="img-item">
            <
    a href="lock-6.png" class="thumbnail" title="Some random text."><img src="lock-6.png" class="img-img img-rounded"/></a>
            <
    p align="center">Some random text.</p>
        </
    li>
        <
    li class="img-item">
            <
    a href="lock-6.png" class="thumbnail" title="Some random text."><img src="lock-6.png" class="img-img img-rounded"/></a>
            <
    p align="center">Some random text.</p>
        </
    li>
        <
    li class="img-item">
            <
    a href="http://example.com/image/..." class="thumbnail"><img src="http://example.com/image/..." class="img-img img-rounded"/></a>
        </
    li>
        <
    li class="img-item">
            <
    a href="http://example.com/image/..." class="thumbnail"><img src="http://example.com/image/..." class="img-img img-rounded"/></a>
        </
    li>
        <
    li class="img-item">
            <
    a href="http://example.com/image/..." class="thumbnail"><img src="http://example.com/image/..." class="img-img img-rounded"/></a>
        </
    li>
        <
    li class="img-item">
            <
    a href="http://example.com/image/..." class="thumbnail"><img src="http://example.com/image/..." class="img-img img-rounded"/></a>
        </
    li>
        <
    li class="img-item">
            <
    a href="http://example.com/image/..." class="thumbnail"><img src="http://example.com/image/..." class="img-img img-rounded"/></a>
        </
    li>
    </
    ul
    That should be enough to simulate the possibilities, if not then just copy the last 10 list items (they repeat in sets of 5).

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    That rule:

    Code:
    .img-item:nth-child(7n+1) {
    	clear: left;
    }
    is needless because you’re not floating anything.

    I’m still not sure what you are trying to achieve? Do you want always seven items per row that adjust in width if the viewport is resized?

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    428
    Thanks
    18
    Thanked 26 Times in 26 Posts
    Quote Originally Posted by VIPStephan View Post
    That rule is needless because you’re not floating anything.
    Well it works so I'm not sure what to tell you.

    Quote Originally Posted by VIPStephan View Post
    I’m still not sure what you are trying to achieve? Do you want always seven items per row that adjust in width if the viewport is resized?
    I want to have a grid of images that is centered on the page and can fit as many in one row as possible. SO if a user adjusts the page width, the images will all shift to different rows as needed, maintaining their size as well as the rows being centered in the page. However, I need the row height to be taller of one image in the row contains text beneath it (which would make the image list element taller), but if not then to maintain its spacing based on the list item's padding rules.

    It's similar to how windows explorer works (and maybe even macs). If I open a folder of images and the view is set to large tiles, the images are all displayed in a grid, and if the filename is more than one line, the entire row below it shifts down to make room (not just that column). Also, if I adjust the window size, the images will skip down to the next row as needed and the row height will shift (if it even does this, I'm pretty sure it does). The only thing it doesn't do is center, instead it shifts left, so that's one difference. I could be wrong though about this, the height could be static instead but I'm pretty sure it isn't.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Quote Originally Posted by Dubz View Post
    Well it works so I'm not sure what to tell you.
    Then remove that rule and tell me what has changed then.

    Quote Originally Posted by Dubz View Post
    I want to have a grid of images that is centered on the page and can fit as many in one row as possible. SO if a user adjusts the page width, the images will all shift to different rows as needed, maintaining their size as well as the rows being centered in the page. However, I need the row height to be taller of one image in the row contains text beneath it (which would make the image list element taller), but if not then to maintain its spacing based on the list item's padding rules.
    This should all be done with the single display: inline-block; rule on the list items (along with a width assigned to them). Also, you might need to apply vertical-align: top; to the list items.
    Centering the list items would be done with text-align: center on the ul.

  • #7
    Regular Coder
    Join Date
    Sep 2011
    Posts
    428
    Thanks
    18
    Thanked 26 Times in 26 Posts
    Tried as suggested before and no luck. If I remove the band-aid fix then the rows will start under the previous row after the image with no text (if there is any and if the last image doesn't have text).

    Here's a fiddle I created with it. I imported the CSS/JS files that it uses as well, they seem to modify it because without them they acted as I wanted to. The only question now is what's causing the issue.

    Edit fiddle - JSFiddle

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    I don’t get it. What’s the problem with

    Code:
    .img-list {
        text-align: center;
    }
    .img-item {
        width: 162px;
        display: inline-block;
        vertical-align: top;
    }


    It even seems to work in your example.
    I can only imagine there is some bootstrap crap overriding some styles; but that’s really hard to find out with that JSFiddle. Better would be if you uploaded your page somewhere so we can see and analyze it using a debuggin toolit without distractions.

    And where the hell did you get display: -moz-inline-stack; from?
    Last edited by VIPStephan; 05-31-2014 at 08:18 PM.

  • #9
    Regular Coder
    Join Date
    Sep 2011
    Posts
    428
    Thanks
    18
    Thanked 26 Times in 26 Posts
    Quote Originally Posted by VIPStephan View Post
    I don’t get it. What’s the problem with

    Code:
    .img-list {
        text-align: center;
    }
    .img-item {
        width: 162px;
        display: inline-block;
        vertical-align: top;
    }


    It even seems to work in your example.
    I don't see how you think it works when this is what I see here. Notice how the row of images isn't on the left?


    Quote Originally Posted by VIPStephan View Post
    I can only imagine there is some bootstrap crap overriding some styles; but that’s really hard to find out with that JSFiddle. Better would be if you uploaded your page somewhere so we can see and analyze it using a debuggin toolit without distractions.
    I'll have to do this another time then, I'm a little busy at the moment.


    Quote Originally Posted by VIPStephan View Post
    And where the hell did you get display: -moz-inline-stack; from?
    Googling around, it said that Firefox 2 doesn't use inline-block or something, I'm not the best with CSS, I just know how to modify basic things.

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Even though it’s a pain in the butt to debug code in JSFiddle I think I see what the problem is: There is a rule in main.css that says
    Code:
    .thumbnails > li {
      float: left;
      …
    }
    That needs to be either removed or overridden for this application.
    You would help yourself if you used a debugging tool like Firebug. You can analyze the HTML and see what CSS is applied to an element.

    Quote Originally Posted by Dubz View Post
    Googling around, it said that Firefox 2 doesn't use inline-block or something, I'm not the best with CSS, I just know how to modify basic things.
    Firefox 2? Come on… You don’t happen to also support Internet Explorer 5?
    Firefox 2 was the thing from 2006–2008. We’re in 2014 now and the current version of Firefox is 29. It’s enough if your support goes back to version 4 or something.

  • Users who have thanked VIPStephan for this post:

    Dubz (06-02-2014)

  • #11
    Regular Coder
    Join Date
    Sep 2011
    Posts
    428
    Thanks
    18
    Thanked 26 Times in 26 Posts
    Quote Originally Posted by VIPStephan View Post
    Even though it’s a pain in the butt to debug code in JSFiddle I think I see what the problem is: There is a rule in main.css that says
    Code:
    .thumbnails > li {
      float: left;
      …
    }
    That needs to be either removed or overridden for this application.
    This worked surprisingly, it even centered the images. Thanks for the help! There is another issue with one page's background and upper header display shiftinf to the right a few pixels and the other page being centered, and the only difference is the page that's centered has 2 more lines of text. Either way it's not enough for me to be worried about it, it doesn't need to be perfect


    Quote Originally Posted by VIPStephan View Post
    Firefox 2? Come on… You don’t happen to also support Internet Explorer 5?
    Firefox 2 was the thing from 2006–2008. We’re in 2014 now and the current version of Firefox is 29. It’s enough if your support goes back to version 4 or something.
    Yeah I didn't know how old it was or I could have misread it, it could have been 20 or something of the sort, I'm not sure. Either way all is good and I took that out.


    Guess this just goes to show how much I don't know about CSS
    I'm more of the server side guy (PHP, MySQL, etc.)

  • #12
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Quote Originally Posted by Dubz View Post
    Guess this just goes to show how much I don't know about CSS
    I'm more of the server side guy (PHP, MySQL, etc.)
    No problem. I’m to PHP and MySQL(i) what you are to HTML and CSS.

  • #13
    Regular Coder
    Join Date
    Sep 2011
    Posts
    428
    Thanks
    18
    Thanked 26 Times in 26 Posts
    Quote Originally Posted by VIPStephan View Post
    No problem. I’m to PHP and MySQL(i) what you are to HTML and CSS.
    That could make a good team if the designer knew php as well, or at least the basics (enough to make dynamic templates), then you could have one person build the templates and front end while the other builds the core engine and back end


  •  

    Posting Permissions

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