Jump to content

line below top inline menu


pcadv

Recommended Posts

Hi,I am trying to design inline menu on topr right of the web page, where there is a line accross the page and just on top of the line the menu items appear (with break in line at the active menu page). However, by the code below, there appears a line below the menu items but not accross the web page. Please suggest what changes I can do?#navcontainer{padding: 0;background: white;margin: 0;}#navlist{margin: 0px;padding: 0px 0px;background: white;}#navlist li{list-style: none;float: left;display: block;width: 8%;padding: 0px ;border-right: 2px solid #828282;border-top: 2px solid #828282;}#navcontainer a, #navlist li.extend{margin: 0px;display: block;border-bottom: 1px solid #333;padding: 1px 6px;text-decoration: none;font: normal 12px verdana, serif;color: #000;}#navcontainer a:hover, #navcontainer a#current{padding: 1px 5px;background: #FAFAFA;border-right: 1px solid #333;border-left: 1px solid #333;border-top: 1px solid #333;color: #000;}#navcontainer a#current{background: #F6F6F6;border-bottom: 1px solid #F6F6F6;font-weight: bold;cursor: default;}#navlist a:active{background: #999;bottom: 0px;color: #FFF;position: relative;right: 0px;}#navcontainer li#active{border-right: 2px solid #828282;border-top: 2px solid #828282;color: #FFF;}thanks,

Link to comment
Share on other sites

Hi,I am trying to design inline menu on topr right of the web page, where there is a line accross the page and just on top of the line the menu items appear (with break in line at the active menu page). However, by the code below, there appears a line below the menu items but not accross the web page. Please suggest what changes I can do?#navcontainer{padding: 0;background: white;margin: 0;}#navlist{margin: 0px;padding: 0px 0px;background: white;}#navlist li{list-style: none;float: left;display: block;width: 8%;padding: 0px ;border-right: 2px solid #828282;border-top: 2px solid #828282;}#navcontainer a, #navlist li.extend{margin: 0px;display: block;border-bottom: 1px solid #333;padding: 1px 6px;text-decoration: none;font: normal 12px verdana, serif;color: #000;}#navcontainer a:hover, #navcontainer a#current{padding: 1px 5px;background: #FAFAFA;border-right: 1px solid #333;border-left: 1px solid #333;border-top: 1px solid #333;color: #000;}#navcontainer a#current{background: #F6F6F6;border-bottom: 1px solid #F6F6F6;font-weight: bold;cursor: default;}#navlist a:active{background: #999;bottom: 0px;color: #FFF;position: relative;right: 0px;}#navcontainer li#active{border-right: 2px solid #828282;border-top: 2px solid #828282;color: #FFF;}thanks,
Hi,I am trying to design a inline menu which is on a line and the one tab which is active have no the bottom line. I have modified the above code a little and it is placed as below :.mattblacktabs{border-bottom: 1px solid #828282; /*bottom horizontal line that runs beneath tabs*/background: white;}.mattblacktabs ul{margin: 0;padding: 0;padding-left: 320px; /*offset of tabs relative to browser left edge*/list-style-type: none;font: normal 12px verdana, serif;}.mattblacktabs li{display: inline;margin: 0;font: normal 12px verdana, serif;}.mattblacktabs li a{float: left;display: block;text-decoration: none;font: normal 12px verdana, serif;color: #000;margin: 0;padding: 2px 3px; /*padding inside each tab*/border-right: 2px solid #828282;border-top: 2px solid #828282;border-left: 2px solid #828282;width: 10%; }.mattblacktabs li a:visited{color: black;}.mattblacktabs li a:hover, .mattblacktabs li a#current, .mattblacktabs li.selected a{padding: 1px 5px;background: #FAFAFA;border-right: 1px solid #333;border-left: 1px solid #333;border-top: 1px solid #333;color: #000; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */}.mattblacktabs li a#current{background: #F6F6F6;border-bottom: 1px solid #F6F6F6;font-weight: bold;cursor: default;Z-index: 100; /*higher z-index so selected tab is topmost*/top: 5px; /*Shift tab 5px down so the border beneath it is covered*/}.mattblacktabs li a#active{padding: 0px;border-right: 2px solid #828282;border-top: 2px solid #828282;color: #FFF;background: #999;}e.g: http://www.dynamicdrive.com/style/csslibra...att_black_tabs/ - only changes include white background of the tab and the line below the active tab to disappear. I have tried to used Z-index and top to increase so that the line below the active tab is covered but that does not seem to work. It would be great to if someone can help.thanks.
Link to comment
Share on other sites

Would be nice to have a link to your page, not the tutorial. they don't seem to have the problem you describe, but you are using different code.Post the html for the page, at least, but a link to a demo site would be better.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...