Slicing a Fireworks layout and converting it to CSS

How would I change the code in HTML and CSS so that the sidebar images are AP?

The container (#sidebar) would need position: relative; adding to it. Then just change "float: left; / float: right;" in your CSS to "position: absolute;" and go from there.

Ok I asked my husband to test this page at work and tell me what he is seeing. This is how the images are showing for him:

image image
image image

This is not correct. The first image should be left, then the second image drops down and is to the right, the third image is dropped down and to the left and the four image drops down and is to the right. They should not be side by side.

To me I would have to use AP to get this to happen. I think I need to change from ul li for the images and figure out the positioning.I removed the ul li on the HTML page. Now I believe I will have to place the images in the sidebar area but am not sure how to call them from the HTML page. Do I use div id=image 1, div id=image 2, etc? Then on the CSS page do #image 1, #image 2, etc?

You seem to be overcomplicating it.

And anyway, if you use AP, you'll have to manually specify how far down the column you want each image.

I don't know what else to do to get the effect that I am looking for. The images are not to be side by side as I am seeing them and my husband is seeing them. Any other suggestions to get this to work? If I go back to tables I can get everything to work except the image of the jewelry hanging down from the header to the sidebar. That has to be controlled using CSS to get that effect.

Well I found out the problem is with IE7. Firefox is showing things correctly now. However, Netscape 8.1 is still showing wierd blue lines through all the buttons and the lines run across the page. I am so frustated at this point. How do I get all browsers to show the same thing without doing their own thing to the page? Is there special code that I have to use? HELP!!!!! or I go back to tables.

"Wierd blue lines" sounds like anchor text decoration underlines that have not been dealt with if they run across the page it sounds as though you are using a negative text indent to hide text off screen?

It would make life a lot easier if you did what you mentioned earlier in looking for some free web hosting there is plenty of it around and that way people can actually see how your layout is progressing, at the moment this is very difficult due to the length of the thread and of finding relevent stages in the coding in order to understand and diagnose what is happening.

If you do get some free web space (highly advised) ensure that it allows ftp uploads and that it does NOT place adverts on your pages.

Edit/Actually I'm confused here your first post linked to a png graphic of your layout on a site with the same name as yours so I presume that is your web space, why have you not posted the layout there? it would make things much simpler! if necessary create a subdomain to keep dev work seperate from the main site.

Perhaps there was/is a reason that you couldn't though buried in the posts that I haven't read.

Hugo.

I originally attached the foxden creations folder to my business site, which I host from my own servers. I have found a free hosting site at http://www.freewebs.com/foxdencreations/ and have uploaded it there with the latest version. I also took screen prints of the site in IE6 (which my servers still run), IE7 (personal computers), Netscape 8.1, and Firefox 2.0.0.3. These are the latest versions of the browsers that I have. I also downloaded Opera but am writing this post on my PC, which doesn't have it loaded. Opera shows it the same as Firefox. I attached the different screen prints so everyone can see how each browser is rendering my code differently. There must be something either incorrect in my code or some hack that I can place in the code so that all browsers interpret the code the same way. I did go out to the W3C site and validated my code. The only problem it saw was the stupid table stuff I had to add from the free hosting site. All other HTML and CSS code was complient. So I need to know what hacks I need to get this all to look the same in all browsers. It is interesting that IE6 & IE7 don't show the floating images correctly and IE7 is the main browser I use by choice. Any ideas on how to get this all to work across the browser world would be very much appreciated.

Oh and yes, I am hiding text. This is how thepineapplehead had me set up the HTML page so that if viewers had styling turned off, everything would still be complient in my code.

You need to set hasLayout for IE for the #middle element, you might be able to get away with width:100%, if not then you'll need to use one of the other triggers.

With the staggered images I might be inclined to position the list elements absolute having set position elative on the ul or it's parent to provide a positioning reference to contain the absolute positioning offsets i.e top/left bottom/right oe what ever combinations are required.

As for the blue underline have you removed the text-decoration?

Hugo.

I added text-decoration: none to the nav and still have the lines. May have to add it somewhere else.

Not sure what you mean by the hasLayout part for IE.

For the staggered images, should I make a new CSS page that gets called if visitors are using IE6 or IE7 or add the code to the current CSS page? I might need some extensive help with the absolute positioning to make sure I am coding correctly.

The {text-decoration: none;} needs to be on the a, not the ul. To make the rule apply only to your nav links, do

ul a {
  text-decoration: none;
  }

cheers,

gary

Thank you, kk5st. That worked. Now on to getting IE6 and IE7 to not mess up my code. I still need help in figuring out how to do this properly.

This maight be a simpler approach to staggering those images that should be fairly safe cross browser, but you will need to test that.

I also couldn't see any rules for the ul#albumlist to control margins/padding and bullets so added them.

#albumlist {
margin-left:0;
padding-left:0;
list-style:none;
}
#albumlist li {
/* width not strictly
required but may keep
IE happy */
width:278px;
}
#albumlist li.left {
/*properties removed*/
}
#albumlist li.right {
text-align:right;
}


You should by now be getting close to a working layout, and it might be wise after these changes to appraise where things stand and what problems remain and perhaps list them on a new thread as multiple page threads become awkward to navigate due to the way they are handled, just a thought?