jwhite68
02-20-2009, 01:41 PM
Hi,
I am trying to find the neatest way to align text links inside gif graphic borders.
The code is PHP based, and will use logic to control the number of text links displayed inside the graphic borders.
Also, the number of graphic borders with text links in is controlled by php code, since I sometimes show one graphic with options inside, and other times I show 2 graphics, each with different options (text links) inside. I should also point out that the graphic image will differ slightly - i.e. it isnt the same graphic file used as a border each time.
The following link shows the sample issue (here I use the same graphic border just to keep this simple):
http://www.varnarentals.com/test-textinimage.php
See how the text links are within the images.
The problem is that I dont want to use the div position:relative way I have done it currently, as I want a solution in the css file, and I also dont want to alter the current div_b class in the css file.
Also, the way it is currently implemented has large gaps between the gif images, and also at the bottom, which I dont want (and dont understand why they are there).
The code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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">
<? echo '<span class="titext"><strong>Select one of the options below</strong></span>'; ?>
<center><img src="elements/01.gif"></center>
<div style="position:relative; top:-100px; left:300px; width:250px; height:25px">
<a href="index2.php?mode=abc" ><span>Option 1</span></a>
</div>
<center><img src="elements/01.gif"></center>
<div style="position:relative; top:-100px; left:70px; height:25px">
<a href="index2.php?mode=abc"><span<?=$class1?>>Option 2a</span></a>
<a href="index2.php?mode=def" ><span<?=$class2?>>Option 2b</span></a>
<a href="index2.php?mode=ghi" ><span<?=$class3?>>Option 2c</span></a>
<a href="index2.php?mode=jkl" ><span<?=$class4?>>Option 2d</span></a>
<a href="index2.php?mode=mno"><span<?=$class5?>>Option 2e</span></a>
</div>
<br><br>
</td>
</table>
</body>
</html>
The css:
td.div_b{
min-height: 80px;
background: url(elements/asb.gif) top left no-repeat;
background-color: #F4F3EE;
border: 1px solid #CDCDCD !important;
}
td.div_b a{
display: block;
padding: 25px 0px 25px 80px;
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;
}
If anyone can advise/assist on how to get rid of the divs that perform the position:relative and use css to provide a better way of getting text links easily positioned within the graphic borders - it would be very helpful.
Thanks, Jon
I am trying to find the neatest way to align text links inside gif graphic borders.
The code is PHP based, and will use logic to control the number of text links displayed inside the graphic borders.
Also, the number of graphic borders with text links in is controlled by php code, since I sometimes show one graphic with options inside, and other times I show 2 graphics, each with different options (text links) inside. I should also point out that the graphic image will differ slightly - i.e. it isnt the same graphic file used as a border each time.
The following link shows the sample issue (here I use the same graphic border just to keep this simple):
http://www.varnarentals.com/test-textinimage.php
See how the text links are within the images.
The problem is that I dont want to use the div position:relative way I have done it currently, as I want a solution in the css file, and I also dont want to alter the current div_b class in the css file.
Also, the way it is currently implemented has large gaps between the gif images, and also at the bottom, which I dont want (and dont understand why they are there).
The code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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">
<? echo '<span class="titext"><strong>Select one of the options below</strong></span>'; ?>
<center><img src="elements/01.gif"></center>
<div style="position:relative; top:-100px; left:300px; width:250px; height:25px">
<a href="index2.php?mode=abc" ><span>Option 1</span></a>
</div>
<center><img src="elements/01.gif"></center>
<div style="position:relative; top:-100px; left:70px; height:25px">
<a href="index2.php?mode=abc"><span<?=$class1?>>Option 2a</span></a>
<a href="index2.php?mode=def" ><span<?=$class2?>>Option 2b</span></a>
<a href="index2.php?mode=ghi" ><span<?=$class3?>>Option 2c</span></a>
<a href="index2.php?mode=jkl" ><span<?=$class4?>>Option 2d</span></a>
<a href="index2.php?mode=mno"><span<?=$class5?>>Option 2e</span></a>
</div>
<br><br>
</td>
</table>
</body>
</html>
The css:
td.div_b{
min-height: 80px;
background: url(elements/asb.gif) top left no-repeat;
background-color: #F4F3EE;
border: 1px solid #CDCDCD !important;
}
td.div_b a{
display: block;
padding: 25px 0px 25px 80px;
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;
}
If anyone can advise/assist on how to get rid of the divs that perform the position:relative and use css to provide a better way of getting text links easily positioned within the graphic borders - it would be very helpful.
Thanks, Jon