Slicing a Fireworks layout and converting it to CSS

Kind of, but no.

You need to do the HTML markup before slicing it up. Ignore design and images, and markup the content for what it actually is.

Your title? That's a <h1>. Your navigation? An unordered list.

Get some semantic HTML marked up first and then we'll give you a hand using the image you've designed - it can easily be done, but you have to understand about underlying markup first.

For a rather basic example check out my layout here:

http://www.thepineapplehead.co.uk/tds/roster/

and view the HTML source, that's what you're aiming for.

Thank you, pineapple. I will go ahead and do the HTML first. I need to keep in mind that I am not using tables...that will be difficult for me! So instead of I will use the div property to mark my different areas of the page, such as #header, #content, #nav, etc...right? Some tutorials and books that I have read say to use a container div to start out...#container...then put the other elements in that. Is that correct? I think I want a 3 column layout. The image that I posted will have photos of my beaded works on the right hand side of the content area. I believe that would require a 3 column layout. Left for the nav, center for the text, and right for the photos. Please tell me if I am incorrect with this thought process.

Have a read of this one too:

http://www.csscreator.com/divs-do-not-replace-tables

Thank you for pointing me to that thread and your article on using too many div tags. I guess a lot of the tutorials that I have read get div happy when there is no need. Here is what I have come up with after reading the thread and your article. Now I know you have seen the layout that I came up with and realize that there are a lot of images that I will be working with. It will be interesting to see how this all comes out. If I catch on to what I am doing, then I can get away from tables and start using CSS with every site that I build. I can be more complex with the images than I have been before. I have several clients that I can redo their sites in CSS and have a much better looking site for them (I won't charge for the redo on the sites since this is my idea to change them from tables to CSS layouts).

Please let me know if I am heading in the right direction and what I should change about the code below. Thanks very much for your help. Just to let you know, the welcome text is an image because I wanted to use Park Avenue font on the home page. Any other page will have Arial text used so an image will not be necessary. Or...should I get rid of the Park Avenue text completely and stick with Arial throughout the site?

Foxden Creations

Foxden Creations and jewelry image

• Home


• About Us


• Necklaces


• Earrings


• Bracelets


• Lanyards


• Bookmarks


• By Special Request

images to here

Looks fantastically simple to me, great job, you've certainly picked that up quick!

I'd go for a simple font on the website and not the park avenue - it's a little hard to read anyway Use it for the logo, nav items, etc, things that add flourish, but not for the main body of text.

Now have you got any ideas about starting the CSS or would you like some guidance?

Thank you for the feedback. I will change to a simple but readable font. I like Arial the best because it is easy for me to read.

I really would like some major hand-holding for this first site of mine. Once I get the hang of it, I should be able to accomplish what I need on my own (unless I run into snags then I will come back here for help).

The one problem that I forsee is using the backgrounds that I have chosen for the layout of my site. I really want to keep them and have seen other sites that use textured backgrounds that work great. Attached is the image that I used in Fireworks for the background of the various sections. Just the color is changed. From the various tutorials I have read about slicing, this could be a problem getting this to work correctly.

Is the image tileable? Shouldn't be a problem

Set the dark blue colour as the HTML background colour, the pale blue pattern as the body background image, the pale yellow pattern as the container image and you're halfway there.

Yes the image is tileable. That is how I did it in Fireworks.

Am I starting the CSS page now? This is where I need the hand-holding. I use Dreamweaver MX 2004 as my HTML tool. Should I go ahead and open up a new CSS page and do the things you mentioned above? Remember I am completely new to this and need major guidance.

Also another snag might be the drop shadow effect I have on the header,content,footer of the page. I have read where one can do this with an image but not sure how exactly to accomplish this.

The image you have at the top right, is this going to change or be the same on all pages?

And if it's the same, do you have it as a separate image with a transparent background?

Third question; could you post the different colour variants of that image as attachments so I can make a start on the CSS page for you

The image at the top right was going to be for all pages but now that I think about it, it might not work best that way. Each page will have images of my beaded jewelry and shopping cart info on it, so since it hangs so low, I might only keep it on the home page. I do have it as a separate image though.

The third question has me confused...are you talking about the site as a whole or the jewelry image? If it is the site then I will post the colors that I used. I am not sure what you mean by attachments either. If you want me to do slices, then I can.

Background (not the canvas color) - #243346

header with logo and jewelry - #394350

content - #DD955F

footer - #823202

Basically I meant - you know you posted that original pattern image? Do you have different colour variations of it?

No I don't. What I did was make the rectangles and chose the colors I wanted to use in Fireworks. Then I added the texture using the image that I attached earlier. It gives the same pattern but uses the colors that I chose. I could see if I could take the image and just change the color of it. Will that work?

I think this is what you asked me to do.

Here's a start:

Foxden Creations

html {background: #2F3E52;}
body {background: #495565 url(background.png); width: 860px; margin: 0 auto; overflow: auto;}
#container {background: url(content.png) 56.3% 23%; margin: 30px; margin-bottom: 0; overflow: auto;}
ul {float: left; width: 175px; margin: 0; padding: 0; list-style: none;}
#sidebar {float: right; width: 150px;}
#footer {clear: both; background: url(footer.png); margin: 0 30px;}
#footer p {margin: 0;}
#content {margin: 0 150px 0 175px;}

Foxden Creations and Jewellery

It's a bit messy but have a look at it and dissect it, see if you can improve up on it further or want me to do a little more

I am picking it apart now. I do have one question....why do you do everything in HTML first? The tutorials that I have read have you do your markup in HTML and then switch to CSS to do the stylizing. I just want to make sure that I am grasping what you are teaching me.

Also I realize that it is getting very late in the UK so if you need to get some sleep, we can pick this up tomorrow. I will be on at the same time that I first logged on today.

Aw you're so thoughtful I'd stay up into the wee hours of the morning playing BF2 and surfing the net but it's not good for my eyes

I'm back to work tomorrow but have a quick surf in my lunch break (being the ICT technician helps ).

As to why HTML first? Well, people come to your site for content. If the site is ugly they will put up with it as long as it contains what they want.

Because of this, you use HTML to markup your content semantically. This is so it works with images and styles disabled, and JS disabled - so it can be accessed by people with poor vision, screen readers, and mobile clients (eg phones). You want to make your site available to as many people as possible.

Once you've got the HTML structure in place you can make it look like whatever you want

Well, one might as well ask "why do you build the fondations of the house before putting up the walls". Put that way, a silly question, right?

Valid and semantically correct html is the foundation of web design with CSS and should be done first for the same reason that the foundation of the house is built first. The definition of CSS assumes valid html. For invalid html there is no standard, only for valid html.

So if you want to hold a browser responsible for how it renders your page you have to give it standard html, which is valid. If you feed it invalid html you have no basis to complain about how the broswer renders it.

I have looked over the code and understand for the most part what you are doing. However, I was wondering how the header info (i.e. logo, jewelry, and the background) fits in. From looking at this, I think it would go above the #container area. I realize that I made it h1 so I would guess that the images would go there. Would I use float for the left and right images? Also I noticed that you have the width of the page at 860px. What about people that still use 800x600 resolution? Wouldn't this cause them to have to scroll left and right?

Well I played around some with the code and got the header area to work with the logo as h1. Then I changed the width of the text because of the images that need to go in the sidebar area. They are 120px in width and 120px in height. Here is a mockup with where the images would go. Also I took one of the buttons I created and added it to the code. I am not sure how to get a space at the top so the button is not sitting at the very top of container area.

Foxden Creations

html {background: #2F3E52;}
body {background: #495565 url(images/background.png); width: 860px; margin: 0 auto; overflow: auto;}
h1 {background: url(images/header.png); margin: 0 0px;}
#container {background: url(images/content.png) 56.3% 23%; margin: 30px; margin-bottom: 0; overflow: auto;}
ul {float: left; width: 175px; margin: 0; padding: 0; list-style: none;}
#sidebar {float: right; width: 240px;}
#footer {clear: both; background: url(images/footer.png); margin: 0 30px;}
#footer p {margin: 0;}
#content {margin: 0 250px 0 175px;}

• 


• About Us


• Necklaces


• Earrings


• Bracelets


• Lanyards


• Bookmarks


• By Special Request

Welcome to Foxden Creations

Here you will find unique, hand-crafted beaded jewelery that will set you apart from the crowd.

Please come in and look around, I am sure there is something that will catch your eye.

I also take special orders if you don't find what you are looking for! Just fill out the form on the "By Special Request" page.

images go here

I'll have a look when I get home tonight

I was looking at what I had so far today and decided to change the images used in the background areas. Here are the new backgrounds. I was also playing around with trying to figure out how to get the jewelry image to the right on the header area. Didn't have any luck there. I believe that it will have something to do with positioning but I don't know enough yet to figure it out on my own.

I also want a shadow effect all around the main background and the header,content,footer sections. What I did in Fireworks was to take the 3 rectangles that I made and I flattened them into one image then added the shadow effect. Since the image is flattened, maybe I should take a slice of the flattened image to use. However I think if I do that then it will tile all the way across the page, which I don't want to happen.

You can still use your new images with my code/your code, you may just need to play around with the tiling percentages.

Do you have the necklace image as a separate transparent PNG you could attach?

Here is the necklace image.

I have heard you and others talk about turning off styles in the browser to make sure that the HTML code is semantically correct. How does one do that? I test in IE 7, Netscape 7, and Firefox. How is this done in each?

No idea about IE and Opera, but Fox has two ways.

View > Page Style > No Style

alternatively install the Web Developer extension and use <ctrl><shift><s>

Okay, here is a revised page.

Foxden Creations

html {background: #2F3E52;}
body {background: #495565 url(background.png); width: 860px; margin: 0 auto; overflow: auto; position: relative; border: 6px solid #000;}
#container {background: url(content.png) 56.3% 23%; overflow: auto;}
ul {float: left; width: 175px; margin: 0; padding: 0; list-style: none; text-align: center;}
ul li {background: #000; color: #fff; width: 85%; margin: 1em auto; }
h1 {height: 130px; background: url(logo.png) no-repeat top left; text-indent: -9999em;}
#sidebar {float: right; width: 250px; background: #ccc;}
#footer {clear: both; background: url(footer.png); text-align: right; color: #fff; font-weight: bold;}
#footer p {margin: 0;}
#content {margin: 0 250px 0 175px;}
#necklace {position: absolute; top: 0; right: -.5em; background: transparent url(jewelry.png) no-repeat; height: 324px; width: 158px;}

Foxden Creations and Jewellery

I've guessed at some dimensions but compare it with my earlier code and view it in a browser, see how it's shaping up.

Could you also attach your main logo image?

Here it is.

I see what you are doing. I was right about the jewelry being positoned absolute. It is interesting seeing how things are shaping up without the use of tables even though the actual CSS page hasn't been started yet. I may need to do some more intensive reading on the CSS code that you are using.

I know that I am probably jumping the gun, but how do I get the double layered effect. If you look at the mockup that I did, I do want that effect, which will probably have to be done with images.

Also I was taught that hexadecimal colors are #******, yet you have some with only #***. Is this because all the letters or numbers are the same and the browser can read it just fine? I am just curious.

Could you comment certain areas so that I know what you are doing and why? This will also help me understand what is going on. Or maybe we can leave that for the final CSS page.

cgacfox - thats the shorthand color codes.

http://www.seoconsultants.com/css/colors/web/safe/

the left column is the shorthand and the hex is what you are used to using

All I've been doing with the CSS is putting it in the head section of the HTML page so it's all together, once we get it finishes we'll separate it into a separate .css file

I'm at work again now so I'll have another look tonight.

Could you possibly email me the separate link images for the left column? If you add them all to a .zip or .rar and email thepineapplehead at gmail dot com

also, do your left links have a rollover effect?

I will send you the images of my links. They do not have a rollover effect. I just made the one image for each link. Didn't feel like doing a rollover effect with a second image on them. I could down the road though once I figure out what I am doing.

After the home page is completed, the next challenge will be the individual pages with the shopping cart info on them. I made a mockup of the necklaces page. I have a simple extension for DW from Web Assist for eCart. However, I am considering purchasing the full-blown version of it. I was stearing away for quite a while because it is CSS-based, but now that I am learning how to create the look and feel for my pages using CSS, I just might purchase it. The "add to cart" buttons will link with Paypal.

I am also in the process of learning ASP, ASP.NET, PHP, and CF. That way I am a more rounded designer with development skills as well. So far none of my clients have needed any of these but if I am to expand my client base, I need to be ready for anything they are looking for. Flash is another thing that I have been playing with and trying to learn.

I want to let you know I really appreciate all your help with my learning. This is a lot more than what I have received on other CSS forum sites. You are fantastic!!! I hope that with the skills I learn here, I can contribute back to the forum with help for others.

Getting there!

The next thing I need is the border image split into three parts, but full size, whatever width you want the site to be, with clear center - like this:

I split it into four parts because the pattern on the left middle looks different than on the right and I wanted to make sure it lined up correctly. If this won't work, then I will re-slice the middle image as one image. I want the site 750 in width so that people still using 800x600 won't have to scroll left and right.

I have been looking over the code that thepineapplehead has posted for me so far and I have a few questions. I have a CSS editor called Stylemaster and have done the tutorial that comes with it. I have also read numerous tutorials and am currently reading "HTML Utopia: Designing Without Tables Using CSS" from the Sitepoint web site.
body {background: #495565 url(images/header.png); width: 860px; margin: 0 auto; overflow: auto; position: relative; border:10px solid #000;} .
In this line of CSS I for the body I am not sure what the overflow: auto means. Also why is the position set to relative? If I want the body of the page to be no more say 800px shouldn't I change the width from 860px to 800px or maybe less for those that use 800x600 resolution so left/right scrolling is not needed? I am also not sure why he created a border on this? Will it be replaced by the images that I posted for the top, left, right, and bottom portions of the page? But then again the middle section should be able to expand depending on the amount of content without any problems so I would think that the middle images would not go into the body part of the code.

In this part #content {margin: 0 250px 0 175px;} am I correct that the top margin is set to 0, right is 250px, bottom is 0px and left is 175px?

I found where I can control the size of the font for the footer area, but am confused as to why it is in the #footer area and the not #footer p area.

If I want a background in the HTML section, would I add am image there as well as the background color?

Where exactly am I going to place the background images for the top, left, right, and bottom that TPH asked me for?

I just answered the HTML background image part. I would add the background image I want on that line.

Here we go!

It's to enclose the floated content.

So the absolutely positioned #necklace div knows where to take it's positioning from.

If you're supporting 800x600 then you should use 760px as a width; however your border images were 860px wide, that's why I used it

Yes. I haven't got round to posting the new bit yet.

It won't, it will be a tiled background of the middle content.

Yes. The specified units correspond to the width of the left and right columns. Change them, you'll see what happens

#footer will affect anything inside footer whereas #footer p will only target paragraph elements. It's not a big deal, you could use either, but #footer on it's own is less code

Yes.

The left and right will be combined into a middle image, and I'm adding in a few extra divs for the top and bottom.

Here's my latest HTML code:

Foxden Creations

• Home


• About Us


• Necklaces


• Earrings


• Bracelets


• Lanyards


• Bookmarks


• By Special Request

and corresponding CSS:

html {background: #2F3E52;}

body {
width: 770px;
margin: 2em auto;
overflow: auto;
position: relative;
background: #495565 url(img/border/middle .png);
}

#container {
background: #495565 url(img/border/middle.png);
overflow: auto;
padding: 0 1.4em;
}

h1 {
height: 149px;
background: url(img/foxden_creations_logo.png) no-repeat top left;
text-indent: -9999em;
}

#sidebar {
float: right;
width: 250px;
background: #ccc;
}

#footer {
margin: 0 1.4em;
clear: both;
background: url(img/footer.png);
text-align: right;
color: #fff;
font-weight: bold;
}

#footer p {margin: 0;}

#content {margin: 0 250px 0 175px;}

/* Let's get some images on the nav buttons! */

ul {
float: left;
width: 175px;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}

ul li {
width: 85%;
margin: 1em auto;
}

ul li a {
display: block;
width: 151px;
height: 39px;
text-indent: -999em;
}

ul li#nav-home a {background: url(img/buttons/home.png);}
ul li#nav-about a {background: url(img/buttons/aboutus.png);}
ul li#nav-necklaces a {background: url(img/buttons/necklaces.png);}
ul li#nav-earrings a {background: url(img/buttons/earrings.png);}
ul li#nav-bracelets a {background: url(img/buttons/bracelets.png);}
ul li#nav-lanyards a {background: url(img/buttons/lanyards.png);}
ul li#nav-bookmarks a {background: url(img/buttons/bookmarks.png);}
ul li#nav-request a {background: url(img/buttons/request.png);}

#necklace {
position: absolute;
top: 1.6em;
right: 1em;
background: transparent url(img/jewelry.png) no-repeat;
height: 324px;
width: 158px;
}

#border-top {background: url(img/border/top.png); height: 31px;}
#border-bottom {background: url(img/border/bottom.png); height: 31px;}

Wow! I can't believe it. It is really coming together now. However, the left and right border images are not looking too good. I removed them for now from the code. Maybe I didn't slice them correctly. I will have to see what you come with when you post more code.

Thanks for answering the questions that I posted. This way I can keep track of what is going on and understand the code better.

It's the shadow that hasn't come out quite right on the left and right images, that's why it looks kind of odd

I went ahead and re-sized the page image and emailed it to you. You might still have to tweak it a bit. The blue outer border I adjusted to 745px and the inner image I adjusted to 711px. Having the whole image should help you with the slicing better. I am now working to figure the slicing better myself and incorporating it into the code that you have already posted. Let me know if you need anything else.

Ok I went ahead and re-sliced the top, middle, and bottom images. Hopefully these will work better. I will try them in the code that was posted.

I have been playing with them and I am getting a weird shadow effect. The shadow is coming out a light color instead of a dark color. I think I need to slice more off. I will check this out. If it is true, then I will send new slices.

I saw what I did incorrectly. I got rid of the canvas color and that is why it was looking so weird. I added the canvas color back and now the shadow effect is looking much better. Still playing with the code to get the middle border in place and then seeing if I can get the header, content and footer images to show correctly.

I am getting there with the look of this. There are still some areas that are not coming together very well. The inside background image should have rounded corners but they are not coming out correctly using the images as I have sliced them. The background image for the container is square. Should I round the corners of the images for header, content, and footer so that the sides show curved? Also the middle border image looks odd. As you can see from the attached image of the page, it is not tiling correctly, which is probably due to the way I sliced it?

I'll have a look tomorrow when my brain is less swimming with CS:S and more with CSS

In case that made no sense I've been working on this:

http://en.wikipedia.org/wiki/CS_Source

all afternoon and evening

One of my husband's friends plays this game so I do know it.

I have playing around with my slices and it is starting to look much better. I have these slices now - top, header, middle, footer, & bottom. That may be too many slices but the corners are looking more rounded now. Somehow the header slice looks weird so I will continue to work on that one.

You play and I will play as well. I am getting all this now. It is finally coming together as I play with the images and the code. I am seeing the light!!!

My logo and the jewelry image seem to be off. Here is my code so far that I have tweaked from TPH's code.

Foxden Creations

Here is the CSS:

/* CSS Document */ html { background: #18222E; } body { width: 767px; margin: 2em auto; overflow: auto; position: relative; } #container { overflow: auto; width: 767px; } #header { overflow:auto; background: url(images/border/header.gif); } h1 { height: 147px; background: url(images/foxden_creations_logo.png) no-repeat top left; text-indent: -9999em; } #middle { background: url(images/border/middle.gif); } #sidebar { float: right; width: 250px; } #footer { clear: both; background: url(images/border/footer.gif); margin: 0 0px; font-family: Arial, Helvetica, sans-serif; font-size: xx-small; font-weight: bold; color: #FFFFFF; text-align: center; } #footer p { margin: 0; } #content { margin: 0 250px 0 175px; } /* Let's get some images on the nav buttons! */ ul { float: left; width: 175px; margin: 1.2em; padding: 0; list-style: none; text-align: center; } ul li { width: 85%; margin: 1em auto; } ul li a { display: block; width: 151px; height: 39px; text-indent: -999em; } ul li#nav-home a { background: url(images/buttons/home.png); } ul li#nav-about a { background: url(images/buttons/aboutus.png); } ul li#nav-necklaces a { background: url(images/buttons/necklaces.png); } ul li#nav-earrings a { background: url(images/buttons/earrings.png); } ul li#nav-bracelets a { background: url(images/buttons/bracelets.png); } ul li#nav-lanyards a { background: url(images/buttons/lanyards.png); } ul li#nav-bookmarks a { background: url(images/buttons/bookmarks.png); } ul li#nav-request a { background: url(images/buttons/request.png); } #necklace { position: absolute; top: 35px; right: 1em; background: transparent url(images/jewelry.png) no-repeat; height: 324px; width: 158px; left: 574px; } #border-top { background: url(images/border/top.gif); height: 41px; } #border-bottom { background: url(images/border/bottom.gif); height: 39px; }

#necklace { position: absolute; top: 35px; right: 1em; background: transparent url(images/jewelry.png) no-repeat; height: 324px; width: 158px; left: 574px; }

you don't need all that positioning, just use TOP and RIGHT to specify how far away from the top and right you want the image, and remove the LEFT one.

When I try to use absolute positioning with the logo it is not working. The header slice goes completely away.

h1 { position: absolute; top: 35px; right: 325px; background: transparent url(images/foxden_creations_logo.png) no-repeat; height:147px; width: 389px; text-indent: -9999px; }

I just duplicated the #necklace code taking the left part out. This is confusing because when I don't mess with the logo code the necklace code works just fine by showing the header slice.

Absolute positioning seems confusing. I still need to get the images of my product in the sidebar area and they will also have to use absolute positioning if you look at the image of the page that I posted. I am now wondering if that will mess up the middle slice that I have. I ended up doing the slices differently than what was originally asked of me. Maybe that messed things up. Do I need to go back to square one or two and do the slicing as was originally shown to me?

I just changed position: absolute to position: relative and it works....at least on my laptop screen (which is a Dell 600M with a small LCD) viewing it locally at 1024x768. When I change the size of the browser window it stays in the same place. This could be the correct code now. I will try to change my resolution to 800x600 and see if that changes anything.