SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Dec 2003
    Location
    uk
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to achieve this ?

    Hi

    I want to create a box in css but on the top part I want the flexibility of having a different color to the rest of the box. I see this technique and example can be found in this website: http://www.cooptravelshop.co.uk/
    The box in the middle is what i want to achieve. I ve seen a few example of rounded corners but i want the top of the box to look different so i can put a title. any idea how to achieve this? are there any examples tutorials i can find?

    thanks in advance

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Its just basic css really and you will just need to supply different coloured images for the top section.

    Have a look at this sitepoint tool for and easy to follow method.

    http://tools.sitepoint.com/spanky/

    You should be able to identify where the top and top right corners go and change the images to suit the background color of that section.

    The site you linked to simply applies the whole top section in one go. i.e. it uses this image. If you have a fixed width element then you can simply apply that image to your heading. You just then cap the bottom of the section with the bottom rounded image section.

    There is nothing special about rounded corners except that they are a bit fiddly of you want fluid width corners on different backgrounds.

    Alternatively look at one of the javascript options to automate the process.

    http://www.html.it/articoli/nifty/index.html

  3. #3
    SitePoint Evangelist
    Join Date
    Dec 2003
    Location
    uk
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. Will that tool allow me to apply different background color to the top of the box different to the rest of it? so it can look like the example on the website link.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I'm sure if you experiment with it you will get the results you want.

    You will just have to use one element at the top for the different color. Its no different than having two rectangular boxes of different color.

    Have a play around with it and if you can't do it then post back with the code you have tried (or a link to your example) and you will get more specific pointers.

  5. #5
    SitePoint Evangelist
    Join Date
    Dec 2003
    Location
    uk
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I tried to use the generator on that page, but the page doesn t render properly and i read on the article that it has bugs which they are trying to fix. are there any other resources. i want sth flexible so I can control it. also i m looking at having rounded lines on the top, not sure if you need to use an image.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    also i m looking at having rounded lines on the top, not sure if you need to use an image.
    If you want rounded lines then you will need to use an image as only a few browsers support the border-radius properties.

    I have an example here which with a quick change of code can be converted to this which is originally taken from this article.

    However you do need to know your way around a CSS layout to do this as there are a number of concepts to understand so study the article thoroughly and then you can do it yourself


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •