Конфликты с CSS

inc1uder · 11.03.2012, 20:57

Здравствуйте, столкнулся с проблемой: поставил меню на JQuery, оно использует таблицу стилей, проблема в том, что теперь любой список <ul><li> использует те же параметры что и для самого меню (само собой), вопрос вот в чем, можно ли как-нибудь привязать этот css только к меню, а в качестве основного использовать другой, так как, если запихать это все в классы, придется перебирать и java код, чего я не могу, из-за незнания(

maxefect · 11.03.2012, 21:36

у вас наверно в css написано!

Код HTML:

ul {style}
li {style}

Вот ко всему и привязывается!!!

Существует такое понятие как наследование:
Вообщем, сделайте так:

html:

Код HTML:

<body>

<div id="nav">
   <ul>
       <li></li>
       <li></li>
       <li></li>
   </ul>
</div>
...
...
</body>

А в css:

Код HTML:

 /* ВМЕСТО этого: это исключительно для стилей меню */
ul {бла бла}
ul .li {бла бла} или будет просто li {бла бла}

 /* СДЕЛАЙТЕ это: */
#nav ul {бла бла}
#nav ul .li {бла бла} или будет просто 

#nav li {бла бла} /* и так желательно к каждому селектору, которые имеют отношении к менюшке! */

inc1uder · 11.03.2012, 21:54

пытался) все слетает, все равно

вот примерно код css:

Код:

body{
	font-size:13px;
	margin:0 auto;
	padding:0px;
	background: url(img/main_bg.gif) repeat-x;
	}
	
#gallery{
	/* CSS3 Box Shadow */
	-moz-box-shadow:0 0 3px #AAAAAA;
	-webkit-box-shadow:0 0 3px #AAAAAA;
	box-shadow:0 0 3px #AAAAAA;
	
	/* CSS3 Rounded Corners */
	
	-moz-border-radius-bottomleft:4px;
	-webkit-border-bottom-left-radius:4px;
	border-bottom-left-radius:4px;
	
	-moz-border-radius-bottomright:4px;
	-webkit-border-bottom-right-radius:4px;
	border-bottom-right-radius:4px;
	
	border:1px solid white;
	
	background:url(img/panel.jpg) repeat-x bottom center #ffffff;
	
	/* The width of the gallery */
	width:920px;
	overflow:hidden;
}

#slides{
	/* This is the slide area */
	height:400px;
	
	/* jQuery changes the width later on to the sum of the widths of all the slides. */
	width:920px;
	overflow:hidden;
}

.slide{
	float:left;
}

#menu{
	/* This is the container for the thumbnails */
	height:45px;
}

ul{
	margin:0px;
	padding:0px;
}

li{
	/* Every thumbnail is a li element */
	width:60px;
	display:inline-block;
	list-style:none;
	height:45px;
	overflow:hidden;
}

li.inact:hover{
	/* The inactive state, highlighted on mouse over */
	background:url(img/pic_bg.png) repeat;
}

li.act,li.act:hover{
	/* The active state of the thumb */
	background:url(img/active_bg.png) no-repeat;
}

li.act a{
	cursor:default;
}

.fbar{
	/* The left-most vertical bar, next to the first thumbnail */
	width:2px;
	background:url(img/divider.png) no-repeat right;
}

li a{
	display:block;
	background:url(img/divider.png) no-repeat right;
	height:35px;
	padding-top:10px;
}

a img{
	border:none;
}


/* The styles below are only necessary for the demo page */

h1{
	font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
	font-size:36px;
	font-weight:normal;
	margin-bottom:15px;
	color: #AAAAAA
}

h2{
	font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
	font-size:12px;
	font-weight:normal;
	position:absolute;
	right:0;
	text-transform:uppercase;
	top:15px;
}

#main{
	/* The main container */
	margin:15px auto;
	text-align:center;
	width:920px;
	position:relative;
}

a, a:visited {
	color:#0196e3;
	text-decoration:none;
	outline:none;
}

a:hover{
	text-decoration:underline;
}

p{
	padding:10px;
	text-align:center;
}

вот код меню в HTML

Код:

<div id="main">
<div id="gallery">
    <div id="slides">
    
    <div class="slide"><a href=""><img src="img/sample_slides/m4s.jpg" width="920" height="400" alt="Лицензия МЧС" /></a></div>
		    <div class="slide"><a href=""><img src="img/sample_slides/fsb.jpg" width="920" height="400" alt="Лицензия ФСБ" /></a></div>
	    		<div class="slide"><a href=""><img src="img/sample_slides/MinCul.jpg" width="920" height="400" alt="Лицензия Минестерства культуры" /></a></div>
				<div class="slide"><a href=""><img src="img/sample_slides/rosteh.jpg" width="920" height="400" alt="Лицензия РосТехНадзора" /></a></div>
	      <div class="slide"><a href=""><img src="img/sample_slides/iso.jpg" width="920" height="400" alt="Сертификат ISO" /></a></div>
	<div class="slide"><a href=""><img src="img/sample_slides/fire.jpg" width="920" height="400" alt="Сертификат пожарной Безопасности" /></a></div>
<div class="slide"><a href=""><img src="img/sample_slides/about.jpg" width="920" height="400" alt="Сертификат пожарной Безопасности" /></a></div>
    </div>
    
    <div id="menu">
    
    <ul>
        <li class="fbar">&nbsp;</li><li class="menuItem"><a href=""><img src="img/sample_slides/m4s_thumb.png" alt="thumbnail" /></a></li>
<li class="menuItem"><a href=""><img src="img/sample_slides/thumb_fsb.png" alt="thumbnail" /></a></li>
		<li class="menuItem"><a href=""><img src="img/sample_slides/thumb_MinCul.png" alt="thumbnail" /></a></li>
	<li class="menuItem"><a href=""><img src="img/sample_slides/thumb_rosteh.png" alt="thumbnail" /></a></li>
<li class="menuItem"><a href=""><img src="img/sample_slides/thumb_iso.png" alt="thumbnail" /></a></li>
   <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_fire.png" alt="thumbnail" /></a></li>
      <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_about.png" alt="thumbnail" /></a></li>
		    </ul>
    </div>
</div>
</div>

ну и сам JQuery

Код:

$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */
	
	var totWidth=0;
	var positions = new Array();
	
	$('#slides .slide').each(function(i){
		
		/* Traverse through all the slides and store their accumulative widths in totWidth */
		
		positions[i]= totWidth;
		totWidth += $(this).width();
		
		/* The positions array contains each slide's commulutative offset from the left part of the container */
		
		if(!$(this).width())
		{
			alert("Please, fill in width & height for all your images!");
			return false;
		}
		
	});
	
	$('#slides').width(totWidth);

	/* Change the cotnainer div's width to the exact width of all the slides combined */

	$('#menu ul li a').click(function(e){

			/* On a thumbnail click */

			$('li.menuItem').removeClass('act').addClass('inact');
			$(this).parent().addClass('act');
			
			var pos = $(this).parent().prevAll('.menuItem').length;
			
			$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
			/* Start the sliding animation */
			
			e.preventDefault();
			/* Prevent the default action of the link */
	});
	
	$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
	/* On page load, mark the first thumbnail as active */
	
});

maxefect · 11.03.2012, 22:58

HTML: оборачиваем в контейнер main!!!

Код HTML:

<div id="main">
		<div id="gallery">
                 ...
                 </div>
</div>

CSS:

Код HTML:

#main ul{margin:0px;padding:0px;}

#main li{width:60px;display:inline-block;
	list-style:none;height:45px;overflow:hidden;}

#main li.inact:hover{background:url(img/pic_bg.png) repeat;}

#main li.act,li.act:hover{background:url(img/active_bg.png) no-repeat;}

#main li.act a{cursor:default;}

#main li a{display:block;background:url(img/divider.png) no-repeat right;
	height:35px;padding-top:10px;}

inc1uder · 11.03.2012, 23:06

Спасибо огромное)

Не поверишь, но раньше не работало))

11.03.2012, 20:57	#1
inc1uder	Здравствуйте, столкнулся с проблемой: поставил меню на JQuery, оно использует таблицу стилей, проблема в том, что теперь любой список <ul><li> использует те же параметры что и для самого меню (само собой), вопрос вот в чем, можно ли как-нибудь привязать этот css только к меню, а в качестве основного использовать другой, так как, если запихать это все в классы, придется перебирать и java код, чего я не могу, из-за незнания(

11.03.2012, 23:06	#5
inc1uder	Спасибо огромное) Не поверишь, но раньше не работало))