Up for a challenge?

[blueline]

Hey everyone. I have a question, which could be pretty difficult, so I hope you are up for a challenge.

 

If you would, take a look at my site, http://www.bluelinehifi.com/shop and look at the header and the footer. They are both .jpg graphics with gradients in them.

 

THE CHALLENGE: What I would like to do is move the left and right columns into the center a little bit more, then I would like to take the graphics, which I can make in about 5 minutes, to match the header and footer. I would then like this graphic to go down the left and right side, and of course I will make the corner pieces to make it all match. This way it will look like there is a border around the whole site, and of course my logo will be at the top, as it is now.

 

I know that it is pretty simple to make the columns (left and right) move in more towards the center, but I don't know how to make anything be outside of the info that is already there....

 

If anyone has any thoughts, ideas, or any expretise that they would like to share, I am all ears.

 

Thanks,

-Chris

[Aodhan]

Take a look in the file default.php (Or whatever you have named it) in the catalog section.

 

<!-- body //-->

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

 <tr>

   <td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">

<!-- left_navigation //-->

<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>

<!-- left_navigation_eof //-->

   </table></td>

<!-- body_text //-->

 

After the first <tr> tag, you might be able to add another <td> tag to contain your left graphic. Then do the same after where it includes column_right.php.

 

You may have to play with it to get what you want, but that's where you would do it.

 

Aodhan

[blueline]

Thanks for the tip. Unfortunately I tried that and it didn't work. I did exactly what you said, and there is absolutely no change.

 

Any other ideas?

 

-Chris

[blueline]

Whoops. Sorry, my mistake. I didn't write the code correctly.

 

I guess I am just tired from being up all night working on a project, but anyway.

 

Here is the code that I wrote. What I am getting is that the left_column is moving to the right, but the image is not showing up.

 

For now I just have to image on my pc, so there isn't a link to it on the server, yet. Anyway, here is the code I wrote....

 

   <td align="center" class="smallText"><table width="42" height="100%" border="0" cellspacing="0" cellpadding="0" background="c:disc from jleft.jpg"></table></td>

 

Any reason come to mind why the image isn't showing? I know it isn't the link.

 

 

-Thanks,

Chris

[Aodhan]

Whoops. Sorry, my mistake. I didn't write the code correctly.

 

I guess I am just tired from being up all night working on a project, but anyway.

 

Here is the code that I wrote. What I am getting is that the left_column is moving to the right, but the image is not showing up.

 

For now I just have to image on my pc, so there isn't a link to it on the server, yet. Anyway, here is the code I wrote....

 

   <td align="center" class="smallText"><table width="42" height="100%" border="0" cellspacing="0" cellpadding="0" background="c:disc from jleft.jpg"></table></td>

 

Any reason come to mind why the image isn't showing? I know it isn't the link.

 

 

-Thanks,

Chris

 

You don't have a row or column defined. Try adding in <tr><td width='100%'> </td></tr>. Or you can add a transparent gif in the dimensions that you want.

 

Aodhan

[blueline]

John, great thanks. The only problem that I have left is that it is not putting the graphic all the way down. I set the height="100%" but the image is only appearing once, and not multiple times.

 

Any ideas there?

 

Thanks,

Chris

[Aodhan]

John, great thanks. The only problem that I have left is that it is not putting the graphic all the way down. I set the height="100%" but the image is only appearing once, and not multiple times.

 

Any ideas there?

 

Thanks,

Chris

 

Could be a couple reasons. The first that pops to mind is that your table doesn't extend as far as you think it does, and thus isn't repeating. Try giving your tables each a different border thickness and color. That's what I do when I am trying to figure out nested tables.

 

Aodhan

[blueline]

John, thanks for the help.

 

I did what you suggested, and the height="100%" is for some reason only extending the table the height of the image, which is 20 pixels. When I set the code to height="450" it, obviously, took on a much longer table with the background image properly showing.

 

Any ideas how to get the table to extend the full 100%? Again, here is the new code which I have edited for defualt.php

 

<td align="left"><table width="40" height="100%" border="1" cellspacing="0" cellpadding="0" background="c:disc from jleft.jpg"><tr><td> </td></tr></table></td>

 

 

Thanks,

-Chris

[Aodhan]

John, thanks for the help.

 

I did what you suggested, and the height="100%" is for some reason only extending the table the height of the image, which is 20 pixels. When I set the code to height="450" it, obviously, took on a much longer table with the background image properly showing.

 

Any ideas how to get the table to extend the full 100%? Again, here is the new code which I have edited for defualt.php

 

<td align="left"><table width="40" height="100%" border="1" cellspacing="0" cellpadding="0" background="c:disc from jleft.jpg"><tr><td> </td></tr></table></td>

 

 

Thanks,

-Chris

 

This is one of the things that bothers me in HTML. Width=100% will automatically shrink/expand the width, but height doesn't work the same way. If you are not coding for multiple screen settings (800x600, 1025x768, etc) then find one that looks the best, and set it to the pixel height.

 

Others may have better solutions than that...

 

Aodhan

[blueline]

Thanks. I do appreciate the help. The problem is that the header and footer rely on being optimum for multiple screen sizes.

 

John, I do appreciate the help.

 

 

Anyone have any ideas?

 

Thanks,

Chris

[Guest]

Have you tried using the stylesheet to control the background instead of the HTML??? You can control the repeat vertically and horizontally.

[blueline]

Kim, the problem is that I would like to control the sides with a background image. I would only like to control an outside border though, not the actual left and right columns. If this can be done in the style sheets please let me know.

 

Thanks,

Chris

[alverman]

Try giving 100% height to TD also :

 

<td align="left"><table width="40" height="100%" border="1" cellspacing="0" cellpadding="0" background="c:disc from jleft.jpg"><tr><td height="100%"> </td></tr></table></td>

 

bye

[Guest]

Chris,

 

Take a look at my site http://www.bird-e-toys.com/osc/catalog/default.php The dark green area is what you want to have as an image on your site?

[blueline]

alverman,

 

I wish it were that simple. That is not making one bit of difference. Unfortunately I am completely stumped.

 

 

Birdbrain,

 

Nope. That is just setting the background to a particular color or picture. What I want to do is much more specific to my needs.

 

This is a quick showing of what I would like to do. Understand that I am not going to take the time to make the graphics until I know how to get it to work with the code. So, excuse the sloppiness. The black lines represent where I would like the graphics to go. I understand that the corner pieces on the top and bottom will be handled in the header.php and footer.php files, but I don't know how to get the left and right column to allow for grphics to their immediate sides.

 

 

Thanks,

-Chris

[Guest]

Chris,

 

If I am imagining what you want correctly the easiest way to acchieve it would be to add an additional column on either side of your layout so that instead of a 3 column you have 5 columns. The BG image would then be placed in those columns. Make sense?

[blueline]

Kim,

 

That's exactly what I have to do. I don't know why the image isn't loading...the link is correct...and it worked in the preview. WEIRD.

 

Well, the problem that I am having now is that I need to set the height of the far left column (new) and the far right column (new) to 100% and set the background to my bg picture. The columns are only showing 100% of the size of the graphic.

 

So now I must figure out how to make the height of the columns 100% of the browser, so that no matter the resolution of the users machine, it will be formatted correctly.

 

Thanks,

Chris

[Aodhan]

Kim,

 

That's exactly what I have to do. I don't know why the image isn't loading...the link is correct...and it worked in the preview. WEIRD.

 

Well, the problem that I am having now is that I need to set the height of the far left column (new) and the far right column (new) to 100% and set the background to my bg picture. The columns are only showing 100% of the size of the graphic.

 

So now I must figure out how to make the height of the columns 100% of the browser, so that no matter the resolution of the users machine, it will be formatted correctly.

 

Thanks,

Chris

 

Chris-

 

I may have something in my archived sites that will do this. I remember doing something similar a while back. I'll take a look around and dig through some old files and see what I have.

 

Aodhan

[blueline]

John,

 

I really appreciate it.

 

I guess this is something that not a lot of people feel the need to attempt.

 

I knew that it wasn't gonna be some simple feat. That is why I gave this post the title that I did. :wink:

 

Thanks John, and all of the people who have been helping,

-Chris

[Guest]

Chris,

 

It really isn't as difficult as you think. :-)

 

Add:To the End of your header.php file

<table  width="100%" border="1" cellspacing="5" cellpadding="5">

<tr>

 <td >

	 <!--Far left Column //-->

 </td>

 <td >

 

Add to the Beginning of your footer.php file

	</td>

 <td >

       Far Right Column

 </td>

</tr>

</table>

[Guest]

Chris,

 

It really isn't as difficult as you think. :-)

 

Add:To the End of your header.php file

<table  width="100%" border="1" cellspacing="5" cellpadding="5">

<tr>

 <td >

	 <!--Far left Column //-->

 </td>

 <td >

 

Add to the Beginning of your footer.php file

	</td>

 <td >

       Far Right Column

 </td>

</tr>

</table>

[Guest]

...oops!!! I forgot the comment tags on the far right column...be sure to comment it or remove.

[blueline]

Kim,

 

Please let me know if I am wrong inthinking this, but if I set the width of a table to 100%, then shouldn't the table extend to 100% of the current window?

 

I want the height to be 100%, but not the width....

 

Thanks,

Chris

[burt]

<style type="text/css">

<!--

.maxheight { height: 100% }

-->

</style>

 

 

<table class="maxheight">

<tr>

<td> </td>

</tr>

<tr>

<td> </td>

</tr>

</table>

 

Have no idea if it will validate w3c css.

[blueline]

burt,

 

Thanks for the tip.

 

I am sure that this sounds like a dumb question but where do I put

 

<style type="text/css">  

<!--  

.maxheight { height: 100% }  

-->  

</style>  

 

Obviously I put the table info into default.php before the left_column and right_column info.

 

Thanks,

-Chris