Personal project

HippySunshine

Senior Member
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?
 
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.
 
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...
 
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!?
 
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
 
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:
 
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.
 
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:
 
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;}
 
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.
 
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
 
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.
 
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
 
Back
Top