Foros del Web » Creando para Internet » CSS »

Problemas de relaciones en ccs

Estas en el tema de Problemas de relaciones en ccs en el foro de CSS en Foros del Web. Hola estimados colaboradores la presente es que tengo un problema cuando logro agregar un plugin de imagenes echo en jquery pero el problema esta en ...
  #1 (permalink)  
Antiguo 25/10/2010, 15:40
Avatar de vbonive  
Fecha de Ingreso: septiembre-2010
Mensajes: 86
Antigüedad: 7 años, 3 meses
Puntos: 0
Exclamación Problemas de relaciones en ccs

Hola estimados colaboradores la presente es que tengo un problema cuando logro agregar un plugin de imagenes echo en jquery pero el problema esta en que cuando lo coloco cono el ccs de los botones desplegable que tengo tiene algunas datos parecido al plugin con los ul y li cuando coloco el plugin de las imagenes me toma el ccs de la botonera y no el css del plugin. este es el css de la botonera:
Botton.css
/*Botonera*/
li {
font-size: 1em;
text-align:center;
position: fixed; bottom: 0px; left: 0px;z-index: -1;
}
ul {
font-size: 1em;
list-style: url(none) none;
}
ul, li {
margin: 0;
padding: 0;
text-indent: 0;
ALK
}
ul li {
display: inline;
float: left;
position: static;
background-color: #FFFFFF;
width: 141px;
margin: 0;
background-position: center center;
font-size: 11px;
font-style: normal;
}
ul li a {
text-align:center;
background-image:url(menu/Botonera.jpg);
font-family: Arial, Helvetica, sans-serif;
color: #000;
text-decoration: none;
font-size: 1.5em;
display: block;
width: 130px;
padding: 12px 5px;
}
ul li a:hover, ul li a:active {
color:#33CC00;
background-image:url(menu/Botonera2.jpg);
background-position: center center;
background-repeat: no-repeat;
}
ul li ul {
position: absolute;
display: none;
z-index:1000;
}
ul li ul li {
display: list-item;
float: none;
margin: 0;
}
ul li ul li a {
font-size: 1.15em;
background-color: #F7F7F7;
color: #000000;
text-align:left;
width:140px;
}
body {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
background-image: url(tutifri.jpg);
background-repeat: no-repeat;
background-color: #FFF;
}
#botonera{
background-color: #CCC;
color: #FFFFFF;
font-size:12pt;
font-weight: bold;
background-position: center center;
list-style-type: none;
top: 20px;
left: 3px;
clip: rect(20px,auto,auto,auto);
text-align: center;
height: 43px;
width: 847px;
padding: 3px;

}
/*Fin de la Botonera Principal*/



Este es el css del plugin de Imagenes en jquery: screen.css
h1{
font-size:180%;
font-weight:normal;
margin:0;
padding:0 20px;
}
h2{
font-size:160%;
font-weight:normal;
text-align: left;
}
h3{
font-size:140%;
font-weight:normal;
}
img{
border:none;
text-align: center;
}
pre{
display:block;
font:12px "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
width:500px;
margin-top: 0.5em;
margin-right: 0;
margin-bottom: 0.5em;
margin-left: 0;
}

/* image replacement */
.graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
/* // image replacement */

#container{
position:relative;
text-align:center;
width:530px;
float: none;
margin: auto;
}
#header{
height:30px;
color:#000;
width: 530px;
font-size: 14px;
background-color: #FCFCFE;
background-position: left;
text-align: left;
font-family: Arial;
}
#desarrollo{
position:relative;
width: 550px;
margin-left: 5px;
font-family: Tahoma, Geneva, sans-serif;
background-color: #FFFFFF;
}

/* Easy Slider */

#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:530px;
height:350px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:100px;
height:350px;
position:absolute;
left:-30px;
top:120px;
z-index:1000;
}
#nextBtn, #slider1next{
left:530px;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:500px;
height:77px;
background:url(../images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(../images/btn_next.gif) no-repeat 0 0;
}

/* numeric controls */

ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:40px;
line-height:28px;
}
ol#controls li a{
float:left;
height:40px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

/* // Easy Slider */

como podemos ver el ul y li del plugin me toma es el css de botton.css y no me toma el screen.css y la ubicacion de ambos css esta especificada en el hrlf

solo tengo es problema con el ul y li y se me descuadra las imagenes.
a la espera de su pronta respuesta gracias.
  #2 (permalink)  
Antiguo 25/10/2010, 16:06
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: Problemas de relaciones en ccs

Hola!

Hay una solución sencilla:

La "botonera" va dentro de un div, por ejemplo... botonera.
Lo que haremos será que ese css solo se aplique a los ul li dentro de botonera, por lo cual escribimos:
Código CSS:
Ver original
  1. .botonera ul li {nuestras propiedades css}

Simplemente añadimos .(div que contiene a los ul li) seguido de ul li

Funciona con todo tipo de componentes, o incluso otros divs, de este modo puedes tener divs con mismo nombre, pero de diferentes estilos css.


Espero que te sirva, saludos!
  #3 (permalink)  
Antiguo 25/10/2010, 16:24
Avatar de vbonive  
Fecha de Ingreso: septiembre-2010
Mensajes: 86
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Problemas de relaciones en ccs

Hola amigo gracias por tu respuestay ayuda pero si el div esta dentro de la botonera se llama botonera e monte de esta forma pero no me funciona por que me descudro todos los botones:

/*Botonera*/
.botonera li {
font-size: 1em;
text-align:center;
position: fixed; bottom: 0px; left: 0px;z-index: -1;
}
.botonera ul {
font-size: 1em;
list-style: url(none) none;
}
.botonera ul, li {
margin: 0;
padding: 0;
text-indent: 0;
ALK
}
.botonera ul li {
display: inline;
float: left;
position: static;
background-color: #FFFFFF;
width: 141px;
margin: 0;
background-position: center center;
font-size: 11px;
font-style: normal;
}
.botonera ul li a {
text-align:center;
background-image:url(menu/Botonera.jpg);
font-family: Arial, Helvetica, sans-serif;
color: #000;
text-decoration: none;
font-size: 1.5em;
display: block;
width: 130px;
padding: 12px 5px;
}
.botonera ul li a:hover, ul li a:active {
color:#33CC00;
background-image:url(menu/Botonera2.jpg);
background-position: center center;
background-repeat: no-repeat;
}
.botonera ul li ul {
position: absolute;
display: none;
z-index:1000;
}
.botonera ul li ul li {
display: list-item;
float: none;
margin: 0;
}
.botonera ul li ul li a {
font-size: 1.15em;
background-color: #F7F7F7;
color: #000000;
text-align:left;
width:140px;
}
.botonera body {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
background-image: url(tutifri.jpg);
background-repeat: no-repeat;
background-color: #FFF;
}
#botonera{
background-color: #CCC;
color: #FFFFFF;
font-size:12pt;
font-weight: bold;
background-position: center center;
list-style-type: none;
top: 20px;
left: 3px;
clip: rect(20px,auto,auto,auto);
text-align: center;
height: 43px;
width: 847px;
padding: 3px;

}
/*Fin de la Botonera Principal*/
  #4 (permalink)  
Antiguo 25/10/2010, 16:32
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: Problemas de relaciones en ccs

El code que pusiste arriba del todo, en la entrada principal, es el de la botonera?

Si es así, falta code en el nuevo de abajo


Yo me tengo que ir... mañana si tengo tiempo te soluciono de todo con más tiempo el problema..


Saludos, pero supongo que con lo grande que es la comunidad, alguien lo podrá solucionar..


Saludos definitivos xD
  #5 (permalink)  
Antiguo 25/10/2010, 16:40
Avatar de vbonive  
Fecha de Ingreso: septiembre-2010
Mensajes: 86
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Problemas de relaciones en ccs

Si amigo pero tambien hago una cambio en solo el li ul que me esta dando problema

.botonera ul li a:hover, ul li a:active {
color:#33CC00;
background-image:url(menu/Botonera2.jpg);
background-position: center center;
background-repeat: no-repeat;
}

pero todavia me sigue asignando a .botoner ul li a:hover, ul li a:active {
  #6 (permalink)  
Antiguo 25/10/2010, 16:42
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: Problemas de relaciones en ccs

Pero, seguro que botonera está llamado con class?

Si no es así.. no entiedo por qué falla si botonera no tiene otros ul li

Si los tiene, simplemente cambia botonera por otro nombre y metes en él las cosas
  #7 (permalink)  
Antiguo 26/10/2010, 09:57
Avatar de vbonive  
Fecha de Ingreso: septiembre-2010
Mensajes: 86
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Problemas de relaciones en ccs

Si amigo la botonera esta con class:

<div id="botonera" class="botonera">
<ul>
<li><a href="index.html">Inicio</a></li>
<li> <a href="#">Quienes Somos </a>
<ul>
<li><a href="nosotros.php">Historia</a></li>
<li><a href="mision.php">Mision</a></li>
<li><a href="mision.php">Vision</a></li>
<li><a href="valores.php">Valores</a></li>
<li><a href="politicac.php">Politica de Calidad</a></li>
<li><a href="#">Politica de Seguridad</a></li>
<li><a href="#">Politica de Ambiental</a></li>
</ul>
</li>
<li><a href="#">Productos</a>
<ul>
<li><a href="#">Linea de Tomates</a></li>
<li><a href="#">Linea de Vegetales</a></li>
<li><a href="#">Linea de Dulces</a></li>
<li><a href="#">Linea de Congelados</a></li>
<li><a href="#">Concentrados</a></li>
</ul>
</li>
<li><a href="#">Recetas</a></li>
<li><a href="#">Noticias</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>



y este es el otro plugin en jquery


<div id="slider">
<ul>
<li><a href="web.php"><img src="easyslider1.7/images/01.jpg" alt="Css Template Preview" width="530" height="350" /></a></li>
<li><a href="redes.php"><img src="easyslider1.7/images/02.jpg" alt="Css Template Preview" width="530" height="350" /></a></li>
<li><a href="http://templatica.com/preview/25"><img src="easyslider1.7/images/03.jpg" alt="Css Template Preview" width="530" height="350" /></a></li>
<li><a href="sig.php"><img src="easyslider1.7/images/04.jpg" alt="Css Template Preview" width="530" height="350" /></a></li>
<li><a href="diseg.php"><img src="easyslider1.7/images/07.jpg" alt="Css Template Preview" width="530" height="350" /></a></li>
<li><a href="servid.php"><img src="easyslider1.7/images/06.jpg" alt="Css Template Preview" width="530" height="350" /></a></li>
</ul>
</div>

pero este plugin todavia me sigue viendo la regla de destino de ccs de la botonera esta:

.botonera ul li a:hover, ul li a:active {
color:#33CC00;
background-image:url(menu/Botonera2.jpg);
background-position: center center;
background-repeat: no-repeat;
}




botton.css

/*Botonera*/
li {
font-size: 1em;
text-align:center;
position: fixed; bottom: 0px; left: 0px;z-index: -1;
}
ul {
font-size: 1em;
list-style: url(none) none;
}
ul, li {
margin: 0;
padding: 0;
text-indent: 0;
ALK
}
ul li {
display: inline;
float: left;
position: static;
background-color: #FFFFFF;
width: 141px;
margin: 0;
background-position: center center;
font-size: 11px;
font-style: normal;
}
ul li a {
text-align:center;
background-image:url(menu/Botonera.jpg);
font-family: Arial, Helvetica, sans-serif;
color: #000;
text-decoration: none;
font-size: 1.5em;
display: block;
width: 130px;
padding: 12px 5px;
}
.botonera ul li a:hover, ul li a:active {
color:#33CC00;
background-image:url(menu/Botonera2.jpg);
background-position: center center;
background-repeat: no-repeat;
}
ul li ul {
position: absolute;
display: none;
z-index:1000;
}
ul li ul li {
display: list-item;
float: none;
margin: 0;
}
ul li ul li a {
font-size: 1.15em;
background-color: #F7F7F7;
color: #000000;
text-align:left;
width:140px;
}
body {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
background-image: url(tutifri.jpg);
background-repeat: no-repeat;
background-color: #FFF;
}
#botonera{
background-color: #CCC;
color: #FFFFFF;
font-size:12pt;
font-weight: bold;
background-position: center center;
list-style-type: none;
top: 20px;
left: 3px;
clip: rect(20px,auto,auto,auto);
text-align: center;
height: 43px;
width: 847px;
padding: 3px;

}
/*Fin de la Botonera Principal*/

screen.css

h1{
font-size:180%;
font-weight:normal;
margin:0;
padding:0 20px;
}
h2{
font-size:160%;
font-weight:normal;
text-align: left;
}
h3{
font-size:140%;
font-weight:normal;
}
img{
border:none;
text-align: center;
}
pre{
display:block;
font:12px "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
width:500px;
margin-top: 0.5em;
margin-right: 0;
margin-bottom: 0.5em;
margin-left: 0;
}

/* image replacement */
.graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
/* // image replacement */

#container{
position:relative;
text-align:center;
width:540px;
float: none;
margin: auto;
}
#header{
height:30px;
color:#000;
width: 530px;
font-size: 14px;
background-color: #FCFCFE;
background-position: left;
text-align: left;
font-family: Arial;
}
#desarrollo{
position:relative;
width: 550px;
margin-left: 5px;
font-family: Tahoma, Geneva, sans-serif;
background-color: #FFFFFF;
}

/* Easy Slider */

#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:530px;
height:350px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:100px;
height:350px;
position:absolute;
left:-30px;
top:120px;
z-index:1000;
}
#nextBtn, #slider1next{
left:530px;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:500px;
height:77px;
background:url(../images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(../images/btn_next.gif) no-repeat 0 0;
}

/* numeric controls */

ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:40px;
line-height:28px;
}
ol#controls li a{
float:left;
height:40px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.botonera a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

/* // Easy Slider */

A la espera de tu ayuda gracias
  #8 (permalink)  
Antiguo 26/10/2010, 12:15
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: Problemas de relaciones en ccs

El fallo cometido, es evidente:

Yo creía que tu plugin estaba dentro de botonera, pero ahora veo que no, está dentro de slider.

Lo que tienes que hacer es cambiar el css donde dice .botonera por .slider

.slider li {
font-size: 1em;
text-align:center;
position: fixed; bottom: 0px; left: 0px;z-index: -1;
}
.slider ul {
font-size: 1em;
list-style: url(none) none;
}
.slider ul, li {
margin: 0;
padding: 0;
text-indent: 0;
ALK
}
.slider ul li {
display: inline;
float: left;
position: static;
background-color: #FFFFFF;
width: 141px;
margin: 0;
background-position: center center;
font-size: 11px;
font-style: normal;
}
.slider ul li a {
text-align:center;
background-image:url(menu/Botonera.jpg);
font-family: Arial, Helvetica, sans-serif;
color: #000;
text-decoration: none;
font-size: 1.5em;
display: block;
width: 130px;
padding: 12px 5px;
}
.slider ul li a:hover, ul li a:active {
color:#33CC00;
background-image:url(menu/Botonera2.jpg);
background-position: center center;
background-repeat: no-repeat;
}
.slider ul li ul {
position: absolute;
display: none;
z-index:1000;
}
.slider ul li ul li {
display: list-item;
float: none;
margin: 0;
}
.slider ul li ul li a {
font-size: 1.15em;
background-color: #F7F7F7;
color: #000000;
text-align:left;
width:140px;
}
#slider{
background-color: #CCC;
color: #FFFFFF;
font-size:12pt;
font-weight: bold;
background-position: center center;
list-style-type: none;
top: 20px;
left: 3px;
clip: rect(20px,auto,auto,auto);
text-align: center;
height: 43px;
width: 847px;
padding: 3px;

}
  #9 (permalink)  
Antiguo 26/10/2010, 13:42
Avatar de vbonive  
Fecha de Ingreso: septiembre-2010
Mensajes: 86
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Problemas de relaciones en ccs

Hola amigo pero si cambio eso a slideder no me cambia los parametros de la botonera.?
  #10 (permalink)  
Antiguo 27/10/2010, 08:54
Avatar de vbonive  
Fecha de Ingreso: septiembre-2010
Mensajes: 86
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Problemas de relaciones en ccs

AMigo cuando coloque lo que me dijiste en el ccs de la botonera no me funciono solo me descuadro el diseño de la botonera.
HAY DOS aRCHIVOS CSS.


botonera.css de la botonera y screen.css que es el del plugin de la imagen arriba esta los codigos de ambos..
  #11 (permalink)  
Antiguo 27/10/2010, 09:57
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: Problemas de relaciones en ccs

Hola, vamos a hacer más fácil las cosas, deja la dirección del web donde estás trabajando o deja todo en un rar y subelo a XooUp.tk

Etiquetas: ccs, relaciones
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:05.