Grow your CSS skills. Land your dream job.

Novice needing info on layout

  • # February 17, 2011 at 2:37 pm

    I’m trying to keep things simple but effective, using descent images instead of fancy animation and CSS that frankly would scare me.

    So, be nice to me :)

    Here’s an image that I’ve rustled up to describe what I’m trying to do. It’s crude and very ugly, but it should get my point across
    http://paulstroudmusic.co.uk/example-layout.jpg

    I’m not afraid of html or css…. there’s just quite a lot of holes in my knowledge and understanding

    Some things I understand, others I will ask stupid questions about

    Thanks for any input

    # February 17, 2011 at 9:33 pm

    What info do you need? You never really asked a question.

    # February 18, 2011 at 12:32 am

    its better to ask a stupid question then no question at all.

    # February 18, 2011 at 12:59 am

    I think he’s asking how to accomplish what is in the image. However, is the photoshop pattern a set height or is it the full body?

    # February 18, 2011 at 6:57 am

    Ha ha – A question would be nice I guess, yeah

    Yes, the (horrible) pattern would be “letterboxed” along with the rest of the header image. However, I’ve sorted this out.

    Since my OP I’ve managed to accomplish what I wanted:

    • Top and Bottom borders
    • Cutout Tree Image and Text (using position: absolute; right: 12%;)
    • And sitting on-top of bottom border
    • Main Landscape image, centered
    • Continued “letterbox-pattern”

    So here’s how I’ve done it. Works, but I suspect it’s not structured well at all…

    I’m not sure how much that matters in this case – being MY wordpress site. What’s the best practice here?

    I’m not really ‘getting’ the CSS structure am I?

    * {
    margin: 0;
    padding: 0;
    }
    body {
    font: 14px/1.4 Georgia, serif;
    background-color:black;
    }
    article, aside, figure, footer, header, nav, section {
    display: block;
    }
    #page-wrap {
    margin: 0px auto;
    background-color:black;
    }
    #fullHeader {
    margin: 65px auto;
    background-color:white;
    background-image:url(../images/headerRepeat.jpg);
    background-repeat:repeat-x;
    position:relative;
    }
    #Landscape-centered {
    background-image: url(../images/headerImage.jpg);
    background-repeat:no-repeat;
    background-position:center;
    height:405px;
    }
    #topBorder {
    background: url(../images/topBorder.png);
    background-repeat:repeat-x;
    height:21px;
    position:absolute;
    top:0px;
    width:100%;
    }
    #bottomBorder {
    background-image: url(../images/topBorder.png);
    background-repeat:repeat-x;
    height:21px;
    position:absolute;
    bottom:0px;
    width:100%;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    }
    #Tree-TextWrap {
    background-image:url(../images/paulStroudImage.png);
    background-repeat:no-repeat;
    height:357px;
    position:absolute;
    bottom:0px;
    right:10%;
    width:474px;
    }
    H1 {
    font-family:"Times New Roman", Times, serif;
    font-size:15px;
    font-style:italic;
    font-weight:100;
    }

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

You must be logged in to reply to this topic.

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