Hi,
Can anyone advise me how to achieve the centering of text links within an area of a gif image.
The idea is that the top gif image will have one text link inside, centred between the end of the 'upload multiple listings' and the right end of the gif.
The bottom gif image will have five text links inside which need to be also centred in the area between the end of the 'upload multiple listings' and the right hand side of the gif.
Here is my current code:
Here is the css:
You can see the current (wrong) result here:
What I really need is for the div_b_1_indent and div_b_2_indent to be positioned so that the divs themselves start at the position just after the end of 'upload multiple listings' and have a width until the end of the gif image; and I need to centre the text links within the area available.
Can anyone advise me how to achieve the centering of text links within an area of a gif image.
The idea is that the top gif image will have one text link inside, centred between the end of the 'upload multiple listings' and the right end of the gif.
The bottom gif image will have five text links inside which need to be also centred in the area between the end of the 'upload multiple listings' and the right hand side of the gif.
Here is my current code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="test-textinimage.css" rel="stylesheet" type="text/css">
</head>
<body>
<table border="0" cellspacing="20" cellpadding="0" class="t874">
<td class="div_b">
<span class="titext"><strong>Select one of the options below</strong></span>
<div class="div_b_1">
<div class="div_b_1_indent">
<a href="index2.php?mode=abc" ><span>Option 1</span></a>
</div>
</div>
<div class="div_b_2">
<div class="div_b_2_indent">
<a href="index2.php?mode=abc"><span>Option 2a</span></a>
<a href="index2.php?mode=def" ><span>Option 2b</span></a>
<a href="index2.php?mode=ghi" ><span>Option 2c</span></a>
<a href="index2.php?mode=jkl" ><span>Option 2d</span></a>
<a href="index2.php?mode=mno"><span>Option 2e</span></a>
</div>
</div>
<br><br>
</td>
</table>
</body>
</html>Here is the css:
Code:
td.div_b{
min-height: 80px;
background: url(elements/asb.gif) top left no-repeat;
background-color: #F4F3EE;
border: 1px solid #CDCDCD !important;
}
.div_b_1{
width:868px;
height: 45px;
background-color: #F4F3EE;
background: url(elements/01.gif) top left no-repeat;
}
.div_b_1_indent a{
width: 628px;
border-top: 55px;
border-left: 240px;
display: block;
float: left;
font-weight: bold;
text-align: center;
}
.div_b_2 {
width:868px;
height: 45px;
background-color: #F4F3EE;
background: url(elements/01.gif) top left no-repeat;
}
.div_b_2_indent a{
width: 628px;
border-top: 55px;
border-left: 240px;
display: block;
float: left;
font-weight: bold;
text-align: center;
}
table.t874{
width: 874px;
/*margin: 0px 63px 0px 63px !important;*/
}
span.titext{
display:block;
padding-left:50px;
color:#606060;
margin:10px;
line-height:28px;
}You can see the current (wrong) result here:
What I really need is for the div_b_1_indent and div_b_2_indent to be positioned so that the divs themselves start at the position just after the end of 'upload multiple listings' and have a width until the end of the gif image; and I need to centre the text links within the area available.
