Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Cannot get Floats to tile on Index page

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 30 total)
  • Author
    Posts
  • #39589
    craigmurray
    Member

    Hello. I’m super rusty on my CSS and trying to style my new site a little http://craigmurray.virb.com/work

    I would like to get all thumbnails on this page (960px wide) in a 3 column grid @ 300px wide with 30px gutters (to match up with the footer I have). I tried taking the 3rd thumbnails right margin off to fit evenly on the page.

    However, the following code isn’t working for some reason:

    #index ul.thumbs li {
    float: left;
    width: 300px;
    margin: 0 30px 30px 0;
    padding: 0;
    border: 1px solid white;
    min-height: 150px;
    }

    #index ul.thumbs li img {
    width: 300px;
    }

    #index ul.thumbs li.li_3, #index ul.thumbs li.li_6
    {
    margin-right: 0;
    }

    #index ul.thumbs li.li_4, #index ul.thumbs li.li_7 {
    clear: both;
    }

    Any help to clear up this problem would be awesome. Thanks in advance for the support.

    #108788
    wolfcry911
    Participant

    there’s not enough width. You’ve got 300px li with 1px border (302px) x 3 + 30px gutter x 2 = 966px. Reduce the li to 298 or remove the border or widen the container or reduce the gutter.

    #108819
    craigmurray
    Member

    Thx Wolfcry911.

    I changed li to 298, reduced gutters and curbed the following code edits,:

    #index ul.thumbs li {
    float: left;
    width: 298px;
    margin: 0 16px 30px 0;
    padding: 0;

    }

    #index ul.thumbs li img {
    width: 298px;
    }

    #index ul.thumbs li.li_4, #index ul.thumbs li.li_7 {
    clear: both;
    }


    #index ul.thumbs li.li_3, #index ul.thumbs li.li_6 {
    margin-right: 0;
    }

    ..but things still aren’t working out. Any other ideas? Thanks very much for your help.

    #108820
    chrisburton
    Participant

    @craigmurray Remove this entire thing

    #index ul.thumbs li.li_5,
    #index ul.thumbs li.li_9,
    #index ul.thumbs li.li_13,
    #index ul.thumbs li.li_17,
    #index ul.thumbs li.li_21,
    #index ul.thumbs li.li_25,
    #index ul.thumbs li.li_29 {
    clear: both;
    }

    Then remove this

    #index ul.thumbs li.li_4 {
    margin: 0;
    }

    Result: http://grab.by/fM66

    #109123
    craigmurray
    Member

    Thx ChristopherBurton. I just realized I don;t have access to that code base since it’s part of the CMS theme. I can however override it. But I’ve never overridden CSS. Is there an equivalent CSS snippet I can use to override the things you asked me to remove?

    #109124
    chrisburton
    Participant

    @craigmurray What? You can’t edit the CSS?

    #109125
    craigmurray
    Member

    Correct. I can only ‘override’ the current page template.

    #109121
    chrisburton
    Participant

    @craigmurray What CMS are you using?

    Try this and see if it works

    #index ul.thumbs li.li_5,
    #index ul.thumbs li.li_9,
    #index ul.thumbs li.li_13,
    #index ul.thumbs li.li_17,
    #index ul.thumbs li.li_21,
    #index ul.thumbs li.li_25,
    #index ul.thumbs li.li_29 {
    clear: none;
    }

    #index ul.thumbs li.li_4 {
    margin: ; /* Set the margin you have for the rest of the images */
    }
    #109016
    craigmurray
    Member

    I’m using Virb. I placed the code you listed here to hopefully override things and get the result i’m after, but it’s not working :( http://craigmurray.virb.com/work

    #108996
    Kitty Giraudel
    Participant

    What kind of CMS doesn’t allow users to edit CSS ? :s

    #108998
    chrisburton
    Participant

    Something isn’t right here is what I’m thinking. If you already created that stuff in CSS to begin with, why can’t you edit it?

    #108999
    craigmurray
    Member

    @HugoGiraudel I’m not sure.

    @ChristopherBurton I didn’t create the page from scratch, just simply wanting to tweak parameters to achieve the 3 column look on this index.

    #108990
    chrisburton
    Participant

    On Virb it says this:

    Advanced Customization

    Just a click on the Customize panel’s “Advanced” tab and you’ll have direct access to the raw HTML and CSS of your site — the perfect sandbox for tinkering around. Let your imagination run wild.

    #108995
    craigmurray
    Member

    That’s actually an outdated description for what the panel used to be capable of (before the recent redesign they launched). Now, it appears I can only override current page styles or edit the master CSS file (which doesn’t have what I need for the index page) :-

    #108987
    chrisburton
    Participant

    Can you see the media queries section or no?

Viewing 15 posts - 1 through 15 (of 30 total)
  • The forum ‘CSS’ is closed to new topics and replies.