I have two menus that I'd like to have on the same line as other text, but I can't for the life of me get it to work. My menu is getting pushed down to the line following the text. Any help would be appreciated.
CSS Code:
#nav {
margin: 0;
padding:0;
list-style: none;
display: inline;
}
#root {
float: left;
position: relative;
display: inline;
}
#root > ul {
top: auto;
left: auto;
}
#root ul {
display: none;
position: absolute;
width: 112px;
top: 1em;
left: 0;
}
#root:hover ul, #root.over ul {
display: block
}
HTML Code:
blah blah blah
<ul id="nav">
<li id="root"><div class='BoardRowBLink'>Moderate<img src='http://www.webdeveloper.com/forum/archive/index.php/gfx/dropdown.gif'> | </div>
<ul id='nav'>
<li><div style='border:0px' class='BoardRowA'> <a class="BoardRowBLink" href=http://www.webdeveloper.com/forum/archive/index.php/"http://shadowboards.info/#">Edit Post</a></div></li>
<li><div style='border:0px' class='BoardRowA'> <a class="BoardRowBLink" href=http://www.webdeveloper.com/forum/archive/index.php/"http://shadowboards.info/#">Add Note/Warning</a></div></li>
<li><div style='border:0px' class='BoardRowA'> <a class="BoardRowBLink" href=http://www.webdeveloper.com/forum/archive/index.php/"http://shadowboards.info/#">Delete Post</a></div></li>
<li><div style='border:0px' class='BoardRowA'> <a class="BoardRowBLink" href=http://www.webdeveloper.com/forum/archive/index.php/"http://shadowboards.info/#">View Admin Notes</a></div></li>
<li><div style='border:0px' class='BoardRowA'> <a class="BoardRowBLink" href=http://www.webdeveloper.com/forum/archive/index.php/"http://shadowboards.info/#">Check IP Address</a></div></li>
<li><div style='border:0px' class='BoardRowA'> <a class="BoardRowBLink" href=http://www.webdeveloper.com/forum/archive/index.php/"http://shadowboards.info/#">Ban User</a></div></li>
</ul>
</li>
<li id="root"><div class='BoardRowBLink'>User Options<img src='http://www.webdeveloper.com/forum/archive/index.php/gfx/dropdown.gif'></div>
<ul id='nav'>
<li><div style='border:0px' class='BoardRowA'> <a class="BoardRowBLink" href=http://www.webdeveloper.com/forum/archive/index.php/"http://shadowboards.info/#">Send PM</a></div></li>
<li><div style='border:0px' class='BoardRowA'> <a class="BoardRowBLink" href=http://www.webdeveloper.com/forum/archive/index.php/"http://shadowboards.info/#">Add To WUL</a></div></li>
<li><div style='border:0px' class='BoardRowA'> <a class="BoardRowBLink" href=http://www.webdeveloper.com/forum/archive/index.php/"http://shadowboards.info/#">Challenge User</a></div></li>
<li><div style='border:0px' class='BoardRowA'> <a class="BoardRowBLink" href=http://www.webdeveloper.com/forum/archive/index.php/"http://shadowboards.info/#">View Post History</a></div></li>
</ul>
</li>
</ul>
Here is the above code in action: <!-- m --><a class="postlink" href="http://shadowboards.info/menu_test3.php">http://shadowboards.info/menu_test3.php</a><!-- m -->
I want the 'blah' text and my menus on the same line.<p style="float:left;">blah blah blah</p>
btw there are a lot of validation problems with the html and cssWhen I add that, the menu is to the right of the text like I want it to be, but it's also above the text. Is there anyway to get it to be on the same line as the text?
And what validation issues does this code have? Maybe these issues are the root of my problem.Change #root position to relative.
id's must be unique (#root, #nav and others?)
Validation problems: html (<!-- m --><a class="postlink" href="http://validator.w3.org/check?verbose=1&uri=http%3A//shadowboards.info/menu_test3.php">http://validator.w3.org/check?verbose=1 ... _test3.php</a><!-- m -->) css (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//shadowboards.info/menu_test3.php">http://jigsaw.w3.org/css-validator/vali ... _test3.php</a><!-- m -->)The #root position already is relative.id's must be unique to work correctly (2x #root and 2x #nav)
The menus have been positioned absolute which causes the displacement.I have several of these menus per page, so there is no way to make them unique since I'm not about to make a CSS rule for every dynamically generated menu.
I've gotten it lined up the way I want using padding.
Another question, when a menu is at the bottom of a page sometimes part of my menu is outside the browser window and thus can't be seen or accessed. Is there a way to tell when a div is outside the browser window so I can possibly move the menu up so it's all viewable?ids MUST be unique because they are supposed to identify ONE and ONLY ONE tag. If you want to apply the same styles to multiple tags then use classes - that is what classes are for.Well it works the way it is, so that's not an issue.
Back to my latest question...
Another question, when a menu is at the bottom of a page sometimes part of my menu is outside the browser window and thus can't be seen or accessed. Is there a way to tell when a div is outside the browser window so I can possibly move the menu up so it's all viewable?You can find out the position of a DIV using Javascript (which you would need to use to move the DIV anyway).
document.getElementById('nav').style.top
will get the top position of <div id="nav"> and
document.getElementById('nav').style.left
will get the left position.Ok, once I know that, how do I determine if the div is being displayed outside the boundries of the browser window?You are obviously not reading felgall's valid code:
document.getElementById('nav').style.top
You have 3 elements with id nav, so valid code will not work in your invalid page.
find element position (<!-- m --><a class="postlink" href="http://www.quirksmode.org/js/findpos.html">http://www.quirksmode.org/js/findpos.html</a><!-- m -->)
screen dimentions (<!-- m --><a class="postlink" href="http://webreference.com/js/column17/dimensions.html">http://webreference.com/js/column17/dimensions.html</a><!-- m -->)
CSS Code:
#nav {
margin: 0;
padding:0;
list-style: none;
display: inline;
}
#root {
float: left;
position: relative;
display: inline;
}
#root > ul {
top: auto;
left: auto;
}
#root ul {
display: none;
position: absolute;
width: 112px;
top: 1em;
left: 0;
}
#root:hover ul, #root.over ul {
display: block
}
HTML Code:
blah blah blah
<ul id="nav">
<li id="root"><div class='BoardRowBLink'>Moderate<img src='http://www.webdeveloper.com/forum/archive/index.php/gfx/dropdown.gif'> | </div>
<ul id='nav'>
<li><div style='border:0px' class='BoardRowA'> <a class="BoardRowBLink" href=http://www.webdeveloper.com/forum/archive/index.php/"http://shadowboards.info/#">Edit Post</a></div></li>
<li><div style='border:0px' class='BoardRowA'> <a class="BoardRowBLink" href=http://www.webdeveloper.com/forum/archive/index.php/"http://shadowboards.info/#">Add Note/Warning</a></div></li>
<li><div style='border:0px' class='BoardRowA'> <a class="BoardRowBLink" href=http://www.webdeveloper.com/forum/archive/index.php/"http://shadowboards.info/#">Delete Post</a></div></li>
<li><div style='border:0px' class='BoardRowA'> <a class="BoardRowBLink" href=http://www.webdeveloper.com/forum/archive/index.php/"http://shadowboards.info/#">View Admin Notes</a></div></li>
<li><div style='border:0px' class='BoardRowA'> <a class="BoardRowBLink" href=http://www.webdeveloper.com/forum/archive/index.php/"http://shadowboards.info/#">Check IP Address</a></div></li>
<li><div style='border:0px' class='BoardRowA'> <a class="BoardRowBLink" href=http://www.webdeveloper.com/forum/archive/index.php/"http://shadowboards.info/#">Ban User</a></div></li>
</ul>
</li>
<li id="root"><div class='BoardRowBLink'>User Options<img src='http://www.webdeveloper.com/forum/archive/index.php/gfx/dropdown.gif'></div>
<ul id='nav'>
<li><div style='border:0px' class='BoardRowA'> <a class="BoardRowBLink" href=http://www.webdeveloper.com/forum/archive/index.php/"http://shadowboards.info/#">Send PM</a></div></li>
<li><div style='border:0px' class='BoardRowA'> <a class="BoardRowBLink" href=http://www.webdeveloper.com/forum/archive/index.php/"http://shadowboards.info/#">Add To WUL</a></div></li>
<li><div style='border:0px' class='BoardRowA'> <a class="BoardRowBLink" href=http://www.webdeveloper.com/forum/archive/index.php/"http://shadowboards.info/#">Challenge User</a></div></li>
<li><div style='border:0px' class='BoardRowA'> <a class="BoardRowBLink" href=http://www.webdeveloper.com/forum/archive/index.php/"http://shadowboards.info/#">View Post History</a></div></li>
</ul>
</li>
</ul>
Here is the above code in action: <!-- m --><a class="postlink" href="http://shadowboards.info/menu_test3.php">http://shadowboards.info/menu_test3.php</a><!-- m -->
I want the 'blah' text and my menus on the same line.<p style="float:left;">blah blah blah</p>
btw there are a lot of validation problems with the html and cssWhen I add that, the menu is to the right of the text like I want it to be, but it's also above the text. Is there anyway to get it to be on the same line as the text?
And what validation issues does this code have? Maybe these issues are the root of my problem.Change #root position to relative.
id's must be unique (#root, #nav and others?)
Validation problems: html (<!-- m --><a class="postlink" href="http://validator.w3.org/check?verbose=1&uri=http%3A//shadowboards.info/menu_test3.php">http://validator.w3.org/check?verbose=1 ... _test3.php</a><!-- m -->) css (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//shadowboards.info/menu_test3.php">http://jigsaw.w3.org/css-validator/vali ... _test3.php</a><!-- m -->)The #root position already is relative.id's must be unique to work correctly (2x #root and 2x #nav)
The menus have been positioned absolute which causes the displacement.I have several of these menus per page, so there is no way to make them unique since I'm not about to make a CSS rule for every dynamically generated menu.
I've gotten it lined up the way I want using padding.
Another question, when a menu is at the bottom of a page sometimes part of my menu is outside the browser window and thus can't be seen or accessed. Is there a way to tell when a div is outside the browser window so I can possibly move the menu up so it's all viewable?ids MUST be unique because they are supposed to identify ONE and ONLY ONE tag. If you want to apply the same styles to multiple tags then use classes - that is what classes are for.Well it works the way it is, so that's not an issue.
Back to my latest question...
Another question, when a menu is at the bottom of a page sometimes part of my menu is outside the browser window and thus can't be seen or accessed. Is there a way to tell when a div is outside the browser window so I can possibly move the menu up so it's all viewable?You can find out the position of a DIV using Javascript (which you would need to use to move the DIV anyway).
document.getElementById('nav').style.top
will get the top position of <div id="nav"> and
document.getElementById('nav').style.left
will get the left position.Ok, once I know that, how do I determine if the div is being displayed outside the boundries of the browser window?You are obviously not reading felgall's valid code:
document.getElementById('nav').style.top
You have 3 elements with id nav, so valid code will not work in your invalid page.
find element position (<!-- m --><a class="postlink" href="http://www.quirksmode.org/js/findpos.html">http://www.quirksmode.org/js/findpos.html</a><!-- m -->)
screen dimentions (<!-- m --><a class="postlink" href="http://webreference.com/js/column17/dimensions.html">http://webreference.com/js/column17/dimensions.html</a><!-- m -->)