New website

P

photoworks

Messages
9
Name
Serge
Edit My Images
No
Not sure if this is the right section of the forum for this but, somehow can't fine the proper section. So i wil give it a shot.

I have recently updated my website to give it a uncluttered feel. There are a few section that i need to add. Howver at this point i am looking for imput.

What do you guys think ?

http://www.pwks.net

Monica_defense2.jpg
 
I like the look of your site and the simplicity therefore no distractions when looking at the pages. However I did find flicking through the Portfolios a bit of a chore. but thats just my view

well done
 
The navigation menus display in a bit of an odd way for me. I have a gap along the line of about 900 pxls between the word photographer in your logo and your 'Home' navigation item. They are really stuck out on their own in alot of white space, your logo, body and footer are all displaying OK

edit - picture explains better then me

 
Last edited:
Did you build this yourself?

It looks different to the norm, which I like. But I feel it needs some refinement.

The menu bothers me on the home page, at least on my resolution - widescreen. It's out of place. It needs somewhere to 'fit in'. Personally I'd be tempted to move 'photography' and place it underneath 'Serge Chabert' to give the menu a little more room.

But then the portfolio pages are different, and equally bothersome. The images, even on a widescreen resolution, veer off the page, giving the impression that you should be able to scroll to see them - which I wouldn't want to do anyway.

Don't get me wrong, it actually looks like it would be visually appealing on an even larger resolution, but for myself, on bigger than average, it doesn't. I get what it's meant to be, but it just looks broken.

And the other pages need to be in the same format as the home page, with the image at the left :)

My words might sound negative, but with a little refinement, in the right direction, I think it could look a cracking little website.
 
Instead of the links being Portfolio 1, 2 & 3 I would change them to what they actually are - Women, People, Still Life.
Then visitors know what they are going to see before they click it.

Also you need to sort out the css for your menu div.
It is currently floating right which is fine on something like 1280px wide, but anything larger and the menu will keep moving to the right (as shown in Hugh's screen grab)

If you are editing on a laptop or monitor that can't display larger resolutions then you can try this - In firefox hold ctrl & tap the - key (minus key) to view how your site will display in a higher resolution. You are effectively zooming out but it replicates how your site will display on larger resolutions. Tap the + key the same amount of times to go back to your actual resolution.

Try floating the div to the left and adding a left margin to move it back to where it was. This may or may not work properly on most platforms & resolutions without further editing to other divs. (I didn't have time to read all your code to check everything)
 
rowla said:
Instead of the links being Portfolio 1, 2 & 3 I would change them to what they actually are - Women, People, Still Life.
Then visitors know what they are going to see before they click it.

Also you need to sort out the css for your menu div.
It is currently floating right which is fine on something like 1280px wide, but anything larger and the menu will keep moving to the right (as shown in Hugh's screen grab)

If you are editing on a laptop or monitor that can't display larger resolutions then you can try this - In firefox hold ctrl & tap the - key (minus key) to view how your site will display in a higher resolution. You are effectively zooming out but it replicates how your site will display on larger resolutions. Tap the + key the same amount of times to go back to your actual resolution.

Try floating the div to the left and adding a left margin to move it back to where it was. This may or may not work properly on most platforms & resolutions without further editing to other divs. (I didn't have time to read all your code to check everything)
Click to expand...

i try to change the settings on the css file, however not sure how to do it since when i do change the settings, the display result is weird.
I have to say that i did not design the site, it is in fact a theme that i bought and i have no idea how to modify the theme css.

i guess the values have to be modified here :

.menu {
display: block;
font-weight:bold;
height: 48px;
float: right;
text-align: right;
margin-right: 20px;
width: auto;
}
.menu li {
height: 38px;
font-weight:bold;
float: left;
margin-right: 10px;
width: auto;
padding-top: 10px;
}
Click to expand...

but other than that, i am at a loss.
 
Last edited:
mattyh said:
To me, it looks like the theme is designed to stretch across the whole page, can you post the whole CSS file and we'll have a look :)
Click to expand...

here it is :

/* -------- TYPOGRAPHY --------- */
/* -------- AND COLORS ---------- */
/* ------------------------------- */
body{
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
height: 100%;
line-height: 20px;
}
textarea, input {
border: 1px #000 solid;
font-size: 12px;
}
h1, h2, h3, h4, h5, h6 {
}
h5, h6 {
font-weight:bold;
text-transform:uppercase;
}
.content-text h1{
font-size: 24px;
line-height: 50px;
}
.content-text h2{
font-size: 20px;
line-height: 45px;
}
.content-text h3{
font-size: 18px;
line-height: 40px;
}
.content-text h4{
font-size: 16px;
line-height: 35px;
}
.content-text h5{
font-size: 12px;
line-height: 35px;
}
.content-text h6{
font-size: 10px;
line-height: 35px;
}
ul, ol {
margin-top: 5px;
margin-bottom: 20px;
}

a, a:link, a:visited, span a, span a:link, span a:visited {
color: #535353;
text-decoration:none;
border:none;
}
a:hover, a:active, a:focus, span a:hover, span a:active, span a:focus{
text-decoration:none;
}
strong{
font-weight:bold;
}
em{
font-style:italic;
}
ins{

}
cite{
font-weight:bold;
}
sup{
vertical-align:super;
font-size:.7em;
line-height:.5em;
}
blockquote{
padding: 0 50px;
margin: 25px 0;
font-style: italic;
letter-spacing: 2px;
font-size: 18px;
}
small{
font-size:.83em;
}
.description {
font-size: 12px;
}

.menu li a {
font-size: 14px;
color: #535353;
}
.menu li.current_page_item a {
color: #000;
}
.menu li a:hover {
}
#sidebar, .onecol, .twocols , #commentbar { /* updated here */
background-color: #FFFFFF;
border: 1px #000000 solid;
}
.onecol {
width: 600px;
}
.onecol-text {
margin-bottom: 20px;
padding: 5px;
padding: 10px;float: left;
}
.twocols {
width: 600px;
}
.twocols-text {
margin-bottom: 20px;
padding: 5px;
float: left;
width: 280px;
padding: 10px;
}
.onecol-text h1, .twocols-text h1 {
font-weight: bold;
font-size: 14px;
}
#sidebar-text h3, .thumbnails h3 {
font-weight: bold;
font-size: 14px;
padding-bottom: 5px;
}
.text {
padding-bottom: 10px;
}
.cover-imgs li, .slideshow img, .mail-alert {
background-color: #FFFFFF;
border: 1px #000000 solid;
}
li.thumbnail {
border: 1px #000000 solid;
}
.slideshow img {
padding: 6px;
}
#footer {
margin-top: 10px;
font-size: 11px;
text-align: left;
padding: 10px;
}
textarea, input {/* updated here */
background-color: #FFFFFF;
border: 1px #000000 solid;
padding: 5px;
margin-bottom: 5px;
color: #535353;
}
.nav a.n { /* updated here */
color: #535353;
}
.nav a:hover.n { /* updated here */
color: #535353;
}
/* ------------------------------- */
/* ------- GENERAL LAYOUT ------ */
/* ------------------------------- */
body {
background: #160909 url(../images/bright/content-tile.png) repeat;
}
#wrapper {
margin: auto;
min-width:960px;
min-height:600px;
}
#header {
height: 50px;
background: url(../images/bright/header-tile.png) repeat;
}
#logo {
text-align: left;
}
.logo-img {
background: url(../images/bright/logo.png) no-repeat right top;
width: 557px;
height: 48px;
letter-spacing:-1000em;
display:block;
overflow:hidden;
text-indent:-9999em;
}
.logo-img {
text-indent: 1000px;
}

.menu {
display: block;
font-weight:bold;
height: 48px;
float: right;
text-align: right;
margin-right: 20px;
width: auto;
}
.menu li {
height: 38px;
font-weight:bold;
float: left;
margin-right: 10px;
width: auto;
padding-top: 10px;
}
.content {
margin-top: 10px;
padding-left: 10px;
}
#sidebar, #commentbar { /* updated here */
float: left;
position: absolute;
z-index: 14;
left: 10px;
margin-top: 5px;
width: auto;
}
#commentbar { /* updated here / add new */
z-index: 16;
}
.thumbnails {
padding: 10px;
}
li.thumbnail {
float: left;
margin-right: 5px;
margin-bottom: 5px;
width: auto;
}
.nav a {
height: 18px;
cursor: pointer;
display: block;
text-align: center;
}
.nav a.n {
float: left;
width: 18px;
}
a#nav-left {
background: url(../images/default/nav.png) no-repeat;
background-position: 0px -92px;
float: left;
width: 18px;
}
a#nav-left:hover {
background-position: 0px -115px;
}
a#nav-right {
background: url(../images/default/nav.png) no-repeat;
background-position: 0px -46px;
float: left;
width: 18px;
}
a#nav-right:hover {
background-position: 0px -69px;
}
.nav-close {
background: url(../images/bright/nav.png) no-repeat;
background-position: 0px 0px;
height: 19px;
width: 19px;
position: absolute;
cursor: pointer;

}
a#nav-close:hover {
background-position: 0px -23px;
}
.cover-wrapper {
padding-bottom: 5px;
overflow: hidden;
}
ul.cover-imgs {
display: block;
list-style: none;

}
.cover-imgs li {
display: block;
float: left;
padding: 7px;
margin-right: 20px;
width: auto;
}
.cover-imgs a {
display: block;
text-decoration: none;
}
.title, .title-home, .title-img { /* updated here / add new */
padding: 3px 10px 3px 10px ;
background-color: #1e1d1c;
position: absolute;
z-index: 11;
margin-top: 10px;
}
.title-img small { /* updated here / add new */
cursor: pointer;
}
.detail-img { /* updated here / add new */
position: absolute;
z-index: 11;
}
.detail-img p { /* updated here / add new */
padding: 5px 10px 5px 10px ;
margin: 6px;
background-color: #1e1d1c;
}
.loading {
background: url(../images/default/loading.gif) no-repeat center;
}
#contactForm{
margin-top: 6px;
}
#viewcomment-area { /* updated here / add new */
overflow: auto;
}
.comment-ul li.comment-li { /* updated here / add new */
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px #1c1b19 solid;
}
.slideshow img {
float: left;
}
Click to expand...
 
mattyh said:
At a guess, try adding

Code: 
margin: auto;

to the second body tag (and remember where you put it, cos that might not work :D)

If you can disable the "disable right click" javascript, then I can probably have a better chance of playing with it :)
Click to expand...

not sure which one you are talking about ?
 
mattyh said:
OK, it was only a guess... without access to your site to play with the code, I couldn't suggest further, sorry
Click to expand...

ok, i added the line (in bold red) in the code :


body {
background: #160909 url(../images/bright/content-tile.png) repeat;
}
#wrapper {
margin: auto;
min-width:960px;;
min-height:600px;
}
#header {
height: 50px;
width: 1170px;
background: url(../images/bright/header-tile.png) repeat;
Click to expand...

i noticed an improvement on the menu position on the site, can you check and tell me if it is enough improvement for the position of the menu ?
 
You must log in or register to reply here.
Back
Top