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
    267

    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
    267
    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



Recent Articles