Not sure how to set up slices for this site

The mom?

The website itself can be identified in a few ways... the navigation errhh... consider using plain text if you can.

It appears a simple design, I don't see how you would put content in there though.

You might have to use relatively positioned div's to get the effect your after for say the right hand side of stuff.

Put the links and the picture in, then wrap them in divs and hack around and see if you can get something pleasing that way.

Floats and clears.

Show us the content the client is providing you and we'll go from there

Thanks TPH!! I have asked the client to send me what she wants on the home page. Just waiting to hear back from her. In the meantime I am seeing if I can follow what we did for my jewelry site and get it to work on this new site. So far....not so good!!

Good luck! You know where to find us!

The client finally sent some content. I have done a Fireworks mockup with the content added to the index page. Please see attached.

I know I have to start with something like this:

japanesethermalreconditioning.com


• home


• meet denise kingsley


• what is japanese thermal reconditioning?


• frequently asked questions


• contact denise

Japanese Thermal Reconditioning originated in Japan. It restructures the bonds in your hair with a chemical solution and the addition of heat. This treatment was created to permanently straighten the hair while controlling frizz and adding shine.

The process has many names-< /br>
Thermal Straightening< /br>
Magic Straight Perm< /br>
Thermal Relaxing< /br>
Thermal Rebonding< /br>
Whatever you call it, it is an absolute miracle for people with curly, frizzy, unmanageable hair.< /br>
Be sure to visit my other sites to find out what other services I offer< /br>
hightechhealthyhair.com
digitalpermexperts.com
braziliankeratinstraightening.com

Then I need to start building the CSS code. That is where I seem to get stuck every time.

I hope that we can do this quick and that I catch on quicker than I did for my jewelry site. BTW, I still haven't finished that one. A paying site always takes priority.

Attachment	Size
index.png	128.57 KB

Divide it up a little more Those two boxes should be in separate divs.

The bottom right image can be set as a background image on an element later

I am not sure I understand what you mean by "divide it up a little more"? Do you mean something like h2 for the first paragragh and h3 for the second paragragh or am I way off base?

I meant separate the boxes into separate divs

• home
• meet denise kingsley
• what is japanese thermal reconditioning?
• frequently asked questions
• contact denise

Japanese Thermal Reconditioning originated in Japan. It restructures the bonds in your hair with a chemical solution and the addition of heat. This treatment was created to permanently straighten the hair while controlling frizz and adding shine.

The process has many names-
Thermal Straightening
Magic Straight Perm
Thermal Relaxing
Thermal Rebonding
Whatever you call it, it is an absolute miracle for people with curly, frizzy, unmanageable hair.

Be sure to visit my other sites to find out what other services I offer.
hightechhealthyhair.com
digitalpermexperts.com
braziliankeratinstraightening.com

I hope this is what you were looking for me to come up with.

Can anyone comment on if I am starting out on the right foot here? I am trying to follow what I learned from my last site help here but am not sure that I am starting correctly. Thanks.

I only meant the two boxes, you've got too many divs now

Also,

"the process has many names including" - the list following should actually be marked up as a list

:bigoops:

Here is the code with only the text boxes with divs -

japanesethermalreconditioning.com

home

meet denise kingsley

what is japanese thermal reconditioning?

frequently asked questions

contact denise

Copyright © 2007 Denise Kingsley
All rights reserved
Site design by Foxden Web Solutions

Ok I have corrected the divs that I put in and just have them for the text boxes. Where do we go from here?

I was wondering if I could make a suggestion as to how to help me. If TPH or someone else could post a format for me to follow something like below it would help me out great deal.

1. Come up with design in Fireworks.
2. Create HTML code for when CSS is turned off.
3. Start by marking up certain sections.
4. Next step
5. Next step

etc, etc, etc.

This would really help me follow what is going on and have a list of things I that need to follow and it hopefully will keep this thread from becoming HUGE!!! I find that if I have a list of things to do and a little explanation I understand better and can use that for the next project.

Thanks.

1. Code your site in perfectly semantic HTML with appropriate tags such as h1 for your heading, p for your paragraphs, etc. Ignore design, ignore css

2. Validate your HTML, fix any errors

3. Design your site in Photoshop, GIMP, Fireworks, etc

4. Figure out how you will implement your design into your code and cut your layout into the appropriate pieces for backgrounds, nav, etc.

5. Begin a CSS document to begin the design, editing your HTML only when you need to do so to further your CSS design, but not adding extra markup unless absolutely necessary and still semantic and valid.

6. Validate you CSS, validate your HTML

7. Test in most used browsers, FF, IE6, IE7, Opera, Safari, etc.

*Note: I suggest you validate, early, often, and more again, and some more, and possibly do it one more time just in case.

Although it's best to start with the content and unstyled HTML the unfortunate fact is that you'll often get clients that want a design before they give you all the content.

So if you can't follow Deuce's timeline because of this or another reason you might use this methodology:

First, whenever you modify code and complete a step, validate. When in doubt, validate.

1. Design site in X graphic program (I use Fireworks). Make a sample of each element that you'll ever use. That includes, but isn't limited to the logo, company name, tagline, navigation components, ALL form elements, 9 heading levels, 5 levels of lists, links, breadcrumb seperators and a sample image with any border/shadowing type effects that you're going to have.

2. For elements that get stretched make the smallest slice you can (often 1 px) to export.

3. Make a sample page in X graphic program.

4. Draw 30% transparency rectangles with variety of obnoxious colors over each area of the sample page that corresponds to a css element. That means you have a big box where your navigation is with sub boxes for each item in your navigation. The same is true for breadcrumbs, but it's NOT true for paragraphs, you don't have a box for the "main content" where your paragraphs are. Be precise and be stingy with the boxes, only use them when there's an absolute need for a seperation. Add one rectangle over the top of everything with some light color if you're going to use a fixed width page.

5. Create an HTML page that has a tag and unformatted text as contents for each box you have on your sample page. Be sure to use semantically correct tags. Don't use divs or spans. For example:
Logo
Awesome Corp.


Satisfying all of your awesome needs

• Home


• Services


• Jobs


• Forum

• Home


• Home



Services




Some Specific Service





blah blah blah blah some link blah blha blah blah




© Copyright 2007 Awesome Corp. All Rights Reserved

Of course your content will differ. VALIDATE!
6. Add divs or spans only for those boxes not covered by some other tag.
7. Remove all divs and spans you put in there that weren't necessary.
8. Start the css with:
* {margin:0; padding:0}
body {background:#fff url(samplelayout.jpg) no-repeat left top;}

replace samplelayout.jpg with whatever your sample is. Also be sure that you use left top.
9. set CSS of each element to the same height and width of its corresponding box using background color to be sure you've got it right. Start with the innermost boxes before going to boxes that contain anything.
10. Position each box so it's the same as its corresponding box in the background image using CSS. Don't use position absolute or relative and don't use padding or borders unless you HAVE to. Test the layout with the latest version of FireFox and NOTHING ELSE. Save a backup of each file.
11. Once you've got everything where you want it see if it is the same in IE7 then make any adjustments needed without hacks if possible, if needed use hacks either or an alternate stylesheet. Save a backup of each file.
12. Repeat step 11 for IE6
13. Repeat step 11 for Safari
14. Use image replacement techniques to bring your sliced images in.
15. Validate, post on a test server, post here in the site review area.

That should about do it, I hope I didn't miss a step.

Hope that helps,
LokiLoks

Thanks guys. This really helps me out a lot. I am so used to just going into DW and creating a table and going from there with graphics and such. It really helps to know the proper steps when working with CSS. Where is the best place to validate the code? I can add it to my favorites so it is easy to get to. Also what I am finding difficult is once the HTML code is done and I start working on the CSS and try to figure out the slicing of my graphics, exactly how am I slicing things up. Maybe I am coming up with too complicated a design that really shouldn't be done. Maybe stay away from creating drop shadows and boxes within boxes. I don't know. I have looked at a lot of really nice sites and there are many out there that look fairly complicated in their styling.

I originally had some more divs in my code but TPH told me to remove them. So at this stage of the game I am not sure where to go from here?

Install Firefox and install the Web Dev bar and Firebug
The web dev bar has shortcuts in it for validating in the Tools tab.

You can get as complicated as you want with all the drop shadows and hoop-lah.
Try your best and when you run into problems come back and show us what you got.

I installed the Web Dev bar and Firebug to my Firefox. I use DW MX 2004 for my HTML code. I validated the code using Firefox and it shows 6 errors. I am very confused and not sure what the errors are telling me to correct. Could you check this for me and explain better?

Now I hate to admit it but I am the type that needs a lot of hand holding. I am stuck as to what to do next with the site. I added divs for the text boxes but I have no idea what to do next. If you could walk me through this it would be greatly appreciated. Please give me several things to do so that I am kept busy for a while. Tell me to 1) add something or 2) change something...something along those lines. Write this as a tutorial. I know that TPH does not like a bunch of divs. I did read his article on the subject but when I was working with my code I was diving almost everything.

You've been here long enough to know that we need a link or your code if we are going to try and help you.

:bigoops:

Yeah I realized that as I was driving in to work. I will post the site tonight. Sorry about that. My bad! :blushing:

That's no excuse to not throw the design aside and markup your html semantically and validly. If you have no text then get some Lorem Ipsum to populate the page.

The main focus of my job is to take horribly built tables based pages and rebuild them W3C compliant, so I ALWAYS have a design in front of me, doesn't mean I start with the CSS.

I don't have this uploaded anywhere yet.

Japanese Thermal Reconditioning by Denise Kingsley

//

japanesethermalreconditioning.com

• home
• meet denise kingsley
• what is japanese thermal reconditioning?
• frequently asked questions
• contact denise

Copyright © 2007 Denise Kingsley
All rights reserved
Site design by Foxden Web Solutions

The script is for doing drop shadows for IE6. It really works well. However, I am willing to learn how to write CSS for it if there is a way to do it.

Cleared the errors myself. I guess I needed to use single quotes for the divs instead of double quotes. I never knew that! Ok now I am ready to move on. Please post what I should do for the next few steps so I keep busy on this. If I get stuck I will post my question. Please understand that I am not really good at the lingo that can be used so things need to be explained more in laymans terms for me. Sorry to be such a pain.

Ok Hugo, maybe that was the incorrect thing to say. I am an old lady who forgets things unless they are written down somewhere. What I am trying to get at is to put it in the simplest terms possible sort of as a guide to help me in future projects as I learn CSS. I really want to get away from tables because I find I can do so much more graphically if I use CSS. However, I am wondering if I am coming up with too complex of designs for this to really work. I have boxes and drop shadows and textures and etc. My clients seem to like what I am coming up with graphically and I want to be able to deliver the goods with correct code.

Fireworks does have a neat thing that it does. When I design a site in Fireworks I can actually export it to DW with HTML code and the images. Then all I have to do is put in my hotspots for links and so far it looks good in EI6, EI7, Firefox, and Netscape. However, I realize that this may be the cheater's way. I really want to learn this and cannot afford to buy some of the video tutorials out there nor do I have the time to attend a class somewhere. I am a visual learner so being detailed in explaining things and maybe having examples really helps me grasp what I am learning better.

I have validated the code that I have so far. I only have divs on the 2 text boxes but am not sure what to do next. I have gone over the threads from my jewelry site that I got help on from here, but that doesn't seem to be helping with this site. I know I will need more divs than what I currently have. If I am thinking this through properly, then I would probably need a div for the container,(which would be the whole site(below the header area?), a div for the main content and a div for the footer. The right text box would be floated right, the left text box would be floated left and the pic at the bottom would also be floated right. Oh and the nav area would be floated left. The top logo image and title of the site would be done as H1 with the container div below that? From the layout that I have I would think this would be considered a 2 column layout. I am just following the code that I had for the jewelry site. Please let me know if I am thinking this through properly. Thanks.

It would probably help people if you could get this up somewhere so that they could see how things were shaping up.

Your basic layout sounds about right , you will probably need a main element that hold all elements and which will take a background slice that essentially is a strip from left edge to right but only a few pixels high, run top to bottom then the top and bottom corners will be further slices hung on perhaps the header and footer elements. One thing to be careful of is patterns as you have to work often with repeating slices of your pre-set graphic layout and patterns can be awkward to find a repeating point on.

I loaded the site up on my server. You can see it at http://foxdenwebsolutions.com/denise%20kingsley/index.html. I am playing some more and have added code. If this code is incorrect, please let me know. So far I cannot get any of the background elements to show up. Maybe I am jumping ahead too far and should slow down.

You appear to be doing fine, but you must check your syntax carefully!

#container { background: url(borders/border_middle.png; <<<< overflow:auto; padding: 0 1.4em; }

I corrected that line of code. I am getting a weird break between the header and the middle on EI6, EI7, Firefox, and Netscape. I can't seem to figure out what is causing it. (Never mind, I was looking locally at this. I checked the uploaded code and the logo is over to the right too far on all of them and I am getting scroll bars on Netscape!) Any ideas on how to fix that?

I can also start working on the nav. I have saved transparent images of the nav and can probably work off of the foxden creations code to get those to work. I do have a question on that though. Since I saved the text as images, is there any way to get the images to change color when they are rolled over? Would I create new images in a different color to do that? If so, I can change the color for a rollover effect. How would I write the code for it though?

Once the nav is in place and doing what it needs to do, I can move on to the text boxes. I was trying to have the ability to add as much or as little text in them as was needed. Is there a way to write the code so that they can expand depending on the amount of text? I know there is a way to do it with tables as a background image. Or am I going to have to add the text in the boxes in Fireworks and then put them on the page? If there is a way, I am also looking for the text to have a drop shadow effect. Can this be written with code as well?

You can shift the logo.png to the left using a negative value for the x-offset try something along the lines of -15px.

If you want to change images on hover then you will need to mske new ones with the variation you want then the best thing is to append it to the other image so that you have one image comprising two states, then you obtain your hover by simply shiffting the background position of the already called image.

With boxes you need to think in terms of at least two parts to the image so that you can place one on the outer element and the other on a nested element so that the image is able to move with height increase, it's actually the same principle that you have already used on the main page background it's in three parts the middle slice allows the height to increase as it repeats down, the top and bottom remain stuck in their respective positions creating the unified and solid look, regardless of height.

Ok I fixed the logo problem and it looks good now. However, I started adding the images for the left nav following the code that was used in my Foxden Creations site. It really doesn't look right. What have I done incorrectly? Here is a link to the site. http://freewebs.com/foxdenwebsolutions/index.html

It's not apparent what the problem is you will need to be more specific I see images used on the anchors but no others?, if people are to be able to help they will need things detailed and named as much as possible.

If you look at the mockup I did in Fireworks, you will see that the nav is supposed to be to the left of the main section and lined up properly. What I am seeing when viewing the code that I uploaded shows the home link to the left, the rest are lined up properly but there is a big space between Meet Denise Kingsley and What is... I need the home image to be aligned so that it all looks centered and the big space gone. I don't know how else to put it.

Attachment	Size
index.png	128.57 KB

Your graphics are different widths, backgrounds are placed by default top/left; if your text in the graphic is centered then once called into that elements background it will look offset!

As for the space why have you got a height set on that li id ?

I see what I did now that you jogged my brain. I did not have a height and width on the home image and the height for the meet Denise Kingsley was too much now it looks better. http://www.freewebs.com/foxdenwebsolutions/

Now I really don't understand how to get the effect of the images changing color when moused over. How to I write the code in CSS? I have images to replace the current white color but am at a loss on how to get this to work properly.

Once I get that working as I want we need to start looking at the text boxes and how to get them to work correctly with the text.

Could someone help me with this next step? I am not sure how to get the rollover effect with my links. I have 2 images (white and a brownish color) for the links. It should change from white to the brownish when rolled over. I have no clue how to do this in CSS. Thanks.

In the simplest sense you just replicate the anchor declarations but this time adding the pseudo class :hover to the anchor and calling your new graphic instead of the existing one.

A better method though is as I said in one of the earlier posts; take your two graphics that represent the 'off' and 'on' states and in your graphics program merge them into one so that the 'off' state image sits directly below the 'on' state, the graphic is now twice the height, when called into the page the bottom half of the image will be hidden with only the top half showing, then instead of having to repeat all the a:hover with the 'off' images you just need the one ruleset that shifts the background position on hover up by 50% to show the lower half of the combined image.

So if I am understanding you correctly, currently the home link is 69X28. I would then add the different colored one right underneath in fireworks, which would make it approx 69X56. I think I am understanding that. Now, and excuse me for being ignorant, how would I write the code for this to work? Please post an example of what the code would look like. I am a visual learner so I have to see it to understand it.

Once I get that figured out, I need to move on to the two text boxes that I have. There is one to the upper right and one to the lower left. I want the boxes to be able to expand depending on the amount of text used. I also want to be able to use a drop shadow effect for the text. Is that possible? If not, then I may have to just add the text as an image in Fireworks and then add the text boxes as floating images to the overall code.

http://www.alistapart.com/articles/slidingdoors/