Grow your CSS skills. Land your dream job.

Trying Twitter Bootstrap

  • # December 10, 2012 at 8:17 am

    I have defined a page using Bootstrap to see it’s possibilities. However I am having problems with my footer being shifted about 20px to the right. See http://www.hhhconsulting.co.uk/dev/bootstrap/wp-content/themes/bootstrap/cww.htm

    Can anyone tell me why this is happening?

    Many thanks
    Pete

    # December 10, 2012 at 8:30 am

    Actually, from what I can see it’s not your footer…that’s neatly inside the container.

    Your div#header is shifted over 20px though.

    # December 10, 2012 at 8:35 am

    Paulie,

    If you lookat the right-hand edges of the footer and the main content, they are out. I will look to see what the header is like.

    Pete

    # December 10, 2012 at 8:36 am

    You seem to have applied;

    row { margin-left – 20px; }

    Anything with this seems to look out of place, but like @Paulie_D said, if you inspect it with Chrome Inspector Tools, your footer is fine, however your header isn’t and also the sections of content as they both are using the row property.

    # December 10, 2012 at 8:38 am

    This is not my code but Bootstrap’s

    I just noticed that the page-wrap shows the main content as being shifted left, not the footer right.

    Hmmmm

    Pete

    # December 10, 2012 at 9:55 am

    #book_banner {
    clear: both;
    background-color: #464342;
    color: white;
    margin: 35px 0 35px 0;
    }

    replace margin with:
    margin-top: 35px;
    margin-bottom: 35px;

    You are adding 0 margin to the default bootstrap css.

    # December 10, 2012 at 10:03 am

    Hmm.

    I’m pretty sure (from what I remember) that rows should only contain divs with classes of span-x and you can’t ‘wrap’ divs which have those classes. So, for instance, you have a ‘nav’ with no class but your div inside that (why a div?) has a class of span-9.

    Why haven’t you just applied the class of span-9 to the nav?

    Your menu is just plain odd…why are you using divs instead of a list?

    Without getting into it too far, I suspect that the styles that you have in the head of your page are impacting on the base styles of TWB and causing the issue(s). For instance, there is no need to define a width of 940px to the page-wrap, just give it a class of ‘container’, that’s what TWB is supposed to do for you.

    # December 10, 2012 at 10:20 am

    Springlab,

    That worked great. Not sure why adding 0 makes adifference, but itdoes.

    many thanks
    Pete

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".