"Fluid" Header?

[Kami]

....not exactly. Er, not entirely sure how to describe it. Basically, I'm trying to work out how to do the (simple I'm sure) mockup I made for someone. I've got the "content" part figured out, it's just the banner bit. Here's the mockup: i51.tinypic.com/jue78l.jpg

What I was wanting is to have a bit of the dark grey header (with the red & black bars at the bottom) repeat left and right from the header/banner image dependent on the user's resolution. It's currently modelled so that the lowest resolution setting is 1024 width (hoping no one uses 800 D:), so if I could get a bit of help with it, I'd appreciate.

I've got a rudimentary grasp of HTML/CSS, so hopefully we can stick to those.

Thanks in advance, if anyone helps. xD

[proseth]

Well, in my opinion, you're best off just making the header in to two separate images. One image should be the background of the dark gray header (including the bar) and the other image should be the "logo" that lays on top of it. Then you'll basically set the first image as the background of a div and use CSS to make it repeat, and you can just use the other image in an img tag or whatever you like.

Does that make sense to you? If not I can perhaps write out the code or explain it in another way

[Kami]

Nov 13, 2010 22:36:55 GMT -8 @proseth said:

Well, in my opinion, you're best off just making the header in to two separate images. One image should be the background of the dark gray header (including the bar) and the other image should be the "logo" that lays on top of it. Then you'll basically set the first image as the background of a div and use CSS to make it repeat, and you can just use the other image in an img tag or whatever you like.

Does that make sense to you? If not I can perhaps write out the code or explain it in another way

No, that makes sense. (not that I know how to do it. =X). I guess my hesitation with that is the bird on the 'main' part is a bit cut off on the bottom, and I'm worried that it'll show. :[

Also, the menu's a little weird, so.. xD IDK how to do that either. I'm guessing a floating div of some sort...?

[proseth]

Yeah you'd just have a div with the menu I guess. In the previous post I told you two images but now that I think about it more you'll actually probably have to splice that mockup into several images.

Think of each div as a placeholder and in the first div you'd not necessarily need to put an image, but just the color of the dark gray background. Then within that div you could put an image. That image would be the "logo" spliced from above the black bar (so the bottom of that image would be right below the big header text).

Then you'd have another div below that has a background image set to the black bar repeating across the x-axis. Within this div you'd have an image - this image would be the "logo" spliced to just the portion that would normally overlap the bar (the raven's beak).

Then you'd have a div below that, with its background set to transparent (make sure to set the body background to the lighter gray). Set the background image to the bottom of the beak, or you can just place an image with the bottom of the beak. Make a div inside of this div and put the menu links inside of here. You can either do image links (<a><img></a>) or you can make a list and collapse it with CSS (you can see how to do this here).

If you have any questions feel free to ask, I'd help more but I'm going to bed now but I'll definitely check back tomorrow

[Kami]

I actually have no clue how to splice. xD I was just going to make/save multiple images at a time. I think I'll fiddle around with the two images, first, and see how that works. If it doesn't, or doesn't well, then I'll attempt your second suggestion. :]

Thanks for taking the time to reply, by the way.

edit; oh, and if anyone has other ideas, I'd love to hear them. :]

[iDunk]

If it were me...

• The only parts of the header (not including the nav) that need to be images are the raven, "Ravens Wrestling" text, and the border. The border would only need to be a couple of pixels wide, and use CSS background-repeat: repeat-x; to stretch it wide. The Bird would then be placed in a floating div (using an absolute pixel number from the top, and a percent from either side). The background since it is all one color, can be placed with CSS background-color in the container for the header.
  
• For the nav, I'd create a DIV container that floats with an absolute y distance and a percent from the right. Inside that container, I'd have each menu item as a separate image, and one image of the mini raven to be reused between each item. I think you could then set all of the images inside that container to space themselves out (using say a left margin of 5 or so pixels).
  
• Also, for the content, I'd just use this method for the rounded corners, and set the background color with CSS. No images, other than actual photos needed.
  

Hope something there helps. ;D

[xcessive]

Something along the lines of this for the banner:

<div style="width:100%; height:WHATEVERpx; text-align:center: background-image:url(banner background image); position:aboslute; top:0px; left:0px"><img src="banner logo image" /></div>