help needed with changing td background with css and php

spindriftmed · August 25, 2007

hi guys,

the main layout of my websites is in a file called main.php. the main layout is constructed of a table and one of the cells has a background image which i would like to change to a specific image depending on which page is loaded.

PHP Code (main.php):

<?

$strClassType = "defaultPage";

if(isset($_GET["page"]))

{

$intPageType = $_GET["page"];

switch($intPageType)

{

case "Home": {$strClassType = "home";} break;

case "Portfolio": {$strClassType = "portfolioPage";} break;

default: {$strClassType = "defaultPage";} break;

}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Visual Identity</title>

</head>

<tr>

<tr>

</a><a href="main.php?pagename=portfolio" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('portfolio','','images/main/nav_over_02.gif',0)"><img src="images/main/nav_02.gif" name="portfolio" width="110" height="13" border="0" id="portfolio" /></a><a href="main.php?pagename=dyo" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('design','','images/main/nav_over_03.gif',1)"><br />

</a><a href="main.php?pagename=decals" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('decals','','images/main/nav_over_04.gif',1)"><img src="images/main/nav_04.gif" name="decals" width="110" height="14" border="0" id="decals" /></a><br />

</tr>

<tr>

</tr>

</table></td>

<tr>

</td>

</tr>

</table></td>

</tr>

</table>

<tr>

</map>

</td>

</tr>

</table>

</body>

</html>

...and this is what style.css looks like:

Code (style.css):

body{

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

color: #CCCCCC;

background-color: #666666;

margin-top: 62px;

scrollbar-3dlight-color: #666666;

scrollbar-arrow-color: #666666;

scrollbar-darkshadow-color: #666666;

scrollbar-face-color: #666666;

scrollbar-highlight-color: #666666;

scrollbar-shadow-color: #666666;

scrollbar-track-color: #666666;

}

a:link {

color: #CCCCCC;

text-decoration: none;

}

a:visited {

text-decoration: none;

color: #CCCCCC;

}

a:hover {

text-decoration: none;

color: #E4E4E4;

}

a:active {

text-decoration: none;

color: #CCCCCC;

}

.imageborder{

border:2px solid #CCCCCC;

width: 100px;

height: 79px;

}

.titles { color: #CCCCCC; font-weight: bold; font-size: 12px;}

.homePage

{

// Other Stuff

}

.portfolioPage

{

// Other Stuff

}

.defaultPage

{

// Other Stuff

}

can anyone see why no image is appearing at all? ive tried messing around with the css by putting things like:

td.homePage and using background-image: url('images/main/home.gif'); but the background image just doesnt ever appear.

thank you for any help which would be much appreciated.

all the best,

mark

wildteen88 · August 25, 2007

bankground-image should be formatted like so:

background-image: url(path/to/image);

/* NOT - background-image: "path/to/image"; */

spindriftmed · August 25, 2007

hi there,

thank you so much for the reply, thats great.

now i can get an image to appear for the background but it is just the default everytime.

im assuming it is something to do with the logic at the top of main.php or maybe my button links which are main.php?pagename=home etc.

do you have any ideas by any chance?

thanks again for all your help, much appreciated.

all the best,

mark

Jessica · August 25, 2007

I think you need to learn more about CSS

spindriftmed · August 25, 2007

hi there,

thanks for the reply...

so its definately something to do with the css? any clues as to what it could be?

thanks again and take care,

mark

Jessica · August 25, 2007

I'd have to see the new CSS file.

Post it within code tags!

spindriftmed · August 25, 2007

hi,

thanks again, the css looks like:

body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CCCCCC;
background-color: #666666;
margin-top: 62px;
scrollbar-3dlight-color: #666666;
scrollbar-arrow-color: #666666;
scrollbar-darkshadow-color: #666666;
scrollbar-face-color: #666666;
scrollbar-highlight-color: #666666;
scrollbar-shadow-color: #666666;
scrollbar-track-color: #666666;
}
a:link {
color: #CCCCCC;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #CCCCCC;
}
a:hover {
text-decoration: none;
color: #E4E4E4;
}
a:active {
text-decoration: none;
color: #CCCCCC;
}
.imageborder{
border:2px solid #CCCCCC;
width: 100px;
height: 79px;
}
.titles {	color: #CCCCCC;	font-weight: bold; font-size: 12px;}
.homePage{background-image: url(images/main/home.gif);}
.portfolioPage{background-image: url(images/main/portfolio.gif);}
.defaultPage{background-image: url(images/main/panel_r.gif);}

Jessica · August 25, 2007

It looks fine - do you have a link to the page live, maybe that will help?

spindriftmed · August 25, 2007

http://www.spindriftmedia.com/clients/visualidentity/test/main.php?pagename=home

thank you!

Jessica · August 25, 2007

I don't see a problem with it...what do you mean it is the default everytime?

The site looks .. fine.

spindriftmed · August 25, 2007

the class of the the table cell in question is always class="defaultPage" on every page.

could it be anything to do with the fact that im linking to each page with $pagename?

wildteen88 · August 25, 2007

These two lines:

if(isset($_GET["page"]))
{
$intPageType = $_GET["page"];

Should be:

if(isset($_GET["pagename"]))
{
$intPageType = $_GET["pagename"];

You are using ?pagename in your url's to identify the page and not ?page

spindriftmed · August 26, 2007

hi there,

thank you so much for all the valuable info and your time.

below is my code for main.php. my links look like main.php?pagename=home but ive changed the 'page' in the logic to say 'pagename' and changed homePage to say home. still the default appears every time. am i just being plain stupid?

thank you again, i owe you one for this!

mark

Code:

[color=red]<?
$strClassType = "defaultPage";
if(isset($_GET["pagename"]))
{
$intPageType = $_GET["pagename"];
switch($intPageType)
{
case "Home": {$strClassType = "home";} break;
case "Portfolio": {$strClassType = "portfolio";} break;
default: {$strClassType = "defaultPage";} break;
}
}

?> [/color]
<!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=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="javascript.js"></script>
<title>Untitled Document</title>
</head>
<body onload="MM_preloadImages('images/main/nav_over_01.gif','images/main/nav_over_03.gif','images/main/nav_over_04.gif','images/main/nav_over_05.gif','images/main/nav_over_06.gif')">
<table height="430" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="204" height="152" align="right" valign="bottom" background="images/main/panel_l.gif"><table border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td><a href="[color=red]main.php?pagename=home[/color]" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/main/nav_over_01.gif',1)"><img src="images/main/nav_01.gif" name="home" width="110" height="14" border="0" id="home" /><br />
        </a><a href="main.php?pagename=portfolio" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('portfolio','','images/main/nav_over_02.gif',0)"><img src="images/main/nav_02.gif" name="portfolio" width="110" height="13" border="0" id="portfolio" /></a><a href="main.php?pagename=dyo" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('design','','images/main/nav_over_03.gif',1)"><br />
          <img src="images/main/nav_03.gif" name="design" width="110" height="14" border="0" id="design" /><br />
        </a><a href="main.php?pagename=decals" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('decals','','images/main/nav_over_04.gif',1)"><img src="images/main/nav_04.gif" name="decals" width="110" height="14" border="0" id="decals" /></a><br />
          <a href="main.php?pagename=clients" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('clients','','images/main/nav_over_05.gif',1)"><img src="images/main/nav_05.gif" name="clients" width="110" height="14" border="0" id="clients" /></a><br />
          <a href="main.php?pagename=contact" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/main/nav_over_06.gif',1)"><img src="images/main/nav_06.gif" name="contact" width="110" height="14" border="0" id="contact" /></a></td>
        <td width="30"></td>
      </tr>
      <tr>
        <td height="30"></td>
        <td></td>
      </tr>
    </table></td>
    <td width="10" valign="top"></td>
    <td width="504" valign="bottom" class="[color=red]<? echo $strClassType; ?>[/color]"><table width="504" height="365" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="20"></td>
        <td width="464" valign="top"><?php @ require_once ("./{$pagename}.php"); ?>
          </td>
        <td width="20"></td>
      </tr>
    </table></td>
  </tr>
</table>
<table width="718" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="right"><img src="images/main/copyright.gif" width="431" height="15" border="0" usemap="#MapMap" />
      <map name="MapMap" id="MapMap">
        <area shape="rect" coords="353,5,430,14" href="http://www.home.com" target="_blank" />
      </map>
    </td>
  </tr>
</table>
</body>
</html>

wildteen88 · August 26, 2007

Now you have changed your links to ?p=home. So now the php block at the top of your page will not work!

Stop changing your url variables and your code will work!

Try the following code at the top fo your script:

$strClassType = 'defaultPage';

if(isset($_GET['pagename']))
{
    $intPageType = strtolower($_GET['pagename']);

    switch($intPageType)
    {
        case "home":
            $strClassType = 'homePage';
        break;
        case "portfolio":
            $strClassType = 'portfolioPage';
        break;

        default:
            $strClassType = "defaultPage";
    }
}

Make sure your links are set to ?pagename=YOUR_PAGE_NAME

spindriftmed · August 26, 2007

mega!!!!!!!!!!

it now works 110% perfectly!

thank you so much for all your time and please do not hesitate to ask if i can help you with anything (taking into consideration that you probably wont want it after seeing how useless i am with it!). however, hopefully i can help you with something in the future.

thank you again, much appreciated.

all the best,

mark

Sign In

help needed with changing td background with css and php

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information