www.webdeveloper.com
Results 1 to 2 of 2

Thread: Block of colour mis-aligning when browser/screen resized

  1. #1
    Join Date
    Jan 2003
    Location
    UK
    Posts
    279

    Block of colour mis-aligning when browser/screen resized

    Hi guys,

    I've been banging my head against this for the last two days, hope you can help! I'm working towards HTML5 and CSS3 so I can't use good old tables

    The problem:

    http://www.adkm.co.uk/problem.gif

    The CSS relating to the aforementioned classes/layers:

    (note: .main_menu is the class of an unordered list)

    Code:
    .main_menu { 
    float: left; /* Ensures #colourblock1 is placed on the right-hand side of the menu. */
    width: 526px; 
    height: 100%; 
    }
    
    #colourblock1 { 
    width: auto; /* Fills remaining width space after menu. */
    height: 100%; 
    border-top: 4px solid #0D1012; 
    background-color: #142933; 
    overflow: hidden; /* Prevents width: auto from filling all of the parent container's width. */
    }
    I need the menu items to have a transparent background when selected or hovered over (revealing the opacitised background beneath), so I can't just set #colourblock1's width to 100% as that'd give the entire menu a background colour of #142933.

    I've also tried ditching #colourblock1 and setting the width of the menu (unordered list) to 100%, but again I would have to set it's background to #142933 which screws with the menu item transparency, along with their horizontal alignment.

    Not sure what to do, except make some wishes for CSS4:

    1. Enable background-color: transparent to x-ray lower layers, for example:

    z-index: 0 - #main_content_background (opacitised background)
    z-index: 1 - #colourblock1 (width 100%, background-color: #142933)
    z-index: 2 - .main_menu (unordered list, stacked on top of #colourblock1)

    ...then perhaps target the layer you want to peer into, using something like this:

    .main_menu a:hover { background-color: transparent xray('#main_content_background'); }

    Or...

    2. Enable the inner background area to be controllable, for example:

    #a_box {
    width: 1000px;
    height: 1000px;
    background-color: white;
    inner-background: col('2,526px,*'), row(''), color('transparent,#142933');
    }

    ...number of columns (2), width for the first column (526px), the second one would fill the remaining space (*). The row dimensions would be in height.

  2. #2
    Join Date
    Jan 2003
    Location
    UK
    Posts
    279
    Ok I made it work... I made the menu 100% width, fixed the offset problem by specifying both the padding of the LI and A tags, plus making the final list item (Contact) reverse-simulate the bottom colourblock.

    HTML:

    Code:
    <ul class="menu">
    <li class="menu_item_active"><a href="index.html">Profile</a></li>
    <li><a href="education.html">Education</a></li>
    <li class="menu_item_active_experience"><a href="">Experience <img 
    
    src="images/arrow_down.gif" alt="Arrow Down" /></a>
    <!-- Submenu #1 -->
     <ul class="submenu1">
     <li class="submenu2"><a href="">Web <img src="images/arrow_right.gif" alt="Arrow Right" 
    
    /></a>
    <!-- Submenu #2 -->
      <ul>
      <li><a href="experience_web_fvf.html">Fluid vs. Fixed?</a></li>
      <li><a href="experience_web_t.html">Typography</a></li>
      <li class="submenu_title"><label>Support</label></li>
      <li><a href="experience_web_seo.html">SEO</a></li>
      <li><a href="experience_web_wcag.html">WCAG</a></li>
      <li><a href="experience_web_cb.html">Cross-browser</a></li>
      <li class="submenu_title"><label>Source code</label></li>
      <li><a href="experience_web_html5.html">HTML5</a></li>
      <li><a href="experience_web_css3.html">CSS3</a></li>
      <li><a href="experience_web_jp.html">Javascript/PHP</a></li>
      </ul>
    <!-- close Submenu #2 -->
     </li>
     <li class="submenu3"><a href="">Work <img src="images/arrow_right.gif" alt="Arrow Right" 
    
    /></a>
    <!-- Submenu #3 -->
       <ul>
       <li><a href="experience_work_x.html">X</a></li>
       <li><a href="experience_work_b.html">B</a></li>
       <li><a href="experience_work_n.html">N</a></li>
       </ul>
    <!-- close Submenu #3 -->
     </li>
     </ul>
    <!-- close Submenu #1 -->
    </li>
    <li><a href="design.html">Design</a></li>
    <li class="simulate_colourblock"><a href="contact.php">Contact</a></li>
    </ul>
    CSS:

    Code:
    /********************* Menu start. */
    
    /* Position/visibility. */
    
    .menu { 
    position: absolute; 
    top: 0%; 
    width: 100%; 
    }
    
    .submenu1, .submenu2 ul, .submenu3 ul { 
    position: absolute; /* Prevent submenus displacing mainmenu items. */
    z-index: 3; 
    display: none; 
    }
    
    .submenu1 { 
    /* Margin instead of top/left keeps submenu aligned to the Experience tab in all 
    
    environments. */
    margin-top: 7px; 
    margin-left: -6px; 
    width: 137px; 
    }
    
    .submenu2 ul { 
    margin-top: -24px; 
    margin-left: 93px; 
    width: 147px; 
    }
    
    .submenu3 ul { 
    margin-top: -24px; 
    margin-left: 93px; 
    width: 187px; 
    }
    
    /* Align/formatting. */
    
    .menu li { 
    float: left; /* Tabs mainmenu items horizontally. */
    margin-top: 5px; 
    border-top: 4px solid #0D1012; 
    background-color: #142933; 
    padding: 10px 0px 7px 0px; 
    }
    
    .submenu1 li, .submenu2 li, .submenu3 li { 
    float: none !important; /* Stacks submenu items vertically. */
    margin-top: 0px !important; 
    }
    
    .menu a { 
    padding: 10px 19px 7px 19px; 
    font-size: 1.1em; 
    color: #85A3B3; 
    }
    
    .menu img { 
    padding-left: 5px; 
    }
    
    .submenu1 { 
    border-left: 6px solid #0D1012; 
    border-bottom: 8px solid transparent; 
    }
    
    .submenu1 li { 
    margin-top: 0px !important; 
    border-top: none !important; 
    background-color: transparent !important; 
    padding: 5px 11px 5px 11px !important; 
    }
    
    .submenu1 a { 
    padding: 5px 11px 5px 11px !important; 
    font-style: italic; 
    }
    
    .submenu2 ul, .submenu3 ul { 
    border-left: 4px solid #0D1012; 
    border-bottom: 8px solid transparent; 
    }
    
    .submenu2 ul li, .submenu3 ul li { 
    background-color: #142933 !important; 
    }
    
    .submenu2 ul a, .submenu3 ul a { 
    font-style: normal; 
    font-size: 0.95em; 
    }
    
    /* Selected styles. */
    
    .menu_item_active a, .menu_item_active_contact a { 
    font-weight: bold; 
    text-decoration: underline; 
    }
    
    .menu_item_active, .menu_item_active_experience { 
    margin-top: 0px !important; 
    background-color: transparent !important; 
    }
    
    .menu_item_active, .menu_item_active_experience { 
    border-left: 6px solid #0D1012; 
    border-top: 8px solid transparent !important; 
    border-bottom: 8px solid transparent; 
    }
    
    .menu_item_active_contact { 
    border-right: 6px solid #0D1012; 
    border-bottom: 8px solid transparent; 
    background-color: transparent !important; 
    }
    
    /* Simulate reverse #colourblock effect for remaining width of menu. */
    .simulate_colourblock { 
    float: none !important; 
    width: auto; 
    overflow: hidden; 
    }
    
    .submenu_title { 
    padding: 0px !important; 
    text-indent: 5px; 
    font-style: italic; 
    font-weight: bold; 
    }
    
    /* User/menu interaction. */
    
    .menu li:hover ul.submenu1, .submenu2:hover ul, .submenu3:hover ul { 
    display: block; 
    }

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.34662 seconds
  • Memory Usage 2,860KB
  • Queries Executed 15 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (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
  • (3)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (2)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (2)postbit
  • (2)postbit_onlinestatus
  • (2)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 (70):
  • 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
  • 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