SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning 2 corner images inside a div or element

    Hi,

    I am trying to create a div with a header. The header has background colour blue.

    I would like to position two round corner images on the left and right sides of the header to give it a better look. I need these images to be separate (rather than one single image for the whole header), because on text resize the div stretches horizontally. Also they need to be vertically aligned top for when the height of the header increases on font resize.

    Can anyone recommend a good code to do this?

    thanks,

    DH

  2. #2
    Incoherent drivel since 1975 Zopester's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A few options available here:
    http://webweaver.org/dan/css/corners/

    Alternatively, a precursor to the CSS3 property "border-radius" (which will do exactly what you want without having to use images) is "-moz-border-radius", which obviously only works in Mozilla-based browsers. Google it to see what you find.

    Hope this helps
    Recommended Reading:
    Why we won't help you - An article by Mark Pilgrim.

    http://www.zopester.com - Coming Soon!

  3. #3
    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 think the easiest way is to put the left image into the background of the div and then float the other image to the right of the div. (You could also absolutely position the image to the right of the div as well as long as the parent div has a position of relative (or absolute)).

    Obviously it will need a bit of fiddling around with but I'm sure it will achieve the effect you desire.

    Paul

  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)
    Hi,

    Here's a quick example.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    body {
     text-align: center;
     margin: 0px;
     padding: 0px;
    }
    h1 {
     font-size: 150%;
     color: #666666;
     background-color: #FFFFCC;
     background-image:  url(img.gif);
     background-repeat: no-repeat;
     background-position: left top;
     height: 50px;
     width: 600px;
     margin-top: 5px;
     margin-right: auto;
     margin-left: auto;
    }
    h1 img {
     float:right;
    }
    -->
    </style>
    </head>
    <body>
    <h1><img src="img.gif" width="10" height="50" />Heading</h1>
    </body>
    </html>
    If the right float may stop the heading being centred then you can always absolutely position the right image (change h1 img style to this: position:absolute;right:0px and then add position:relative; to the h1 style).

    The above assumes that you are just placing a single image to the left and a single image to the right.

    Hope this helps.

    Paul

  5. #5
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Zopester,

    thanks, unfortunately the second solution as you say is not cross browser. I have looked into the first solution you gave, however it seems to split images on the top and everything else on the bottom. I need to align everything horizontally, ie:

    cornerimage TEXT cornerimage

    rather than

    cornerimage cornerimage
    TEXT

  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)
    Hi,

    I've had a quick look , It might be the padding you've put on the h1 stopping it from floating fully to the right. (padding: .15em

    That's just my first thought.

  7. #7
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    the padding did create the problem, however can you suggest a way of preserving the padding for the text without altering the position of the image?

    DH

  8. #8
    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,

    The easiest way would be to stick a <p> tag inside the h1 tag and then apply the padding to the <p> tag instead. (Whether that's allowed I 'm not sure but it works!)

    (I suppose the proper way to do it would be to change the h1 to a div with a class and then put the <p>inside).

    Alternatively you could try the method I mentioned above of absolutely positioning the right image.

    Something like:
    Code:
    h1 img {
     position:absolute;right:0px;top:0px;
    }
    And then you would need to add this to the h1 style:

    Code:
    h1 {position:relative;}
    You do not need to supply co-ordinates for the relative position so it won't change anything. It's just a technique for creating a parent div for the absolutely positioned image to refer to.

    Either of these techniques should work

    Paul

  9. #9
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    thanks, I have tried both methods but:

    Method 1: breaks the image. Is there a no break element for the <p> tag?
    Method 2: resolves partially the problem but brings the image to another part of the page ?!?

    any suggestions?

    DH

  10. #10
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Solved, thanks Paul, I put the <p> before the image. That seems the only solution for my layout, unless it is really bad css which makes me think of validation. Here I come:

    http://jigsaw.w3.org/css-validator/

  11. #11
    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,

    Glad you sorted it, but to validate you will probably need to change the h1 to a div with a class which would make more sense. (call it .head1 or something). You should be able to use the same style definitions etc.

    Method 2: resolves partially the problem but brings the image to another part of the page ?!?
    You have to make sure the parent element has a position property of relative otherwise the image will get placed in relation to the body (or the nearest ancestor with a position property other than static).

    Paul


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
  •