sarina28 Posted February 10, 2011 Report Share Posted February 10, 2011 (edited) 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 Edited February 19, 2011 by sarina28 Quote Link to comment Share on other sites More sharing options...
Ionisis Posted March 13, 2011 Report Share Posted March 13, 2011 Wow, man, you've got skills. I love the retro look. It takes a true designer to pull that off well. Quote Link to comment Share on other sites More sharing options...
sarina28 Posted March 16, 2011 Author Report Share Posted March 16, 2011 Thanks. I just have fun with it. I like to experiment with different designs. Quote Link to comment Share on other sites More sharing options...
pb1uk Posted March 16, 2011 Report Share Posted March 16, 2011 Excellent design, i really like it. I would know where to start with something like that! My only comment would be the links at the top of the sliding box (the one with your portfolio in for example) in the white are quick tricky to find. That's a very minor point though. Quote Link to comment Share on other sites More sharing options...
BeeDev Posted March 16, 2011 Report Share Posted March 16, 2011 Very nice design. However some feedback would be: Your site is layed out quite badly. All the divs look like absolutely positioned, however they're positioned with Margins. You should instead use: top/left or bottom/right or other combo. And those margins sometimes block the other bits on the page. For example, all those layers of margins of the divs in the bottom actually make your link on the logo at the top quite hard to click. You have to find an actualy area that works along the edges. Also because of the same issue the text next to your photo on the homepage cannot be highlighted/selected. Was there a special reason to use Flash for the contact form at bottom? Mobile phone browsers, especially iPhones won't support that And there's no link back to your website from your blog Good luck. Quote Link to comment Share on other sites More sharing options...
sarina28 Posted March 17, 2011 Author Report Share Posted March 17, 2011 (edited) 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. Edited March 17, 2011 by sarina28 Quote Link to comment Share on other sites More sharing options...
sarina28 Posted March 17, 2011 Author Report Share Posted March 17, 2011 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. Quote Link to comment Share on other sites More sharing options...
sarina28 Posted March 17, 2011 Author Report Share Posted March 17, 2011 Very nice design. However some feedback would be: Your site is layed out quite badly. All the divs look like absolutely positioned, however they're positioned with Margins. You should instead use: top/left or bottom/right or other combo. And those margins sometimes block the other bits on the page. For example, all those layers of margins of the divs in the bottom actually make your link on the logo at the top quite hard to click. You have to find an actualy area that works along the edges. Also because of the same issue the text next to your photo on the homepage cannot be highlighted/selected. Was there a special reason to use Flash for the contact form at bottom? Mobile phone browsers, especially iPhones won't support that And there's no link back to your website from your blog Good luck. 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; } Quote Link to comment Share on other sites More sharing options...
BeeDev Posted March 17, 2011 Report Share Posted March 17, 2011 Yea, however u need to put position:relative on your #wrapper because that div is centered on the page. Doing so will enable all the nested elements within that #wrapper to reference their absolute positions from the #wrapper div instead of the actualy <body> tag so if u put top: 0; left: 0; on your #header then your #header will stick to the left edge of your #wrapper and the top edge of your #wrapper So after doing this you can even easily convert your site. All the "margin-left: Npx" will become "left: Npx" and all the margin-top will become just top So you don't really need to change the values of the margins, just change the margin-top and margin-left into top and left. Quote Link to comment Share on other sites More sharing options...
BeeDev Posted March 17, 2011 Report Share Posted March 17, 2011 Oh by the way didn't realise you had intentionally blocked the text with a layer. And only just noticed your logo has a <map> link around it Just wanted to mention that there's actually no right or wrong way of laying out your elements. If your margins are working then it's ok to leave it like that. You can use Margins or Absolute Positions or just use the normal flow of the block elements with floats and margins, whichever way works best for you Quote Link to comment Share on other sites More sharing options...
sarina28 Posted March 17, 2011 Author Report Share Posted March 17, 2011 Oh by the way didn't realise you had intentionally blocked the text with a layer. And only just noticed your logo has a <map> link around it Just wanted to mention that there's actually no right or wrong way of laying out your elements. If your margins are working then it's ok to leave it like that. You can use Margins or Absolute Positions or just use the normal flow of the block elements with floats and margins, whichever way works best for you BeeDev I appreciate your input. I made 2nd version of my index page and style sheet, so I can try your suggestions. Quote Link to comment Share on other sites More sharing options...
Guest kingtom Posted April 1, 2011 Report Share Posted April 1, 2011 I like both of these portfolio. It's really nice. Quote Link to comment Share on other sites More sharing options...
sarina28 Posted April 9, 2011 Author Report Share Posted April 9, 2011 Yea, however u need to put position:relative on your #wrapper because that div is centered on the page. Doing so will enable all the nested elements within that #wrapper to reference their absolute positions from the #wrapper div instead of the actualy <body> tag so if u put top: 0; left: 0; on your #header then your #header will stick to the left edge of your #wrapper and the top edge of your #wrapper So after doing this you can even easily convert your site. All the "margin-left: Npx" will become "left: Npx" and all the margin-top will become just top So you don't really need to change the values of the margins, just change the margin-top and margin-left into top and left. 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; } Quote Link to comment Share on other sites More sharing options...
coollew Posted April 9, 2011 Report Share Posted April 9, 2011 It looks the same to me in both browsers? the design looks very good I might add! Quote Link to comment Share on other sites More sharing options...
sarina28 Posted April 9, 2011 Author Report Share Posted April 9, 2011 It looks the same to me in both browsers? the design looks very good I might add! 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 Quote Link to comment Share on other sites More sharing options...
coollew Posted April 10, 2011 Report Share Posted April 10, 2011 Hi David: Im using IE 8 and firefox 4 here are screenshots of each Firefox 4 http://i17.photobucket.com/albums/b56/coollew/firefox4.jpg IE 8 http://i17.photobucket.com/albums/b56/coollew/ie8.jpg Quote Link to comment Share on other sites More sharing options...
sarina28 Posted April 11, 2011 Author Report Share Posted April 11, 2011 Hi David: Im using IE 8 and firefox 4 here are screenshots of each Firefox 4 http://i17.photobucket.com/albums/b56/coollew/firefox4.jpg IE 8 http://i17.photobucket.com/albums/b56/coollew/ie8.jpg 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.