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.

Making td full width using css and bootstrap

Discussion in 'CSS' started by sarahk, Sep 18, 2015.

  1. #1
    So my main client got a design done for a promotional website that has a limited lifespan. Spec said it had to be cut into html but that didn't get done. I'll just whack it together in bootstrap, how hard could it be? OMG! There are some seriously cool features in it, and I get about the bloat etc but I can see how it has done so well.

    My users are not tech literate and will be using ckeditor to generate the content for the site. They won't be able to manage special instructions etc so I have to cater for their abilities.

    I've found some css to pull tables apart and treat them like divs. Awesome! However when the contents of the table aren't as wide as the table the cells shrink and the table isn't centred.

    Check this out: http://jsfiddle.net/50465ahd/
    I've added the border for the show and tell.

    If the cells would go full width the images would be centred and I'd be a happy camper. I've tried setting the margins to auto but that didn't work. Width to 100% didn't work.

    I figure either the table has to be set to be the auto width and let it centre or the td have to stretch but there could be another option.
    SEMrush
    So, any ideas on how to tackle this?
     
    Solved! View solution.
    sarahk, Sep 18, 2015 IP
    SEMrush
  2. #2
    This should do the job.
    
         .sponsors table,
         .sponsors tbody,  /*  You need to force tbody to display block, too. */
         .sponsors thead,
         .cakecontent tbody,
         .sponsors th,
         .sponsors td,
         .sponsors tr {
           display: block;
           margin-right: auto;
            margin-left: auto;
            border: green 1px solid;
      }
    
    HTML:
    //edit: I really dislike this post editor. It doesn't maintain formatting on pasted code.
    //edit2: Lose the margins, too. They are superfluous if containers are full size.

    cheers,

    gary
     
    Last edited: Sep 19, 2015
    kk5st, Sep 19, 2015 IP
  3. sarahk

    sarahk iTamer Staff

    Messages:
    26,390
    Likes Received:
    3,937
    Best Answers:
    111
    Trophy Points:
    665
    #3
    that's brilliant - I'm just working on some other dataTable stuff and having to style the thead and tbody and hadn't twigged that I might need to do it down there.

    The margins were me mucking about and trying to get it to work. I'm stoked. Huge Thank You!!!!

    btw use [ html ] instead of [ code ]


    edit: hangs head in shame, it was a copy/paste error!
     
    sarahk, Sep 19, 2015 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    Or, just code it properly?
    http://jsfiddle.net/50465ahd/5/
    Make each TD be in its own row, instead of in one row with multiple TDs
    A little bit more HTML, lot less CSS
     
    PoPSiCLe, Sep 19, 2015 IP
  5. sarahk

    sarahk iTamer Staff

    Messages:
    26,390
    Likes Received:
    3,937
    Best Answers:
    111
    Trophy Points:
    665
    #5
    Yep, fair call. My fiddle was simplistic.
    My users are going to build up the table with logos and links as companies come on board. Their focus will be to get it to look good on desktop (rows and columns) but I need it to look good on mobile without any extra effort on their part. They can use tables and I'm doing well getting them to edit the pages - getting the images to be the right size will be a mission in itself and probably the most technical task I can ask of them.
     
    sarahk, Sep 19, 2015 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,377
    Likes Received:
    1,855
    Best Answers:
    245
    Trophy Points:
    515
    #6
    Jumped up Hey-zeus H mammary plowing Christmas -- what the **** is that?!? I'm used to bootcrap being knee deep in asshat BS code, but WHAT THE HELL?!?

    First off, pretty damned sure it's unlikely you'd even be down to a H5... what in blazes are all those stupid malfing DIV for?!? What the **** even makes that a table?!?!?

    I'm not even sure what your desired layout is, but I am sure that more than half that markup belongs in the bin. I know bootcrap can make developers do some REALLY stupid ****, but what the blazes are you even thinking?!?

    IF I'm guessing correctly about what you are trying to do -- and this is a WILD guess:
    <div class="logoGallery">
    	<h2>Some Logos</h2>
    	<img alt="ANZ" src="http://pimms.nzpif.org.nz/UserFiles/images/conference2016/sponsors/anz.png">
    	<img alt="Barfoot and Thompson" src="http://pimms.nzpif.org.nz/UserFiles/images/conference2016/sponsors/barfootandthompson.png">
    	<img alt="" src="http://pimms.nzpif.org.nz/UserFiles/images/conference2016/sponsors/ronovationz.png">
    	<img alt="" src="http://pimms.nzpif.org.nz/UserFiles/images/conference2016/sponsors/sponsor.png">
    	<img alt="" src="http://pimms.nzpif.org.nz/UserFiles/images/conference2016/sponsors/propertyapprentice.png">
    	<img alt="Tass Print" src="http://pimms.nzpif.org.nz/UserFiles/images/conference2016/sponsors/tassprint.png">
    <!-- .logoGallery --></div>
    Code (markup):
    .logoGallery {
    	border:1px solid green;
    }
    .logoGallery img {
    	display:block;
    	margin:0 auto;
    	border:1px solid yellow;
    }
    Code (markup):
    No stupid malfing bootcrap needed.

    Seriously, what in blazes makes you think what you have there is good code? Much less makes you go "wow" on so called "features"?!?

    Sorry, but every time I see mouth-breathing dumbass nonsense like this:
    <div class="col-md-offset-2 col-md-8 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1">
    Code (markup):
    Pissing all over the very reason HTML even exists? I get a little testy... particularly when it's done by someone I'd have thought would know better by now.
     
    deathshadow, Sep 19, 2015 IP
  7. sarahk

    sarahk iTamer Staff

    Messages:
    26,390
    Likes Received:
    3,937
    Best Answers:
    111
    Trophy Points:
    665
    #7
    I knew I'd love your response and my "solution" might have been a response of working too late at night on something I avoid like the plague. Let me mess with a database and business requirements and I'm a happy camper, design lost my interest when I learned the phrase "IE Hack"
     
    sarahk, Sep 19, 2015 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,377
    Likes Received:
    1,855
    Best Answers:
    245
    Trophy Points:
    515
    #8
    Well, lemme ask you this -- setting aside the bootcrap nonsense -- what made you even think that a bunch of images constituted tabular data? Why were you even getting a table involved? You don't have rows or columns that have semantic relationships so... why?
     
    deathshadow, Sep 20, 2015 IP
  9. sarahk

    sarahk iTamer Staff

    Messages:
    26,390
    Likes Received:
    3,937
    Best Answers:
    111
    Trophy Points:
    665
    #9
    because I'm not going to go and re-edit all the material that is put in place. Eventually there will be more sponsors than just those ones and they will be put in a specific order. The client likes to use tables to control the layout.
     
    sarahk, Sep 20, 2015 IP
  10. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #10
    Then you should tell your client that they're doing it wrong, and try to convince them correct markup both helps their business and also customers that might not be sighted / in need of other implementations of the page itself.
    As designers and coders, we have much better understanding of the underlying structures and formats, and if the client goes "well, we've done it this way forever" then you go "well, this isn't 1995 anymore". Seriously. How are they gonna learn if everyone just goes "well, let's hack together something that barely works and hope it looks okay".

    Also, if you look at @deathshadow's solution, it's even simpler - it's a container (which will reflow just fine regardless of resolution), and just images - which if you want, you could put into a list. Anyway, it's a lot less code, and you can style it to work as intended - and it should be even easier to maintain.

    Personally, these are things I would've put into a database, and created an upload-form for the client, but if the client is an idiot (as it sounds), what can you do (apart from trying to educate them).
     
    PoPSiCLe, Sep 20, 2015 IP
    sarahk likes this.
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,377
    Likes Received:
    1,855
    Best Answers:
    245
    Trophy Points:
    515
    #11
    Then the client is a ***ing dumbass, and needs to be told they're a ****ing dumbass... No, seriously, pimp-slap time.

    They're being showed VERTICALLY, that means even if it's tables for layout that would be each in a separate TR... but since there's only one column what in blazes is their "table" controlling for layout exactly? JACK *** that's what. They're probably under that halfwit delusion that more markup is "easier", which makes about as much sense as a harelip ordering biggie fries.

    Why would they want to make MORE work for themselves and make it HARDER to edit/update?!?
     
    deathshadow, Sep 20, 2015 IP
  12. sarahk

    sarahk iTamer Staff

    Messages:
    26,390
    Likes Received:
    3,937
    Best Answers:
    111
    Trophy Points:
    665
    #12
    I just did a series of one day training sessions for them on how to use their membership system - big dramas after lunch for some attendees because they had to work out how to log in again :)
     
    sarahk, Sep 20, 2015 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,377
    Likes Received:
    1,855
    Best Answers:
    245
    Trophy Points:
    515
    #13
    In other words they're so stupid they can't figure out what my 67 year old mother can do on facebook? ...or is their system actually that bad? Lemme guess... a little from column A, a little from column B?
     
    deathshadow, Sep 20, 2015 IP
  14. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #14
    That is just... so bad. This again goes to show that I still think we should have a license for being allowed on the WWW. And yet another one to be able to do anything but read stuff. Sorry, but... no. Unless all the people you're currently working with are seniors, and by that I mean 80+, this is not rocket science.
    I just watched a 79 year old play Skyrim, and making a playthrough video of it - she was brilliant, pleasant to listen to, and quite bright - even though the game and working everything out definitely is not the regular 79 year old's cup of tea, she did very well. And frankly, the only reason not everyone is doing that (barring physical handicap) is the unwillingness to learn.
     
    PoPSiCLe, Sep 20, 2015 IP
  15. sarahk

    sarahk iTamer Staff

    Messages:
    26,390
    Likes Received:
    3,937
    Best Answers:
    111
    Trophy Points:
    665
    #15
    Just had a call from a guy who wanted to buy something we sell online using a cheque. He looked at our site - or was it a related site, he doesn't know and ended up sending an email.
    Who did the email go to? I don't know.
    Could you find it in your sent folder so I can follow up? I don't know how.
     
    sarahk, Sep 21, 2015 IP
  16. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #16
    Well... first of all it's the concept of cheques - I think the US is about the only country in the world still using that horrible, outdated system of money transfer. Second... wow. Just wow. If that person found what you sold online, he should be able to buy it online. If he doesn't have a credit card, sucks to be him.
     
    PoPSiCLe, Sep 21, 2015 IP
  17. sarahk

    sarahk iTamer Staff

    Messages:
    26,390
    Likes Received:
    3,937
    Best Answers:
    111
    Trophy Points:
    665
    #17
    He was sent an email newsletter - I can't remember the last time I used a cheque, 2 years maybe?
     
    sarahk, Sep 21, 2015 IP
  18. NetStar

    NetStar Notable Member

    Messages:
    2,454
    Likes Received:
    537
    Best Answers:
    21
    Trophy Points:
    245
    #18
    I just wanted to point something out... #1. Bootstrap doesn't have to be bloated. In fact, it can be rather lightweight since it allows you to select the "components" you want to use or only need to use. A lot of the bloat comments come from the old days of 1.0 or by people who have never used it. #2. Even though bootstrap doesn't have the most beautiful of coding style it crawls fine, read fine by the browser, and customers don't notice or care. #3. A lot of developers hate bootstrap because all web sites look the same. Well...false. While most developers can recognize used components visitors can't and don't care. In fact, most bootstrap sites enhance the visitors experience but irritates the nerdiest of developers. #4. If someone posts a bootstrap question it doesn't mean you need to chime in and bash the system and the user over and over and over with your opinion. Your opinion is irrelevant.
     
    NetStar, Sep 22, 2015 IP
  19. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,377
    Likes Received:
    1,855
    Best Answers:
    245
    Trophy Points:
    515
    #19
    By its very nature it generates bloated idiotic halfwit dumbass markup. SETTING THE RIDICULOUS SIZE of the complete library aside, anyone defending the presentational use of classes and endless pointless elements like this:

       <nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Project name</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
    Code (markup):
    Well, anyone who sees nothing wrong with that or would use code like that? HAS NO ****ING BUSINESS MAKING WEBSITES!!!

    Except of course when the result is broken (which most of them are broken for me as a user), slow due to bloat, slows down scripting from the use of unnecessary DOM elements, or JOE FORBID a user be using a non-visual UA.

    I haven't actually heard that as a complaint about it... well, apart from most sites built with it having layout concepts that have no damned business on a website in the first place, are NOT useful in responsive design, and lead to zero accessibility and even more bloat. The only thing the same is how they all seem to suck out loud.

    How does slower loading, lowered accessibility, and broken layouts "help" with a visitors experience exactly?

    It is worth bashing when it's 99% of their problem, and it's ridiculously over-complicating the simplest of things like "I have a bunch of content images I want as a single centered column". One parent wrapping DIV with a class, the content tags themselves, and five lines of CSS. DONE.

    Three DIV, Twelve classes, static inlined style, attributes that have no business in any markup after 1997 -- but sure, let's just let people sleaze out code any-old-way like that.

    I cannot fathom how anyone could be dumb enough to choose bootcrap by choice, be deluded enough to see any advantages to using it, or ignorant enough to defend even the slightest part of how it works.

    At no point in their rambling incoherent methodology does it approach anything even approaching a rational thought. Developers are dumber for giving it the slightest attention -- I award its creators no points, and may Joe have mercy on their souls.
     
    deathshadow, Sep 22, 2015 IP
  20. kk5st

    kk5st Prominent Member

    Messages:
    3,499
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #20
    Anyone that knows enough to make intelligent decisions regarding which components to select, knows enough to not need the bootstrap silliness in the first place.

    gary
     
    kk5st, Sep 22, 2015 IP
    deathshadow likes this.