Dudas sobre "id" y "class"

Citar

Escrito el 18 Nov 2011 06:05 pm

Que tal, tengo un par de dudas sobres estos tags, y les agradeceria su ayuda para resolverlas,
temgo una div que recibe ciertas instrucciones de un archivo php que toma el "id" para mostrar sus resultados en esa div en particular, pero al mismo tiempo esa misma div tiene un "class" que es el que uso global para varias divs por que todas deben lucir con ese estilo, ahora mi problema es que por alguna razon la div no ecibe la informacion que le estoy introduciendo y tal parece que no es mi funcion que carga la info, ¿Será que tener "class" e "id" al mismo tiempo esta afectando de algun modo?

Por kitsunekei1

86 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 18 Nov 2011 10:29 pm

En principio no, pero al no contar con el código fuente relevante es imposible decirlo.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 19 Nov 2011 01:41 am

No se si deba ponerlo todo pero aqui esta, te agradezco tu tiempo y espero alguien pueda ayudarme por que ya llevo mucho tiempo atorado con eso.

Código HTML :

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
#line{ background-image:url(imagenes/line.jpg);
      background-repeat: repeat;
      height: 1px;
      width: 100%;
   }
</style>
      <link rel="stylesheet" href="CSS1/directorio-CSS.css" type="text/css" media="screen" />
       <link rel="stylesheet" href="CSS1/ui/south-street/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" />   

      <script type="text/javascript" src="JS/ui/jquery-1.6.2.min.js"></script>
      <script type="text/javascript" src="JS/ui/jquery-ui-1.8.16.custom.min.js"></script>
      <script type="text/javascript" src="JS/prueba.js"></script>

<script type="text/javascript"> 
    
   function getUrlVars()
         {
            var vars = [], hash;
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            for(var i = 0; i < hashes.length; i++)
            {
               hash = hashes[i].split('=');
               vars.push(hash[0]);
               vars[hash[0]] = hash[1];
            }
            return vars;
         }
         $(function() {
            var id = getUrlVars()["id"];
            if(id==undefined)
            {
               id=<?php echo json_encode($_POST); ?>["id"];
               if(id==undefined)
                  return;
            }
            $.post("php/empleado.funcs.php";
            { action:'selectbyid', id: id}; 
               alert(d.nombre);
               function(d) {
                  /**/
                  $("#lbl_nombrec").html(d.nombre);
                  $("#lbl_tels").html("<br/>"+d.tel1);
                  $("#lbl_tels2").html(d.tel2);
                  $("#lbl_email").html('<a href="mailto:'+d.email+'">'+d.email+'</a>');
                  $("#lbl_puesto").html(d.puesto);
                  $("#lbl_cv_estudios").html("<p>" + d.estudios + "</p>");
                  $("#lbl_cv_area").html(d.area);
                  $("#lbl_cv_exp").html(d.exp);
                  $("#lbl_psto_nombre").html("<p>" + d.puesto + "</p>");
                  $("#lbl_psto_funciones").html("<p>" + d.funciones + "</p>");
                  $("#lbl_psto_escolaridad").html("<p>" + d.escolaridad + "</p>");
                  $("#lbl_psto_experiencia").html("<p>" + d.experiencia + "</p>");
                  $("#lbl_atribuciones").html(d.atribuciones);
                  $("#img_foto").attr( "src", "img/dir/"+d.codigo+".jpg" );
                  $("#lbl_psto_fun").html(d.fun);
                  /**/
//                  $("#query").html("<pre>"+d.atribuciones+"</pre>");
            },'json');
         });   
                  
      </script>
</head>

<body>
<div style="background-color:#FFF;">
<div class="body" align="center">
<table width="0" border="0" cellspacing="0" cellpadding="0">
<tr>
   <td colspan="2" align="center">
       <div class="header" id="lbl_psto_fun">Dirección General del Proyecto Metro del Distrito Federal</div>
    </td>
</tr>
  <tr>
    <td><table width="0" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td class="logo"><div id="logo"><img src="imagenes/logo-gdf.png" /></div></td> </tr>
      <tr align="center">
        <td align="center"><div id=foto> <img id="img_foto" width="122" onerror='$("#img_foto").attr( "src", "imagenes/none.png" )'></div></td>
      </tr>
      <tr>
         <td style=" padding-top:1em; padding-left:1em; padding-right:1em;" valign="bottom"><div align="center" style="padding-top:1em;">
        <button id="button">Más información...</button></div></td>
      </tr>
    </table>
    </td>
    <td>
    <table width="0" border="0" cellspacing="0" cellpadding="0" id="info">
      <tr>
        <td class="nombre" id='lbl_nombrec'></td>
      </tr>
       <tr>
             <td>  <> </td>
       </tr>
      <tr>
        <td class="text"> Av. Universidad 800. <br /> Col. Santa Cruz Atoyac. <br /> Delegación Benito Juárez <br /> C.P. 03310. </td>
      </tr>
      <tr>
        <td class="text" id='lbl_tels'></td>
      </tr>
      <tr>
        <td class="text" id="lbl_tels2"></td>
      </tr>
      <tr>
        <td class="text" id="lbl_email"></td>
      </tr>
    </table></td>
  </tr>
</table>
</div>
<div>

      <link type="text/css" href="css/south-street/jquery-ui-1.8.16.custom.css" rel="stylesheet" />   
      <script type="text/javascript">
         $(function(){

            // Accordion
            $("#accordion").accordion({ header: "h3" });
            
            //hover states on the static widgets
            $('#dialog_link, ul#icons li').hover(
               function() { $(this).addClass('ui-state-hover'); }, 
               function() { $(this).removeClass('ui-state-hover'); }
            );
            
         });
      </script>
      <style type="text/css">
         /*demo page css*/
         body{ font: 62.5% "Trebuchet MS", sans-serif; margin: auto;}
         .demoHeaders { margin-top: 2em; }
         #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
         #dialog_link span.ui-icon {margin: auto;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
         ul#icons {margin: auto; padding: 0;}
         ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
         ul#icons span.ui-icon {margin: auto}
      </style>
        <div id="lbl_atribuciones">oipoipoipoipoipiopo</div>   
    <div id="accordion">
     <div>
            <h3><a href="#">Atribuciones</a></h3>
            <div class="texto" id="lbl_atribuciones"></div>
     </div>
         <div>
            <h3><a href="#">Curriculum</a></h3>
            <div>
                <div class="titulo">Nivel máximo de estudios:</div>
               <br />
                <span class="texto" id="lbl_cv_estudios"></span>
               <br /> 
               <br />
                 <div class="titulo">Áreas de conocimiento:</div> 
               <br />
                    <span class="texto" id="lbl_cv_area"></span>
               <br />
               <br />
                 <div class="titulo">Experiencia laboral:</div>
                  <br />
                    <span class="texto" id="lbl_cv_exp"></span>
               <br />
               <br />
                </div>
         </div>
         <div>
            <h3><a href="#">Perfil de puesto</a></h3>
            <div>
                <div class="titulo">Nombre del puesto:</div>
                   <br />
                    <span class="texto" id="lbl_psto_nombre"></span>
                   <br />
                   <br />
                 <div class="titulo">Objetivo y funciones del puesto:</div>
                   <br />
                    <span class="texto" id="lbl_psto_funciones">  nanananananan </span>
                   <br />
                   <br />
                <div class="titulo">Escolaridad y/o áreas de conocimiento:</div>
                   <br />
                    <span class="texto" id="lbl_psto_escolaridad"></span>
                   <br />
                   <br />
                <div class="titulo">Experiencia laboral requerida:</div>
                   <br />
                    <span class="texto" id="lbl_psto_experiencia"></span>
                   <br />
                   <br />
                </div>
         </div>     
      </div>
          <div>
            <p>beastboy</p>
    </div>
      </div>
</div>
</div>
</body>
</html>

Por kitsunekei1

86 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 19 Nov 2011 12:47 pm

No debías ponerlo todo y de hecho no has puesto todo porque no está el fuente de los CSS y por lo tanto sigue siendo imposible saber qué sucede.

La próxima vez, pon un link a la página en cuestión.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 19 Nov 2011 07:20 pm

kitsunekei1, podes usar las opciones del editor para elegir las opciones para postear codigo

Por Mariux

BOFH

7756 de clabLevel

28 tutoriales
15 articulos

Genero:Femenino Héroes Editores

Envíale un mensaje privado Web

Diseñadora & ilustradora

@Mariux

Citar

Escrito el 21 Nov 2011 10:32 pm

Hola, realmente sin ver el codigo no podemos ayudarte mucho. Pero a simple vista y por lo que planteas puede ser que haya un error en la programacion de la variable que asigna el codigo CSS si esta clase se carga dinamicamente por medio de una variable en PHP.
Lo que si una etiqueta (x)html puede soportar ambos modificadores tanto un id como un class sin solaparse (entrar en conflicto) uno con el otro siempre y cuando la hoja de estilos estee bien codificada y no haya etiquetas css que se contradigan, si por ejemplo declaras para el id un color de letra y despues para el class otro, hay puede haber un conflicto, aunque se resolveria siempre por la filosofia CSS, que el ultimo es el que predomina sobre los anteriores, osea que si primero tienes declarado un id y despues un class, los valores del class ''teoricamente'' y dependiendo del browser en el que esteemos navegando, deberian hacerle caso a los valores de class ya que fue la ultima en ser declarada y leida por el browser.

Si deseas mas info sobre Diseño de Páginas Web, puedes visitar http://www.disenodepaginasweb.net.ve

Por Kiko Narvaez

2 de clabLevel

Envíale un mensaje privado Email Web

Diseño Paginas Web

@disenopagweb

Citar

Escrito el 22 Nov 2011 04:16 pm

Muchas gracias por su tiempo, el "id" solo sirve para recibir las instrucciones de la funcion jquery que tiene incluiedo el codigo, mientras el atributo "class" es el que da los estilos, pero por eso me surgio la duda, por que el id no proporciona ningun estilo, pero mis etiquetas <span> no reciben las instrucciones de la funcion javascript.

Por kitsunekei1

86 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 23 Nov 2011 06:28 am

El id sirve para hacer referencia a un elemento en especifico, y el class es para darle estilos a varios elementos, un id puede tener un class... tanto el id como el class pueden diferentes atributos te dejo un pequeño tuto sobre selectores espero te sirva! saludos!

Víc!

http://htmlhelp.com/es/reference/css/structure.html

Por vicoy

7 de clabLevel

Envíale un mensaje privado

@vicoysito

Dudas sobre "id" y "class"

Escribe una respuesta rapida