How to Layout (Theory)

Discussion in 'HTML & Website Design' started by THT, Jul 18, 2007.

  1. #1
    On one of my recipe sites, on the Chicken Recipes page, the layout looks a bit messy.

    Can anyone suggest a better way to organise this?

    I know the whole in general needs a bit of a rehaul design wise, but im looking for specific ideas on how to improve this page to link to all the other categories

    Any tips?
     
    THT, Jul 18, 2007 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Seperate the google ads from your in-site links. Move the links somewhere else (under the header? or along the lefthand side but not in a big box?) Without that black box on the left pushing the other stuff to the right, the first line of chicken recipes won't go off to the side like it does.

    Either way I wouldn't want google ads/links next to a menu for my site. Some people try very hard to avoid looking at ads than then don't see the inter-site links easily.
     
    Stomme poes, Jul 18, 2007 IP
  3. x-noise

    x-noise Peon

    Messages:
    35
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    how you organized the structure is close to the perfect organization scheme. You should really check against FX (because it looks like hell).

    now let's start: in #main you have #IMGindex and #menu, a h1 and a paragraph.

    The h1 and the paragraph should be enclosed in a div too (because it's a division of your page).

    Also the div i mentioned that will engulf the h1 and paragraph and #menu should be enclosed in yet another div, so you will have more control over the display. Below you have the way i see the structure of the html document:

     
    x-noise, Jul 18, 2007 IP
  4. THT

    THT Peon

    Messages:
    686
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #4
    ok made a couple of changes
    But now my text uinder the images in firefox is crazy!!
     
    THT, Jul 18, 2007 IP
  5. Vic_mackey

    Vic_mackey Banned

    Messages:
    2,093
    Likes Received:
    151
    Best Answers:
    0
    Trophy Points:
    0
    #5
    One quick way you can make it look neater, is to use the same image size for all the meal pictures, it'll all line up a lot better. Also, try and shorten some of the category names that go onto two lines (or make the 1 line ones longer). If each one has uniform size and style of link it will look a lot better.
     
    Vic_mackey, Jul 18, 2007 IP
  6. THT

    THT Peon

    Messages:
    686
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #6
    there were only 2images out of line

    Ive changed it now and looks a bit tidier - Thoughts?
     
    THT, Jul 18, 2007 IP
  7. Vic_mackey

    Vic_mackey Banned

    Messages:
    2,093
    Likes Received:
    151
    Best Answers:
    0
    Trophy Points:
    0
    #7
    bandwidth exceeded!
     
    Vic_mackey, Jul 18, 2007 IP
  8. denverrusell

    denverrusell Active Member

    Messages:
    537
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    60
    #8
    Bandwidth Limit Exceeded me too,
     
    denverrusell, Jul 18, 2007 IP
  9. THT

    THT Peon

    Messages:
    686
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #9
    yeah working on it
     
    THT, Jul 19, 2007 IP
  10. THT

    THT Peon

    Messages:
    686
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Ok bandwidth exceeded = fixed!
     
    THT, Jul 20, 2007 IP
  11. THT

    THT Peon

    Messages:
    686
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #11
    @Vic_mackey

    Any further ideas?
     
    THT, Jul 25, 2007 IP
  12. Vic_mackey

    Vic_mackey Banned

    Messages:
    2,093
    Likes Received:
    151
    Best Answers:
    0
    Trophy Points:
    0
    #12
    The images still dont look properly lined up, the first two rows are not correctly alligned.

    I would change the navigation menu and remove that black box that its in. The navigation would be better going along the top of the images, as the way you have it now in a list is creating a large dead space next to it.
     
    Vic_mackey, Jul 25, 2007 IP
  13. brok3n

    brok3n Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    The text is under the images in firefox.
     
    brok3n, Jul 25, 2007 IP
  14. THT

    THT Peon

    Messages:
    686
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #14
    yeah trying to fix this now - any ideas?
     
    THT, Jul 25, 2007 IP
  15. THT

    THT Peon

    Messages:
    686
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #15
    FireFox is sorted!!!
     
    THT, Jul 25, 2007 IP