• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Personal project


#1
Seen as I have no work coming in at the moment, I thought I would play around with a website layout for fun.
So I've created a horizontal scroll, portfolio style layout and this is what I have so far... Horizontal test

Its not finished as I feel like its missing something? It doesnt r eally have the WOW factor that I want.
Also, The first DIV content box is hiding behind the sidebar #nav and I dont know why!! {EDITED: This is fixed now after adding a seperate DIV for the first column and givinig it left padding}

Ideas?
 

tim

Senior Member
#2
that is really really nice, except in safari, the very first photo on the left is half stuck behind your nav. need some left padding on that.
 
#3
Imagine if every freelancer at present with no work combined in one almighty office - dam the work would take over the world!!

Sorry, daydreaming there about work and well, taking over the world...
 
#4
tim said:
that is really really nice, except in safari, the very first photo on the left is half stuck behind your nav. need some left padding on that.
Yeah I know, but when I put left padding on my content div, it adds the padding to all of them, which I dont want, so is it best to create a new div for my first content box?
That just seems a bit daft though :(

Thanks for liking it by the way :) anything you would add to it? Make it a bit more WOW!?
 

tbwcf

Active Member
#5
Hi Hippy, first off good on you for using your free time constructively! + it looks nice

One minus point though you've not listened to Harry/myself on a previous post...

On your page an id should only every be seen once! if it needs to appear more than once use a class.

So change each of your <div id="content"> to <div class="content"> then in the css change it from #content to .content for the same effect but written correctly.

more than one class can be applied to a div so then on your first one (currently hidden by the nav) make it <div class="content lpad"> then in the css write .lpad {padding-left:467px;}

let me know if you don't understand and I'll try and explain better
 

Tom Sound

Active Member
#6
HippySunshine said:
Yeah I know, but when I put left padding on my content div, it adds the padding to all of them, which I dont want, so is it best to create a new div for my first content box?
That just seems a bit daft though :(

Thanks for liking it by the way :) anything you would add to it? Make it a bit more WOW!?

It's really nice and fresh at the moment, really like it. Adding some more work as you go should add the wow element to a nice clear layout :clap:
 
#7
tbwcf said:
Hi Hippy, first off good on you for using your free time constructively! + it looks nice

One minus point though you've not listened to Harry/myself on a previous post...

On your page an id should only every be seen once! if it needs to appear more than once use a class.

So change each of your <div id="content"> to <div class="content"> then in the css change it from #content to .content for the same effect but written correctly.

more than one class can be applied to a div so then on your first one (currently hidden by the nav) make it <div class="content lpad"> then in the css write .lpad {padding-left:467px;}

let me know if you don't understand and I'll try and explain better
Done. Thank you and sorry for missing that out :( Smack my wrists!

Tom Sound said:
It's really nice and fresh at the moment, really like it. Adding some more work as you go should add the wow element to a nice clear layout :clap:
Thanks Tom.
I just feel like its empty at the moment though and missing something, maybe just one small thing, but I havent figured out what that is yet.
 

Tom Sound

Active Member
#8
HippySunshine said:
I just feel like its empty at the moment though and missing something, maybe just one small thing, but I havent figured out what that is yet.

I think it looks like a photographers website at the moment, but when you put some of your web/print design elements it'll give a more rounded impression of your skill set

it's cool so far though :up:
 

Harry

Senior Member
#9
Also, you WRITE IN CAPITALS a lot which is bad practice. If you want something to appear as uppercase use the text-transform:uppercase; CSS and write in normal case:

Code:
body{  ...  text-transform:uppercase;}
 
#10
Why not add some keyboard navigation? For example ammunitiongroup.com. Perhaps you could also use overflow:hidden to hide the browsers scrollbar and design your own glossy little number within the page.

I wonder what "usability experts" say about horizontal navigation? Bit of a taboo around most web design circles but I think it works excellently for photography portfolios.
 
#11
Harry said:
Also, you WRITE IN CAPITALS a lot which is bad practice. If you want something to appear as uppercase use the text-transform:uppercase; CSS and write in normal case:

Code:
body{  ...  text-transform:uppercase;}
Oops, did mean to sort that out but I forgot. Sorted now. Thanks
 
#12
dbushell said:
Why not add some keyboard navigation? For example ammunitiongroup.com. Perhaps you could also use overflow:hidden to hide the browsers scrollbar and design your own glossy little number within the page.

I wonder what "usability experts" say about horizontal navigation? Bit of a taboo around most web design circles but I think it works excellently for photography portfolios.
I would love to do that, but I dont know how yet :(
Usability wise, I think Horizontal scroll is frowned upon, but I like it for portfolio's.
 

Jazajay

Active Member
#17
Hay Hippy,
Didn't see anyone answer the catch 22 on padding so if they did ignore this but this will do it.

#horizontal{padding-left:0} //Rules that effect all browsers
#horizontal,x:-webkit-any-link{padding-left:200px} //Rules that only effect Safari
#horizontal,x:-moz-any-link{padding-left:400px} //Rules that only effect FireFox


You can then mix and match, as the first one effects all browsers.

Jaz
Key:
Blue ~ CSS
Orange ~ Comments