sarina28

Thanks for all your input, and advice. I normally create the graphics and web layout. I always have good communication with the client throughout projects, but I have more control on the output. This was to help out a friend. I’ve heard that sometimes it better to leave friend projects alone. The expectations can become cloudy. Money was not an issue. He did give me some money up front though, and it was a verbal agreement. We met a couple of times, but mostly through email. He had been asking me for a long time for help. I told if I have some spare time that I would help him. I did not realize that I would be teaching him about graphic design for the web, and fixing a lot of his stuff. I have spent way too much of my spare time. I would have been done by now if I was not being a teacher. I’m either going to tell to stop making graphic changes, and let me work with what I have. Or kindly tell him that I have done as much as I can, and I have to start on other projects. Lesson learned on my part!

I took over a project that someone else did not finished. They handed me a cd with the graphics, and said build an e-commerce site. I put it together, and it was not what they had in mind. I said ok, show me some examples of what your after. I was shown a bunch of sites with heavy flash and loud background music. One of the sites even had an obnoxious flaming curser. I said that would be great if you were building a site for a Las Vegas nite club. We got passed that. Then the client kept sending graphic changes that were over 300 dpi. I had to spend hours cropping and reducing everything to 1028 width. When I explained to him that web graphics needed to be 72 dpi, he really got confused. It goes on and on. How do I politely tell him that I spent way too much time on his project, and I have other ones to do? I have never had this problem before, and I feel like I have lack of control on this project. Any advice?

I have the issue on my work computer with IE7. I use IE8 at home, and have the same issue. I just downloaded IE9, and looks great. I hate IE. They can't make up their minds.

Interesting! The notepad background in my menu should be behind the the wrapper bg. It looks fine in all browsers except IE. I went through my z-index stack levels, and could not get it to change. I have new versions at home, and older version at work. What version of Firefox and IE do you have. Thanks, David

I made your suggested changes, and it works great. It was easy to do, but now I have a problem with my menu background. It is a -2 z-index, and works fine in firefox. However, it sits on top of my wrapper backgroung in IE. I have tried everything to correct it. Any suggestions. Here is my css: /*------------------------------David Toth's Portfolio CSS--------------------------- */ #wrapper{ position:relative; width:1028px; height:1680px; /* Center the wrapper */ margin: 0 auto; background-image:url(http://www.david-toth.com/images/body/dmt-ad-bg.png); background-repeat:no-repeat; background-position:20px 204px; } body { background-image:url(http://www.david-toth.com/images/body/body-bg.jpg); background-position:center top; } /*---------------------------------------Header Area--------------------------------*/ #header { display:block; position:absolute; height:238px; width:537px; top:23px; left:2px; z-index:1; } /*------------------------------------Main Navigation----------------------------- */ #menu { display:block; position:absolute; height:763px; width:547px; top:0px; left:480px; background: url(http://www.david-toth.com/images/menu/menu_bg.png) no-repeat 0 0; z-index:-2; } #menu_list{ display:block; position:absolute; height:600px; width:547px; top:0px; left:480px; z-index:1; } /*-----------About------------*/ #about { display: block; position:absolute; top:109px; left:104px; } #about { display: block; width: 237px; /*Button Width*/ height: 55px; /*Height of one state of the button*/ background: url(http://www.david-toth.com/images/menu/about_me.png) no-repeat 0 0; } #about:focus { outline: none; } #about:hover { background-position: 0 -55px; } #about:active { background-position: 0 -55px; } /*----------Work-------------*/ #work { display: block; position:absolute; top:165px; left:104px; } #work { display: block; width: 236px; /*Button Width*/ height: 61px; /*Height of one state of the button*/ background: url(http://www.david-toth.com/images/menu/work-experience.png) no-repeat 0 0; } #work:focus { outline: none; } #work:hover { background-position: 0 -61px; } #work:active { background-position: 0 -61px; } /*----------Portfolio-------------*/ #portfolio { display: block; position:absolute; top:108px; left:340px; } #portfolio { display: block; width: 162px; /*Button Width*/ height: 55px; /*Height of one state of the button*/ background: url(http://www.david-toth.com/images/menu/portfolio.png) no-repeat 0 0; } #portfolio:focus { outline: none; } #portfolio:hover { background-position: 0 -54px; } #portfolio:active { background-position: 0 -54px; } /*----------Blog-------------*/ #blog { display: block; position:absolute; top:165px; left:341px; } #blog { display: block; width: 161px; /*Button Width*/ height: 61px; /*Height of one state of the button*/ background: url(http://www.david-toth.com/images/menu/blog.png) no-repeat 0 0; } #blog:focus { outline: none; } #blog:hover { background-position: 0 -61px; } #blog:active { background-position: 0 -61px; } /*---------------------------------------Content Area--------------------------------*/ #content{ display:block; position:absolute; width:1028px; height:300px; top:190px; background-image:url(http://www.david-toth.com/images/body/dmt-web-design-portfolio.png); background-repeat:no-repeat; background-position:16px 0px; z-index:2; } #content p{ display:block; position:absolute; width:510px; height:182px; top:194px; left:132px; } #content img{ display:block; position:absolute; padding-top:150px; padding-left:639px; } #contentoverlay img{ display:block; position:absolute; width:491px; height:201px; top:392px; left:130px; z-index:3; } .st_sharethis_custom{ display:block; position:absolute; width:83px; height:201px; background: url("/images/body/share-this.png") no-repeat scroll left top transparent; padding:0px 16px 0 0; top:229px; left:40px; z-index:1; } /*---------------------------------------Slider Frame Area--------------------------------*/ #slider{ display:block; position:absolute; width:1028px; height:705px; top:610px; background-image:url(http://www.david-toth.com/images/body/slider-bg.png); background-repeat:no-repeat; background-position:44px 29px; } #slidertabs-left img{ display:block; position:absolute; top:0px; left:30px; z-index:2; } #slidertabs-right img{ display:block; position:absolute; top:0px; left:815px; z-index:2; } #sparkplug img{ display:block; position:absolute; top:799px; left:119px; z-index:2; } #bluecar img{ display:block; position:absolute; top:1040px; left:473px; z-index:3; } /*-----------------------------------Slider Area----------------------------------*/ .jflow-content-slider{ display:block; position:absolute; left:88px; top:80px; z-index:1; } #jFlowSlide{ background-image:url(); font-family: 'Trebuchet MS', Helvetica, sans-serif;; font-weight:bold; font-size:13pt; line-height:23px;} #myController { display:block; position:absolute; margin-top:-487px; margin-left:89px; padding:2px 0; width:570px;} #myController span.jFlowSelected { background:#cc3333;margin-right:0px; } .slide-wrapper { padding: 0px; } .slide-thumbnail { width:390px;} .slide-thumbnail img {display:block; position:absolute; max-width:390px;} .slide-details { display:block; position:absolute; width:430px; margin-top: 0px; margin-left:400px;} .slide-details h1 {margin:0; } .slide-details h2 {margin:0; } .slide-details .description p { display:block; margin:0; padding-right:10px; } .slide-details ul {padding-left:60px; padding-top:10px; } .jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:10px; padding-right:5px; padding-top:2px; padding-bottom:2px; } /*.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #; }*/ /*---------------------------------------Facebox Area--------------------------------*/ #facebox { position: absolute; width: 100%; top: 0; left: 0; z-index: 100; text-align: left; } #facebox .popup { position: relative; } #facebox table { margin: auto; border-collapse: collapse; } #facebox .body { padding: 10px; width: 370px; } #facebox .image { text-align: center; } #facebox img { border: 0; } #facebox .footer { padding-top: 5px; margin-top: 10px; text-align: right; } /*---------------------------------------Footer Area--------------------------------*/ #footer { display:block; position:absolute; height:487px; width:1028px; top:100px; } #oldcarpic1 { display:block; position:absolute; height:434px; width:324px; top:1092px; left:0px; } #oldcarpic2 { display:block; position:absolute; height:487px; width:272px; top:1076px; left:265px; } #contact_form { display:block; position:absolute; height:367px; width:529px; top:1245px; left:498px; z-index:3; } #footer p{ display:block; position:absolute; width:400px; height:80px; top:1520px; left:630px; }

BeeDev I appreciate your input. I made 2nd version of my index page and style sheet, so I can try your suggestions.

BeeDev, Do you mean something like this: #header { display:block; position:absolute; height:238px; width:537px; top:10px; left:120px; z-index:1; } Instead of this: #header { display:block; position:absolute; height:238px; width:537px; margin-top:23px; margin-left:2px; z-index:1; }

I'll experiment with the left-right, top-bottom combo. For now, I adjusted some of the z-indexing, so the logo image is not so cut off.

Thanks for all your comments. I like to experiment a lot in my designs, and some things are not always to standards. I've been used to using absolute postioning on everything because I found it makes the design consitant on different browsers and screen sizes. My last 2 designs I have been using a lot of z-indexing, so I discovered how linked items sometimes get cut off as in the logo graphic. That just another issue I've added to my resolve list. The non-highlight text is due to an png overlay to give the text an aged appearance. The crawlers are still able to still pick up the text, so I did not see an issue with it. I'm learning how to design css based forms, so I no longer have to use flash. I always try to make valid layouts, but the flash does not validate. As far as the blog link back, that's an easy fix. This is the first time I've played with WP blog design, and I'm having fun with it. I eventually want to build WP templates from scratch. I have several blogs, but they are all the free ones with limited design control. I'm relativley self taught, so I don't always figure things out things right away. Thats' why I like this forum to get this kind of feedback.

Thanks. I just have fun with it. I like to experiment with different designs.

I like it. It's simple and uncluttered!

My old portfolio was my first tableless website. http://www.dmtportal.com This is the re-design layout. Still working out the kinks, and optimizing the graphics. http://www.david-toth.com Thanks for your comments

I tried the first link, and it check my site. It said it can't access because I don't have a .htaccess file. I checked the server, and I did not see one. I'm note sure how involved I should get into this. Is it worth the benefits? I'm only doing this because Firebug recommended it. I did gzip my files, but I'm new to this. There are tutorials on how to create .htaccess files. should I pursure this? Any thoughts? Thanks

My client is using Web Hosting Pad that uses Cpanel. I'm trying to compress some of my files. I'm able to compress them in a Gzip format, but when I analyze the site in Firebug, it says that my files are not compressed. Is there somewhere in Cpanel to see if compression is enabled? I've looked everywhere. Also, when compression files, it adds a .gz extension to the file. Is there more to it than that? Firebug recommended file compression for improving page loading speed. This is the first time doing this. Thanks

I used Firebug for the first time. It's very detailed. I ran my latest website through it, and I got an average score of 84 out of a 100. The issues it listed are as follows: URL: ww w.arjaysup holstery.c om Red Flags Leverage browser caching Parallelize downloads across hostnames Serve static content from a cookieless domain Cautions Avoid bad requests Combine external CSS Combine external JavaScript Specify a Vary: Accept-Encoding header 1) I've not delt with any of the red flag issues before. Suggestions? Help Please! 2) Not sure how I can improve on the caution issues. The bad requests are images that don't exsist on my server, and I cleared the cache. The images are: · /images/body/menu.png · /images/body/plyers-hogrings.gif · /images/body/push-pins.png · /images/body/wood-plank.gif 3)I have a reset, screen and a font style sheet. I see that a lot of designers keep those seperate. Is it a good idea to combine all of them? 4) I have .js files for my javascripts. I've never combined all in one .js before. I'm sure I can work through that one. 5)I not sure what they mean by this "Specify a Vary: Accept-Encoding header" Thanks for you help. URL: ww w.arjaysup holstery.c om

I think if add your web design skills to you resume of other skills, that can work to your advantage. I've learned a alot from a friend of mine who was building websites when not that many people knew flash. He bought a house and has 5 classic cars on the money he made. Today, he still has all that stuff, but he adapted to the times. He altered his career plans at the right time, before the dot com boom. You can't make a great living anymore just building sites. I have over 17 years of solid classic automotive industry which has done well considering the rest of the industry. I'm in a niche part of the industry. My goal is to add my six years of web design and e-commerce experience to my automotive skills. There are automotive e-commerce companies in my area, and I have been networking a lot. From what I've learned is that it is hard to find a web designer who really understands automotive, and (visa versa) it hard to find an automotive person who knows web dedign. These days, companies want the most for the money. I think if you take your unique skills that creates a demand for you, and add your web design skills then you may have something. I'm almost there myself.

Andrea, Thanks for you input. I fought with the load time. I used pngs mostly. I like how they layer, but I did convert some to gifs. I optimized them best I could without loosing the quality. I was able to reduce them quite a bit from the originals. I don't think there is much more I can do with them. As far as the blog home button, I forgot that it was set to default going back to the blog index page and not the main site. I want to learn to build my own wordpress blogs next, so I have total control. I'm stuck with using the templates, and modifying them to match the site. I'll start watching Stefan's videos. I went back and forth with the text colors and link colors. I tried making the text bold, but it overflowed to much in Firefox. Do you have any suggestions on different colors? Thanks

I like your site. You did a great job on it. The only thing I can see tweaking a little is the menu text styling. I would keep the text bold on the normal state and roll over state. It jumpy when you mouse over it. You already have the background go from black to grey. I would leave that alone, and make all the text stay bold. Other than that, I like it.

I'm just finishing up my latest website. With every new project, I like to challenge my self more than the last. I used textures and tools used in my client's businsess to create the graphics. Everything validates except my conact page. It uses a flash contact forum. I'm working on the SEO stuff right now. ww w.arjaysup holstery.co m Thanks for your input.

I could of used that png fix on some earlier websites.

I use png graphics a lot on my sites. They work great, but IE6 does not support them. The transparent areas will appear solid white. We shouldn't really care about that old of a browser, but some people still use it.

I've only used 2 stage javascript buttons. If you know css, then I would suggest using image sprites. It uses one image, but with all 3 states in the same image. The css positions the part of the image in a viewable area for the given state. This article will show you how. http://www.alistapart.com/articles/sprites/

If you're using dreamweaver, in the menu go to insert -> image objects -> rollover image. Just select the two images, and the code will be inserted for you. Or go to: http://javascriptkit.com/mousewhipper/index.htm It will tell you where to insert your code.

Cara, I thought about dividing up the wrapper background. I'll experiment with that a bit. Tonight, I did manage to decrease my total image size from 2.6 megs to 19 megs with some optimization.