New to web design; help with coding

Discussion in 'Web Design and Development' started by LERsince1991, Jan 23, 2012.

  1. LERsince1991, Jan 23, 2012
    Last edited: Jan 31, 2012

    macrumors 65816

    LERsince1991

    Joined:
    Jul 24, 2008
    Location:
    England
    #1
    Hi,

    I've never done any web design or coding, new to it all today, just been following some tutorials and searching google for answers.

    I'm trying to make a simple website in html to get me through the next 6 months which replaces my current flash website but is essentially the same with a few tweaks; the flash website was done in indesign and exported so really it was a mockup.

    heres the flash website mockup (takes a while to load);
    deleted

    heres my current progress on the html and css front
    http://www.lukeriggall.co.uk/

    I just would like someone to check it over for me and to also answer a few questions;

    1 - How can I center the page? is there someway to frame the whole page then centre that?

    I've updated the page with a separate css file and a profile page as well!
     
  2. LERsince1991, Jan 24, 2012
    Last edited: Jan 24, 2012

    thread starter macrumors 65816

    LERsince1991

    Joined:
    Jul 24, 2008
    Location:
    England
    #2
    how can I sort out the centering of the page please?
     
  3. macrumors member

    Joined:
    Jul 30, 2009
    #3
    The way you have things now, it will be hard to center things. The reason why is you are using absolute positioning on your elements, which positions those at a specific place on the page.

    So typically to center something using CSS, you'd set
    Code:
    margin: 0 auto;
    and make sure the element has a specific width. So you'd typically have a div tag that contains the rest of the page, and that div has the margin and width set on it.

    The way you have it now, using absolute positioning, it's going to be hard to center things. What you could try is to create a div that wraps the three main images. Give that a specific width and a margin: 0 auto, as well as a position: relative. Then the absolute positioning of the images will need to be fixed, since it will now calculate the positioning based on the containing div element.

    This way should get things most of the way centered. A better way would just get rid of the absolute positioning all together.
     
  4. LERsince1991, Jan 24, 2012
    Last edited: Jan 30, 2012

    thread starter macrumors 65816

    LERsince1991

    Joined:
    Jul 24, 2008
    Location:
    England
    #4
    so whats the best way to get rid of it all together?
    the layout will be like the flash one shown at the address www.lukeriggall.co.uk/2012
     
  5. thread starter macrumors 65816

    LERsince1991

    Joined:
    Jul 24, 2008
    Location:
    England
    #5
    think I've managed to centre the page and adjust the absolute positioning accordingly, seems to work well! Thanks!
     
  6. macrumors 6502

    gr8whtd0pe

    Joined:
    Feb 21, 2008
    Location:
    Belle, WV
    #6
    Why are you assigning div's classes if you are just going to put the style in the tag? Defeats the purpose.
     
  7. thread starter macrumors 65816

    LERsince1991

    Joined:
    Jul 24, 2008
    Location:
    England
    #7
    erm, its adjusting the text, didn't think about using it to adjust the position as well :) thanks :)

    edit; as I said, only started yesterday or so and never even looked at html or css before then so getting into it still!

    Point out anything I can improve if you can :)
     
  8. LERsince1991, Jan 24, 2012
    Last edited: Jan 24, 2012

    thread starter macrumors 65816

    LERsince1991

    Joined:
    Jul 24, 2008
    Location:
    England
    #8
    ok so I have a couple more questions about things that are a bit beyond me at the moment!

    1
    I want to make the images on the right of this page;
    http://www.lukeriggall.co.uk/architecture/worship.html

    Open in full size in a box when clicked in the centre of the screen. I think its called a lightbox or something and have the arrows where you can click through to left or right to the next or previous image. This fairly easy to do? just something really simple to view the images.

    2
    auto scroll bars = done

    3
    I'll also need the PROJECT thumbnails;
    http://www.lukeriggall.co.uk/architecture.html
    in an invisible box that can be scrolled left or right to older or newer projects, this can be seen working in the flash mockup at /2012
    Would be nice to have some sort of animation though like swipe left/right to next or previous page.
    edit- I don't want scrolling here, I want to click an arrow on the left or right and to show the next 3 projects.

    Thanks :)))))
     
  9. bjett92, Jan 24, 2012
    Last edited: Jan 24, 2012

    macrumors 6502a

    Joined:
    Oct 22, 2007
    Location:
    Indy, IN
    #9
    The easiest way to get this done is to use a jQuery plugin. I don't know if you have looked at jQuery before, but it's a javascript framework that makes animation really easy, along with many features and plugins.

    Here is a lightbox plugin I have used before, and it looks nice and easy to use.

    http://leandrovieira.com/projects/jquery/lightbox/

    Google jquery lightbox and you can find a lot more!

    Edit:
    This is another really nice one. http://fancybox.net/

    One more thing. While not technically necessary, it would be a really good idea to get all CSS out of the html and into a seperate linked css file. Also, don't use font tages, those are deprecated.
     
  10. macrumors 68030

    ericrwalker

    Joined:
    Oct 8, 2008
    Location:
    Albany, NY
    #10
    Yeah a long while, it might be a good idea to have a "loading" screen.
     
  11. macrumors 68030

    ericrwalker

    Joined:
    Oct 8, 2008
    Location:
    Albany, NY
    #11
  12. macrumors 6502

    gr8whtd0pe

    Joined:
    Feb 21, 2008
    Location:
    Belle, WV
    #12
  13. macrumors 68030

    ericrwalker

    Joined:
    Oct 8, 2008
    Location:
    Albany, NY
    #13
    I like that, a picture every day. Awesome idea.
     
  14. macrumors 6502

    gr8whtd0pe

    Joined:
    Feb 21, 2008
    Location:
    Belle, WV
    #14
    Yup, starting at 6 months. Wish we had started earlier, and don't know when to end it lol
     
  15. macrumors 68030

    ericrwalker

    Joined:
    Oct 8, 2008
    Location:
    Albany, NY
    #15
    Is that a wordpress add-on package you downloaded? I started with wordpress and I didn't like it.

    I might want to add something like that to my page. I bought a URL for my daughter about 6 months before she was born....then decided I wanted her "first last" name URL a few months before, and bought it. Worked on the site for a few months on and off, and I actually finished it while in the hospital, while my wife was in labor :O

    My in-laws are all in Japan, so they love having the site. The cool thing with the cutesoft program is that I can just drop photos in the album file, and it creates the thumbnails automatically. I have black templates for when I create a new album too.
     
  16. macrumors 6502

    gr8whtd0pe

    Joined:
    Feb 21, 2008
    Location:
    Belle, WV
    #16
    Nope. It's just a theme I modified. It simply takes the image posted into a post, displays it at 100X100 and allows you to click on it to load the pic only. The date you see is the title of the post.

    I write, I don't pay. Lol
     
  17. thread starter macrumors 65816

    LERsince1991

    Joined:
    Jul 24, 2008
    Location:
    England
    #17
    Thanks for the help and suggestions!
    It's getting to where I want it to be :)

    Any suggestions on better flickr gallery than the one I have? I tried stretching it but then the images don't show properly, would be best with a nice clean one with a white seamless background to blend in :)

    Working on making the project pages a little better with the images on the right.

    Also need to discuss compatibility with browsers as it works for safari on mac but i haven't tried on anything else!

    Also need to look into how to style the scroll bars as they look crap on windows!

    cleaned up the style coding and used the css file more and also cleaned a few other things up and also added google analytics :)

    Thanks,
    Luke
     
  18. macrumors 6502

    gr8whtd0pe

    Joined:
    Feb 21, 2008
    Location:
    Belle, WV
    #18
    Use developer mode in safari, install chrome and Firefox on your Mac. Chances are if it works in safari, chrome and Firefox will like it too.

    For the love of god please do not style the scroll bars.

    You could always upload the pics to your site and use something like http://coppermine-gallery.net/ to show them off.
     
  19. thread starter macrumors 65816

    LERsince1991

    Joined:
    Jul 24, 2008
    Location:
    England
    #19
    Forgot to mention the website was done ages ago :)

    www.lukeriggall.co.uk

    Not bad for a couple of weeks work from knowing nothing about html or web design :D
     

Share This Page