Skip navigation
Currently Being Moderated

Div Problem

Apr 26, 2012 2:10 AM

Dear All,

I am try to place a some content over the picture bottom strip of image (blue area) how can i do. I am try to do but gap is came in please help thisout?

WEB LINK

 
Replies
  • Currently Being Moderated
    Apr 26, 2012 2:21 AM   in reply to manojb05

    Try to change your css as follow:

     

     

    #div1 {

     

         height: 124px;

        position: relative;

        width: 960px;


    }

     

    #div1a, #div1b, #div1c {

        position: absolute;

        top: 46px;

    }

    #div1a {

        height: 15px;

        left: 115px;

        width: 120px;

    }

    #div1b {

        height: 15px;

        left: 449px;

        width: 120px;

    }

    #div1c {

        height: 15px;

        left: 743px;

        width: 200px;

    }

    Now #div1 has position:relative, that means other three div relate to this parent div so the content doesnt go outside of the container div

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 26, 2012 2:22 AM   in reply to manojb05

    Not the best way of achieving this manoj (see code below)

     

    Personally I would insert each image in it's own floated <div> and use the blue bottom curve image as a background to each <div>. That way if the text spread to two lines the blue curve would move down with it.

     

     

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

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Untitled Document</title>

    <link href="untitled.css" rel="stylesheet" type="text/css" />

    <style>

    #div1 {

        height: 124px;

        width: 960px;

        position: relative;

    }

    #div1a {

        height: 15px;

        width: 120px;

        float: left;

        margin-left: 100px;

    }

    #div1b {

        height: 15px;

        width: 120px;

        float: left;

        margin-left: 200px;

    }

    #div1c {

        height: 15px;

        width: 200px;

        float: left;

        margin-left: 200px;

    }

    #wrapper {

        position: absolute;

        top: 105px;

    }

    </style>

    </head>

     

    <body>

    <table width="960" border="0" align="center" cellpadding="0" cellspacing="0">

      <tr>

        <td><div id="div1"><img src="corporate-copy.jpg" alt="" width="960" height="124" border="0" />

        <div id="wrapper">

        <div id="div1a">Content One </div>

    <div id="div1b">Content Two</div>

    <div id="div1c">Content Three</div>

             </div>

        </div></td>

      </tr>

    </table>

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 26, 2012 3:41 AM   in reply to manojb05

    manojb05 wrote:

     

    thnaks MR & OS.

    OS its working fine, can i taken any precuation for IE, Firefox, Safari (alignment things) because after completion of web i am apply language TRANSLATION different language taken different type of spacing.

     

    Only the alternative method which I described above will ensure that the text remains within the blue area below the image.

     

    The way youre approaching it now is a bit hit and miss and reliant on luck

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points