Page 1 of 2 12 LastLast
Results 1 to 15 of 19

Thread: Would really like some layout advice...

  1. #1
    Join Date
    Aug 2006

    Would really like some layout advice...

    After doing Flash stuff for a year I'm back with this new task in web authoring, but would really appreciate some advice because this layout seems really difficult to me

    Here's a link to a jpeg with links off: http://x-gr.net/off.jpg

    Here's a link to a jpeg with links on: http://x-gr.net/on.jpg

    They want the background to stretch across the screen with the main part of the layout fixed at the center. The trouble I have with this is that on of the blue bars on the left side of the BG is actually a button. How would you handle this?

  2. #2
    Join Date
    Dec 2005
    American, living in Toronto, ON. CANADA
    I don't any difference in the "on" and the "off" image, and using images here isn't as much help as seeing actual code. Is this layout online somewhere so the code could be examined? I think I have an idea or two, but should see code first..
    I build for: Firefox and tweak for IE

  3. #3
    Join Date
    Aug 2006
    Hey haven't started the coding yet..

    I'm really stumped on how to handle that button on the left side. Its a blue bar, you may notice that the colour slightly changes between the two jpegs.

    I haven't scripted layouts with expanding backgrounds like you see there. I'd really appreciate some help on this!


  4. #4
    Join Date
    Nov 2003
    Jerryville, Tejas
    Is that hover behavior or something else?
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  5. #5
    Join Date
    Aug 2006
    It's a button, so yes it will be hover behaviour. If anyone thinks part of this layout is impossible please let me know and I'll send it back to the graphic designer.


  6. #6
    Join Date
    Dec 2005
    American, living in Toronto, ON. CANADA
    I don't know but it's all Greek to me!

    -I'll have a play at this over the weekend... see if I can emulate this. I'm thinking 3-column faux with a fixed-width center.

    What is the intended/expected user's screen resolution? I view this in 1024px width, -do we need to cater to 800-width or, 'close to it'? The fixed-width center content appears to occupy just over 1/3rd the total width so we're only talking about 340-400px center-width, max, and 'percent/auto' the left/right columns. On an 800-width display (760, actually), this means that the left/right columns would be around 180px wide...a bit narrow.. (could go as much as 200px for the left maybe, and a little bit less for the right, to accomodate the left-column 'text' portion of that hover-changing link-bar...).

    Okay... now I've got myself motivated here... hmm..
    I build for: Firefox and tweak for IE

  7. #7
    Join Date
    Aug 2006
    Ok, I started this, here is my work so far:


    The middle must stay constant at 775px regardless of the viewport, with those side bars stretching to meet the middle section.

    Any advice? Thanks a lot everyone!

  8. #8
    Join Date
    Aug 2006
    Another option is to use a table like this:


    How can I make the right and left sidebars the same width?

    What do you think, should I bother with this table structure at all? I haven't used tables in a long time...

  9. #9
    Join Date
    Jun 2008
    Hey there Kasha,

    I've been looking over your issue and while I'm really not sure what exactly you're trying to do after looking at the on and off state jpegs that you posted to begin with and then the tables you had for links more recently. It's really hard to say without you sitting down with me and drawing out what you want or need it to do.

    But what I do know is that you need that middle section to stay a constant 775 px wide and you need the right and left sides to stay a consistent width as well. So, what I would do if I were you is use a slicing method using Adobe software should you have it. Make your slices of the jpeg images in Adobe ImageReady, optmize them in Adobe Photoshop, then save optmized as in ImageReady again as HTML and Images format and that will make all the tables and such for you in HTML. You will have consistent width for everything you need and it will not stray from those sizes (assuming you don't force anything larger than the table cells). But I don't know if you have access to that software or are familiar with that technique or not. It's just a suggestion that I could see working with that layout.

    I see nothing wrong with the layout as you've shown it. The only thing that concerns me is you talking about "expanding backgrounds." I'm not exactly sure what you mean by that. I could see the left side (button as you call it) there expanding downward according to hover effects as if that's the menu area. That wouldn't be a problem. All you would need to do there is make a slice that has enough height to deal with the expansion.

    I'm not sure if this helped at all or if I was even in the same ballpark as what you are looking at doing. This was just my interpretation of what I read. Good luck with your project!

  10. #10
    Join Date
    Aug 2006
    hey its more complex than that because I want the sides to stay liquid, expanding to fill the page. since they're different on both sides I just can't make a div and attach a BG image to it.

    Hence my table idea...

  11. #11
    Join Date
    Mar 2006
    Newcastle NSW Australia
    This can be done with background images along with a negative margin. You specify a width of 775 px - is this just the section with the main images and top navbar, or does this width also include the left menu as well ? - I assume you want the total site including the side menu, centred on the screen ?

  12. #12
    Join Date
    Dec 2005
    American, living in Toronto, ON. CANADA
    What I have come up with so is nothing like your updated images, but is based 'visually' upon the widths of the first "on" & "off" images that you posted. I have the 'button-bar' on the left-column functioning, the 'center content' fixed and populated with 'holder DIVs', and the two-tone background-image of body is a slice of that right-hand column image, positioned down the page and x-repeated the width of the body. The left-navigation will include a "border-top:20px solid white" to occlude the background-image for that section, forming a 'stairs' effect as per your first image...

    I am becoming hopeful that this is working out. Right now, I can re-size from 1024px down to about 800px without horizontal scrollbars appearing...
    This would continue to work okay for res' in excess of 1024px...

    Will work on this more later tonight... (today is my 5th Wedding Anniversary folks... going out for dinner in a bit.. )
    I build for: Firefox and tweak for IE

  13. #13
    Join Date
    Mar 2006
    Newcastle NSW Australia

  14. #14
    Join Date
    Mar 2006
    Newcastle NSW Australia
    Quote Originally Posted by WebJoel
    (today is my 5th Wedding Anniversary folks... )
    I got to double that and called it quits Seriously, congrats

  15. #15
    Join Date
    Dec 2005
    American, living in Toronto, ON. CANADA
    Seeing Centauri's take on it, perhaps my interpretation of the size of the images is off. I am using 'screengrabs' of the actual image sizes and they are notably smaller than C's example. My example works for 1024 and a bit less than 800px width w/out horizontal scrollbars which was my main goal..

    Right now I am having a time with the 'center content container' not expanding in Firefox to contain some floated items at the bottom, and "overflow:hidden;" isn't fixing this as it should even with no errors/no warnings so far...

    I think I'll give this a rest for the night... Irregardless of how you proceed with your code and what's been offered so far, I'd still like to post my kick at this when I get it 'working' for both IE and Fx to some satisfaction..
    Last edited by WebJoel; 06-14-2008 at 08:02 PM.
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.13834 seconds
  • Memory Usage 3,010KB
  • Queries Executed 13 (?)
More Information
Template Usage (36):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (15)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (15)postbit
  • (15)postbit_onlinestatus
  • (15)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (72):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates