SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast Mary_Itohan's Avatar
    Join Date
    Dec 2004
    Location
    e-Planet
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    align a div below another.

    hello guys,
    am using a .net master page and trying to align a div with a nested navigation link above another div.

    Such that I can add a show/hide jscript event below the navigation.

    However when I add the div below, called Main_Bottom It does not appear immediately below the navigation
    Please advice

    many thanks

    Code:
      <div id="MainMenu" >
            <div id='cssmenu'>
    <ul>
       <li class='active '><a href='index.html'><span>Home</span></a></li>
       <li><a href='#'><span>Products</span></a></li>
       <li><a href='#'><span>About</span></a></li>
       <li><a href='#'><span>Contact</span></a></li>
    </ul>
    </div>
    <div id="Main_Bottom">Text goes here</div>
           </div>
    M
    KISS - Keep It Simple Stupid

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I think we'll need to see more code here—ll of the relevant HTML and CSS. By default, one div will always site above the one after it, so the actual code involved is really important. Preferably post a link, or at least set up a working example that demonstrates the problem and post the code here.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast Mary_Itohan's Avatar
    Join Date
    Dec 2004
    Location
    e-Planet
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is my CSS for the 1st div, the 2nd does not have any css at present.

    many thanks

    <div id="MainMenu" >
    <div id='cssmenu'>
    <ul>
    <li class='active '><a href='index.html'><span>Home</span></a></li>
    <li><a href='#'><span>Products</span></a></li>
    <li><a href='#'><span>About</span></a></li>
    <li><a href='#'><span>Contact</span></a></li>
    </ul>
    </div>
    <div id="Main_Bottom">Text goes here</div>
    </div>

    /*---------------------------------------START HERE-------------------------- */
    #MainMenu
    {
    width: 95%;
    float:right;

    }

    #Main_Bottom {
    border-style: solid;
    }


    #cssmenu {
    float: left;
    width: 80%;
    background: #efefef;
    font-size: 93%;
    line-height: normal;
    border-bottom: 1px solid #666;


    }

    #cssmenu ul {
    margin:0;
    padding:10px 10px 0 50px;
    list-style:none;
    }
    #cssmenu li {
    display:inline;
    margin:0;
    padding:0;
    }
    #cssmenu a {
    float:left;
    background:url('../../images/tableftf.gif') no-repeat left top;
    margin:0;
    padding:0 0 0 4px;
    text-decoration:none;
    }
    #cssmenu a span {
    float: left;
    display: block;
    background: url('../../Images/tabrightf.gif') no-repeat right top;
    padding: 5px 15px 4px 6px;
    color: #666;
    }

    /* Commented Backslash Hack hides rule from IE5-Mac */
    #cssmenu a span {float:none;}
    /* End IE5-Mac hack */

    #cssmenu .active a span,
    #cssmenu a:hover span {color:#FFFFFF;}

    #cssmenu .active a,
    #cssmenu a:hover {background-position: 0 -42px;}

    #cssmenu .active a span,
    #cssmenu a:hover span {background-position: 100% -42px;}
    KISS - Keep It Simple Stupid

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    OK, the problem is that the first div is floated—probably because you wanted it to wrap around the list items. A better way to do that, instead of using float, is to use overflow: hidden; So change your code to this (add in the blue and remove the red):

    Code:
    #cssmenu {
    float: left;
    overflow: hidden;
    width: 80%;
    background: #EFEFEF;
    font-size: 93%;
    line-height: normal;
    border-bottom: 1px solid #666;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Enthusiast Mary_Itohan's Avatar
    Join Date
    Dec 2004
    Location
    e-Planet
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh thats amazing.

    many thanks Ralph

    This forum should update its threads so we can vote users up.

    thanks once again
    KISS - Keep It Simple Stupid

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You're welcome.

    This forum should update its threads so we can vote users up.
    Yes, that's been a hot topic of late, so it may happen next year. In the mean time, we have an end of year voting system (as you can see in my signature). If you've found people helpful during the year, feel free to nominate them for recognition.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Enthusiast Mary_Itohan's Avatar
    Join Date
    Dec 2004
    Location
    e-Planet
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One more thing.

    I added a border radius to make it curved, but it doesnt work ???

    #Main_Bottom {
    border-style: solid;
    width: 80%;
    border-top: none;
    border-width: 2px;
    border-color: #006699;
    border:2px solid;
    border-top-left-radius:2em;

    }
    KISS - Keep It Simple Stupid

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    That code works for me, assuming you want just the top left corner curved. Remember that border-radius is a new CSS3 property that doesn't work in all browsers. Older IE browsers won't understand it all, and some browsers that support it might still need vendor prefixes. E.g.

    Code:
    -moz-border-radius-topleft
    What browser are you using?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •