SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict jlisec01's Avatar
    Join Date
    Nov 2006
    Location
    MI
    Posts
    326
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Imaged Borders Positioning Bad

    Hi everyone, I got this side navigation that I'm working on and I have 3 images, the top part, then the background and 2 image borders on the left and right side that have a faded look. Where you see id = display_menu_2 is JavaScript content and it isn't my coding, this is under volusion hosting. But the content thats display_menu_2 (links) are pushing the background borders down, can't figure out what is wrong, thanks for any help.

    Code CSS:
            <div style="position:relative;height:300px;width:233px;margin:5px;">
               <div style="width:233px;padding:0;margin:0;height:300px;">
                  <div style="background:url([url]http://kizzofsengir.webs.com/topsidenavbg.gif[/url]) no-repeat;height:28px;"><b id="Menu2_Title" class="Config_Colors_MenuTitle">Our Categories</b></div>
                     <div id="display_menu_2" style="background: url([url]http://kizzofsengir.webs.com/sidenavbg.gif[/url]) repeat-x top;height:300px;">    
                           <div style="position:absolute;top:5;left:0;background: url([url]http://kizzofsengir.webs.com/brdrfade.gif[/url]) no-repeat;height:300px;">&nbsp;</div>
                           <div style="position:absolute;top:5;right:-5px;background: url([url]http://kizzofsengir.webs.com/brdrfade.gif[/url]) no-repeat;height:300px;">&nbsp;</div>
                     </div>        
                  </div>
                </div>

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Where you see id = display_menu_2 is JavaScript content and it isn't my coding, this is under volusion hosting.

    But the content thats display_menu_2 (links) are pushing the background borders down, can't figure out what is wrong,
    Hi,
    For starters, that first nested div with the same dimensions as the wrapping div is not needed at all so you can eliminate it.

    As far as the problem you mention above, I'm not seeing the border divs being pushed down. Probably because there is no content in your example, what I mean is the script may be setting some bottom margins on the title. Hard to tell without seeing the live example.

    You also left out the px unit behind the top:5 offset. That is being ignored and it is setting itself as top:auto;

    Code:
    <div style="position:absolute;top:5;left:0;background: SNIP; height:300px;">&nbsp;</div>
    <div style="position:absolute;top:5; right:-5px;background: SNIP; height:300px;">&nbsp;</div>
    That right:-5px is not needed either, you should be able to set it as right:0

    Here is a cleaned up version that seems to be working fine. Be careful using those fixed heights though.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Page</title>
     
    <style type="text/css">
    body {
        margin: 0;
        padding: 0;
        font: 100%/1.2 arial, helvetica, sans-serif;
    }
    .menu {
        width: 233px;
        height: 300px;
        margin: 15px;
        position: relative;/*containing block for AP border divs*/
    }
    .menu-title {
        height: 18px;/*28px with padding*/
        margin: 0;
        padding: 5px 10px;
        font: bold 16px/18px arial;
        background: url(http://kizzofsengir.webs.com/topsidenavbg.gif) no-repeat;
    }
    .menu ul {
        height: 298px;/*300px with padding*/
        margin: 0;
        padding: 1px 0;
        list-style: none;
        background: url(http://kizzofsengir.webs.com/sidenavbg.gif) repeat-x top;
    }
    .menu li {
        margin: 5px 10px;
    }
    .brdr-lt, .brdr-rt {
        width: 1px;
        height: 300px;
        position: absolute;
        top: 28px;/*position below the h2*/
        left: 0;
        background: url(http://kizzofsengir.webs.com/brdrfade.gif) no-repeat;
    }
    .brdr-rt {
        left: auto;
        right: 0;
    }
    </style>
     
    </head>
    <body>
     
    <div class="menu">
        <h2 class="menu-title">Our Categories</h2>
        <ul>
            <li>Menu Content</li>
            <li>Menu Content</li>
            <li>Menu Content</li>
        </ul>
        <div class="brdr-lt"></div>
        <div class="brdr-rt"></div>
    </div>
     
    </body>
    </html>


Bookmarks

Posting Permissions

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