14 replies [Last post]
acidman
Offline
newbie
Last seen: 14 years 34 weeks ago
Joined: 2008-06-13
Posts: 9
Points: 0

Can anyone tell me how to create a nice css header like that of the one at http://www.ultragraph.co.uk/

I know how to create nice rounded borders but how would you get the nice thin lines to separate content? I only know how to create a box with some text in, not how to create a long box with lines to separate content...

I hope someone can help me, and hope that I've made myself clear!!! Thank you...

Triumph (not verified)
Anonymous's picture
Guru

Use photoshop to create

Use photoshop to create background images.

acidman
Offline
newbie
Last seen: 14 years 34 weeks ago
Joined: 2008-06-13
Posts: 9
Points: 0

Hi Triumph, Thanks for you

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...

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 17 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

If it's for a fixed-width

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ryankn
Offline
newbie
Last seen: 13 years 17 weeks ago
Timezone: GMT-4
Joined: 2008-06-14
Posts: 7
Points: 2

Just as a note, almost

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.

acidman
Offline
newbie
Last seen: 14 years 34 weeks ago
Joined: 2008-06-13
Posts: 9
Points: 0

Hi Tyssen, Thanks for your

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...

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 17 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Well the main content area

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

acidman
Offline
newbie
Last seen: 14 years 34 weeks ago
Joined: 2008-06-13
Posts: 9
Points: 0

Hi Tyssen, I'm sorry to ask

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...

Triumph (not verified)
Anonymous's picture
Guru

Sounds like you should just

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

acidman
Offline
newbie
Last seen: 14 years 34 weeks ago
Joined: 2008-06-13
Posts: 9
Points: 0

haha I couldn't think of a

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...

acidman
Offline
newbie
Last seen: 14 years 34 weeks ago
Joined: 2008-06-13
Posts: 9
Points: 0

oh I meant to say, I have

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...

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 17 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

acidman wrote:I can't see

acidman wrote:

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?

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

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

acidman
Offline
newbie
Last seen: 14 years 34 weeks ago
Joined: 2008-06-13
Posts: 9
Points: 0

Yes I looked at the site,

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...

acidman
Offline
newbie
Last seen: 14 years 34 weeks ago
Joined: 2008-06-13
Posts: 9
Points: 0

can anyone understand this?

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
}

acidman
Offline
newbie
Last seen: 14 years 34 weeks ago
Joined: 2008-06-13
Posts: 9
Points: 0

Think I've sorted it...

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!!!