41 replies [Last post]
cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

I am back with a new project. This is an actual paying client and I have done the design of the site. Now I am not sure how to slice it for the CSS mark up. The home page will have the 2 text box areas but the rest of the site will not so I guess maybe a 2 column layout would be appropriate. Here is the image of the home page. I would need the text areas to be able to expand depending on how much content I get. The dark background will be done in the HTML tag. The header area is pretty easy to figure out and the side nav bar. It is the 2 text boxes and the image in the right hand lower corner that are throwing me for a loop. Any suggestions would be appreciated.

AttachmentSize
home_page_2.png731.6 KB

Because I am the MOM, that's why!!!

SuperRoach
SuperRoach's picture
Offline
Enthusiast
Ballarat
Last seen: 8 years 25 weeks ago
Ballarat
Timezone: GMT+10
Joined: 2007-02-26
Posts: 291
Points: 6

The mom? The website itself

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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 6 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Floats and clears. Show us

Floats and clears.

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

Verschwindende wrote:
  • CSS doesn't make pies

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Thanks TPH!! I have asked

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!!

Because I am the MOM, that's why!!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 6 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Good luck! You know where to

Good luck! You know where to find us!

Verschwindende wrote:
  • CSS doesn't make pies

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

I finally have content.

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.

AttachmentSize
index.png 128.57 KB

Because I am the MOM, that's why!!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 6 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Divide it up a little more

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

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

Verschwindende wrote:
  • CSS doesn't make pies

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

I am not sure I understand

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?

Because I am the MOM, that's why!!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 6 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

I meant separate the boxes

I meant separate the boxes into separate divs Wink

Verschwindende wrote:
  • CSS doesn't make pies

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Here is the revised code

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-
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


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

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

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Can anyone comment on if I

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.

Because I am the MOM, that's why!!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 6 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

I only meant the two boxes,

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

Also,

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

Verschwindende wrote:
  • CSS doesn't make pies

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Sorry about the divs...

: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
  • 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


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

    Because I am the MOM, that's why!!!

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 9 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    I have corrected the code

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

    Because I am the MOM, that's why!!!

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 9 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    Suggestion

    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. Wink

    Because I am the MOM, that's why!!!

    Deuce
    Deuce's picture
    Offline
    Guru
    Somewhere, USA
    Last seen: 2 years 32 weeks ago
    Somewhere, USA
    Timezone: GMT-5
    Joined: 2005-11-20
    Posts: 4424
    Points: 1843

    1. Code your site in

    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.

    all » http://dictionary.reference.com/browse/all

    Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

    lokiloks
    lokiloks's picture
    Offline
    Enthusiast
    Albuquerque, NM
    Last seen: 9 years 43 weeks ago
    Albuquerque, NM
    Timezone: GMT-6
    Joined: 2007-05-16
    Posts: 145
    Points: 24

    Another Option

    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:

    Awesome Corp.

    Satisfying all of your awesome needs




    • Home

    • Home

    • Services


      Some Specific Service


      testfloatr

      blah blah blah blah some link blah blha blah blah




    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

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 9 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    This really helps

    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?

    Because I am the MOM, that's why!!!

    Deuce
    Deuce's picture
    Offline
    Guru
    Somewhere, USA
    Last seen: 2 years 32 weeks ago
    Somewhere, USA
    Timezone: GMT-5
    Joined: 2005-11-20
    Posts: 4424
    Points: 1843

    Install Firefox and install

    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.

    all » http://dictionary.reference.com/browse/all

    Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 9 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    I installed the Web Dev bar

    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.

    Because I am the MOM, that's why!!!

    Deuce
    Deuce's picture
    Offline
    Guru
    Somewhere, USA
    Last seen: 2 years 32 weeks ago
    Somewhere, USA
    Timezone: GMT-5
    Joined: 2005-11-20
    Posts: 4424
    Points: 1843

    You've been here long enough

    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.

    all » http://dictionary.reference.com/browse/all

    Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 9 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    Yeah I realized that as I

    :bigoops:

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

    Because I am the MOM, that's why!!!

    Deuce
    Deuce's picture
    Offline
    Guru
    Somewhere, USA
    Last seen: 2 years 32 weeks ago
    Somewhere, USA
    Timezone: GMT-5
    Joined: 2005-11-20
    Posts: 4424
    Points: 1843

    lokiloks wrote:Although it's

    lokiloks wrote:
    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.

    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.

    all » http://dictionary.reference.com/browse/all

    Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 7 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Quote:Please give me several

    Quote:
    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.

    Shock

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 9 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    Here is the code.

    I don't have this uploaded anywhere yet.

    Japanese Thermal Reconditioning by Denise Kingsley

    //

    Japanese symbol for hairjapanesethermalreconditioning.com

    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

    Straight hair image


    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.

    Because I am the MOM, that's why!!!

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 9 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    Cleared the errors myself. I

    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.

    Because I am the MOM, that's why!!!

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 9 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    Hugo wrote:Quote:Please give

    Hugo wrote:
    Quote:
    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.

    Shock

    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.

    Because I am the MOM, that's why!!!

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 9 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    I am ready to continue

    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.

    Because I am the MOM, that's why!!!

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 7 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    It would probably help

    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.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 9 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    Ok site is up

    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.

    Because I am the MOM, that's why!!!

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 7 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    You appear to be doing fine,

    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; }

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 9 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    I corrected that line of

    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?

    Because I am the MOM, that's why!!!

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 7 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    You can shift the logo.png

    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.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 9 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    Ok I fixed the logo problem

    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

    Because I am the MOM, that's why!!!

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 7 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    It's not apparent what the

    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.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 9 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    If you look at the mockup I

    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.

    AttachmentSize
    index.png 128.57 KB

    Because I am the MOM, that's why!!!

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 7 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Your graphics are different

    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 ?

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 9 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    I see what I did now that

    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.

    Because I am the MOM, that's why!!!

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 9 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    Could someone help me with

    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.

    Because I am the MOM, that's why!!!

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 7 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    In the simplest sense you

    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.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 9 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    So if I am understanding you

    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.

    Because I am the MOM, that's why!!!

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 6 weeks 5 days ago
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    Sliding Doors

    Verschwindende wrote:
    • CSS doesn't make pies