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?
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
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>
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
North America
Europe, Middle East and Africa
Asia Pacific