Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Aligning text links within gif image borders

    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:

    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:

    Code:
    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

  • #2
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    This is causing space between images

    Code:
    <table border="0" cellspacing="20" cellpadding="0" class="t874">
    Really you should use the images as a background instead.

    http://www.cssjuice.com/25-rounded-c...ques-with-css/

    Here are a bunch of CSS options that use images as backgrounds.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #3
    New Coder
    Join Date
    Jun 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I dont quite get why. As the images are within the same cell (within same td). So I didnt think this cellspacing would affect it.

    I will take a look at this though, but think it might screw up other things, since this cellspacing does control the space between the sections (you see this is section 'B' with a graphic showing 'B' in the left corner. ) I also have an 'A' section before it and a 'C' section after, and I believe the cellspacing controls that.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    If that image is just for styling, then it should be used as a background image of a div or something in CSS. And then you can easily put those links inside that div.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Jun 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, I would like to achieve the styling with this - I just dont know how to do it!

    Would it be a td.div_b div_new in the css, or would I create a new td.div_new, where this div has the graphic as a background?

    I just dont understand how css works enough, so if you have some pointers.

  • #6
    New Coder
    Join Date
    Jun 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have tried with the following changes to the css:

    Code:
    td.div_b div_b_1 {
        background: url(elements/01.gif) ;
    }
    td.div_b div_b_2 {
        background: url(elements/01.gif) ;
    }
    And the following changes to the code:

    Code:
    <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>';  ?>
    			<div  class="div_b_1">
    			  <a href="index2.php?mode=abc" ><span>Option 1</span></a>
    			 </div>
    			 <br>
    			 <div  class="div_b_2" >
    			 <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>
    Basically, the td class div_b now has div_b_1 and div_b_2 within it, and these are supposed to display the background gifs, with the text links inside.

    It doesnt display the background gif's at all. Can anyone see what I am doing wrong?

  • #7
    New Coder
    Join Date
    Jun 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I almost have it there now. Just the text links for the lower gif border should fit inside the gif border. Anyone got any suggestions?

    Heres the latest code:

    Code:
    <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">
    			  <a href="index2.php?mode=abc" >Option 1</a>
    			 </div>
    			 <div class="div_b_2">
    			 <a href="index2.php?mode=abc">Option 2a</a>
    			 <a href="index2.php?mode=def" >Option 2b</a>
    			 <a href="index2.php?mode=ghi" >Option 2c</a>
    			 <a href="index2.php?mode=jkl" >Option 2d</a>
    			 <a href="index2.php?mode=mno">Option 2e</a>
    			 </div>
    			 <br><br>
      </td>
    </table>
    And heres the up to date 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{
    	min-height: 45px;
    	background-color: #F4F3EE;
        background: url(elements/01.gif) top left no-repeat;
    }
    .div_b_1 a{
        display: block;
    	padding: 8px 0px 0px 240px;
    	float: left;
    	font-weight: bold;
    	text-align: center;
    }
    .div_b_2 {
    	min-height: 45px;
    	background-color: #F4F3EE;
        background: url(elements/01.gif) top left no-repeat;
    }
    .div_b_2 a{
        display: block;
    	padding: 8px 0px 0px 240px;
    	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;
    }
    Take a look at how it is now:

    http://www.varnarentals.com/test-textinimage.php

    Its only looking 'almost there' in Firefox. In IE, it looks completely wrong.

  • #8
    New Coder
    Join Date
    Jun 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What I basically need to know, is how to set some form of margin for text - so that text begins just after the 'upload multiple listings' part of the gif border - and the end of the margin is the right hand end of the gif border. Then I want all the text links to be centred in that area.

    Anyone know how to do that? I thought 'padding' itself was the answer, but it doesnt seem to be.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •