css problem

i made css menubar in my site as shown in image 1 it is okay for full resolution window because all items of menu comes in a single line but for low resolution all the menus doesnt comes in one line. its get in unwanted manner please help

my site http://studentsuvidha.com/forum/index.php please check the menu and help me you can restore down-maximise button to see the problem

 

Your very top bar does the same thing. You will probably have to set a minimum width for your forum. Something like:

min-width: 950px;

 

i want forum witdt autoadjustable check out this image i posted shot of error...

http://3.bp.blogspot.com/-I7HssPgTnrM/U1VakSQ-ZfI/AAAAAAAABDA/6VRS1bd8tRo/s1600/2.PNG

 

What would you like the menu to do when the page is too small to hold it in one line?

 

I want
When page is small or when resolution of pc is low then menu will automatically arranged properly in 2 lines

 

Try this:

#cssmenu > ul {
  background-color: #566171;
  background-image: linear-gradient(#6E7D8F, #404854);
  border-bottom: 1px solid #252A30;
  border-top: 1px solid #252A30;
  box-shadow: 0 1px 0 #8799A9 inset, 0 1px 1px rgba(0, 0, 0, 0.5);
  padding: 15px 15px 15px 5px;
  text-align: center;
}

#cssmenu > ul > li {
  margin: 0.25em 10px;
}

Code (markup):

This re-arranges the rows to sanely accommodate the available width.

cheers,

gary

 

ohh thanks kk5st. this is really helpful and now i am out of this problem....

i want to know only one thing if in future i increase the items in menu bar, does it will rearrange in 3 lines also or do i need to do any thing else for this.????

i am happy with your reply

thanks again
rusty

 

Try it. Add more menu items to see what happens. Another test is to drag the browser window more and more narrow. Watch the menu re-flow as needed.

cheers,

gary

 

getting this problem as well this is the css of my menu bar

 @charset 'UTF-8';
/* Starter CSS for Menu */
#cssmenu {
  padding: 0;
  margin: 0;
  border: 0;
}
#cssmenu ul,
#cssmenu li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu ul {
  position: relative;
  z-index: 597;
}
#cssmenu ul li {
  float: left;
  min-height: 1px;
  vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
}
#cssmenu ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%;
}
#cssmenu ul ul li {
  float: none;
}
#cssmenu ul ul ul {
  top: 0;
  left: 100%;
}
#cssmenu ul li:hover > ul {
  visibility: visible;
}
#cssmenu ul ul {
  margin-top: 0;
}
#cssmenu a {
  display: block;
  line-height: 1em;
  text-decoration: none;
}
#cssmenu ul li.last ul {
  left: auto;
  right: 0;
}
#cssmenu ul li.last ul ul {
  left: auto;
  right: 99.5%;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
/* Custom CSS Styles */
#cssmenu {
  width: auto;
  font-family: Helvetica, Arial, sans-serif;
}
#cssmenu:before {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAIAAAC3eAIWAAAAA3NCSVQICAjb4U/gAAAAI0lEQVQImWPwj0hh+v//PxPD//9M////Z/rP8J/p//9/MD4AGUETB+SFfCsAAAAASUVORK5CYII=);
  background-color: #606a77;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4f5864), color-stop(1, #49515b));
  background-image: -webkit-linear-gradient(top, #4f5864, #49515b);
  background-image: -moz-linear-gradient(top, #4f5864, #49515b);
  background-image: -o-linear-gradient(top, #4f5864, #49515b);
  background-image: linear-gradient(#4f5864, #49515b);
  -moz-box-shadow: inset 0 2px 0 #586270, inset 0 1px 0 #6b7888;
  -webkit-box-shadow: inset 0 2px 0 #586270, inset 0 1px 0 #6b7888;
  box-shadow: inset 0 2px 0 #586270, inset 0 1px 0 #6b7888;
  content: '';
  display: block;
  height: 8px;
}
#cssmenu > ul {
  background-color: #566171;
  background-image: linear-gradient(#6E7D8F, #404854);
  border-bottom: 1px solid #252A30;
  border-top: 1px solid #252A30;
  box-shadow: 0 1px 0 #8799A9 inset, 0 1px 1px rgba(0, 0, 0, 0.5);
  padding: 15px 15px 15px 5px;
  text-align: center;
}
#cssmenu > ul > li {
  margin: 0.25em 10px;
}
#cssmenu > ul > li.has-sub:hover > a {
  -moz-border-radius: 3px 3px 0 0;
  -webkit-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#cssmenu > ul > li:hover > a {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAGElEQVQImWP4//8/079//0jGf//+JVUPAADfUJPhbDTaAAAAAElFTkSuQmCC);
  background-color: #e2e2e2;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #c8c8c8));
  background-image: -webkit-linear-gradient(top, #ffffff, #c8c8c8);
  background-image: -moz-linear-gradient(top, #ffffff, #c8c8c8);
  background-image: -o-linear-gradient(top, #ffffff, #c8c8c8);
  background-image: linear-gradient(#ffffff, #c8c8c8);
}
#cssmenu > ul > li.active:hover > a {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAJklEQVQImWP4MruP6d+/f0z//v5Fo/8x/fv3F41GyP8lUf2/v38BoDRPnb8AZS4AAAAASUVORK5CYII=);
  background-color: #cb7b72;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f49b8e), color-stop(1, #bd584d));
  background-image: -webkit-linear-gradient(top, #f49b8e, #bd584d);
  background-image: -moz-linear-gradient(top, #f49b8e, #bd584d);
  background-image: -o-linear-gradient(top, #f49b8e, #bd584d);
  background-image: linear-gradient(#f49b8e, #bd584d);
}
#cssmenu ul a {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAIUlEQVQImWP4+PEj09+/f5n+/fvH9PfvXzhG5uNik6gOAOTaUDaAXrIOAAAAAElFTkSuQmCC);
  background-color: #c2c2c2;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1f1f1), color-stop(1, #a8a8a8));
  background-image: -webkit-linear-gradient(top, #f1f1f1, #a8a8a8);
  background-image: -moz-linear-gradient(top, #f1f1f1, #a8a8a8);
  background-image: -o-linear-gradient(top, #f1f1f1, #a8a8a8);
  background-image: linear-gradient(#f1f1f1, #a8a8a8);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 1px 1px 1px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 1px 1px 1px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 1px 1px 1px rgba(0, 0, 0, 0.5);
  color: #3c444d;
  font-size: 12px;
  line-height: 27px;
  padding: 0 20px;
  position: relative;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
#cssmenu ul ul {
  width: 170px;
}
#cssmenu ul ul a {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  line-height: 150%;
}
#cssmenu ul .active > a {
  color: #FFF;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAANUlEQVQImXXMsQ0AIRTD0FMmvRlYnAm+TQEIGronxcrX2x80hUEDpNx2em0lx9wNj37+rX4AhN5PdtvsqRUAAAAASUVORK5CYII=);
  background-color: #c46a60;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ef7260), color-stop(1, #b04c41));
  background-image: -webkit-linear-gradient(top, #ef7260, #b04c41);
  background-image: -moz-linear-gradient(top, #ef7260, #b04c41);
  background-image: -o-linear-gradient(top, #ef7260, #b04c41);
  background-image: linear-gradient(#ef7260, #b04c41);
}
#cssmenu ul .has-sub {
  position: relative;
}
#cssmenu ul .has-sub ul {
  -moz-border-radius: 0 3px 3px 3px;
  -webkit-border-radius: 0 3px 3px 3px;
  border-radius: 0 3px 3px 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -moz-box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.5);
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA2CAMAAAAxtAOuAAAAolBMVEXp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enCAApGAAAANXRSTlP9+vf08Ozp5eDc19POycS+ubOuqKOdl5GLhYB6dG5oYlxXUUxGQTs2MSwoIx8aFhMPCwgFAqv7N0MAAABMSURBVHheBcCDEcMAAADAj1Hbtr3/aj0/BEKRWCKVyRVKFVU1dQ1NLW0dXT19A0MjYxNTM3MLSytrG1s7ewdHJ2cXVzd3D08vbx/fP9L5BZigzasGAAAAAElFTkSuQmCC) repeat-x;
  background-color: #c3c3c3;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e9e9e9), color-stop(1, #aaaaaa));
  background-image: -webkit-linear-gradient(top, #e9e9e9, #aaaaaa);
  background-image: -moz-linear-gradient(top, #e9e9e9, #aaaaaa);
  background-image: -o-linear-gradient(top, #e9e9e9, #aaaaaa);
  background-image: linear-gradient(#e9e9e9, #aaaaaa);
  padding: 3px 0;
}
#cssmenu ul .has-sub ul a {
  background: none;
  padding: 8px 8px 8px 16px;
  border-bottom: 1px solid transparent;
  text-align: left;
}
#cssmenu ul .has-sub ul .has-sub a:after {
  content: none;
}
#cssmenu ul .has-sub li:hover > a {
  border-bottom: 1px solid #1D2024;
  color: #FFF;
  background-color: #55616f;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #56606f), color-stop(1, #3f4852));
  background-image: -webkit-linear-gradient(top, #56606f, #3f4852);
  background-image: -moz-linear-gradient(top, #56606f, #3f4852);
  background-image: -o-linear-gradient(top, #56606f, #3f4852);
  background-image: linear-gradient(#56606f, #3f4852);
  -moz-box-shadow: inset 1px 2px 0 #5c6778, inset 0 1px 0 #4e5866;
  -webkit-box-shadow: inset 1px 2px 0 #5c6778, inset 0 1px 0 #4e5866;
  box-shadow: inset 1px 2px 0 #5c6778, inset 0 1px 0 #4e5866;
  position: relative;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
#cssmenu ul .has-sub li:hover > a:after {
  border-left: 0 none;
  background-color: #c35f54;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ea5f51), color-stop(1, #a9463b));
  background-image: -webkit-linear-gradient(top, #ea5f51, #a9463b);
  background-image: -moz-linear-gradient(top, #ea5f51, #a9463b);
  background-image: -o-linear-gradient(top, #ea5f51, #a9463b);
  background-image: linear-gradient(#ea5f51, #a9463b);
  -moz-box-shadow: inset -1px 2px 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 #ce5448;
  -webkit-box-shadow: inset -1px 2px 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 #ce5448;
  box-shadow: inset -1px 2px 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 #ce5448;
  content: '';
  height: 100%;
  width: 6px;
  position: absolute;
  right: 0;
  top: 0;
}
#cssmenu ul .has-sub > a {
  padding-right: 0;
}
#cssmenu ul .has-sub > a:after {
  content: '▼';
  border-left: 1px solid rgba(100, 100, 100, 0.2);
  color: #5D6A7A;
  -moz-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
  -webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
  box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
  display: inline-block;
  font-size: 9px;
  margin-left: 5px;
  text-align: center;
  height: 25px;
  width: 24px;
  text-shadow: 0 -1px 0 #101417;
}
#cssmenu ul .active > a:after {
  color: #FFF;
}
#cssmenu ul ul a {
  font-size: 12px;
}

Code (CSS):

if you can do anything then please tell

thank in advance

 

1) To begin, you haven't applied the fix I gave you.
2) I can't replicate being logged in as the admin.
3) Your html is full of errors. See html validator.
4) Your css is full of syntax errors. See css validator. Don't worry about the IE proprietary css properties.

How about helping me to help you?

g

 

first thing i applied that fix you gave me and that was really very helpful.... thanks for that, you can see this now this is arranging in proper manner


now come to css part i know that template is full of error and that is bad thing but i will try to manage that in future.
now i want to fix only that dropdown issue. showed above. in that case when i click to dropdown menu of user CP some part of it hide behind the menu bar. i want to show that dropdown above of menu bar.


thanks
rusty

 

Rusty, I don't have access to your CP, so can't properly debug.