Forums

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.

springlab

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?

<div id="fullHeader">
  <div id="Landscape-centered"> </div>
  <div id="bottomBorder"> </div>
  <div id="topBorder"> </div>
  <div id="Tree-TextWrap"><H1>Text</H1> 
  </div>
</div>

* {
	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;
}

treehouse : what would you like to learn today?

Forums

Novice needing info on layout