Background

[A User]

I don’t know why I do this to myself, but I’ve created a design I’m not sure how to finish coding.

http://twicebakedfx.com/temp/PSDconcept.png

The part with the kittens. If I hadn’t made it dent into the gray background, I’d just do this or something similar:

#gray { position: absolute; top: 680px; width: 100%; border-top: 10px solid #a8a8a8; }

Here’s the test page: http://twicebakedfx.com/temp/xtreme

What would be the best way to make that indent?

[TheDoc]

If that’s going to be a fixed height I don’t think it’d be too bad. I would just make the round corner border in PS and export as png-24. Then absolutely the entire div up a bit from the who are we div area. That div will have a top border that gets partially covered by the kitten div.

That is a poor explanation, but hopefully you’re picking up what I’m laying down.

[A User]

The gray part I wasn’t planning on being a fixed height. Optimally, it would just be an elastic div. But I kind of see what you’re suggesting. I could make two divs, one would be a background with the round borders and really long edges on the left and right, the other would be right below it.

Like this

---

______/

---

div 1 – background image, no-repeat
___________________

div 2 – background color – 100% width
___________________

idk if this is what you meant, but it could work. Thank you. (:

[snelafvallen]

the second lay out is beautiful.

[A User]

I’ll probably end up doing individual wrappers so that the parts that need to stretch will be able to without interfering with others.

The slider won’t be on every page, it’s specific to the home page. But it’s not actually part of the header, it’s in its own wrap. I do see what you mean, though. I’ll have to figure out what to do with the other pages.

[Author]

Posts