Foros del Web » Creando para Internet » CSS »

Fusionar ids

Estas en el tema de Fusionar ids en el foro de CSS en Foros del Web. Buen dia, tengo los siguientes codigos. #mende ul li ul li a:hover {margin:0px} #meniz ul li ul li a:hover {margin:0px} como hago para fusionarlos ya ...
  #1 (permalink)  
Antiguo 05/04/2011, 11:02
 
Fecha de Ingreso: octubre-2010
Mensajes: 73
Antigüedad: 7 años, 1 mes
Puntos: 1
Pregunta Fusionar ids

Buen dia,

tengo los siguientes codigos.

#mende ul li ul li a:hover {margin:0px}
#meniz ul li ul li a:hover {margin:0px}

como hago para fusionarlos ya que he intentado con:

#mende #meniz ul li ul li a:hover {margin:0px}

y aun asi no funciona, la forma como me funciona es

#mende ul li ul li a:hover #meniz ul li ul li a:hover {margin:0px}.

como redusco ese codigo? gracias por la ayuda
  #2 (permalink)  
Antiguo 05/04/2011, 12:06
Avatar de iwexcoder  
Fecha de Ingreso: mayo-2009
Ubicación: San Carlos de Bariloche
Mensajes: 404
Antigüedad: 8 años, 6 meses
Puntos: 16
Respuesta: Fusionar ids

me parece que es mil veces mas fácil poner un class en el anchor y listo...

en el HTML:

<a href="" class="ejemplo">Link</a>

en el CSS:

a.ejemplo:hover {margin:0px;}


En principio esta seria la forma mas fácil, si no te funciona, tendrías que ver como estructurado los layouts del HTML para ajustar los CSS
__________________
iWexCoder.com - Programación - Desarrollo Movil - Programación Web www.iwexcoder.com
  #3 (permalink)  
Antiguo 05/04/2011, 12:34
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Fusionar ids

Son cosas diferentes, iwexcoder.
frank_harbey12 está haciendo uso de una particularidad de los selectores de css: la especificidad.
Y son cosas muy distintas | #id tag | en el css que | tag="class"/tag="id" | en el html

Cita:
#mende ul li ul li a:hover, #meniz ul li ul li a:hover {/*propiedades comunes*/}
para definir reglas comunes a varios selectores de forma conjunta, se escriben todos los selectores separados por una coma (,)
  #4 (permalink)  
Antiguo 06/04/2011, 09:46
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: Fusionar ids

Cita:
Iniciado por kseso? Ver Mensaje
Son cosas diferentes, iwexcoder.
frank_harbey12 está haciendo uso de una particularidad de los selectores de css: la especificidad.
Y son cosas muy distintas | #id tag | en el css que | tag="class"/tag="id" | en el html

para definir reglas comunes a varios selectores de forma conjunta, se escriben todos los selectores separados por una coma (,)
estas en lo correcto kseso? pero segun entendi el quiere reducir ese código...

frank_harbey12 intenta así, no es "tan" necesario que sigas tooooda la jerarquía:

Código CSS:
Ver original
  1. #mende a:hover,
  2. #meniz a:hover {/*propiedades comunes*/}
  #5 (permalink)  
Antiguo 06/04/2011, 12:06
 
Fecha de Ingreso: octubre-2010
Mensajes: 73
Antigüedad: 7 años, 1 mes
Puntos: 1
Respuesta: Fusionar ids

muchas gracias por las respuestas, Bloodshadow lamentablemente no puedo hacer eso ya que afectaria a los demas.

Este codigo que me da kseso?
Cita:
#mende ul li ul li a:hover, #meniz ul li ul li a:hover {/*propiedades comunes*/}
Esta bien, pero no habra una forma mas resumida? osea quitarle una linea de ul li ul li a:hover?

Agradezco su colaboración, por el momento utilizare la linea de kseso?
  #6 (permalink)  
Antiguo 06/04/2011, 13:07
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: Fusionar ids

Si tienes razon... pense q solo tenias la jerarquia div -> ul -> li -> a. dentro del div ese... pero si tenes mas elementos no podes hacerlo de otra forma :S
  #7 (permalink)  
Antiguo 06/04/2011, 14:02
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Fusionar ids

Pues como desconocemos el etiquetado contenido en cada #id y tampoco se ha mostrado muy preciso en cuanto a qué otros elementos no quiere afectar, lo lógico es que haga las reducciones oportunas en cada selector hasta hallar el punto óptimo de brevedad y especificidad:
Código CSS:
Ver original
  1. #mende a:hover {}
  2. #mende ul a:hover {}
  3. #mende ul ul a:hover {}
  4. #mende ul ul li a:hover {}
y lo mismo para el otro selector.

Otra vía es que asigne una clase a la lista (ul) de segundo nivel (para el ejemplo: ul.miclase):
Código CSS:
Ver original
  1. ul.miclase a:hover {}
Pero aquí ya entraría en juego el peso, especificidad, prevalencia o como quiera llamarlo respecto a otros selectores declarados.
  #8 (permalink)  
Antiguo 06/04/2011, 14:43
 
Fecha de Ingreso: octubre-2010
Mensajes: 73
Antigüedad: 7 años, 1 mes
Puntos: 1
De acuerdo Respuesta: Fusionar ids

Gracias por la aclaracion mira pongo mi codigo css de la lista y d elos menus:

Codigo General:
ul{margin:0px;list-style-type:none;padding:0}
ul li{position:relative;height:13%;width:100%}
ul li a{display:block;overflow:hidden}
ul li:hover > ul{display:block}
ul li img{width:95%;height:95%}
ul li ul{box-shadow: 0px 0px 5px #000 inset, 0px 0px 25px #000;position:absolute;width:250px;height: auto;top:0px;border-radius:5px;display:none;opacity:1;background:#fffb ff}
ul li ul li:hover{width:99%;border-radius:5px;background:#999;color:#000;border:solid 1px gray}
#mende ul li ul li a:hover, #meniz ul li ul li a:hover{margin:0px}

Codigo Menu izquierdo:
#meniz {float:left;margin-top:2%;margin-left:1%;height:92%;width:9%}
#meniz ul li a:hover{margin-right:-10px;margin-left:10px}
#meniz ul li ul {margin-left: 100% }

Codigo Menu derecho:
#mende {float:right;width:9%;height:92%;z-index:20;margin-top:2%}
#mende ul li a:hover{margin-right:10px;margin-left:-10px}
#mende ul li ul{margin-left:-255px;text-align:right}

Codigo Menu inferior:
#meninf{position:absolute;top:90%;left:45%;width:1 0%;height:8%;z-index:19}
#meninf ul li{height:100%}
#meninf ul li ul {margin-left:-50px;top:-50px;width:200px}

Agradesco su colaboracion.
  #9 (permalink)  
Antiguo 06/04/2011, 16:39
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: Fusionar ids

necesitamos el html donde quieres aplicar las jerarquías para ver si hay forma de optimizar el css... el css en si no lo podemos simplificar si no vemos el html ;)
  #10 (permalink)  
Antiguo 06/04/2011, 17:14
 
Fecha de Ingreso: octubre-2010
Mensajes: 73
Antigüedad: 7 años, 1 mes
Puntos: 1
Respuesta: Fusionar ids

Vale mira el codigo, solo copio el del menu izquierdo ya que es algo largo. y poreste medio no me deja mostrarlo todo, pero si deseas y no es molestia la pagina es esta http://frontwebos.web.officelive.com para que puedas ver todo el codigo html. de nuevo agradesco su colaboracion

<div id="meniz" >
<ul>
<!--OFFICE-->
<li><a title="Ofimatica"><img src="images/mi/officeonline.png" alt="Ofimatica" /></a>
<ul>
<li><a href="https://office.live.com/newlivedocument.aspx?xt=docx" title="Word" target="_blank" ><img src="http://officeimg.vo.msecnd.net/en-us/files/940/032/ZA101870038.jpg" class="subme" alt="Word" />Microsoft Word</a></li>
<li><a href="https://office.live.com/newlivedocument.aspx?xt=xlsx" title="Excel" target="_blank" ><img src = "http://officeimg.vo.msecnd.net/en-us/files/352/648/ZA101870031.jpg" class="subme" alt="Excel" />Microsoft Excel</a></li>
<li><a href="https://office.live.com/newlivedocument.aspx?xt=pptx" title ="Power point" target="_blank" ><img src = "http://officeimg.vo.msecnd.net/en-us/files/123/286/ZA101870037.jpg" class="subme" alt="powerPNT" />Microsoft PowerPoint</a></li>
<li><a href="https://office.live.com/newlivedocument.aspx?xt=one" title="OneNote" target="_blank"><img src = "http://officeimg.vo.msecnd.net/en-us/files/354/919/ZA101870032.jpg" class="subme" alt="OneNote" />Microsoft OneNote</a></li>
<li><a href="https://docs.google.com/" title="Google Docs" target="_blank"><img src = "http://docs.google.com/favicon.ico" class="subme" alt="Google Docs" />Google Docs</a></li>
</ul>
</li>
<!--Accesorios-->
<li><a title="Accesorios"><img src="images/mi/accesorios.png" alt="Accesorios" /></a>
<ul>
<li><a href="http://es.web2.0calc.com/" title="Calculadora" target="_blank" ><img src = "http://es.web2.0calc.com/favicon.ico" class="subme" alt="calc" />Calculadora</a></li>
<li><a href="http://www.online-convert.com/" title="Convierte Videos, Imagenes, sonidos a otros formatos" target="_blank"><img src="http://www.online-convert.com/favicon.ico" title="Convertidor" alt="Convertidor" class="subme" />Convertidor</a></li>
<li><a href="https://www.autocadws.com/" title="Ve tus documentos de Autocad sin necesidad de tenerlo instalado" target="_blank"><img src="https://www.autocadws.com/favicon.ico" title="AutocadWS" alt="AutoCad" class="subme" />AutoCAD</a></li>
<li><a href="https://wa103.teamviewer.com/login.aspx" title="Conectate remotamente" target="_blank"><img src="http://www.teamviewer.com/favicon.ico" title="TeamViewer" alt="TeamViewer" class="subme" />TeamViewer</a></li>
<li><a href="http://www.wikispaces.com" title="Crea tu Wiki para un grupo de trabajo" target="_blank"><img src="http://www.wikispaces.com/favicon.ico" title="WikiSpaces" alt="WikiSpaces" class="subme" />WikiSpaces</a></li>
<li><a href="http://www.songsterr.com/" title="El Guitar Pro on-line" target="_blank"><img src = "http://www.songsterr.com/favicon.ico" class="subme" alt="Songsterr" />Songsterr</a></li>
</ul>
</li>
<!--MAILS-->
<li><a title="e-Mail" ><img src="images/mi/mail.png" alt="e-Mails" /></a>
<ul>
<li><a href="http://mail.yahoo.com" title="Yahoo! Mail" target="_blank"><img src="https://login.yahoo.com/favicon.ico" class="subme" alt="Yahoo!" />Yahoo! Mail</a></li>
<li><a href="http://hotmail.com" title="Hotmail" target="_blank"><img src="http://mail.live.com/favicon.ico" class="subme" alt="Hotmail" />Hotmail</a></li>
<li><a href="http://gmail.com" title="Gmail" target="_blank"><img src="http://mail.google.com/favicon.ico" class="subme" alt="Gmail" />Gmail</a></li>
</ul>
</li>
<!--MAPAS-->
<li><a title="Mapas" ><img src="images/mi/map.png" alt="Mapas" /></a>
<ul>
<li><a href="http://www.bing.com/maps/" title="Bing Maps" target="_blank"><img src = "http://www.bing.com/maps/favicon.ico" class="subme" alt="BM" />Bing Maps</a></li>
<li><a href="http://maps.google.com/" title="Google Maps" target="_blank"><img src = "http://www.google.com/favicon.ico" class="subme" alt="GM" />Google Maps</a></li>
<li><a href="http://www.openstreetmap.org" title="OpenStreetMaps" target="_blank"><img src="http://www.openstreetmap.org/favicon.ico" class="subme" alt="OSV" />Open Street Maps</a></li>
<li><a href="http://maps.yahoo.com/" title="Yahoo! Maps" target="_blank"><img src = "https://login.yahoo.com/favicon.ico" class="subme" alt="Y!M" />Yahoo! Maps</a></li>
</ul>
</li>
<!--CALENDARIOS-->
<li><a title="Calendarios" ><img src="images/mi/calendarios.png" alt="Calendarios" /></a>
<ul>
<li><a href="http://www.google.com/calendar/" title="Calendario Google" target="_blank"><img src = "http://www.google.com/favicon.ico" class="subme" alt="GC" />Google Calendar</a></li>
<li><a href="http://calendar.live.com/" title="Calendario Windows Live" target="_blank"><img src = "https://login.live.com/favicon.ico" class="subme" alt="WLC" />Windows Live Calendar</a></li>
<li><a href="http://calendar.yahoo.com" title="Calendario Yahoo!" target="_blank"><img src = "https://login.yahoo.com/favicon.ico" class="subme" alt="yc" />Yahoo! Calendar</a></li>
</ul>
</li>
<!--ESTUDIO-->
<li><a title="Estudio" ><img src="images/mi/books.png" alt="Estudio" /></a>
<ul>
<li><a href="http://es.wikipedia.org" title="Wikipedia" target="_blank"><img src = "http://en.wikipedia.org/favicon.ico" class="subme" alt="W" />Wikipedia</a></li>
<li><a href="http://rincondelvago.com" title="Rincon del Vago" target="_blank"><img src = "http://www.rincondelvago.com/favicon.ico" class="subme" alt="RDV" />Rincon Del Vago</a></li>
<li><a href="http://www.senavirtual.edu.co/" title="Sena Virtual" target="_blank"><img src = "http://oficina.sena.edu.co/portal_2010/_pictures/favicon.ico" class="subme" alt="SV" />Sena Virtual</a></li>
<li><a href="http://www.aula365.com/default.aspx" title="Aula 365" target="_blank"><img src = "http://argentina.aula365.com/images/abj.ico" class="subme" alt="A365" />Aula 365</a></li>
<li><a href="http://www.monografias.com/" title="Monografias" target="_blank"><img src= "http://www.monografias.com/favicon.ico" class="subme" alt="Monografias" />Monografias</a></li>
<li><a href="http://www.mslatam.com/latam/technet/mva2/Home.aspx" title="Microsoft Virtual Academy" target="_blank"><img src = "http://www.microsoft.com/favicon.ico" class="subme" alt="MVA" />Microsoft Virtual Academy</a></li>
</ul>
</li>
<!--Almacenamiento Online-->
<li><a title="Almacenamiento Online"><img src="images/mi/dd.png" alt="Almacenamiento Online" /></a>
<ul>
<li><a href="http://skydrive.live.com" title="SkyDrive" target="_blank"><img src = "http://skydrive.live.com/favicon.ico" class="subme" alt="SD" />SkyDrive</a></li>
<li><a href="http://dropbox.com" title="DropBox" target="_blank"><img src = "https://www.dropbox.com/static/15556/images/favicon.ico" class="subme" alt="DB" />DropBox</a></li>
<li><a href="http://gigasize.com" title="Gigasize" target="_blank"><img src = "http://www.gigasize.com/favicon.ico" class="subme" alt="GS" />Gigasize</a></li>
<li><a href="http://megaupload.com" title="Megaupload" target="_blank"><img src = "http://wwwstatic.megaupload.com/images/icon.ico" class="subme" alt="MU" />Megaupload</a></li>
<li><a href="http://mediafire.com" title="Mediafire" target="_blank"><img src = "http://www.mediafire.com/favicon.ico" class="subme" alt="MF" />Mediafire</a></li>
<li><a href="http://rapidshare.com" title="Rapidshare" target="_blank"><img src = "http://images3.rapidshare.com/img/favicon.ico" class="subme" alt="RS" />Rapidshare</a></li>
</ul>
</li>
<!--TRADUCTORES-->
<li><a title="Traductores"><img src="images/mi/traductor.png" alt="Traductores" /></a>
<ul>
<li><a href="http://translate.google.com/" title="Google Translator" target="_blank"><img src = "http://translate.google.com/favicon.ico" class="subme" alt="GT" />Google Translator</a></li>
<li><a href="http://www.microsofttranslator.com/" title="Bing Transletor" target="_blank"><img src = "http://www.microsofttranslator.com/icon.ico" class="subme" alt="BT" />Bing Translator</a></li>
<li><a href="http://traductor.babylon.com/" title="Babylon" target="_blank"><img src = "http://www.babylon.com/favicon.ico" class="subme" alt="B" />Babylon</a></li>
</ul>
</li>
</ul>
</div>
  #11 (permalink)  
Antiguo 06/04/2011, 17:54
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: Fusionar ids

puts.... el firewall de donde trabajo no me deja al llegar a mi casa reviso si es q no te han contestado antes
  #12 (permalink)  
Antiguo 06/04/2011, 22:09
 
Fecha de Ingreso: octubre-2010
Mensajes: 73
Antigüedad: 7 años, 1 mes
Puntos: 1
Respuesta: Fusionar ids

ok men agradesco tu colaboracion

Etiquetas: divs, id's
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 05:48.