chrometweaks.org

How do I build my website with iPage.com?

Click Here To View All Answers...


First question I got is How do I build my website with iPage.com? Thanks in advance for any answer. Second question of mine... I've coded a background image for my logo using this TD.headerNavigation class in stylesheet.css:.

TD.headerNavigation4 {.

Background-image: url(images/logob.jpg);.

Background: #ffffff;.

}.

However, I've been told that background images in TD's are not valid HTML 4.0, and I should be using a <DIV> instead..

Here's my existing code:.

[ snipped header navigation in two-cell self-contained table ].

<table border="0" width="100%" cellspacing="0" cellpadding="0">.

 <tr class="header">.

   <td class="headerNavigation4" valign="top" WIDTH="415"><IMG SRC="images/logof.gif" WIDTH="415" HEIGHT="68" BORDER="0" VSPACE="0" HSPACE="0"></td>.

   <td align="left"><IMG SRC="images/spacer.gif" WIDTH="100%" HEIGHT="153" BORDER="0" VSPACE="0" HSPACE="0"></td>.

   <td align="left" width="150"><IMG SRC="images/cornerright2.gif" WIDTH="150" HEIGHT="153" BORDER="0" VSPACE="0" HSPACE="0"></TD></TR>.

</table>.

[ snipped breadcrumb code in three-cell self-contained table ].

A friend supplied me with the following code for just the logo in a standalone page, but I can't figure out what part would go where in header.php, and how to set up the references in the stylesheet (as well as to incorporate the header navigation and breadcrumb so it works in my layout), particularly since the <head> isn't defined within header.php..

<html>.

 <head>.

   <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">.

     <title>Untitled Page</title>.

<style type="text/css" media="screen"><!.

#logo  { background-image: url(images/logob.jpg); visibility: visible; width: 415px; height: 153px }.

></style>.

 </head>.

<body bgcolor="#ffffff">.

 <div id="logo"><img src="images/logof.gif" alt="" width="415" height="153" border="0"></div>.

</body>.

</html>.

I've tried reading the definitions at w3.org as well as some CSS tutorial sites, but I haven't come across an example where there's a PHP connection, and I'm getting totally lost in the lingo..

I'd appreciate any assistance I could get..

TIA!.

Terry..

Comments (78)

Hmm... I need to find out myself. I don't know what is the answer to that question. I'll do some poking around and get back to you if I got an answer. You should email the people at iPage as they probably can help you..

Comment #1

OK let's try to get this like you want it, maybe it wan't be easy so I warn you on beforehand :-).

I am skipping the <div> solution because I like this one better..

Assumptions:.

Basic: the top row consists of 2 cell's <td>'s..

Normally yr header is in the left cell.

The size of yr logo in the header I don't know..

The size of the required background_image I could see in yr post..

In /catalog/index.php you'll find: <?php require(DIR_WS_INCLUDES'header.php'); ?>.

Can't use that beside going to: /catalog/includes/header.php.

There you'll find something like:.

Change that to:.

Note_1: stars_5.gif probably already exist in yr iPage site so you can now immediately see the effect and change to yr own jpg later.

Note_2: Depending on yr background-image (what's it like?) you will now (maybe) have to play with the extensions:.

Background-repeat:repeat-x;.

Background-repeat:repeat-y;.

Background-repeat:no-repeat;.

The source therefore now becoming like so:.

<td valign="middle" style="background-image:url(images/stars_5.gif); background-repeat:repeat-x; ">.

X: means repeat horizontal.

Y: means repeat vertical.

No-repeat: means no-repeat and is clear I think..

To make it difficult (till now it was easy) there's also "%", and things like "scroll"and "fixed" are possible so from here you are going back to the CSS-tutorials that you found already to finetune what I have explained...

Comment #2

Thanks to all of you for your replies I think I'll stick with my existing CSS definitions and see how it goes!.

Terry.

This post has been edited by.

TerryK.

: 09 January 2004, 05:38..

Comment #3

Hey TerriK,.

I would like to do just what you did (add the BG IMAGE as a TD CSS element)..

I've followed your explanation but something went wrong 'cause my BG IMAGE doesn't show up..

Can you please give me a hand on this?.

I'm not a CSS expert at all..

This is what I put in my stylesheet.css file:.

TD.headerNavigation4 {.

Background-image: url(images/header_test.gif);.

Background: #ffffff;.

Visibility: visible;.

Width: 776px;.

Height: 80px.

}.

So far I'm just trying to test with a big header image..

Then this is how my header.php looks:.

<TABLE WIDTH=776 align="left" BORDER=0 CELLPADDING=0 CELLSPACING=0>.

<TR>.

<TD class="headerNavigation4" valign="top"><A HREF="http://www.mediderm.com/tienda/catalog/" TARGET="_self"><IMG SRC="images/generic/blank.gif" ALT="Mediderma" WIDTH="776" HEIGHT="80" BORDER="0" VSPACE="0" HSPACE="0"></a></td>.

</TR>.

</TABLE>.

I've also tried with some Test Text inside the TD instead of that blank.gif file ... but the BG IMAGE specified in the CSS file didn't show up either..

I've also included:.

<base href="http://www.mediderm.com/tienda/catalog/">.

In the HEAD on product_info.php.

This is my testing URL:.

Http://www.mediderm.com/tienda/catalog/product_info.php?cPath=3&products;_id=69.

I'm working on it so it will change it's look daily..

Thanks in advance..

Besides I would love to chat on ICQ about OSC..

Drop me a line whenever you want..

Jose..

Comment #4

Jose, I ended up coding my logo without using background images and/or CSS. I'm also not very good at this CSS stuff, so maybe someone else out there who has more experience than me can help you with your issue. (Sorry...).

Terry..

Comment #5

Your problem seems to be that you are using both a background image and a background color. Change your style to:.

TD.headerNavigation4 {.

Background-image: url(images/header_test.gif);.

Visibility: visible;.

Width: 776px;.

Height: 80px.

}.

And it should work. I just tested this out (with different images) and it works fine..

Although this works, I really don't understand the need for doing it this way. You are adding a lot of complexity with the image in the stylesheet and the transparent image in the page overlaying it. I could understand this if you want to put text over the background image. Why not just include the image in the HTML and be done with it?.

Maybe I'm missing something here..

Regards.

Jim..

Comment #6

Hehehe.

I can't believe I didn't see that silly error!.

Thanks very much..

It is working fine now...

Comment #7

I've coded a background image for my logo using this TD.headerNavigation class in stylesheet.css:.

TD.headerNavigation4 {.

Background-image: url(images/logob.jpg);.

Background: #ffffff;.

}.

However, I've been told that background images in TD's are not valid HTML 4.0, and I should be using a <DIV> instead..

Here's my existing code:.

[ snipped header navigation in two-cell self-contained table ].

<table border="0" width="100%" cellspacing="0" cellpadding="0">.

 <tr class="header">.

   <td class="headerNavigation4" valign="top" WIDTH="415"><IMG SRC="images/logof.gif" WIDTH="415" HEIGHT="68" BORDER="0" VSPACE="0" HSPACE="0"></td>.

   <td align="left"><IMG SRC="images/spacer.gif" WIDTH="100%" HEIGHT="153" BORDER="0" VSPACE="0" HSPACE="0"></td>.

   <td align="left" width="150"><IMG SRC="images/cornerright2.gif" WIDTH="150" HEIGHT="153" BORDER="0" VSPACE="0" HSPACE="0"></TD></TR>.

</table>.

[ snipped breadcrumb code in three-cell self-contained table ].

A friend supplied me with the following code for just the logo in a standalone page, but I can't figure out what part would go where in header.php, and how to set up the references in the stylesheet (as well as to incorporate the header navigation and breadcrumb so it works in my layout), particularly since the <head> isn't defined within header.php..

<html>.

 <head>.

   <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">.

     <title>Untitled Page</title>.

<style type="text/css" media="screen"><!.

#logo  { background-image: url(images/logob.jpg); visibility: visible; width: 415px; height: 153px }.

></style>.

 </head>.

<body bgcolor="#ffffff">.

 <div id="logo"><img src="images/logof.gif" alt="" width="415" height="153" border="0"></div>.

</body>.

</html>.

I've tried reading the definitions at w3.org as well as some CSS tutorial sites, but I haven't come across an example where there's a PHP connection, and I'm getting totally lost in the lingo..

I'd appreciate any assistance I could get..

TIA!.

Terry..

Comment #8

Background images.

Specified.

In the TD are deprecated in HTML 4.01, but background images specified in CSS are just fine. I have images specified this way and they pass the test in the w3c validator. Stick with your original code if it works for you..

The second example that you give is essentially the same thing with the stylesheet code embedded in the Head of the HTML and the image in a DIV. I see no reason to do this, and many reasons not to you would have to modify most of the files in the Catalog directory to get it to work. Keeping the css in a separate stylesheet makes much more sense. And reformatting osC to replace the table cells with DIVs etc. would be a lot of work for very little gain..

You can safely forget about PHP in this case. It's used to dynamically generate the HTML on the page, so if your logo is the same on every page there is no reason to get into PHP here..

Regards.

Jim..

Comment #9


This question was taken from a support group/message board and re-posted here so others can learn from it.