Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jul 2009
    Posts
    49
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Content not showing where it should be

    It's probably a simple fix but i've try everything within my basic ability to get my hidden div to display properly, basicaly the content is showing outside of a yellow bordered area where it should be inside it and directly below the Main Menu 01 thing on the page.
    I apreciate if someone could review my code and tell me where i am going wrong.

    Code:
    <html>
    
    <head>
    
    
    <script type="text/javascript" language="JavaScript"><!--
    function HideContent(d) {
    if(d.length < 1) { return; }
    document.getElementById(d).style.display = "none";
    }
    function ShowContent(d) {
    if(d.length < 1) { return; }
    document.getElementById(d).style.display = "block";
    }
    function ReverseContentDisplay(d) {
    if(d.length < 1) { return; }
    if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
    else { document.getElementById(d).style.display = "none"; }
    }
    //--></script>
    
    
    
    <style type="text/css">
    
    #container {
    margin-left: auto;
    margin-right: auto;
    padding: 6px;
    background: #DBDBDB;
    width: 1200px;
    height: auto;
    min-height:500px;
    border: 1px solid black;
    }
    
    #menu {
    margin-left: auto;
    margin-right: auto;
    padding: 6px;
    background: #8C8C8C;
    height: auto;
    border: 1px solid red;
    }
    
    #sub-menu-01 {
    margin-left: auto;
    margin-right: auto;
    padding: 6px;
    background: #BABABA;
    height: auto;
    border: 1px solid yellow;
    }
    
    #sub-menus {float: left; width: 190px; padding: 5px; }
    
    </style>
    </head>
    
    <body>
    
    <form action="insert2database.php" method="post">
    
    <div id="container">
    
    
    	<div id="menu" style="float: left;">MAIN MENU 01:<input type="text" name="file_name">
    
    		
    		<a onclick="ShowContent('sub-menu-01'); return true;" href="javascript:ShowContent('sub-menu-01')"> [show sub menu's]</a>
    		<a onclick="HideContent('sub-menu-01'); return true;" href="javascript:HideContent('sub-menu-01')"> [hide]</a>
    		
    	</div>
    
    		<div id="sub-menu-01" style="display:none;">
    
    			<div id="sub-menus">SUB MENU 01:<input type="text" name="file_name"></div>
    
    			<div id="sub-menus">SUB MENU 02:<input type="text" name="file_name"></div>
    
    			<div id="sub-menus">SUB MENU 03:<input type="text" name="file_name"></div>
    
    			<div id="sub-menus">SUB MENU 04:<input type="text" name="file_name"></div>
    
    			<div id="sub-menus">SUB MENU 05:<input type="text" name="file_name"></div>
    
    			<div id="sub-menus">SUB MENU 06:<input type="text" name="file_name"></div>
    
    			<div id="sub-menus">SUB MENU 07:<input type="text" name="file_name"></div>
    
    			<div id="sub-menus">SUB MENU 08:<input type="text" name="file_name"></div>
    
    			<div id="sub-menus">SUB MENU 09:<input type="text" name="file_name"></div>
    
    			<div id="sub-menus">SUB MENU 10:<input type="text" name="file_name"></div>
    
    		</div>
    
    </div>
    
    
    <input type="submit" value="Submit to Database" />
    </form>
    
    </body>
    </html>

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by trazix View Post
    It's probably a simple fix but i've try everything within my basic ability to get my hidden div to display properly, basicaly the content is showing outside of a yellow bordered area where it should be inside it and directly below the Main Menu 01 thing on the page.
    I apreciate if someone could review my code and tell me where i am going wrong.

    Code:
    <html>
    
    <head>
    
    
    <script type="text/javascript" language="JavaScript"><!--
    function HideContent(d) {
    if(d.length < 1) { return; }
    document.getElementById(d).style.display = "none";
    }
    function ShowContent(d) {
    if(d.length < 1) { return; }
    document.getElementById(d).style.display = "block";
    }
    function ReverseContentDisplay(d) {
    if(d.length < 1) { return; }
    if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
    else { document.getElementById(d).style.display = "none"; }
    }
    //--></script>
    
    
    
    <style type="text/css">
    
    #container {
    margin-left: auto;
    margin-right: auto;
    padding: 6px;
    background: #DBDBDB;
    width: 1200px;
    height: auto;
    min-height:500px;
    border: 1px solid black;
    }
    
    #menu {
    margin-left: auto;
    margin-right: auto;
    padding: 6px;
    background: #8C8C8C;
    height: auto;
    border: 1px solid red;
    }
    
    #sub-menu-01 {
    margin-left: auto;
    margin-right: auto;
    padding: 6px;
    background: #BABABA;
    height: auto;
    border: 1px solid yellow;
    }
    
    #sub-menus {float: left; width: 190px; padding: 5px; }
    
    </style>
    </head>
    
    <body>
    
    <form action="insert2database.php" method="post">
    
    <div id="container">
    
    
    	<div id="menu" style="float: left;">MAIN MENU 01:<input type="text" name="file_name">
    
    		
    		<a onclick="ShowContent('sub-menu-01'); return true;" href="javascript:ShowContent('sub-menu-01')"> [show sub menu's]</a>
    		<a onclick="HideContent('sub-menu-01'); return true;" href="javascript:HideContent('sub-menu-01')"> [hide]</a>
    		
    	</div>
    
    		<div id="sub-menu-01" style="display:none;">
    
    			<div id="sub-menus">SUB MENU 01:<input type="text" name="file_name"></div>
    
    			<div id="sub-menus">SUB MENU 02:<input type="text" name="file_name"></div>
    
    			<div id="sub-menus">SUB MENU 03:<input type="text" name="file_name"></div>
    
    			<div id="sub-menus">SUB MENU 04:<input type="text" name="file_name"></div>
    
    			<div id="sub-menus">SUB MENU 05:<input type="text" name="file_name"></div>
    
    			<div id="sub-menus">SUB MENU 06:<input type="text" name="file_name"></div>
    
    			<div id="sub-menus">SUB MENU 07:<input type="text" name="file_name"></div>
    
    			<div id="sub-menus">SUB MENU 08:<input type="text" name="file_name"></div>
    
    			<div id="sub-menus">SUB MENU 09:<input type="text" name="file_name"></div>
    
    			<div id="sub-menus">SUB MENU 10:<input type="text" name="file_name"></div>
    
    		</div>
    
    </div>
    
    
    <input type="submit" value="Submit to Database" />
    </form>
    
    </body>
    </html>
    Code:
    <div id="sub-menus">
    each id must be uniq in a page, change id with class:

    Code:
    <div class="sub-menus">
    and remove float: left; from here so that:
    Code:
    #sub-menus {float: left; width: 190px; padding: 5px; }
    will become:
    Code:
    .sub-menus {width: 190px; padding: 5px; }
    I'm not sure i understand the problem, the answer is for what I think i understand, .

    best regards

  • Users who have thanked oesxyl for this post:

    trazix (11-05-2010)

  • #3
    New Coder
    Join Date
    Jul 2009
    Posts
    49
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Thanks oesxyl that sorted some issues, the hidden part that appears when the link is clicked on starts behind the Main menu I would like it to start below it what css would i need to achive this. Thanks

    http://yabadabadoo.blackapplehost.co...s/Data.php.htm
    Last edited by trazix; 11-05-2010 at 10:53 PM.

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by trazix View Post
    Thanks oesxyl that sorted some issues, the hidden part that appears when the link is clicked on starts behind the Main menu I would like it to start below it what css would i need to achive this. Thanks

    http://yabadabadoo.blackapplehost.co...s/Data.php.htm
    you mean to move the sub-menu to the right under the menu? in this case add a margin-left: 130px; to the .sub-menu declaration in the style section.

    in case you want 'SUB-MENU 0?' to be on the same line with input box increase the value of width.

    best regards

  • #5
    New Coder
    Join Date
    Jul 2009
    Posts
    49
    Thanks
    11
    Thanked 0 Times in 0 Posts
    This is what i am hoping to acheive.

    here is a link to a picture

    Code:
    http://yabadabadoo.blackapplehost.com/testing-pages/x.jpg
    Last edited by trazix; 11-06-2010 at 02:24 PM.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Add clear:left; to #sub-menu-01 and then float:left; to .sub-menus if you need them aligned in-line
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    trazix (11-06-2010)

  • #7
    New Coder
    Join Date
    Jul 2009
    Posts
    49
    Thanks
    11
    Thanked 0 Times in 0 Posts
    It's almost there but the background is not surounding the sub menu items.

    http://yabadabadoo.blackapplehost.co...s/Example2.htm

    I can change the
    Code:
    height: auto to height: 150px;
    and that will work but i would like it to stay auto to accomodate bigger lists.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Add overflow:auto; to #sub-menu-01, to clear the floats, see http://www.quirksmode.org/css/clearing.html
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    trazix (11-06-2010)

  • #9
    New Coder
    Join Date
    Jul 2009
    Posts
    49
    Thanks
    11
    Thanked 0 Times in 0 Posts
    abduraooft that worked a treat, Thanks


  •  

    Posting Permissions

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