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