[CSS]menu rozwijane,punkty za bardzo wysuniete w prawo. Opcje

[gigzorr]

witam.pokaze to na ssie:


jak sami widzicie , za bardzo wysuniete jest w prawo.probowalem to usunac marginesem , ale za to na innych przegladarkach jest zle np. na chrome to wyglada ok bez niczego , a na firefoxie jest tak wysuniete.

kod css :

[HTML] pobierz, plaintext 
#jsddm
{	margin: 0;        
	padding: 0}
 
	#jsddm li
	{	float: left;
		list-style: none;
		font: 11px Arial, Arial}
 
	#jsddm li a
	{	display: block;		
		padding: 5px 12px;
		text-decoration: none;
		border-right: 1px solid white;
		width: 120px;
                z-index: 1;
		color: #EAFFED;
		white-space: nowrap}
 
	#jsddm li a:hover
	{	background: #24313C;                
 
 
        }
 
		#jsddm li ul
		{	margin: 0;
			padding: 0;
			position: absolute;
			visibility: hidden;
			}
 
			#jsddm li ul li
			{	float: none;
				display: inline}
 
			#jsddm li ul li a
			{	width: auto;
                                font-size: 12px;
				background: #A9C251;
				color: #24313C}
 
			#jsddm li ul li a:hover
			{	background: #8EA344}
 
[HTML] pobierz, plaintext 

Wiem , że jest burdel jak cholera ale jeszcze nie mialem czasu tego usegregowac, pierw chce to poprawic.
Ten kawalek jest za to odpowiedzialny:

[HTML] pobierz, plaintext 
#jsddm li ul li a
			{	width: auto;
                                font-size: 12px;
				background: #A9C251;
				color: #24313C}
[HTML] pobierz, plaintext 

Tzn. ja tak uwazam , bo jak dalem margines to szlo w lewo.
Tu jeszcze przyklad html:

[CSS] pobierz, plaintext 
ul id="jsddm">
	<li><a href="#" style="font-size:12px;">a</a></li>
	<li><a href="#" style="font-size:12px;">b</a>
		<ul>
			<li><a href="wyslij-zaproszenie">e</a></li>
			<li><a href="znajdz-gracza">f</a></li>
			<li><a href="lista-uzytownikow">g</a></li>
		</ul>
	</li>
[CSS] pobierz, plaintext 

Ten post edytował gigzorr 25.07.2010, 21:03:43

[everth]

Samym CSS jest ciężko zrobić ładne rozwijające się menu, lepiej zrobić to JSem. Rzucę ci tu funkcję z jednego skryptu. Nie chce mi się tego przepisywać na twoje. Poniżej masz moją funkcję opartą na jQuery (prawdopodobnie da się ją przepisać na czysty JS):

[JAVASCRIPT] pobierz, plaintext 
function menu_hover() {
	$('#menu.ui-widget-content .ui-tabs-panel > .ui-button').hover( //możesz wsadzić swoje elementy 
			function() {
				$(this).addClass('ui-state-hover');
				elem = $(this).find('.ui-tabs-panel.nested'); //u mnie nested to podlista
				offset = elem.show().position(); //pobieram pozycję guzika otwierajacego
				elem.hide().css({position:'absolute',top:offset.top,left:offset.left}).slideDown(); //ustawiam pozycje podlista
			}, 
			function() {
				$(this).removeClass('ui-state-hover');
				$(this).find('.ui-tabs-panel.nested').slideUp(); //ukrywam gdy 'nie-hover' ;)
			});
}
[JAVASCRIPT] pobierz, plaintext 

[gigzorr]

ale ja uzywam do tego menu js+jquery

fixed,position: absolute wystarczylo wywalic.


/edit

mam jeszcze jeden problem , jak najade POD menu to sie otwiera ;x

Ten post edytował gigzorr 26.07.2010, 12:28:49

[everth]

Prawdopodobnie masz podpiętą funkcję hover pod element LI a nie element A (a LI obejmuje też zagnieżdżoną podlistę)

EDIT:
Aha, jeszcze to:

[CSS] pobierz, plaintext 
#jsddm li ul
		{	margin: 0;
			padding: 0;
			position: absolute;
			visibility: hidden;
			}
[CSS] pobierz, plaintext 

Powinno być:

[CSS] pobierz, plaintext 
#jsddm li ul
		{	margin: 0;
			padding: 0;
			position: absolute;
			display: none;
			}
[CSS] pobierz, plaintext 

Hidden ukrywa elementy - ale one dalej tam są (w sensie wymiarów i przykrywania elementów poniżej) tylko niewidoczne

Ten post edytował everth 26.07.2010, 12:43:09

[gigzorr]

Teraz kod wyglada tak :

[HTML] pobierz, plaintext 
#jsddm {margin: 0;
        padding: 0;
}
 
#jsddm li {float: left;
	   list-style: none;
	   font: 11px Arial, Arial;
}
 
#jsddm li a {display: block;
	     padding: 5px 12px;
	     text-decoration: none;
	     border-right: 1px solid white;
	     width: 120px;
             z-index: 1;
	     color: #EAFFED;
	     white-space: nowrap;
}
 
#jsddm li a:hover {background: #24313C;
}
 
#jsddm li ul {margin: 0;
	      padding: 0;
              float: left;
	      visibility: hidden;
}
 
#jsddm li ul li	{float: none;
		 display: block;
                 margin: auto;                 
 
 
}
 
#jsddm li ul li a {width: 120px;
                   font-size: 12px;                  
		   background: black;
		   color: #CC6633;                   
}
 
#jsddm li ul li a:hover {background: #FFFF99;
                         margin: auto;                        
}
[HTML] pobierz, plaintext 

Tyle , ze tak jak mowilem , najade pod menu to sie otwiera , tutaj mozna zobaczyc efekt.
Czyli nawet nie mozna sie zalogowac.

Ten post edytował gigzorr 26.07.2010, 13:40:59

[everth]

A u mnie działa. Na FF 3.6.7 i Chrome i Operze wszystko ok. Może ci się cache nie odświeżył w przeglądarce?

[gigzorr]

Na ff 3.6.8 jest zle, nie idzie sie nawet zalogowac.

[everth]

Nie mam tej wersji - ale co do poprzedniego postu to przeczytaj co napisałem o CSS visibility:hidden - prawdopodobnie to ci bruździ, a w źródle tego nie zmieniłeś

[gigzorr]

Nie mam tej wersji - ale co do poprzedniego postu to przeczytaj co napisałem o CSS visibility:hidden - prawdopodobnie to ci bruździ, a w źródle tego nie zmieniłeś

Zmienialem , bez tego jest jeszcze gorzej ;p

jak jest tak :

[HTML] pobierz, plaintext 
#jsddm li ul {margin: 0;
	      padding: 0;
              position: absolute;
	      visibility: hidden;
}
[HTML] pobierz, plaintext 

to jest ok , ale na ff3.6.8 jest za bardzo w prawo wysuniete.

jak jest float: left; zamiast absolute, to jest na ff 3.6.8 ok , ale nie idzie sie nawet zalogowac bo samo sie otwiera jak najade pod.

ok usunalem to visibility , troche jest nie tak , ale juz niech bedzie tak

arg bez tego to sie same menu otwiera , bez sens ;x

/edit , dobra udalo sie masz pomogl , za nakierowanie mnie.

Ten post edytował gigzorr 26.07.2010, 14:53:51

[everth]

[CSS] pobierz, plaintext 
#jsddm {
	margin: 0;
	padding: 0;
}
 
#jsddm li {
	display:inline;
	list-style: none;
	font: 11px Arial, Arial;
}
 
#jsddm li a {
	padding: 5px 12px;
	text-decoration: none;
	border-right: 1px solid white;
	width: 120px;
	z-index: 1;
	color: #EAFFED;
	white-space: nowrap;
}
 
#jsddm li a:hover {
	background: #24313C;
}
 
#jsddm li ul {
	margin: 0;
	padding: 0;
	display:inline;
}
 
#jsddm li ul li {
	display: block;
	margin: auto;
}
 
#jsddm li ul li a {
	width: 120px;
	font-size: 12px;
	background: black;
	color: #CC6633;
}
 
#jsddm li ul li a:hover {
	background: #FFFF99;
	margin: auto;
}
[CSS] pobierz, plaintext 

Edytowałem na ślepo. Podmenu jest widoczne. To skrypt powinien nadawać podmenu wartość absolute i pozycjonować ją (tak jak mój gdzieś na początku), jak wsadzisz to w css to zrobi ci się sieczka