Entrar

¿Qué problema puede haber si dos o más DIV tienen el mismo id?

gussiglo21 · · Solicitar retirada
Estimados, me ha surgido una duda que quizá sea una tontería.

Estoy haciendo la maquetación con varias divs dentro de una div general.

Siguiendo las indicaciones de las distintas lecciones del curso de comocreartuweb, en la CSS creé algunas clases, por ejemplo:
#DIV_1-2 {width:460px; float:left; background-color:white; border: 0px; text-align: left;
margin-top: 0px; margin-bottom: 10px; margin-left: 0px; margin-right: 3px; }
#DIV_1-3 {width:310px; float:left; background-color:white; border: 0px; text-align: left;
margin-top: 0px; margin-bottom: 10px; margin-left: 0px; margin-right: 3px; }

Con estas dos clases genero DIVs que me permiten hacer 2 columnas o 3 según el caso porque prácticamente dejé de usar tablas, por fin!!!!! :).

El diseño va quedando bien y con el código bastante limpio, pero mi duda es la siguiente:

Cuando uso la "#DIV_1-3" varias veces para crear 3 columnas, las 3 divs quedan con el mismo id.

También pasa lo mismo cuando uso la clase "#DIV_IMAGEN", que uso para introducir pequeñas DIVs con iconos o imágenes.
Al usar varias, todas quedan con el mismo id.
Si les cambio el id dejan de corresponderse con la clase definida en el CSS.

¿Usar varias DIV con el mismo id puede ser un problema para el SEO o puede provocar algún otro problema?

Muchas gracias!!!!!
GusSiglo21
johnpeterjp · · Solicitar retirada
Este nuevo mundo que descubres, esta encaminado a ordenar el lenguaje, unificar procesos y procedimientos. Bajo ese concepto lo apropiado es que nombres a cada div de manera independiente, salvo las que se van a comportar iguales entre si, ese es el único problema que presentaría tu diseño si tienen el mismo nombre, que un cambio que hagas va afectar a todas las de mismo nombre. Saludos.
SuperHipo · · Solicitar retirada
Hola Gus,

Dentro de una misma página NO DEBE HABER MÁS DE UN ELEMENTO CON LA MISMA ID.

Si vas a dar el mismo estilo a dos o más elementos usa las CLASES pero no dos id iguales. La "id" debe identificar a un elemento exclusivamente dentro de una página (no dentro del sitio web, ojo... dentro del sitio es posible que coincida algún id... suele pasar mucho con formularios para enviar datos por post).

Un saludo Gus.
gussiglo21 · · Solicitar retirada
Gracias Johnpeter, SuperHipo y Spitfire por sus consejos.

La única duda que me queda es entonces por qué en el curso que da CómocreartuWeb utiliza los estilos con "#........" para dar formato a las DIVs
como en el ejemplo que da en la lección 2.
Allí él no utiliza clases sino estilos como los siguientes:

#cabecera {background-color:pink;}
#navegacion {background-color:gray;}
#contenido {background-color:orange;}
#pie {background-color: brown;}

y luego en el HTML :
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">Esta será la zona principal de la web</div>
<div id="pie">Este es el pié de página</div>
</body>
</html>

Es verdad que allí crea secciones (DIV) diferentes una de la otra.
Entonces mi pregunta es qué conviene hacer si por ejemplo tengo DIVs que contienen una imagen nada más y uso varias para adornar en la misma página.
¿Debo cambiar lo que hice como Estilo ("#.......") a CLASE (" . nombredeclase..") ?
De esta manera podría sí tener cada div con su id único pero deberìa cambiar varias cosas ahora con casi todo ya hecho [:(].
Si pueden, ¿qué me recomiendan?
Muchas gracias!
Un saludo grande!
GusSiglo21
SuperHipo · · Solicitar retirada
Fíjate Gus que usa #cabecera, #navegacion, ... para refereirse a las "id" de estos bloques pero SOLO HAY UNO QUE SE LLAME ASÍ.

Si quisieras usar varios bloques con el mismo estilo pues usarías clases. Por ejemplo:

<div id="cabecera" class="clase1"></div>
<div id="navegacion" class="clase1"></div>
<div id="contenido" class="clase1"></div>
<div id="pie" class="clase1"></div>

En este caso todos los bloques heredan el estilo de la clase "clase1" y además tendrían el que les hubieras creado particularmente para cada una de sus "id".

Espero que te sirva y se te aclare un poco la cosa :)

Un saludo Gus.
gussiglo21 · · Solicitar retirada
Va aclarando va aclarando SuperHipo [:D]
muchas gracias!!!!!! y muchas gracias a todos!!

Saludos!
GusSiglo21
GABRIEL300487 · · Solicitar retirada
Saludos Habitante y gracias por tu respuesta.
Pense que esa podría ser la solución a mi problema, pero como nunca había usado el tag inframe pues pensé que podía solo colocar el script entre ellos y con eso bastaba, pero ya veo que tengo que guardarlo como una hoja html cada uno y ya desde ahí cargarlos al blog.
Pues lo probaré y les comento como funciona.

Edito: Funcionó muy bien, gracias.

Edito 2: Ahora me surgió un problema, resulta que en chrome no se visualizan bien los inframe, por alguna razón ni el objeto flash ni el nombre de la cancion se ve. Espeor que alguien pueda auxiliarme en esto, ya que casi la mitad de mis visitas usan ese navegador.
GABRIEL300487 · · Solicitar retirada
Saludos Skaparate, gracias por responder.

Me llamó mucho la atencion el codigo que utilizaste, me puse a leer un poco acerca de él.
Este codigo que colocas por desgracia no funcionó, no se a que se deberá, pero a loq ue alcanzo a comprender de las pruebas que hice, es que al tener en la variable un <script> algo sale mal.
Me has orientado algo y seguirpe haciendo pruebas, dejo el link donde coloqué tu codigo a la mejor no lo hice bien.
http://zerosubspruebas.blogspot.mx
skaparate · · Solicitar retirada
Ojo con las comillas! Fíjate, en mi código aparecen comillas simples (') envolviendo el código, mientras que en el tuyo (en tu sitio) envuelves en comillas dobles el código que ya estaba envuelto.

La primera parte del código yo la pondría en el <head> en lugar de donde quieres que aparezca.
skaparate · · Solicitar retirada
@Gabriel:

Primero que nada, disculpa por no responder antes, pero la verdad es que muchas veces veo que hay mensajes nuevos, los leo y luego me llaman por asuntos de trabajo, cierro la página y olvido que tenía que responder, así que espero me disculpes.

En cuanto al problema, utiliza la librería jQuery:

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script>
    jQuery(document).ready(function($) {
      $('button.emisora').click(function(e) {
        e.preventDefault();
        var id = $(this).prop('id');
        $('#radio-content').load('radios.html #radio-' + id);
      });
    });
</head>
<body>
<div id="radios">
  <button id="blaze" class="emisora">Blaze</button><button id="rakuen" class="emisora">Rakuen</button>
  <div id="radio-content"></div>
</div>
</body>

radios.html
<div id="radio-blaze">
<!-- Aquí pones los scripts para blaze -->
</div>
<div id="radio-rakuen">
<!-- Aquí los scripts para la radio Rakuen -->
</div>

Espero que te sirva :)
GABRIEL300487 · · Solicitar retirada
Saludos skaparate agradesco mucho tus respuestas y no te preocupes que no eres el único al que se le olvidan los temas XD.
Bueno pues al final de cuentas he logrado hacerlo, resulta que el problema estaba en donde alamacenaba los archivos, Google drive no me permitía ver los Iframes, he cambiado a Dropbox los archivos y se ven perfectamente tanto en Firefox, como en Chrome. Aunque aun algo no queda como quiero en chrome, y es que al seleccionar la emisora el boton desaparece, checaré ese codigo que me pasaste y te comentaré, veo que usa JQuery, asi que debe dar menos problemas y puede servirme para más cosas en la pagina.