Grow your CSS skills. Land your dream job.

A few CSS Questions

  • # June 27, 2012 at 9:22 pm

    Hello everyone,
    -I have a splash page and would like to make the red spacing around the image all the same width (10px ). Currently the spacing on the bottom is wider then the rest and the top a bit smaller then the sides.
    Here is the page: http://petrowest.squarespace.com/

    -Currently I have a 2 px red border around my page. I would like it to also wrap around the footer. If there is a way to get it to wrap around the whole page instead of two individual sections that would be great.
    http://petrowest.squarespace.com/divisions/

    Thanks for the continued help,
    Chris

    # June 27, 2012 at 9:37 pm

    Adjust the top padding of #contentWrapper to match the left and right padding. Then, to deal with the bottom, give the image vertical-align: top;.

    In regards to the page border, you could quite easily remove the top/bottom border in between the content and the footer to simulate the border wrapping both (this would require you to also give the footer a border).

    # June 28, 2012 at 12:37 am

    ok great , that sounds good I will get working on that here and see how things go. Is there anyway you could show me what the image vertical-align: top; should look like.

    # June 28, 2012 at 12:47 am

    I would do it like this:

    #content img {
    vertical-align: top;
    }

    On a different note, any particular reason why you are using a splash page?

    # June 28, 2012 at 12:54 am

    Ok thanks. Well I tried talking the client out of having a splash page but they are still stuck on having one. I am not sure what else I can mention to them to maybe change their minds.

    # June 28, 2012 at 2:01 am

    Can anyone see what is making my footer not line up with my page content on the right hand side.

    http://petrowest.squarespace.com/divisions/

    # June 28, 2012 at 2:18 am

    Your footer wrapper has a width of 960 plus 2px border which gives it a total width of 964px.

    # June 28, 2012 at 7:38 am
    foo {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    }

    FTW

    http://css-tricks.com/box-sizing/

    # June 29, 2012 at 1:45 pm

    Ok so all my borders are done. I just have one little issue. When I view it in IE the botter footer border doesnt line up on the sides. looks like it is off by a px or so. Isthis what is causing the problem?

    http://petrowest.squarespace.com/home/

    # June 29, 2012 at 3:59 pm

    ive used this* ancient (2001) article by INC mag to successfully talk clients out of using splash pages (and many other horrible ideas) before…and i’ll do it again!

    * http://www.inc.com/articles/2001/06/23069.html

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

You must be logged in to reply to this topic.

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