1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Why these display:table-cell divs aren't lined up from left to right

Discussion in 'CSS' started by ketting00, Aug 8, 2015.

  1. #1
    Hi guys,
    I want these div guys lined up from left to right, but they go from top to bottom.
    What's wrong with my code :mad:
    HTML:
    
    <div class=all_photos>
        <div class=photo_list>
            <img src="photos/<?php echo $photo['path']; ?>" alt='' title='' /><br/>
            <a href="delete.php?id=<?php echo $photo['id']; ?>" role=button class=button>Delete</a>
            <a href="setting.php?id=<?php echo $photo['id']; ?>" role=button class=button>Setting</a>
        </div>
    </div>
    
    Code (markup):
    CSS:
    
    .all_photos {
        margin: 0.6em 0;
        display: table;
    }
    .photo_list { 
        display: table-cell;
        text-align: center;
        border: 0.08em solid #999;
        padding: 0.3em;
    }
    .photo_list img {
        width: 7em;
        margin-bottom: 0.4em;
    }
    .button {
        padding: 0.2em 0.7em;
        background-color: #DDD;
        border-radius: 2em;
        border: 0;
        -moz-box-shadow: 0 0 0.2em #888;
        -webkit-box-shadow: 0 0 0.2em #888;
        box-shadow: 0 0 0.2em #888;
    }
    
    Code (markup):
    Thanks,
    SEMrush
     
    Solved! View solution.
    ketting00, Aug 8, 2015 IP
    SEMrush
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,499
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #2
    1) There's only a single cell,
    2) it's content are not table-cell,
    3) element class attributes are not quoted,
    4) it's poorly structured for table related display properties.

    
    <div class="all_photos">
      <div class="photo_list">
        <img src="foo" alt="bar" />
        <a href="foobar" role="button" class="button">Delete</a>
        <a href="fooie" role="button" class="button">Setting</a>
      </div>
    </div>
    Code (markup):
    Don't show us the php, show us the html it delivers.
    
    .all_photos {
        display: table;
        }
    
    .photo_list {
        display: table-row;
        }
    
    .photo_list > img,
    .photo_list div {
         display: table-cell;
        }
    Code (markup):
    ^^^^^^
    not tested

    cheers,

    gary
     
    kk5st, Aug 8, 2015 IP
  3. ketting00

    ketting00 Well-Known Member

    Messages:
    748
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #3
    Thanks, but I don't want two buttons on the line. I want the big table-cell lining like ul li when set them float left.

    This's what your code do:
    
    |++++++++++++|
    | |-----|    |
    | |-----| 1 2|
    | |-----|    |
    |++++++++++++|
    |++++++++++++|
    | |-----|    |
    | |-----| 1 2|
    | |-----|    |
    |++++++++++++|
    
    Code (markup):
    I want something like this:
    
    |+++++++++| |+++++++++|
    | |-----| | | |-----| |
    | |-----| | | |-----| |
    | |-----| | | |-----| |
    |  1  2   | |  1  2   |
    |+++++++++| |+++++++++|
    
    Code (markup):
    Thanks
     
    ketting00, Aug 9, 2015 IP
  4. #4
    I would NOT use display:table for any of this -- and if you've got a whole bunch of those, you're using probably five times as many classes as needed... Since you don't have DIV inside each photo area, you don't seem to have different classes on the anchors or other anchors, etc, etc... The "button" aria role also being a waste of code for being some of the most pointless nonsense ever.

    I'd be doing something more like this:

    <div class="gallery">
      <div>
        <img src="test.jpg" alt="test image" />
        <a href="#">Delete</a>
        <a href="#">Setting</a>
      </div>
      <div>
        <img src="test.jpg" alt="test image" />
        <a href="#">Delete</a>
        <a href="#">Setting</a>
      </div>
      <div>
        <img src="test.jpg" alt="test image" />
        <a href="#">Delete</a>
        <a href="#">Setting</a>
      </div>
    <!-- .gallery --></div>
    Code (markup):
    with CSS like this:

    .gallery {
    	text-align:center;
    	padding-top:1em;
    	background:#CCC;
    }
    
    .gallery div {
    	display:inline-block;
    	padding:1em;
    	margin:0 0.4em 1em;
    	vertical-align:top;
    	background:#EEE;
    }
    
    .gallery img {
    	display:block;
    	margin:0 auto 1em;
    }
    
    .gallery a {
    	display:inline-block;
    	padding:0.25em 1em;
    	text-decoration:none;
    	color:#000;
    	background:#DDD;
    }
    Code (markup):
    That will stack them like you are thinking, but also auto-wrap when the screen is too small something table-cells really aren't meant to do. They will NOT auto-stretch to the same height so you'd need to make sure the images are uniform in size (a wrapping span could be used to aid with scaling/cropping for that)... I added some greyscale just to make it easy to see what's what. Remember, good layouts should be semi-fluid, elastic and responsive so the number of items per row should be coded to be dynamic according to screen width. The above code provides that.

    CSS 101, when you have a perfectly good wrapper with a class or ID on it, don't waste time and markup throwing classes at everything... and "Aria roles"? Utter and complete waste of bandwidth in 99.999% of situations that only exists to make it easier for content thieves to make off with your data; particularly when not one legitimate user agent has done anything meaningful with it. (admittedly I say the same about HTML 5 asshattery like NAV, ARTICLE, SECTION and ASIDE)
     
    deathshadow, Aug 9, 2015 IP
  5. ketting00

    ketting00 Well-Known Member

    Messages:
    748
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #5
    Extra thanks professor @deathshadow, for the CSS lesson.

    It works.

    It's my fault maybe, I put the outer div inside the foreach loop. When I move it to outside the loop it works and look greats.
     
    ketting00, Aug 10, 2015 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,376
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #6
    That'll nab you every time, particularly if working from other people's code. It's why in examples I like to show at least 3 sets of data when it's something that's gonna loop to make it clearer.
     
    deathshadow, Aug 10, 2015 IP