Filler space

[toolmania1]

Hi!

I was wondering if anyone had any ideas on how to fill space. Let me explain. I am using css. My page is a 3 column layout with a header and a footer. In the center of my first page, I had an image with a width of 500px and a height of 350 px. That displays fine. On my second page, I had two much smaller images in the center. The images were about 100px wide by 50 px tall. Now, the right side of my layout, which is the third column, displays incorrectly. Even though this is separate in the layout from the center. I am not sure why something in the center would affect the right side navigation. Anyways, I made the images be 2 images have a width of 250px and a height of 350 px. This would match the layout of the first page. Now, the second page's right column is displayed as expected, just like the first page. If this is the case, how can I 'fill' the rest of the center so that the right side will display correctly?

Thanks,
Tim

 

[toolmania1]

Photoshop CS3

I found the easiest way to fix this was to make an image of the size I needed, which in this case was 500 px wide by 340 px tall. I then placed images on top of this image. The two newly placed images were what I needed to link to other pages. I then used the slice tool and sliced it up. Then, I saved all the images and put them on my site. Wala, problem solved with the white space issue. Sure, it may load slowed, but sometimes it seems that css should be easy and it becomes a pain when you test it on many browsers. The testing is necessary. But, why can't the browsers just adhere to the same way of doing things...lol.

Oh well, at least I solved it for now.

If anyone has a better solution, I am all ears. I did research a little and found a few possible solutions. However, when I change one thing, it seems to mess something else that was in harmony.

 

[toolmania1]

Ha, I'm fooled again

Well,

As on my continous journey to find harmony with all of my pages, I have now managed to upset FF. Surprisingly, IE displays the page just fine. When I took the slices from photoshop, it created a table for the images. Now, I know I am supposed to stay away from conventional tables and use the css display table code. However, why would my right margin suddenly move down in FF but not in IE just from putting in a table that was the same width and height as a pic. When the pic was in the center, everything was fine.

The center area of the 3 column layout is 500 px wide by 340 px tall. The table has these dimensions.

I had to be the smarty pants and go with the 3 column layout...lol.

Maybe I will move back to a 2 column layout. Those seem to be easier.

 

[toolmania1]

Hopefully,

Some of this will help someone else in the future.

I inserted a style right into the right column

<.... style="margin-top:-330px;>

This pulled up the right menu and now everything looks correct in IE and FF.

Coincidentally, I had to do this with my style sheet for IE. However, I did not have to use this for Firefox on my main page. Strange?

 

[toolmania1]

Can't win

So, I found how to convert Photoshop slices into css. However, as goes with everything else. It messed up the right column again. I am frustrated and going to bed. But, I did find this below for setting photoshop to output to css ( If that was a solution that someone wanted to take like me ). The only problem I saw was that it sets the positions with 'absolute'. Well, I was using relative so that it would be fluid. Maybe I should use absolute. I probably would have less headaches.

------- Photoshop cs3 output setting for css instead of basic html ----
( http://forums.jumba.com.au/showthread.php?t=8995 )

Even though this thread is over a year old I am going to add some information which may be helpful. This is information that took me forever to find, and since this thread comes up first in the Google results it might be good to add the following instructions. It also doesn't help that the official Adobe help on this topic is wrong:

To generate a CSS output for a PSD file in Photoshop CS3

1) Slice your image as you desire by using the Slice tool

2) Be sure to right click each slice and Edit Slice Options for adding URLs, targets, adjusting slice sizes, etc...

3) After setting the slice options go to FILE>Save for Web & Devices

4) A big box opens up. All the way to the top right you see the buttons "Save" "Cancel" and "Done". Just below and to the right of the "Done" button is a small round button with an arrow inside of it. Click it, and go all the way down to the bottom of the list to "Edit Output Settings"

5) A dialogue box opens. At the top of the box is a field that has options "HTML" "Slices" "Background" and "Saving Files". Select "Slices"

6) You now see options to generate as a table, or generate as CSS.

7) Save your settings by clicking OK as usual, and the dialogue box closes

8) You are back at the big box for saving options. Click "Save" and in the "Save As Type" drop-down box select "HTML and Images".

9) All done! Your HTML file will have all of the images set according to CSS. It isn't perfect CSS, in fact it is technically lousy... BUT ... it is a good start, especially if you are in a rush or are a beginner. It's certainly better than using a table.

 

[PixelPusher]

Do you have a link where we can see the spacing issue?