By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,945 Members | 1,328 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,945 IT Pros & Developers. It's quick & easy.

How to remove the gap between navigation bar and menu

P: 1
Here is the image preview of the gap:


Here is the CSS code I used:
Expand|Select|Wrap|Line Numbers
  1. #cssmenu ul,
  2.  
  3. #cssmenu li,
  4.  
  5. #cssmenu span,
  6.  
  7. #cssmenu a {
  8.   margin: 0;
  9.  
  10.   padding: 0;
  11.  
  12.   position: relative;
  13.  
  14. }
  15.  
  16. #cssmenu 
  17. {
  18.  
  19.   z-index: 1; 
  20.   height: 49px;
  21.  
  22.   border-radius: 5px 5px 0 0;
  23.  
  24. -border-radius: 5px 5px 0 0;
  25.  
  26.   -webkit-border-radius: 5px 5px 0 0;
  27.  
  28.   background: #141414;
  29.  
  30.   background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  31.  
  32.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  33.  
  34.   background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  35.  
  36.   background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  37.  
  38.   background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  39.  
  40.   background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  41.  
  42.   filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
  43.  
  44.   border-bottom: 2px solid #0fa1e0;
  45.  
  46. }
  47.  
  48. #cssmenu:after,
  49.  
  50. #cssmenu ul:after 
  51. {
  52.  
  53.   content: '';
  54.  
  55.   display: block;
  56.  
  57.   clear: both;
  58.  
  59. }
  60.  
  61. #cssmenu a 
  62. {
  63.  
  64.   background: #141414;
  65.  
  66.   background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  67.  
  68.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  69.  
  70.   background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  71.  
  72.   background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  73.  
  74.   background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  75.  
  76.   background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  77.  
  78.   filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
  79.  
  80.   color: #ffffff;
  81.   display: inline-block;
  82.  
  83.   font-family: Helvetica, Arial, Verdana, sans-serif;
  84.   font-size: 12px;
  85.  
  86.   line-height: 49px;
  87.   padding: 0 20px;
  88.   text-decoration: none;
  89.  
  90. }
  91.  
  92. #cssmenu ul 
  93. {
  94.  
  95.   list-style: none;
  96.  
  97. }
  98.  
  99. #cssmenu > ul 
  100. {
  101.  
  102.   float: left;
  103. }
  104.  
  105. #cssmenu > ul > li 
  106. {
  107.  
  108.   float: left;
  109.  
  110. }
  111.  
  112. #cssmenu > ul > li:hover:after 
  113. {
  114.  
  115.   content: '';
  116.  
  117.   display: block;
  118.  
  119.   width: 0;
  120.  
  121.   height: 0;
  122.  
  123.   position: absolute;
  124.  
  125.   left: 50%;
  126.   bottom: 0;
  127.  
  128.   border-left: 10px solid transparent;
  129.  
  130.   border-right: 10px solid transparent;
  131.  
  132.   border-bottom: 10px solid #0fa1e0;
  133.  
  134.   margin-left: -10px;
  135.  
  136. }
  137.  
  138. #cssmenu > ul > li:first-child a 
  139. {
  140.  
  141.   border-radius: 5px 0 0 0;
  142.  
  143.   -border-radius: 5px 0 0 0;
  144.  
  145.   -webkit-border-radius: 5px 0 0 0;
  146.  
  147. }
  148.  
  149. #cssmenu > ul > li:last-child a 
  150. {
  151.  
  152.   border-radius: 0 5px 0 0;
  153.  
  154.   -border-radius: 0 5px 0 0;
  155.  
  156.   -webkit-border-radius: 0 5px 0 0;
  157.  
  158. }
  159.  
  160. #cssmenu > ul > li.active a 
  161. {
  162.  
  163.   box-shadow: inset 0 0 3px #000000;
  164.  
  165.   -box-shadow: inset 0 0 3px #000000;
  166.  
  167.   -webkit-box-shadow: inset 0 0 3px #000000;
  168.  
  169.   background: #070707;
  170.  
  171.   background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  172.  
  173.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  174.  
  175.   background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  176.  
  177.   background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  178.  
  179.   background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  180.  
  181.   background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  182.  
  183.   filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
  184.  
  185. }
  186.  
  187. #cssmenu > ul > li:hover > a 
  188. {
  189.  
  190.   background: #070707;
  191.  
  192.   background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  193.  
  194.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  195.  
  196.   background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  197.  
  198.   background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  199.  
  200.   background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  201.  
  202.   background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  203.  
  204.   filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
  205.  
  206.   box-shadow: inset 0 0 3px #000000;
  207.   -box-shadow: inset 0 0 3px #000000;
  208.   -webkit-box-shadow: inset 0 0 3px #000000;
  209.  
  210. }
  211.  
  212. #cssmenu .has-sub 
  213. {
  214.  
  215.   z-index: 3;
  216.  
  217. }
  218.  
  219. #cssmenu .has-sub:hover > ul 
  220. {
  221.  
  222.   display: block;
  223.  
  224. }
  225.  
  226. #cssmenu .has-sub ul 
  227. {
  228.  
  229.   display: none;
  230.  
  231.   position: absolute;
  232.  
  233.   width: 200px;
  234.  
  235.   top: 100%;
  236.  
  237.   left: 0;
  238.  
  239. }
  240. #cssmenu .has-sub ul li 
  241. {
  242.  
  243.   margin-bottom: -1px;
  244.  
  245. }
  246.  
  247. #cssmenu .has-sub ul li a 
  248. {
  249.  
  250.   background: #0fa1e0;
  251.  
  252.   border-bottom: 1px dotted #6fc7ec;
  253.  
  254.   filter: none;
  255.   position: relative;
  256.   top: 10px;
  257.   font-size: 13px;
  258.  
  259.   display: block;
  260.  
  261.   line-height: 120%;
  262.  
  263.   padding: 5px;
  264.  
  265.   zoom: 1; /* gives the object layout */
  266.   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  267.   filter: alpha(opacity=90);
  268.   -moz-opacity: 0.90;
  269.   -khtml-opacity: 0.90;
  270.   opacity: 0.90;
  271. }
  272.  
  273. #cssmenu .has-sub ul li:hover a 
  274. {
  275.  
  276.   background: #0c7fb0;
  277.  
  278. }
  279.  
  280. #cssmenu .has-sub .has-sub:hover > ul {
  281.  
  282.   display: block;
  283.  
  284. }
  285.  
  286. #cssmenu .has-sub .has-sub ul 
  287. {
  288.  
  289.   display: none;
  290.  
  291.   position: absolute;
  292.  
  293.   left: 100%;
  294.  
  295.   top: 0;
  296.  
  297. }
  298.  
  299. #cssmenu .has-sub .has-sub ul li a 
  300. {
  301.  
  302.   background: #0c7fb0;
  303.  
  304.   border-bottom: 1px dotted #6db2d0;
  305.  
  306. }
  307.  
  308. #cssmenu .has-sub .has-sub ul li a:hover 
  309. {
  310.  
  311.   background: #095c80;
  312.  
  313. }
  314.  
  315. .address 
  316. {
  317. -webkit-text-size-adjust: none;
  318.  font-family: "Comic Sans MS";
  319.  font-size: 15
  320.   .Marquee {background-image:url('http://farm7.static.flickr.com/6173/6168886653_9fa5437ea5_t.jpg');
  321.         border-style:solid;
  322.     width: 100%;
  323.     height:40px;
  324.         border: thin solid #333;
  325.         border-radius: 1em;
  326.     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  327.     font-size: 25px;
  328.     font-weight: bold;
  329.         border-width:1px;}
  330. .swap {
  331. background-image:url(images/arrow.jpg);
  332. background-repeat:no-repeat;
  333. color:#ffffff;
  334.     -box-shadow: 0 8px 6px -6px black;
  335.      -box-shadow: 0 8px 6px -6px black;
  336.             box-shadow: 0 8px 6px -6px black;
  337. }
  338.  
  339. .swap:hover {
  340. background-image:url(images/arrow2.jpg);
  341. background-repeat:no-repeat;
  342. color:#ffffff;
  343.     -box-shadow: 0 8px 6px -6px black;
  344.        -box-shadow: 0 8px 6px -6px black;
  345.             box-shadow: 0 8px 6px -6px black;
  346. .miniheader {font-family:"Comic Sans MS";
  347. font-size: 35px;
  348. color:#ffffff;
  349. }
  350. .miniheader:visited {color:#ffffff;
  351. }
  352. .miniheader:hover {color:#ffffff;
  353. }
  354. .miniheader:active {color:#ffffff;
  355. }
  356. #rounded-corner {
  357.     font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
  358.     font-size: 12px;
  359.     margin-right: 10%;
  360.     margin-left: 10%; 
  361.     text-align: left;
  362.     padding: 8px;
  363.     border-collapse:collapse;
  364.     width: 80%;
  365.  
  366. }
  367. #rounded-corner thead th.rounded-company {
  368.     background: url("http://media.smashingmagazine.com/images/express-css-table-design/table-images/left.png") no-repeat scroll left -1px #B9C9FE;
  369.     width: 10px;
  370. }
  371. #rounded-corner thead th.rounded-q3 {
  372.     background: url("http://media.smashingmagazine.com/images/express-css-table-design/table-images/right.png") no-repeat scroll right -1px #B9C9FE;
  373. }
  374. #rounded-corner th {
  375.     background: none repeat scroll 0 0 #B9C9FE;
  376.     color: #003399;
  377.     font-size: 13px;
  378.     font-weight: normal;
  379.     padding: 8px;
  380.     width:80%;
  381. }
  382. #rounded-corner td {
  383.     background: none repeat scroll 0 0 #E8EDFF;
  384.     border-top: 1px solid #FFFFFF;
  385.     color: #666699;
  386.     padding: 8px;
  387. }
  388. #rounded-corner tfoot td.rounded-foot-left {
  389.     background: url("http://media.smashingmagazine.com/images/express-css-table-design/table-images/botleft.png") no-repeat scroll left bottom #E8EDFF;
  390. }
  391. #rounded-corner tfoot td.rounded-foot-right {
  392.     background: url("http://media.smashingmagazine.com/images/express-css-table-design/table-images/botright.png") no-repeat scroll right bottom #E8EDFF;
  393. }
  394. #rounded-corner tbody tr:hover td {
  395.     background: none repeat scroll 0 0 #D0DAFD;
  396. }
  397. .rounded-q1
  398. {
  399. width: 10%;
  400. }

Please fix the code and tell me the problem.


Thank You,
Asif
Attached Images
File Type: jpg Untitled.jpg (15.2 KB, 575 views)
Attached Files
File Type: txt styles.txt (7.7 KB, 187 views)
Oct 30 '12 #1
Share this Question
Share on Google+
2 Replies


zmbd
Expert Mod 5K+
P: 5,397
Please fix the code and tell me the problem
Why don't you tell us where in your code you set-up this little menu... like the heights etc... and then we'll help you tweek the code.
400 some lines of code to read thru? That's asking alot o-O
Oct 30 '12 #2

Rabbit
Expert Mod 10K+
P: 12,430
Also, there's nothing we can do without the HTML. Just the styles doesn't tell us how it's laid out.
Oct 30 '12 #3

Post your reply

Sign in to post your reply or Sign up for a free account.