ignorar estilo global

moron · #1 (**permalink**) 17/05/2012, 13:26

Estimados.

En mi sitio tengo un css donde estilo los <ul> y los <li>
agregué un componente de jquery que tiene un estilo propio, pero deja por defecto estas etiquetas.
El tema es que el estilo global afecta al estilo del componente. Cual sería la mejor solución para que el componente ignore el estilo global de esas etiquetas?

Muchas gracias desde ya

cristian_cena · #2 (**permalink**) 17/05/2012, 16:10

En css no hay contextos o ámbitos como puede haberlo en lenguajes de programación, por tanto no tendrás más remedio que controlar tus hojas de estilos haciendo limpieza de estilos superpuestos (aquellos que por estar debajo en la ejecución están pisando los declarados previamente).
Para lograr prolijidad podes crear un elemento html contenedor del plugin (o usar el contenedor del mismo) y aplicar un id, el cual sera tu "root" cuando vayas a la hoja de estilos, es decir, partirás de esta id si deseas aplicar selectores descendientes o hijos.
En tu lugar buscaría la hoja de estilos del plugin y quitaría los estilos generales.
También te puede ser útil aplicar !important;

Intenta identificar el problema en ambas hojas de estilos y si no te sale comparte tu codigo y lo vemos.

Suerte.

ipraetoriux · #3 (**permalink**) 17/05/2012, 20:21

...una forma de resolver es utilizando el !important...lo que hace el impotant es ignorar el estilo heredado de una etiqueta / id / class y utilizar el estilo que tiene el !important...ej.

p {font-size:0.750em;}

aca estoy agregado el font-size a todos los parrafos...ahora que pasa si quiero que un parrafo en particular tenga una fuente mas grande...

p.classejemplo {font-size:1.5em !important;}

..utilizando el !important no toma en cuenta el font-size general de la etiqueta p

un saludo

moron · #4 (**permalink**) 18/05/2012, 08:41

GRacias por las respuestas. Estoy un poco mareado con estos css, cuanto mas toco mas se rompe.

Este es el código del componente:

Código:

body { margin:0px; font-family:Arial, Helvetica, sans-serif; background:#39414A; }
#container { width:980px; margin:0px auto 0px; background:#FFFFFF; padding:10px; font-size:12px; margin-top:50px; }

a{
	text-transform:none;
	color:#333
}
#footerSlider{
	background:#F0F0F0;
	padding:10px;
	border:#999 dotted 1px;
}
@charset "utf-8";
/* CSS Document */

/* slider layout */
.lof-slidecontent { position:relative;	overflow:hidden;	border:#F4F4F4 solid 1px;}
.lof-slidecontent .preload{	height:100%;	width:100%;	position:absolute;	top:0;	left:0;	z-index:100000;	text-align:center;	background:#FFF}
.lof-slidecontent .preload div{	height:100%;	width:100%;	background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;}

.lof-slidecontent  .sliders-wrapper{	position:relative;	height:100%;	width:900px;	z-index:3px;	overflow:hidden; }
.lof-slidecontent  ul.sliders-wrap-inner{overflow:hidden;	background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;	padding:0px;	margin:0;	position:absolute;	overflow:hidden;}
.lof-slidecontent  ul.sliders-wrap-inner li{overflow:hidden;	padding:0px;margin:0px;	float:left;	position:relative;}
.lof-slidecontent  .lof-opacity  li{position:absolute;	top:0;	left:0;	float:inherit; }


.lof-slidecontent  .navigator-content {position:absolute;
	right:0;
	top:00px;
	z-index:9;
	height:300px;
	width:310px;
	overflow:hidden;
	color:#FFF
}
.lof-slidecontent  .navigator-wrapper{	position:relative;	z-index:10;
	height:180px;
	width:310px;
	overflow:hidden;
	color:#FFF;
	float:left
}
.lof-slidecontent  ul.navigator-wrap-inner{	top:0;	padding:0;	margin:0;	position:absolute;	width:100%; }
.lof-slidecontent  ul.navigator-wrap-inner li{ cursor:hand; 	cursor:pointer;	list-style:none;	padding:0;	margin-left:0px;	overflow:hidden;	float:left;	display:block;	text-align:center;}

/*******************************************************/
 
ul.sliders-wrap-inner li img{	padding:0px;	}

.lof-slidecontent .slider-description a.readmore{color:#58B1EA; font-size:95%; }
.lof-slidecontent .slider-description a{ color:#FFF; }
.lof-slidecontent .slider-description{
	z-index:100px;
	position:absolute;
	bottom:66px;
	left:0px;
	width:350px;
	background:url(../images/bg_trans.png);
	height:100px;
	padding:10px;
	color:#FFF;
}
.lof-slidecontent .slider-description h4 {    font-size: 14px;    margin: 10px 0;    padding: 0; }
.lof-slidecontent .slider-description .slider-meta a{	
	margin:0;
	background:#C01F25;
	font-size:75%;
	padding:2px 3px;
	font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
	text-transform:uppercase;
	text-decoration:none
}
.lof-slidecontent  .item-meta a:hover{	text-decoration:underline;}
.lof-slidecontent  .item-meta i {	font-size:70%; }

/* item navigator */
.lof-slidecontent ul.navigator-wrap-inner  li.active{
	background:url(../images/arrow-bg.png) no-repeat scroll left center; 
	color:#FFF
}
.lof-slidecontent ul.navigator-wrap-inner  li >  div{
	background:url(../images/transparent_bg.png);
	color:#FFF;
	height:100%;
	position:relative;
	margin-left:15px;
	padding-left:15px;
	border-top:1px solid #E1E1E1;
	text-align:left 
	
}

.lof-slidecontent ul.navigator-wrap-inner li.active div{
	background:url(../images/grad-bg.gif);
	color:#FFF;
}
.lof-slidecontent ul.navigator-wrap-inner li img{
	height:60px;
	width:60px;
	margin:15px 15px 10px 0px;
	float:left;
	padding:3px;
	border:#C5C5C5 solid 1px;
}
.lof-slidecontent ul.navigator-wrap-inner li.active img, 
.lof-slidecontent ul.navigator-wrap-inner li:hover img {
	border:##6C8E5C  solid 1px;
}
.lof-slidecontent  .button-next, 
.lof-slidecontent .button-previous{
	display:block;
	width:40px;
	color:#FFF;
	cursor:pointer;
	position:absolute;
	height:100%;
	z-index:40;
	top:0;
	text-indent:-999px;

}
.lof-slidecontent   .button-next {
	right:0px;
	background:url(../images/next.png) no-repeat right center;
}
.lof-slidecontent  .button-previous {
	left:0px;
	background:url(../images/previous.png) no-repeat left center;
}


.lof-slidecontent .button-control {
   position:absolute;
   top:10px;
   right:48%;
    height: 20px;
    width: 20px;
	cursor:hand; cursor:pointer;
	background:url(../images/transparent_bg.png) repeat;
}

.lof-slidecontent .button-control span { display:block;  width:100%; height:100%;}
.lof-slidecontent .action-start span  {
	background:url(../images/play.png) no-repeat center center;
}
.lof-slidecontent .action-stop span {
	background:url(../images/pause.png) no-repeat center center;
}

este el del sitio:

Código:


* {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: underline;
	color: #DB4A4A;
}

a:hover {
	text-decoration: none;
}

body {
	line-height: 1.75em;
	background: #222424 url(images/img01.gif) repeat-x top left;
	color: #C0C1C1;
	font-size: 11.5pt;
}

body,input {
	font-family: Tahoma, sans-serif;
}

br.clearfix {
	clear: both;
}

h1,h2,h3,h4 {
	text-transform: uppercase;
	font-weight: normal;
}

h2 {
	font-size: 1.75em;
}

h2,h3,h4 {
	color: #FFF;
	font-family: Oswald, sans-serif;
	margin-bottom: 1.25em;
}

h3 {
	font-size: 1.5em;
}

h4 {
	font-size: 1.25em;
}

img.alignleft {
	margin: 5px 20px 20px 0;
	float: left;
	position: relative;
	top: -10px;
}

img.aligntop {
	margin: 5px 0 20px 0;
}

img.border {
	padding: 5px;
	border: solid 1px #D6D6D6;
}

p {
	margin-bottom: 1.5em;
}

ul {
	margin-bottom: 1.5em;
}

ul h4 {
	margin-bottom: 0.35em;
}

#content {
	float: left;
	padding: 40px;
	background: #FFF;
	width: 595px;
	color: #4D4D4D;
	height:800px
}
}

#content h2, #content h3, #content h4 {
	color: #0F0F0F;
}

#content strong {
	color: #0F0F0F;
}

#footer {
	padding: 70px 0 110px 0;
	text-align: center;
	margin: 0 0 45px 0;
}


#footer a {
	color: #C0C1C1;
}
#footer2 {
	padding: 70px 0 110px 0;
	text-align: center;
	margin: 0 0 45px 0;
}
#header {
	height: 125px;
	position: relative;
	padding: 40px;
    top: 0px;
    left: 0px;
}

#logo {
	margin: -20px auto;
	height: 110px;
	line-height: 110px;
	text-align: center;
	position: relative;
    top: 0px;
    left: 0px;
}

#logo a {
	color: #FFFFFF;
	text-decoration: none;
}

#logo h1 {
	font-size: 2.8em;
	font-family: Oswald, sans-serif;
}

#menu {
	line-height: 55px;
	position: absolute;
	bottom: 0;
	height: 55px;
	background: #AF1E1E url(images/img02.gif) repeat-x top left;
	left: 0;
	font-family: Oswald, sans-serif;
	width: 980px;
	border-top: solid 1px #FF9696;
	border-bottom: solid 1px #9B0A0A;
}

#menu a {
	font-size: 1.1em;
	text-decoration: none;
	text-transform: uppercase;
	color: #FFFFFF;
}

#menu ul {
	width: 980px;
	list-style: none;
	text-align: center;
}

#menu ul li {
	text-align: center;
	padding: 8px 15px 8px 15px;
	margin: 0 5px 0 5px;
	display: inline;
}

#menu ul li.current_page_item {
	background: #912727;
	border-top: solid 1px #9B0A0A;
	border-bottom: solid 1px #FF9696;
}

#page {
	position: relative;
	margin: 0 0 0 0;
	width: 980px;
	padding: 0;
}

#page .section-list {
	padding-left: 0;
	list-style: none;
}

#page .section-list li {
	padding: 25px 0 25px 0;
	clear: both;
}

#page ul {
	list-style: none;
}

#page ul li {
	padding: 10px 0 10px 0;
	border-top: solid 1px #D6D6D6;
}
 

#page ul li.first {
	border-top: 0;
	padding-top: 0;
}

#post1 {
	overflow: hidden;
	margin: 0 0 30px 0;
}

#post2 {
	margin: 0 0 30px 0;
	overflow: hidden;
}

#post3 {
	overflow: hidden;
}

#search input.form-submit {
	color: #FFF;
	background: #CD3C3C;
	margin-left: 1em;
	font-family: Oswald, sans-serif;
	border: 0;
	padding: 5px;
}

#search input.form-text {
	padding: 10px;
	border: solid 1px #2C2E2E;
}

#sidebar {
	border-bottom: solid 1px #102424;
	background: #384C4C url(images/img03.gif) repeat-y top left;
	width: 225px;
	padding: 40px;
	margin: 0 0 0 675px;
	color: #CAD5D5;
	height:800px;
}

#sidebar h2, #sidebar h3, #sidebar h4 {
	color: #FFFFFF;
}

#sidebar a {
	color: #EF7A7A;
}

#sidebar ul {
	list-style: none;
	margin-bottom: 2em;
}

#sidebar ul li {
	padding: 10px 0 10px 0;
	border-top: solid 1px #5E8383;
	border-bottom: solid 1px #182C2C;
}

#sidebar ul li.first {
	padding-top: 0;
	border-top: 0;
}

#sidebar ul li.last {
	border-bottom: 0;
}

#wrapper {
	width: 980px;
	position: relative;
	margin: 0px auto 0 auto;
}

moron · #5 (**permalink**) 18/05/2012, 08:42

y esta la aplicación en la página:

Código:

	<div id="page">
		<div >
			<div id="post1">
          
					

<!------------------------------------- THE CONTENT ------------------------------------------------->
<div id="jslidernews2" class="lof-slidecontent" style="width:980px; height:300px;">
	<div class="preload"><div></div></div>
            
            
            <div  class="button-previous">Previous</div>
                   
    		 <!-- MAIN CONTENT --> 
              <div class="main-slider-content" style="width:684px; height:300px;">
                <ul class="sliders-wrap-inner">
                    <li>
                            <img src="images/thumbl_980x340.png" title="Newsflash 2" >           
                          <div class="slider-description">
                            <div class="slider-meta"><a target="_parent" title="Newsflash 1" href="#Category-1">/ Newsflash 1 /</a> <i> — Monday, February 15, 2010 12:42</i></div>
                            <h4>Content of Newsflash 1</h4>
                            <p>The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,...
                           
                            </p>
                         </div>
                    </li> 
                   <li>
                      <img src="images/thumbl_980x340_002.png" title="Newsflash 1" >           
                         <div class="slider-description">
                           <div class="slider-meta"><a target="_parent" title="Newsflash 2" href="#Category-2">/ Newsflash 2 /</a> 	<i> — Monday, February 15, 2010 12:42</i></div>
                            <h4>Content of Newsflash 2</h4>
                            <p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...
                            <a class="readmore" href="#">Read more </a>
                            </p>
                         </div>
                    </li> 
                   <li>
                      <img src="images/thumbl_980x340_003.png" title="Newsflash 3" >            
                        <div class="slider-description">
                          <div class="slider-meta"><a target="_parent" title="Newsflash 3" href="#Category-3">/ Newsflash 3 /</a> 	<i> — Monday, February 15, 2010 12:42</i></div>
                            <h4>Content of Newsflash 3</h4>
                            <p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...
                            <a class="readmore" href="#">Read more </a>
                            </p>
                         </div>
                    </li> 
                    <li>
                      <img src="images/thumbl_980x340_004.png" title="Newsflash 5" >            
                        <div class="slider-description">
                          <div class="slider-meta"><a target="_parent" title="Newsflash 4" href="#Category-4">/ Newsflash 4 /</a>	<i> — Monday, February 15, 2010 12:42</i></div>
                            <h4>Content of Newsflash 4</h4>
                            <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                            <a class="readmore" href="#">Read more </a>
                            </p>
                         </div>
                    </li> 
                    <li>
                      <img src="images/thumbl_980x340_005.png" title="Newsflash 5" >            
                        <div class="slider-description">
                           <div class="slider-meta"><a target="_parent" title="Newsflash 5" href="#">/ Newsflash 5 /</a>	<i> — Monday, February 15, 2010 12:42</i></div>
                           <h4>Content of Newsflash 5</h4>
                            <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                            <a class="readmore" href="#">Read more </a>
                            </p>
                         </div>
                    </li> 
                    <li>
            
                      <img src="images/thumbl_980x340_006.png" title="Newsflash 5" >            
                        <div class="slider-description">
                          <div class="slider-meta"><a target="_parent" title="Newsflash 6" href="#">/ Newsflash 6 /</a>	<i> — Monday, February 15, 2010 12:42</i></div>
                            <h4>Content of Newsflash 6</h4>
                            <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                            <a class="readmore" href="#">Read more </a>
                            </p>
                         </div>
                    </li> 
                
                  </ul>  	
            </div>
 		   <!-- END MAIN CONTENT --> 
           <!-- NAVIGATOR -->
           	<div class="navigator-content">
                  <div class="navigator-wrapper">
                        <ul class="navigator-wrap-inner">
                          <li>
                                <div>
                                    <img src="images/lofthumbs/791902news3.jpg" />
                                    <h5> NewsFlash 1 </h5>
                                    <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu...
                                </div>    
                            </li>
                             <li>
                                <div>
                                    <img src="images/lofthumbs/435576news10.jpg" />
                                    <h3> NewsFlash 2 </h3>
                                    <span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                                </div>    
                            </li>
                
                            <li>
                                <div>
                                    <img src="images/lofthumbs/641906img1.jpg" />
                                    <h3> NewsFlash 3 </h3>
                                    <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                                </div>     
                            </li>
                            
                           <li>
                                <div>
                                    <img src="images/lofthumbs/416719news7.jpg" />
                                    <h3> NewsFlash 4</h3>
                                    <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                                </div>
                            </li>    
                            <li>
                                 <div>
                                    <img src="images/lofthumbs/641906img1.jpg" />
                                    <h3> NewsFlash 5</h3>
                                    <span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                                 </div>   
                            </li>
                           <li>
                                <div>
                                    <img src="images/lofthumbs/416719news7.jpg" />
                                    <h3> NewsFlash 6</h3>
                                    <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                                </div>
                            </li>     		
                        </ul>
                  </div>
   
             </div> 
          <!----------------- END OF NAVIGATOR --------------------->
          <div class="button-next">Next</div>
 
 		 <!-- BUTTON PLAY-STOP -->
          <div class="button-control"><span></span></div>
          <!-- END OF BUTTON PLAY-STOP -->
           
 </div> 

<!------------------------------------- END OF THE CONTENT ------------------------------------------------->



			</div>
            <div style="clear:both"></div>
			 
			<br class="clearfix" />
		    </div>
		<br class="clearfix" />
	</div>

Mil gracias desde ya.

moron · #6 (**permalink**) 18/05/2012, 09:46

Gracias muchachos, Ya lo solucioné. quité algunos estilos globales.

Saludos