Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    100% div with rounded corners

    I've been searching for a solution to this for about a week now so maybe someone can help with this.

    I'm trying to create an effect of rounded corners on a page heading so am using 3 divs to do this:

    PHP Code:
    <div class="left"></div>
    <
    div class="centre"><h1>Page header</h1></div>
    <
    div class="right"></div
    with the styles:
    PHP Code:
    .left
    {
        
    background-imageurl(images/css/pageHeaderLeft.gif);
        
    background-repeatno-repeat;
        
    width12px;
        
    height31px;
        
    floatleft;
    }
    .
    centre
    {
        
    background-imageurl(images/css/pageHeaderCentre.gif);
        
    background-repeatrepeat-x;
        
    padding0px 0px 5px 0px;
        
    height31px;
        
    widthauto;
        
    float:left;
        
    border1px solid #000000;
        
    left0px;
        
    right12px;
    }
    .
    right
    {
        
    background-imageurl(images/css/pageHeaderRight.gif);
        
    background-repeatno-repeat;
        
    width12px;
        
    height31px;
        
    floatright;

    The idea is to have the header take up the full 100% of the containing div for that section of the site.

    The problems are:
    In IE, the right hand side image appears on a line by it's own below the other two. I had thought that setting the float to be 'left' on this would stop it happening but, alas, no.

    In Firefox, the items all apear on the same line as desired but the background on the centre div only extends for the length of the text so I'm getting a large white space in the middle.

    I tried setting the right hand corner's div tag to float left but all this didn't have any effect in IE other than moving the item to the left of its own line and, in Firefox, closed up the white space but made the image sit to the left.

    Setting the width of the centre div to be 100% just puts it on its own line, filling the whole 100% which is also no use.

    The middle image has a drop shadow (I'll add that this isn't my design, it's just the spec I've been given) so I can't just use a background colour as the backing of the centre div.

    I'm really trying to avoid reverting back to tables to do this so any suggestion would be most welcome.

    Thanks,

    K

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Sliding doors

    You may want to take a look at Doug Bowman's article on A List Apart, Sliding Doors of CSS; look at layering element backgrounds to create a seamless background effect rather then tiling elements next to eachother -which is an exact transposition of how tables used to be employed...
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    New Coder
    Join Date
    Feb 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Magic, cheers for pointing that out. Got some ideas from the code and got everything working.


  •  

    Posting Permissions

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