Jump to content
Stef's Coding Community


Advanced Member
  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by virtual

  1. The site does not validate, so you need to address that issue first. 1200px wide is too much, I would say a max of 1000px. There is too much space between your #sideNav and the text. Center aligned text does not look good, left align it. Use of too many different fonts, weights and variants, keep it simple. You should have a tag either in the header or somewhere near the top of your markup. Your "no jargon design" should be in the footer. These 2 and tags in the header are to help your client's SEO. You should not be using tags in the footer. Colourwise, unfortunately that yellow and black header is pretty overpowering, try toning it down by using a dark grey background instead of black on the main content. You could also just center it and keep it on a dark background instead of spreading the yellow across the whole page. The green of the footer is too bright. Practice is good even if it is free, and if you are proud of your end result you can always use it in your portfolio.
  2. Well thank goodness I'm not blind, dumb or just plain crazy. You definitely have a problem with your top navigation on a Mac, it does not show at all in Firefox 3.5, Safari 4.0 or IE5 for Mac (which doesn't really matter as it is no longer supported). It does however show in Opera 9.
  3. Thanks for that Jim, I thought I was losing my mind about not seeing the top navigation. Today I can see it on my PC Firefox 2 yesterday when I didn't see it I was Firefox 3 on my Mac. Well I just checked on the PC IE8, IE7, Chrome and Safari and the top nav is definitely there, however in IE6 it is tiny, almost illegible. I will check on the Mac later on today.
  4. Well I'm very sorry guys, I must be going blind, getting Alzheimer's or it wasn't displaying properly. I navigated several pages and couldn't see the nav at the top....? Re the lenth of your text, readability studies show that most users find a line length of 40 - 60 characters to be easiest to consume (though at least one report ranges from 35 - 95 and another a more modest 40 - 80, depending on the font used)
  5. Maybe you forgot to stock your shelves with the cookies.... Sorry my warped sense of humour couldn't resist that...
  6. I agree with Ben about that huge block of text, and on the other pages the text stretches all the way across the site which makes it too difficult to read, especially if you have a very wide screen. I think the size of the font is too big and it could do with being broken up into manageable chunks and maybe illustrated with a few photos, to give it some visual interest. I also do not like the navigation at the bottom which means I have to scroll to the bottom of every page to navigate. That is not very user friendly.
  7. Silly me, as usual I forgot to upload the files. Everything is there now and I have removed the !important hack because there were too many problems with IE6 so I had to do a different stylesheet for it. The !important tag is not read by IE6 so it reads the condition immediately below it. The other browsers understand that the tag is important so they use it. For example .classname { float: left; margin: 200px !important; /*--The !important; hack tells IE6 to skip this line.--*/ margin: 220px; }
  8. I agree with what Thelma said The footer could do with more space underneath it, it is really jammed on the bottom. The different links (not the main navigation) for example on the factandfiction2. html would look better in a different colour and with a change of colour on rollover to make it clear they are links. The "Purchase Info" link could do with the same. Make all these links one colour and the rollover state another. That said your photos are amazing, congratulations.
  9. I just added the IE6 and IE7 stylesheets to the same link and have also modified the css in homestyle.css and some things in your index file. I had to change your Submit button to Send as there was absolutely no way I could get it to work in the IE6 stylesheet. You should be OK now. For example this is a simple form HTML Name Email Phone No Your Comments CSS FORM ELEMENTS .box { margin: 5px 5px; border: 1px solid #C00; } form { width: 400px; margin: 20px 100px; } label { display: block; font-weight: bold; margin: 5px 5px; } input { padding: 1px; border: 1px solid #eee; font: normal 1em Verdana, sans-serif; color: #000; } textarea { width: 400px; padding: 1px; font: normal 1em Verdana, sans-serif; border: 1px solid #eee; height: 100px; display: block; color: #000; } input.button { margin: 0; font: bold 1em Arial, Sans-serif; border: 1px solid #C00; background: #FFF; padding: 2px 3px; }
  10. Never ever believe Dreamweaver's design view. I have heard it is much better in CS4, but there is nothing like testing directly in different browsers. Try reading this article regarding column lengths http://css-dis cuss.incu tio.com/?page=AnyColumnLongest
  11. You should put it in there, it definitely helps your page rank and SEO
  12. It is not really a puzzle it just takes some time to get things right in non standards browsers such as IE6 and IE7. When you build your website, test it always in Firefox which is a standards compliant browser, it should then look the same in Chrome, Safari, Opera and sometimes IE8. From there you need to do what Ben and I told you in a previous post, use specific IE stylesheets to target the areas that are giving you problems. You have a lot of unnecessary mark up so I modified some of the html and commented out some of the css. It now works in all the standards compliant browsers. You can see the new index page and corresponding css http://em asai.com/littlehearts/index.html I have added the links to IE6 and 7 stylesheets in the head because and will take a look at them for you later.
  13. Beautiful site, nice clean and crisp. Well done, I'm sure your clients are happy. But what do you mean first design 100% from scratch, I thought you were an old hand at web design..?
  14. virtual

    page flip effect

    Hey do like me Google "page flip with button". There is a ton of information out there. A couple I found are http://jo nra asch.com/blog/quickflip-2-jq uery-plugin http://www.stu mbleu pon.com/s/#AM9Rv6/www.jqu erymagic.com/2009/05/page-flip-with-jquery-jflip-plugin-of-the-week-may-12//
  15. I think you are looking on the wrong site for this. Killersites is more about teaching and helping out new designers with their coding. Try looking on the free template sites, such as the one you use for your site, designers there might be willing to work for free. Or you could buy the tutorials on Dreamweaver from this site http://www.killersites.com/dreamweaver/ and do it yourself.
  16. I think you might need to lose the background around your top navigation buttons and just let them "float" on top of the background. You are always going to have a few pixels difference and you have not chosen a really easy design for your first venture into CSS. P.S Your last link is still showing the top nav buttons vertically
  17. That looks like JQuery, I found this, http://www.dev irtuoso.com/2009/08/jquery-slideshow-explained/ but if you Google JQuery slideshow with text you will find more.
  18. You have put the display: inline on the ul tag it needs to be on the li tag. There is only one ul tag but there are several li tags consequently they are the ones that have to display in line. ul.tabs { position:absolute; margin-left:312px; margin-top:158px; list-style:none; } ul.tabs li{ display: inline; }
  19. Google "Photoshop actions tutorial" and you will find loads of tutorials explaining how to create and record actions.
  20. For me your site looks fine on Mac in Firefox, Safari and Opera and on PC in Firefox, Safari, Chrome, Opera and IE8, and congratulations for your first attempt. Your problem is with IE6 and 7 and for that you need to add a special stylesheet to target these browsers only, because they do not behave the same way. You can research this at the following links which will help you to understand the problem. http://css-tricks.com/how-to-create-an-ie-only-stylesheet/ http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/
  21. Well with that "hottie" appearing, I understand why your FX is corrupted....LOL
  22. My opinion is the same as Thelma's for both sites. To me it looks like I wasted my time giving you some suggestions because I cannot see any of the changes that I think you should make implemented in your new version. Like Thelma said My own frank opinion: I would never consider giving work to a printer with such a site, for fear that the printing work done would be as unprofessional as the site. I suggest you ask the person who does the graphics for your print company what he thinks of the site, rather than the salesman. I am giving you 2 links below to sites that have black backgrounds, the first of which has a very colourful header. Maybe you will better understand what we are talking about. http://ht'>http://ht tp://ww w.ge tfre ewebd esigns.com/preview/?template=426 http://ht tp://ww w.ge tfre ewe bde signs.com/preview/?template=225
  23. PPS. Just took a second look at your link and from a design point of view you need to lose some of those bright colours. The bright yellow on black is difficult to read, and the whole impression is garish and not professional. You need to define a colour scheme with a max of 4 colours. Another point is that there is no consistency to your site. By that I mean that your navigation changes from one page to another (sometimes on the top, sometimes on the left) and the background of your contact form is white. Which actually looks better with the "bright colour scheme" you are using. The site would also look better if it was one width, centered and wider, most people now have at least 1024px width, of course that depends on the market you are targeting with your site.
  24. Dreamweaver is only displaying a resized image, the file size stays the same, so as Ben said you are cluttering up unnecessarily your server thus using more bandwidth and wasting time for your end user on longer rendering time in the browser. This is where you need to use Photoshop. When you have finished with your logo or image, you should resize it to the exact size you need on your website and File > "Save for Web...". There are different settings for jpeg's between 0 and 100, you need to view at least 2 up (original image and resized image) side by side so as to get optimal image quality and file size. You should also use "Bicubic Sharper" when reducing image size in Photoshop. Bear in mind that if you started out with a huge image and high resolution that some of the finer details and lines may disappear if you reduce to a much smaller size. P.S. 100 dpi is not necessary as computer screens can only display 72 dpi, so again a waste of space
  25. You need to add something like this to your div#text width: 350px; border: 1px solid #333; background: #ccc; padding: 0 5px;
  • Create New...