josoap

I've got it to work by experimenting with the bottom padding of the body div. But I seem to have gone against what was recommended in the tutorial ie: "The body is quite normal too. The only important thing is it must have a bottom padding that is equal to (or slightly larger than) the height of the footer. You can also use a bottom border if you prefer but a margin won't work." My footer is 20px high but the bottom padding is 160px! It seems to work. Is there be something I need to know about that?

Don't know what happened to the link. Here it is again: http://www.arecadesign.co.uk/iptest/test1.html

OK, definately getting closer but can you have a look at this link. The footer's moving down but not enough to accommodate all the text in the text2 div. test page

Thanks, I tried that and the footer does move further down but not completely below the text2 box!!?

The problem is with the "text2" div. But what???

In case you haven't got time to go through the code, what I've done is used the code from the tutorial you sent me the link for. Then I put in a text box which I was hoping would force the footer down as it filled with content. It's situated in the "container" div. But it's not happening. It works if I put text directly into the container div. This is where the problem is I think: CSS html, body { margin:0; padding:0; height:100%; } #container { min-height:100%; width: 900px; position:relative; margin-right: auto; margin-left: auto; } #header { background:#ff0; padding:10px; } #body { padding:10px; padding-bottom:60px; /* Height of the footer */ } #footer { position:absolute; bottom:0; width:900px; height:60px; /* Height of the footer */ background:#6cf; } #text2 { position:absolute; top:170px; left:556px; width:333px; min-height:100%; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: .8em; text-align:left; color: #000000; border-top: 0px solid #FFFFFF; border-left: 0px solid #FFFFFF; border-right: 0px solid #FFFFFF; border-bottom: 0px solid #FFFFFF; }

I'm doing something wrong. This is the layout I want to achieve so thanks for the pointer. I've put in a test text box with lots of duplicated text to see if the footer stays at the bottom. But it doesn't work!? Here's the code CSS html, body { margin:0; padding:0; height:100%; } #container { min-height:100%; width: 900px; position:relative; margin-right: auto; margin-left: auto; } #header { background:#ff0; padding:10px; } #body { padding:10px; padding-bottom:60px; /* Height of the footer */ } #footer { position:absolute; bottom:0; width:900px; height:60px; /* Height of the footer */ background:#6cf; } #text2 { position:absolute; top:170px; left:556px; width:333px; min-height:100%; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: .8em; text-align:left; color: #000000; border-top: 0px solid #FFFFFF; border-left: 0px solid #FFFFFF; border-right: 0px solid #FFFFFF; border-bottom: 0px solid #FFFFFF; } HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15"><title>online pet insurance for cats and dogs</title> <meta name="Description" content="pet insurance"> <meta name="Keywords" content="pets, cat insurance, dog insurance, online pet insurance, vets fees, pet insurance quotes"> <meta name="Author" content=""> <meta name="robots" content="index,follow"> <link href="test1.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id="header"></div> <div id="text2"> We specialise in providing insurance for cats and dogs. <p>For today's responsible pet owner, pet insurance is a necessity. If your pet is ill or injured you will want to be able to base your decisions onwhat is best for your pet, not on what you can afford. For a few pounds a month you can enjoy peace of mind, knowing that you and your pet are protected.</p> <p>When considering insurance for your pet it's important to remember that not all insurance policies are the same,and cheapest doesn't always equalvalue for money. With every supermarket and bank vying to sell you theirinsurance, don’t be distracted by special offers or promotions. Rememberthat this policy will be for the life of your pet and a “free” gift vouchertoday won’t make up for any short fall in cover in the future.</p> <ul> <li><span class="black">cover for life</span></li> <li><span class="black">up to £4,000 per year in treatment costs</span></li> <li><span class="black">cover for alternative therapies</span></li> <li><span class="black">no 12 month limiton treatment</span></li> <li><span class="black">no exclusions after a claim</span></li> </ul> <p>peace of mind, knowing that you and your pet are protected.</p> <p>When considering insurance for your pet it's important to remember that not all insurance policies are the same,and cheapest doesn't always equalvalue for money. With every supermarket and bank vying to sell you theirinsurance, don’t be distracted by special offers or promotions. Rememberthat this policy will be for the life of your pet and a “free” gift vouchertoday won’t make up for any short fall in cover in the future.</p> <p>peace of mind, knowing that you and your pet are protected.</p> <p>When considering insurance for your pet it's important to remember that not all insurance policies are the same,and cheapest doesn't always equalvalue for money. With every supermarket and bank vying to sell you theirinsurance, don’t be distracted by special offers or promotions. Rememberthat this policy will be for the life of your pet and a “free” gift vouchertoday won’t make up for any short fall in cover in the future.</p> <p>peace of mind, knowing that you and your pet are protected.</p> <p>When considering insurance for your pet it's important to remember that not all insurance policies are the same,and cheapest doesn't always equalvalue for money. With every supermarket and bank vying to sell you theirinsurance, don’t be distracted by special offers or promotions. Rememberthat this policy will be for the life of your pet and a “free” gift vouchertoday won’t make up for any short fall in cover in the future.</p> <p>peace of mind, knowing that you and your pet are protected.</p> <p>When considering insurance for your pet it's important to remember that not all insurance policies are the same,and cheapest doesn't always equalvalue for money. With every supermarket and bank vying to sell you theirinsurance, don’t be distracted by special offers or promotions. Rememberthat this policy will be for the life of your pet and a “free” gift vouchertoday won’t make up for any short fall in cover in the future.</p> </div> <div id="body"> <div id="footer"></div> </div> </div> </body></html> Thanks again.

Ooops! Thanks, I'll take a closer look.

Hi, thanks for the reply. I'm not trying to achieve a footer fixed to the foot of the browser. I want the footer fixed at the foot of the page so, if the page contains lots of content, the footer moves down as the content expands - disappearing below the fold if necessary. Thanks again.

OK, this is almost a confession: In the sites I've built so far since learning CSS I've avoided trying to use a "floating"(?) footer which stays at the bottom of the page as the content on different pages varies in content. So the site expands vertically, everything stays where it should . . . including the footer. Up til now I've avoided relative positioning and made too much use of autoflow in different divs so the footer doesn't have to move (it's positioned absolutely). So can anyone point me at some reliable code that will allow me to learn and make this obviously important step. Thanks, Jo

Brilliant! Thanks. It worked perfectly.

Hi, Can you put a jpeg of the layout online - showing where the thumbnails and main image should appear. Also, if you give me the sizes (height and width) of the thumbnails and the enlarged image I might be able to put together something useful for you pretty quick. But need to see layout to supply relevant code. To be honest, you might be quicker with the free lightbox. But does that fit in with your layout. Also, sounds like your clients don't have flash installed in their browser. That's a big obstacle obviously unless they're willing to install. Jo

Hi, I guess you don't use flash do you. You probably don't have time to learn it with this particular project but you might want to think about it for the future - it gives you a lot of scope to achieve what you need. What size gallery are you talking about - how many images? If you have Flash installed I could send you some very useful code. I was in the situation you're in now a couple of years ago so I understand how you feel. Best, Jo

I agree there are many designers who use photoshop for their initial layout design and it's down to what you prefer. One bad practice that I've noticed with doing that though, and it's probably a legacy from tabled based design days, is that when the layout is sliced I've often seen images included in layouts that really have no need to be there. I think it can be too tempting to achieve effects with images when something equally pleasing can be achieved with pure css - for example if you look at the work produced by Stu Nichols at CSS play and CSSzengarden, I'd be interested to know if they used sliced up layouts from photoshop. But as I said before, each to their own.

This is the doctype I'm using. Should that make a difference? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I mean the white gap that appears at the top of each cell when it's highlighted. See image. Hope that makes it clearer. Thanks.

Hi I'm trying to format this table with a hover over/ hi light state. It's working fine except I've got an annoying gap (top) in the hover state which I've tried everything to get rid of. Code below. Can anyone see where I'm going wrong. HTML <table summary="hover over table" class="datatable"> <tr><td>item 1 </td></tr> <tr><td>item 2 </td></tr> <tr><td>item 3 </td></tr> <tr><td>item 4 </td></tr> <tr><td>item 5 </td></tr> <tr><td>item 6 </td></tr> <tr><td>item 7 </td></tr> <tr><td>item 8 </td></tr> </table> CSS .datatable { border: 0px solid #0261B6; padding: 0px; border-collapse:collapse; width: 760px; } .datatable td { border-top: 0px solid #7da5d6; border-right: 0px solid #7da5d6; border-bottom: 1px solid #7da5d6; border-left: 0px solid #7da5d6; padding: 0px 4px 4px 4px; border-spacing: 0px; text-align:left; font-size: 0.8em; width: 760px; } .datatable th { border: 0px solid #828282; background-color: #7da5d6; color:#FFFFFF; font-weight: bold; text-align: center; padding: 4px 4px 4px 4px; width: 760px; } .datatable caption { font: bold 0.9em Arial, Helvetica, sans-serif; color: #33517A; text-align: left; padding-top: 0px; padding-bottom: 0px; } .datatable tr:hover, .datatable tr.hilite { background-color: #DFE7F2; color: #000000; } Thanks, Jo.

Hi, I've noticed how many sites now have a row of links to various social network sites and I understand that the reason for that is to improve seo. My question is: is it useful/appropriate to include such links on a business website. For example, I'm currently producing a site for a automotive software development company. How much value would it have for a business such as that. Or is it now the case that all sites should include such links? If so, which are the best ones to link to. Thanks, Jo

Right. I've come back for a bit of a rant about this. Having just spent the last day and a half trying to apply a new skin in DNN - wrestling with "millions" of spacer images and equally large numbers of tables (yes I said tables) nested within each other in the most complicatedly annoying way it's clear to me that DNN is lost in the past. Wordpress is at least trying to be standards compliant. No tables and noooooooooooooo spacer gifs. The choice is obvious. What a waste of time.

www.arecadesign.co.uk I didn't design this site really but I did build it from top to bottom. The original layout was designed by the MD of the company . . .'nuff said.I had to work within that layout. Check out the web portfolio. I'm not perfect but I've developed some style and technique I think. Maybe rely to much on Flash elements too . . . . . . but my clients keep asking for it!! Any constructive feedback welcome.

When I got in to CSS - moving from table based design - I found it so much easier just to design the site purely in CSS and XHTML. I've tried designing layouts in Illustrator and Photoshop first but personally I found it an unnecessary step. I prefer literally sketching a layout on a piece of A4 and then, usually starting with a similar layout that I've produced before and adapting those files to the new layout design. Of course Photoshop is essential in preparing images, cropping, retouching, optimising for the web but not for designing layouts though in my view. Another advantage of working in the way I do is that any bugs or cross browser issues become apparent as you go along and therefore quicker to iron out. But each to their own eh! Jo Wrexham, not far from Pen-y-cae neither ;-)

Hi, Just recently I have had to create 3 blogging and cms sites. I've used Wordpress and just getting my head around Dot Net Nuke.Seems like the word's got out (at least in this neck of the woods) and every knew client wants this sort of functionality. At this point I much prefer Wordpress but maybe that's because it was the first one I used. I'm finding dot net nuke a complete pain in the **** Open source, yeah great! Produced by a million geeks around the globe who each have at least 3 different opinions on the best way to achieve any given task. So what do you all think - WP or DNN? Jo

Thanks for replying. I did see your previous reply - apologies for not responding. Suspected that was the answer anyway but seems funny that I've heard of anyone discussing the possibility. Anyway, onwards and upwards . . . .

Hi, It may be the dumbest question you'll ever read but please put us out of our misery. Someone raised this question in our company the other day and none of us could answer it definitively. The general concensus was that, after looking at the source code of companies that specialise in seo, the answer is no. But let's ask anyway and then we'll know for certain. The question is: We are wondering, if instead of using names for our tags and css styles such as "main", "wrapper", "navs" and so on, would our code be more optimised if we used names like "graphic design", "web design" and so on - using the same sort of terms that we'd use in our keywords etc. Would naming our code elements in this way improve seo? I posted the same question in the general design and layout forum. It had 46 views and not a single response. . . what does that mean??? Best regards, Jo

Replying to my own post :-( 47 views so far and no responses . . . !!!!???? Is this really a dumb question or is it that no one knows. I notice from the code of company sites specialising in seo that they don't bother naming their tags in what you would think is an optimised way. So I suppose that answers my question. But is it dumb to assume that as a robot trawls through a site it ignores the markup and just reads the content. A definitive "yes" or "no" from anyone with deeper knowledge of coding and seo would be useful. Regards, Jo