Novice needing info on layout

[shavenraver]

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

[soap]

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

[davidlab.be]

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

[chrisburton]

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?

[shavenraver]

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?

 


 


 


Text

* {

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;

}

[Author]

Posts