Jump to content
Killersites Forums

New web portfolio design


Recommended Posts

  • 1 month later...

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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 by sarina28
Link to post
Share on other sites

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;

}

Link to post
Share on other sites

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.

Link to post
Share on other sites

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 :)

Link to post
Share on other sites

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.

Link to post
Share on other sites
  • 2 weeks later...

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;

}

Link to post
Share on other sites

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

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...