biscuitrat 0 Report post Posted July 27, 2005 I'm trying to get the new design of my site to be more cross-browser friendly so I already validated it. You'll notice the long gray bar above the header image is actually caused by the DOCTYPE information at the top of the source code. Anyways, I needed a new design that would work with all browsers, and I wanted it to be both brighter and better looking. I got this result which works pretty well in all of the browsers I've tried (IE 6.0, Firefox, Opera). The header doesn't have an image map yet because I want to see how well the design registers with people before I continue making pages. Therefore, broken links aren't too much to worry about at this time.All the images are made in Photoshop and I have the PSD if you have any suggestions. The background is one really big image and I'm trying to avoid it looking blurry by shrinking it slightly. This would only cause a problem were I forced to write a long page.Comments? Suggestions? Harsh criticism is well tolerated Share this post Link to post Share on other sites
rvalkass 5 Report post Posted July 27, 2005 So far a nice design but I do have a few problems with it.1. The 'Home', 'About' etc links at the top look blurry and slightly hard to read, along with the logo on the right.2. The pink curve on the right starts to repeat at the bottom of the page on my screen res (1280*1024). Try setting the CSS to not repeat.Sorry to be critical of it, but its a great design otherwise, just tow small problems that are annoying me. Good luck with it. Share this post Link to post Share on other sites
biscuitrat 0 Report post Posted July 27, 2005 So far a nice design but I do have a few problems with it. 1. The 'Home', 'About' etc links at the top look blurry and slightly hard to read, along with the logo on the right. 2. The pink curve on the right starts to repeat at the bottom of the page on my screen res (1280*1024). Try setting the CSS to not repeat. Sorry to be critical of it, but its a great design otherwise, just tow small problems that are annoying me. Good luck with it. 166270[/snapback] Ooh, thanks I think I should go back in the PSD and fix the text. It's all because of the diagonal scanlines in the background. As you can see, on the yellow background, you can read the text perfectly. I was worried about the background repeating, but most people use 800x600 (ick!) or 1024x768. Today's test was to fix around the site using different resolutions. And don't worry about being critical. Criticism can only help you and I try to be critical with a lot of designs I meet hoping it will only help the artist/designer. However...as I recently discovered through my LJ community, not everyone is as receptive to it as me and now I've got to go defend my thoughts >< Thanks again Share this post Link to post Share on other sites
electriic ink 1 Report post Posted July 27, 2005 I like your design a lot. Got a few complaints and that's that you should set the border round the valid css image to 0 or 1.Secondly, the doctype is not the reason why your site is only tentavely valid. Add this line of code in between your <head></head> tags and it should work: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> Keep your doctype just as it is.The text font is legible when it's big but not as much when it's small. You should increase the text size in the navigation bar. Share this post Link to post Share on other sites
Lessur 0 Report post Posted July 27, 2005 Pretty nice but like rvalkass said, the menu text is a bit blurry, maby make it bold? (if its not already). Its a nice layout though, what programs did you make it with? Share this post Link to post Share on other sites
biscuitrat 0 Report post Posted July 27, 2005 Pretty nice but like rvalkass said, the menu text is a bit blurry, maby make it bold? (if its not already). Its a nice layout though, what programs did you make it with? 166405[/snapback] Yeah, I definitely need to fix the menu text today. I thought it was just me at first or maybe something in Photoshop. I can try adding a glow or a background to fix it I made the images in Photoshop, hand wrote the rest of it after borrowing and editing a layout from glisp.com since my mind went blank about CSS for a day. Normally I would use Dreamweaver to check things out, but it's on my other computer. @Cmatcmextra - I actually did set the border but the validation for XHTML said that border isn't a valid tag. Weird - but I'll try it again. Also, w3 usually generates the doctype tags (or they have before) which confused me. I had to go on a google rampage searching for "doctype" but I must have only copied part of it. Thank you Share this post Link to post Share on other sites
electriic ink 1 Report post Posted July 27, 2005 Hmmm. Then try this instead.... <img src="bla.jpg" alt="" style="border-style: solid; border-left-width: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px;" /> Revalidate both your css and xhtml after making this change. It should, hopefully, work. Just as a note, don't remove border-style or it won't work in ie. Share this post Link to post Share on other sites
biscuitrat 0 Report post Posted July 27, 2005 Hmmm. Then try this instead.... <img src="bla.jpg" alt="" style="border-style: solid; border-left-width: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px;" /> Revalidate both your css and xhtml after making this change. It should, hopefully, work. Just as a note, don't remove border-style or it won't work in ie. 166415[/snapback] Awesome! I forgot I could use style tags in images. Thanks a bunch Share this post Link to post Share on other sites
Tyssen 0 Report post Posted July 27, 2005 Awesome! I forgot I could use style tags in images. Thanks a bunch You don't have to apply your CSS styles inline to images, you can set them in your CSS file, e.g. img { border: 1px solid #000; }A couple of other things: type="text/css" is missing from <link rel="stylesheet" href="http://forums.xisto.com/no_longer_exists/; /> You're talking about making your header an image map - that's not the way to go if your aim is to have a semantically marked-up, validated site. You should be making your nav menu items as a list (<ul> or <dd>) instead. Check out Listmatic for tutorials on how to do it. Other than that, it looks pretty good. Share this post Link to post Share on other sites
biscuitrat 0 Report post Posted July 28, 2005 You don't have to apply your CSS styles inline to images, you can set them in your CSS file, e.g. img { border: 1px solid #000; }A couple of other things: type="text/css" is missing from <link rel="stylesheet" href="http://forums.xisto.com/no_longer_exists/; /> You're talking about making your header an image map - that's not the way to go if your aim is to have a semantically marked-up, validated site. You should be making your nav menu items as a list (<ul> or <dd>) instead. Check out Listmatic for tutorials on how to do it. Other than that, it looks pretty good. 166454[/snapback] I tried the ul/li CSS nav on most of my other sites and I got kind of bored with reusing it so often (now that I dwell on that for a minute, it was probably because it did work, but it was a pain sometimes). But yeah, I do miss the streamlined accessible flair that got me going through all this validation in the first place. I suppose I should transfer them to my CSS file because they kind of clutter up the index page. About the link rel - I had text/css in there from the beginning, but I must have taken it out when I was changing around the URL path. Doh I'll mess around with the nav I usually use to see if I can find anything that works for the layout I want. Thanks for the comments (I swear, I'm practically brain dead today as far as the INTARWEB goes ) Share this post Link to post Share on other sites
mizako 0 Report post Posted July 28, 2005 It is nice. Maybe too pink and a bit blurry as some you already said. Try to do everything 30 px smaller. I am using a laptop of 15" (standard ones) and a resolution of 1024x768 like most of people with this laptops and for some pixel i need to do scrolling. I you keep all a little bit smaller you will avoid the scroll bar for a lot of visitor. That means more elegant. Share this post Link to post Share on other sites
biscuitrat 0 Report post Posted July 28, 2005 It is nice. Maybe too pink and a bit blurry as some you already said. Try to do everything 30 px smaller. I am using a laptop of 15" (standard ones) and a resolution of 1024x768 like most of people with this laptops and for some pixel i need to do scrolling. I you keep all a little bit smaller you will avoid the scroll bar for a lot of visitor. That means more elegant. 166606[/snapback] It actually wouldn't scroll if I removed the doctype, but I need that there. You'll see it looks like a long gray bar (which is annoying). I can always shrink the pictures or whatever. I'm not a fan of scrolling either I actually tried to remove some pink. My last attempt with pink (my error page is the current example since I haven't made a new one yet) was totally overboard. I got sick of it after I finished designing it. If you click on any of the links here, you're going to see this ghastly pink error page. I think that this pink is probably more what I was going for since it's only used as an accent color. True, I have accents all over the place, but I think this is the maximum amount of pink I can put into a page without having myself gawk at the whole thing while I'm editing it. Thanks again Share this post Link to post Share on other sites
