Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Personal project

Discussion in 'Website Design Forum:' started by HippySunshine, Nov 11, 2009.

  1. HippySunshine

    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}

  2. tim

    tim Senior Member

    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. gasmarktasty

    gasmarktasty Junior Member

    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. HippySunshine

    HippySunshine Senior Member

    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!?
  5. tbwcf

    tbwcf Active Member

    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
  6. Tom Sound

    Tom Sound Active Member

    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. HippySunshine

    HippySunshine Senior Member

    Done. Thank you and sorry for missing that out :( Smack my wrists!

    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.
  8. Tom Sound

    Tom Sound Active Member

    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:
  9. Harry

    Harry Senior Member

    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:

    body{  ...  text-transform:uppercase;}
  10. dbushell

    dbushell Member

    Why not add some keyboard navigation? For example 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. HippySunshine

    HippySunshine Senior Member

    Oops, did mean to sort that out but I forgot. Sorted now. Thanks
  12. HippySunshine

    HippySunshine Senior Member

    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.
  13. Harry

    Harry Senior Member

    Also, on another best practices note—specify font-sizes in ems and not in px :)
  14. glenwheeler

    glenwheeler Senior Member

    is there meant to be a wide white gap to the left? I see that in IE 6
  15. Becky

    Becky Member

  16. glenwheeler

    glenwheeler Senior Member

    Woah some of those sites looks really really nice!
  17. Jazajay

    Jazajay Active Member

    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.

    Blue ~ CSS
    Orange ~ Comments
  18. HippySunshine

    HippySunshine Senior Member

    Thanks Jaz :)

Share This Page