Forums

Menu bar plugin - How to center my items ? (2 posts)

  1. maxymum
    Member
    Posted 6 months ago #

    Hi all,

    I'm really stuck in this situation...I'm using the template Custom Community & I also use the menu bar plugin.

    I insert my menu bar in the header div that is set in full-width.
    The menu bar herits the full-width too. I dont want to have my items left but float:center doesnt exist.

    I want them to be centered or better, I want them to be just at the beggining of the container.

    thx for help.

  2. maxymum
    Member
    Posted 6 months ago #

    HERE IS THE CSS OF MY MENUBAR

    .ssf-gris, .ssf-gris * {
    	margin:			0;
    	padding:		0;
    	list-style:		none;
    
    }
    
    .ssf-gris {
    	line-height:	1.0;
    
    }
    
    .ssf-gris ul {
    	position:		absolute;
    	top:			-999em;
    	width:			10em; /* left offset of submenus need to match (see below) */
    
    }
    
    .ssf-gris ul li {
    	width:			100%;
    }
    
    .ssf-gris li:hover {
    	visibility:		inherit; /* fixes IE7 'sticky bug' */
    }
    
    .ssf-gris li {
    	float:			left;
    	position:		relative;
    
    }
    
    .ssf-gris a {
    	display:		block;
    	position:		relative;
    }
    .ssf-gris li:hover ul,
    .ssf-gris li.wpm-hover ul {
    	left:			0;
    	top:			2.5em; /* match top ul list item height */
    	z-index:		99;
    }
    ul.ssf-gris li:hover li ul,
    ul.ssf-gris li.wpm-hover li ul {
    	top:			-999em;
    }
    ul.ssf-gris li li:hover ul,
    ul.ssf-gris li li.wpm-hover ul {
    	left:			10em; /* match ul width */
    	top:			0;
    }
    ul.ssf-gris li li:hover li ul,
    ul.ssf-gris li li.wpm-hover li ul {
    	top:			-999em;
    }
    ul.ssf-gris li li li:hover ul,
    ul.ssf-gris li li li.wpm-hover ul {
    	left:			10em; /* match ul width */
    	top:			0;
    }
    
    /*** arrows **/
    .ssf-gris a.sf-with-ul {
    	padding-right: 	2.25em;
    	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
    }
    .sf-sub-indicator {
    	position:		absolute;
    	display:		block;
    	right:			.75em;
    	top:			1.05em; /* IE6 only */
    	width:			10px;
    	height:			10px;
    	text-indent: 	-999em;
    	overflow:		hidden;
    	background:		url('arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
    }
    a > .sf-sub-indicator {  /* give all except IE6 the correct values */
    	top:			.8em;
    	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
    }
    /* apply hovers to modern browsers */
    a:focus > .sf-sub-indicator,
    a:hover > .sf-sub-indicator,
    a:active > .sf-sub-indicator,
    li:hover > a > .sf-sub-indicator,
    li.wpm-hover > a > .sf-sub-indicator {
    	background-position: -10px -100px; /* arrow hovers for modern browsers*/
    }
    
    /* point right for anchors in subs */
    .ssf-gris ul .sf-sub-indicator { background-position:  -10px 0; }
    .ssf-gris ul a > .sf-sub-indicator { background-position:  0 0; }
    /* apply hovers to modern browsers */
    .ssf-gris ul a:focus > .sf-sub-indicator,
    .ssf-gris ul a:hover > .sf-sub-indicator,
    .ssf-gris ul a:active > .sf-sub-indicator,
    .ssf-gris ul li:hover > a > .sf-sub-indicator,
    .ssf-gris ul li.wpm-hover > a > .sf-sub-indicator {
    	background-position: -10px 0; /* arrow hovers for modern browsers*/
    }
    
    /*** shadows for all but IE6 ***/
    .sf-shadow ul {
    	background:	url('shadow.png') no-repeat bottom right;
    	padding: 0 8px 9px 0;
    	-moz-border-radius-bottomleft: 17px;
    	-moz-border-radius-topright: 17px;
    	-webkit-border-top-right-radius: 17px;
    	-webkit-border-bottom-left-radius: 17px;
    }
    .sf-shadow ul.sf-shadow-off {
    	background: transparent;
    }
    
    /*** end superfish.css ***/
    
    .ssf-gris-wrap {
    	margin: 		10px 0 0 0;
    	padding:		0;
    	font-size: 		12px;
    	font-weight: 	bold;
    	height:			30px;
    	background:		#3c3d45;			/* color 1 */
    	position:		relative;
    	z-index:		49;
    }
    
    /*** DEMO SKIN ***/
    .ssf-gris {
    	float:			left;
    	width:			100%;
    }
    .ssf-gris a {
    	border:			0;
    	padding: 		.75em 1em;
    	text-decoration: none;
    	border-right:	1px solid #FFFFFF;	/* border color */
    }
    .ssf-gris li li a {
    	border:			0;
    	padding: 		.75em 1em;
    	text-decoration: none;
    	border-top:		1px solid #FFFFFF;	/* border color */
    	border-left:	1px solid #FFFFFF;	/* border color */
    }
    .ssf-gris a, .ssf-gris a:link, .ssf-gris a:visited  {
    	color:			white;				/* text color 1 */
    }
    .ssf-gris li li a, .ssf-gris li li a:link, .ssf-gris li li a:visited  {
    	color:			#FFFFFF;			/* text color 2 */
    }
    .ssf-gris li {
    	height:			30px;
    	background:		#3c3d45;			/* color 1 */
    }
    .ssf-gris li li {
    	height:			auto;
    	background:		#727585;			/* color 2 */
    }
    .ssf-gris li:hover, .ssf-gris li.wpm-hover,
    .ssf-gris a:focus, .ssf-gris a:hover, .ssf-gris a:active {
    	text-decoration: none;
    	background:		#727585;			/* color 3 */
    	outline:		0;
    }
    
    .ssf-gris li.selected,
    .ssf-gris li.current-cat,
    .ssf-gris li.current-cat-parent,
    .ssf-gris li.current_page_item,
    .ssf-gris li.current_page_parent,
    .ssf-gris li.current_page_ancestor {
    	background:		#727585;			/* color 3 */
    }
    
    .ssf-gris li.right {
    	float: right;
    }
    
    .ssf-gris li.right a,
    .ssf-gris li.right form {
    	border-left:	1px solid #FFFFFF;	/* border color */
    	border-right:	0;
    }
    
    .ssf-gris form {
    	margin: 0;
    	padding: 0;
    	background: url('searchbox.png') no-repeat center center;
    	height: 30px;
    	width: 195px;
    	border-right:	1px solid #FFFFFF;	/* border color */
    }
    
    .ssf-gris form input.wpm-text {
    	border: 0;
    	background: transparent;
    	margin: 6px 0 0 6px;
    	width: 154px;
    	}
    
    .ssf-gris form input.wpm-submit {
    	border: 0;
    	background: transparent;
    	cursor: pointer;
    	height: 20px;
    	width: 26px;
    }
    
    .ssf-gris-after {
    	clear: both;
    	margin: 0;
    	padding: 0;
    	background: url('shadow2.png') repeat-x;
    	height: 6px;
    }

Reply

You must log in to post.

About this Topic

Tags