Maybe it's because I'm no drop down menu newbie, but this aspect of my site (<!-- m --><a class="postlink" href="http://www.nadamt.xmgfree.com/hub.php">http://www.nadamt.xmgfree.com/hub.php</a><!-- m -->) has been the most troublesome (besides the abandoned iframe). I'm trying to manipulate the text inside the dropdown menu (hover over the "log" and "works" link) so that it stands on the bottom right hand corner on the box rather than the upper right corner. I've tried using vertical-align: bottom, vertical-align: text-bottom, and just plain bottom, and have gotten no where. It's possible, likely even, that I put either one of those properties out of place. Could someone provide the correct sequence?
Here's my stylesheet:
html, body{ height: 100%; width: 100%; margin: 0px; padding: 0px; }
body{ background-color: rgb(255,255,255); color: rgb(255,255,255); font-family: "tempus sans itc", "trebuchet ms", sans-serif; font-size: 20px; font-weight: 500; letter-spacing: 1.25px; text-align: left; word-spacing: 2px; }
p { margin: 0px; padding: 0px 0px 15px 0px; }
/*Containers*/
#interface { position: absolute; left: 50%; top: 50%; width: 984px; height: 500px; margin-left: -492px; margin-top: -250px; padding: 0px; }
#background { position: absolute; top: 30px; left: 0px; width: 984px; height: 440px; filter: alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; }
#threshold {position: absolute; overflow: hidden; width: 100%; height: 100%; background: transparent; }
#content { position: absolute; z-index: 1; background: transparent; padding: 30px 0px 30px 0px; }
/*Header and footer:*/
.a2, .a4, .a6, .a7, .a8, .a9, .b1, .b2, .b3, .b4, .b5, .b6, .b8 { position: absolute; margin: 0px; padding: 0px; background-image: none; height: 26px; z-index: 3; filter: alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; }
.a2, .a4, .a6, .a7, .a8, .a9 { top: 0px; }
.b1, .b2, .b3, .b4, .b5, .b6, .b8 { bottom: 0px; }
.a7, .a9, .b1, .b3, .b5 { width: 160px; }
.a2, .a4, .a6, .a8, .b2, .b4, .b6, .b8 { width: 40px }
.hub, .log, .works, .info, .net { position: absolute; margin: 0px; padding: 0px; }
.hub { top: 0px; left: 0px; }
.a2 { left: 163px; }
.log { top: 0px; left: 206px; }
.a4 { left: 369px; }
.works { top: 0px; left: 412px; }
.a6 { left: 575px; }
.a7 { left: 618px; }
.a8 { left: 781px; }
.a9 { left: 824px; }
.b1 { left: 0px; }
.b2 { left: 163px; }
.b3 { left: 206px; }
.b4 { left: 369px; }
.b5 { left: 412px; }
.b6 { left: 575px; }
.net { bottom: 0px; left: 824px; text-align: right; }
.b8 { left: 781px; }
.info { bottom: 0px; left: 618px; text-align: right; }
/*Drop down menu:*/
ul, li ul, ul li a, li ul a { color: rgb(255,255,255); font-weight: bold; text-decoration: none; padding: 0px; margin: 0px; filter: alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.9; position: relative; z-index: 2; }
ul { list-style: none; width: 160px; }
li ul { position: relative; width: 160px; display: none; }
li ul a, ul li a { display: block; }
li:hover ul, ul li a:hover { display: block; text-align: right; }
ul li a:hover { width: 160px; text-align: left; }
li ul a:hover { background: rgb(75,20,20); text-align: right; height: 100px; }
Thanks in advance.Unfortunately, "vertical-align" is only appicable for table-cell and in-line elements.
And by the way, if I view your link in IE6 on WinXP, then hover over one of the menu items, it crashes the browser. If I view it in Firefox the menu is displayed totally differently, showing the whole menu tree as an unordered list vertically down the left side of the page.Hm. Are there all kinds of weird gaps of dark-colored blotches between the unorded list? If so, it goes away if you reload the page a couple times. I don't know why.The big black things are caused by the height in this.
li ul a:hover { background: rgb(75,20,20); text-align: right; height: 100px; }The big black things are caused by the height in this.
li ul a:hover { background: rgb(75,20,20); text-align: right; height: 100px; }I would hope so, as that was an intetnional stylistic choice on my part.
.
The problem is that I want the text inside the menu aligned toward the bottom so that the eye is directed to the options under the one being highlighted.Instead of changing the height, how about changing the padding-top to a larger value?That'd do it. Thanks, NogDog.Anybody know a good tutorial to make these kinds of menus?http://www.alistapart.com/articles/dropdowns/
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/horizdropdowns/">http://www.alistapart.com/articles/horizdropdowns/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/taminglists/">http://www.alistapart.com/articles/taminglists/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.htmldog.com/articles/suckerfish/dropdowns/">http://www.htmldog.com/articles/suckerfish/dropdowns/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/hybrid/">http://www.alistapart.com/articles/hybrid/</a><!-- m -->
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/">http://css.maxdesign.com.au/</a><!-- m -->
Here's my stylesheet:
html, body{ height: 100%; width: 100%; margin: 0px; padding: 0px; }
body{ background-color: rgb(255,255,255); color: rgb(255,255,255); font-family: "tempus sans itc", "trebuchet ms", sans-serif; font-size: 20px; font-weight: 500; letter-spacing: 1.25px; text-align: left; word-spacing: 2px; }
p { margin: 0px; padding: 0px 0px 15px 0px; }
/*Containers*/
#interface { position: absolute; left: 50%; top: 50%; width: 984px; height: 500px; margin-left: -492px; margin-top: -250px; padding: 0px; }
#background { position: absolute; top: 30px; left: 0px; width: 984px; height: 440px; filter: alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; }
#threshold {position: absolute; overflow: hidden; width: 100%; height: 100%; background: transparent; }
#content { position: absolute; z-index: 1; background: transparent; padding: 30px 0px 30px 0px; }
/*Header and footer:*/
.a2, .a4, .a6, .a7, .a8, .a9, .b1, .b2, .b3, .b4, .b5, .b6, .b8 { position: absolute; margin: 0px; padding: 0px; background-image: none; height: 26px; z-index: 3; filter: alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; }
.a2, .a4, .a6, .a7, .a8, .a9 { top: 0px; }
.b1, .b2, .b3, .b4, .b5, .b6, .b8 { bottom: 0px; }
.a7, .a9, .b1, .b3, .b5 { width: 160px; }
.a2, .a4, .a6, .a8, .b2, .b4, .b6, .b8 { width: 40px }
.hub, .log, .works, .info, .net { position: absolute; margin: 0px; padding: 0px; }
.hub { top: 0px; left: 0px; }
.a2 { left: 163px; }
.log { top: 0px; left: 206px; }
.a4 { left: 369px; }
.works { top: 0px; left: 412px; }
.a6 { left: 575px; }
.a7 { left: 618px; }
.a8 { left: 781px; }
.a9 { left: 824px; }
.b1 { left: 0px; }
.b2 { left: 163px; }
.b3 { left: 206px; }
.b4 { left: 369px; }
.b5 { left: 412px; }
.b6 { left: 575px; }
.net { bottom: 0px; left: 824px; text-align: right; }
.b8 { left: 781px; }
.info { bottom: 0px; left: 618px; text-align: right; }
/*Drop down menu:*/
ul, li ul, ul li a, li ul a { color: rgb(255,255,255); font-weight: bold; text-decoration: none; padding: 0px; margin: 0px; filter: alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.9; position: relative; z-index: 2; }
ul { list-style: none; width: 160px; }
li ul { position: relative; width: 160px; display: none; }
li ul a, ul li a { display: block; }
li:hover ul, ul li a:hover { display: block; text-align: right; }
ul li a:hover { width: 160px; text-align: left; }
li ul a:hover { background: rgb(75,20,20); text-align: right; height: 100px; }
Thanks in advance.Unfortunately, "vertical-align" is only appicable for table-cell and in-line elements.
And by the way, if I view your link in IE6 on WinXP, then hover over one of the menu items, it crashes the browser. If I view it in Firefox the menu is displayed totally differently, showing the whole menu tree as an unordered list vertically down the left side of the page.Hm. Are there all kinds of weird gaps of dark-colored blotches between the unorded list? If so, it goes away if you reload the page a couple times. I don't know why.The big black things are caused by the height in this.
li ul a:hover { background: rgb(75,20,20); text-align: right; height: 100px; }The big black things are caused by the height in this.
li ul a:hover { background: rgb(75,20,20); text-align: right; height: 100px; }I would hope so, as that was an intetnional stylistic choice on my part.
.The problem is that I want the text inside the menu aligned toward the bottom so that the eye is directed to the options under the one being highlighted.Instead of changing the height, how about changing the padding-top to a larger value?That'd do it. Thanks, NogDog.Anybody know a good tutorial to make these kinds of menus?http://www.alistapart.com/articles/dropdowns/
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/horizdropdowns/">http://www.alistapart.com/articles/horizdropdowns/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/taminglists/">http://www.alistapart.com/articles/taminglists/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.htmldog.com/articles/suckerfish/dropdowns/">http://www.htmldog.com/articles/suckerfish/dropdowns/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/hybrid/">http://www.alistapart.com/articles/hybrid/</a><!-- m -->
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/">http://css.maxdesign.com.au/</a><!-- m -->