Do I HAVE to use a table here?

[Acid]

Peace,

Do I HAVE to use a table to achieve the look on the bottom of the page in the blue section with text on one side and the image on the other?

http://audiclean.com/beta/index.html

In other words how would you do it?

PHP Code:

<table width="100%">
                  <tr>
                    <td width="98%"><span class="bottomblue"><font size="3" color="#FFFFFF">&#9702; 
                      Clinically <b>proven</b> efficacy</font> </span> <br>
                      <span class="bottomblue"> <font size="3" color="#FFFFFF">&#9702; 
                      <b> Does not irritate</b> the delicate ear canal</font> 
                      </span> <br>
                      <span class="bottomblue"> <font size="3" color="#FFFFFF">&#9702; 
                      <b>Naturally sourced ingredients</b></font> </span> <br>
                      <span class="bottomblue"> <font size="3" color="#FFFFFF">&#9702; 
                      <b>Easy to use</b></font> </span> <br>
                      <span class="bottomblue"> <font size="3" color="#FFFFFF">&#9702; 
                      <b>Safe </b>for adults and<b> children</b></font> </span> <br>
                      </td>
                    <td width="1%">&nbsp;</td>
                    <td width="1%"> 
                      <div class="tv"> <a href="tvc.html"><img src="images/tv-ad.gif" width="84" height="120" border="0" alt="tv ad logo"></a> 
                      </div>
                    </td>
                  </tr>
                </table> 


[Acid]

Here is the code from my style sheet

PHP Code:

.bottomblue {   
padding-right: 3.5em;   
padding-top: 0px;   
margin:5px;   
}    
html>body .bottomblue {   
padding-right: 3.5em;   
padding-top: 0px;   
margin:15px;   
}  
.bigbluetext {   
position:relative;    
top: 0px;    
right: 5px;   
text-align:right;  
 }  
.bigbluetextlow {   
position:relative;    
top: -10px;    
right: 5px;  
text-align:right;   
letter-spacing: 2px;  
 } 
.bigbluetextlow2 {   
position:relative;   
top: -20px;    
right: 5px;   
text-align:right;   
letter-spacing: 2px;  
 } 


[IcIshoot]

nope.. you can use a DIV and just position it using css.

Not sure the best way to position it though. On one of my projects I'm using absolute positioning and specifying where I want it via the x/y coordinates.

[Acid]

I thought so, I'm gonna try it out...

[Acid]

I need to define the image source in the css...

[Acid]

Here is the page I'm using to test this.

http://audiclean.com/beta/index-2.html

[atholon]

You can put the text in <p> tags or a div and then float the image right.

<p class="paragraphCrap">
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
</p>
<img src="myIMAGE.gif" class="tvImage">

.tvImage
{
float: left;
}
.paragraphCrap
{
float: right;
}

[atholon]

Originally posted by icishoot
nope.. you can use a DIV and just position it using css.

Not sure the best way to position it though. On one of my projects I'm using absolute positioning and specifying where I want it via the x/y coordinates.

You could do absolute positioning as well.

<div id="someContainer">
<p id="paragraph">
<ol>
<li>Clinically proven efficacy</li>
<li>Does not irritate the delicate ear canal</li>
<li>Naturally sourced ingredients</li>
<li>Easy to use</li>
<li>Safe for adults and children</li>
</ol>
</p>
<a href="/beta/tvc.html"><img src="/images/tv-ad.gif" alt="TV Ad Picture" id="tvad">Click Here for the TV Ad!</a>
</div>

CSS:
#someContainer{position: relative;}
#tvad
{
  position: absolute;
  left: 201px;
}
#paragraph
{
  position: absolute;
  width:200px;
  left: 0px;
}

[atholon]

The problem with absolute positioning and floating is that it will not expand a div or wrap the text inside the div.

You have to force the div to be a certain height.

In some cases tables are the best option. You just shouldn't use them all over the place (what a mess).

[Acid]

the positioning was only for the tv ad image

And there is no text for the tv ad. Its just a picture that links to the tv ad page

[atholon]

Oh Just looked at it really fast.

[Acid]

But what I get from what you are saying is that although I could do the same thing without tables, it is ok to use them in this instance?

[atholon]

Yeah. Sometimes the CSS isn't worth it.

Just try to use them for the right purpose (displaying data)

If you look at my site you can see that I use them in a few places. Not all over though.

[Acid]

Thank you man.

Now I'm wondering how to deliver it using php.

[atholon]

That is trickier