Nice CSS header

Use photoshop to create background images.

Hi Triumph,

Thanks for you help, I know that I would need to create the backgrounds in in a graphics app, but would there be some css to determine the sections, i.e. don't put a rounded corner on the right hand side as it's not the end of the section it it's only part of a subsection?

It's hard to explain what I mean but basically if I was to place another comment in the header box, I'd only want it to place another "line" between it and the rest of the content.

Is there a way to do this OR would I have to create an image for the background of a certain size with the predetermined lines to divide sections? (and then encapsulate the image within rounded borders)?

Once again thanks for your reply...

If it's for a fixed-width layout, create one div for the top curve, one for the bottom and the one in the middle has lines that repeat vertically.

Just as a note, almost everything on that page I believe including the header is from a joomla component maker called Yoo Tools. much of their stuff is commercial but some is free.

Hi Tyssen,

Thanks for your reply, this is what I was thinking... I don't suppose you've got a quick example? Nothing fancy just an example of the code involved, or if you know of a site that uses it with css available?

Thanks again...

Well the main content area on this site is kinda like that except that the divs holding the top and bottom images are nested inside the div that holds the image for the sides and are placed with absolute positioning.

Hi Tyssen,

I'm sorry to ask for further explanation but I can't see how I make a sectional css solution that will give me rounded edges on the outer sections and lines to between each section within?

I've looked everywhere on the web and I can't even find another site that's done it!

Thanks...

Sounds like you should just hire Tyssen to do it for you.

haha I couldn't think of a better idea, or maybe yourself? Do you posess the knowledge to overcome such a task?! I'm sure you do, to be honest I'm just trying to learn I'm not doing it for any particular site or anything.

Anyway if you can help then and you don't mind putting in the time to reply that would be amazing but otherwise I appreciate all the replies...

oh I meant to say, I have found other variations of the same thing but they've used a whole background picture to achieve the same result I kinda think that's cheating but I suppose if it gives you what you want, why not? but not very flexible, if a new section came into the mix you'd have to re-create the background image...

Did you look at the link? It does just that.

Yes I looked at the site, unfortunately it doesn't allow you to download the site to take a look? does it? However, I have managed to sort of get what I was after, I used the float method, the only problem is when on of the sections is larger than the other it goes funny!! I think I'd need to create a background and then have divs within in it for the text and put the section lines within the text divs, does that sound right?

I'll keep trying though, I mean I could just create a jpeg background and be done with it but I'm determined to get it working now!

Thanks for all your help...

The code below works in IE, but not in Opera and I don't reckon it will in Mozilla... It creates a rounded box with sections inside it, as I say it works great in IE? The floats don't work in Opera? Can you not put floats within a another div or something?

BODY {
BACKGROUND: #eff2f3
}
#liquid-round {
BACKGROUND: url(leftside.gif) #fff repeat-y left top; MARGIN: 0px auto; WIDTH: 70%
}
.top {
BACKGROUND: url(top.gif) no-repeat left top; WIDTH: 100%; HEIGHT: 20px
}
.top SPAN {
DISPLAY: block; BACKGROUND: url(top-right.gif) no-repeat right top; POSITION: relative; HEIGHT: 20px
}
.center-content {
PADDING-RIGHT: 20px; PADDING-LEFT: 25px; BACKGROUND: url(rightside.gif) repeat-y right top; PADDING-BOTTOM: 1px; MARGIN: -1px 0px -50px; PADDING-TOP: 1px;
}
.left-content {
width: 300px; BACKGROUND: url(rightside.gif) repeat-y right top; MARGIN: -1px 0px -50px; FLOAT: left; position:relative;
}
.right-content {
width: 300px; BACKGROUND: url(rightside.gif) repeat-y right top;MARGIN: -1px 0px -50px; FLOAT: centre; position: relative;
}
.bottom {
BACKGROUND: url(bottom.gif) no-repeat left bottom; WIDTH: 100%; HEIGHT: 60px
}
.bottom SPAN {
DISPLAY: block; BACKGROUND: url(bottom-right.gif) no-repeat right top; POSITION: relative; HEIGHT: 60px
}
P {
MARGIN: 0px 0px 1em
}

I've specified the height for the divs and it seems to work ok now... Well there's more to sort but I'm getting there!!!