...

View Full Version : Content not showing where it should be



trazix
11-05-2010, 07:34 PM
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.



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

oesxyl
11-05-2010, 08:29 PM
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.



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




<div id="sub-menus">


each id must be uniq in a page, change id with class:



<div class="sub-menus">


and remove float: left; from here so that:


#sub-menus {float: left; width: 190px; padding: 5px; }


will become:


.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

trazix
11-05-2010, 09:49 PM
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.com/testing-pages/Data.php.htm

oesxyl
11-05-2010, 10:40 PM
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.com/testing-pages/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

trazix
11-06-2010, 01:15 PM
This is what i am hoping to acheive.

here is a link to a picture


http://yabadabadoo.blackapplehost.com/testing-pages/x.jpg

abduraooft
11-06-2010, 03:31 PM
Add clear:left; to #sub-menu-01 and then float:left; to .sub-menus if you need them aligned in-line

trazix
11-06-2010, 04:16 PM
It's almost there but the background is not surounding the sub menu items.

http://yabadabadoo.blackapplehost.com/testing-pages/Example2.htm

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

abduraooft
11-06-2010, 04:39 PM
Add overflow:auto; to #sub-menu-01, to clear the floats, see http://www.quirksmode.org/css/clearing.html

trazix
11-06-2010, 05:32 PM
abduraooft that worked a treat, Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum