html - alignment of navigation menu within td of table and no border -
i wondering haved failed so, that, navmenu within table in promo box , centered @ top of white space , no border on top center box/td/cell great important.
<html> <head> <style> * { margin: 0px; padding: 0px; border: 0px; } #container { width: 100%; height: 1000px; max-width: 1440px; min-width: 1024px; margin: 0px auto; text-align: center; } .bigbox { height: 1000px; background-image: url(images/photos/landscape-1440.jpg); background-position: 50% 50%; } .promobox { width: 25%; height: 1000px; float: left; background-position: 50% 0%; margin: 0px; padding: 0px; vertical-align: top; } .promobox div { height: 200px; border-color: #fff; border-style: none; } div { text-align: center; position: relative; } div { position: absolute; bottom: 10px; right: 10px; color: #fff; text-shadow: 1px 1px 1px #000; } #pb1 {width: 25%; background-color: #e51837; } #pb2 {width: 50%; background-color: white; } #pb3 {width: 25%; background-color: #e51837; } h1 { text-align: center; margin-bottom: 50px; } ul#navmenu, ul.sub1, ul.sub2 { list-style-type: none; font-size: 9pt; } ul#navmenu li { width: 96.6px; text-align: center; position: relative; margin-right: 0px; float: left; } #navmenu ul { display: inline-block; list-style-type: none; } ul#navmenu { text-decoration: none; display: block; width: 96.6px; height: 25px; line-height: 25px; background-color: #2e2e2e; border: 1px solid #777777; border-top: 2px solid #777777; color: white; font-family: arial, sans-serif; font-weight: bold; font-face: arial; float: left; text-align: center; } ul#navmenu .sub1 li { } ul#navmenu .sub1 { margin-top: 0px; } ul#navmenu .sub2 { margin-left: 0px; } ul#navmenu li:hover > { background-color: grey; } ul#navmenu li:hover a:hover { background-color: red; } ul#navmenu ul.sub1 { display: none; position: absolute; top: 26px; left: 0px; } ul#navmenu ul.sub2 { display: none; position: absolute; top: 0px; left: 97.6px; } ul#navmenu li:hover .sub1 { display: block; } ul#navmenu .sub1 li:hover .sub2 { display: block; } .darrow { font-size: 11pt; position: absolute; top: 5px; right: 4px; } #navmenu { display: inline-block; text-align: center; list-style-type: none; margin: 0px auto; padding: 0px; position: relative; } .rarrow { font-size: 13pt; position: absolute; top: 6px; right: 4px; } #page1 .link1{ color: grey; border-top: 2px solid red; } #page2 .link2{ color: grey; border-top: 2px solid red; } #page3 .link3{ color: grey; border-top: 2px solid red; } #page1 {text-align:center;}h1 { text-align: center; margin-bottom: 0px; } ul#navmenu, ul.sub1, ul.sub2 { list-style-type: none; font-size: 9pt; } ul#navmenu li { width: 96.6px; text-align: center; position: relative; float: left; margin-right: 0px; display: inline; } ul#navmenu { text-decoration: none; display: block; width: 96.6px; height: 25px; line-height: 25px; background-color: #2e2e2e; border: 2px solid #777777; color: white; font-family: arial, sans-serif; font-weight: bold; font-face: arial; display: inline-block; } ul#navmenu .sub1 li { } ul#navmenu .sub1 { margin-top: 0px; } ul#navmenu .sub2 { margin-left: 0px; } ul#navmenu li:hover > { background-color: grey; } ul#navmenu li:hover a:hover { background-color: red; } ul#navmenu ul.sub1 { display: none; position: absolute; top: 26px; left: 0px; } ul#navmenu ul.sub2 { display: none; position: absolute; top: 0px; left: 96.6px; } ul#navmenu li:hover .sub1 { display: block; } ul#navmenu .sub1 li:hover .sub2 { display: block; } .darrow { font-size: 11pt; position: absolute; top: 5px; right: 4px; } #navmenu { display: inline-block; text-align: center; list-style: none; margin: 0px; padding: 0px; } .rarrow { font-size: 13pt; position: absolute; top: 6px; right: 4px; } #page1 .link1{ color: grey; border-top: 2px solid red; } #page2 .link2{ color: grey; border-top: 2px solid red; } #page3 .link3{ color: grey; border-top: 2px solid red; } </style> </head> <body> <div id="container"> <div class="bigbox"> <div class="promobox" id="pb1"> </div> <div class="promobox" id="pb2"><table padding="0" spacing="0" width="557px" height="100px"> <tr><td align="center" valign="middle" bgcolor="#e51837"><img src="#" width="481px" height="187px"><br><img src="#" width="418px" height="96px"> </td></tr><tr><td><br></br><div id="page1"> <ul id="navmenu"> <li><a href="dropdown1.html" class="link1">hyperlink 1</a></li> <li><a href="dropdown2.html" class="link2">hyperlink 2</a><font color="white"><span class="darrow">▼</font></span> <ul class="sub1"> <li><a href="#">hyperlink 2.1</a></li> <li><a href="#">hyperlink 2.2</a></li> <li><a href="#">hyperlink 2.3</a></li> </ul> </li> <li><a href="#">hyperlink 3</a></li> <li><a href="#">hyperlink 4</a><span class="darrow"><font color="white">▼</font></span> <ul class="sub1"> <li><a href="#">hyperlink 4.1</a></li> <li><a href="#">hyperlink 4.2</a></li> <li><a href="#">hyperlink 4.3</a><span class="rarrow"><font color="white">▶</font></span> <ul class="sub2"> <li><a href="#">hyperlink 4.3.1</a></li> <li><a href="#">hyperlink 4.3.2</a></li> <li><a href="dropdown3.html" class="link3">hyperlink 4.3.3</a></li> </ul> </li> </ul> </li> <li><a href="#">hyperlink 5</a></li> </ul></div></td></tr> </table> </div> <div class="promobox" id="pb3"> </div> </div> </div> </body> </html>
your question vague without jsfiddle example. please show live example on jsfiddle.
if getting white spaces in table on top of menu please set cellspacing="0" on table tag this
<table cellspacing="0"> and make menu in centre inside table please use use display: inline-block; on ul#navmenu li , ul#navmenu a instead of float , put text-align: center; on ul#navmenu
float element cannot centre margin: auto or text-align: centre why have change element behaviour display: inline-block stand each element next each other , make centre of parent element.
Comments
Post a Comment