Foros del Web » Creando para Internet » CSS »

Preguntas basicas CSS

Estas en el tema de Preguntas basicas CSS en el foro de CSS en Foros del Web. Hola Amigos. Tengo dos dudas y espero que me puedan ayudar: 1.-Cuando usar clases u cuando usar ID en un Div? Es decir por que ...
  #1 (permalink)  
Antiguo 04/06/2012, 21:08
 
Fecha de Ingreso: junio-2011
Mensajes: 14
Antigüedad: 12 años, 9 meses
Puntos: 2
Exclamación Preguntas basicas CSS

Hola Amigos.

Tengo dos dudas y espero que me puedan ayudar:

1.-Cuando usar clases u cuando usar ID en un Div?

Es decir por que usar una y por que usar otra, lo que sucede es que dentro de un div deseo poner una botonera pero los botones se acomodan en vertical y no en horizontal como los deseo mi ID que aplico al div es:

Código HTML:
#menu{ width:976px; height:30px; border:solid; float:left; position:relative;}
2.-Como posicionar un div dentro de una pagina. ya que se enciman o se sobre ponen?

Como veran soy novato y ofrezco disculpas por mi ignorancia.

Sin mas Gracias!!!

  #2 (permalink)  
Antiguo 04/06/2012, 23:29
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: Preguntas basicas CSS

1) Si determinado elemento ha de ser usado una sola vez, usa un identificador unico, si por el contrario necesitas usarlo más de una vez, usa clases.
  • Destacar que css no penaliza por usas identificadores duplicados, pero es una buena práctica usar identificadores únicos: es decir, usar una id distinta y única por cada etiqueta html.
  • ¿Por que?: bien una respuesta podría ser que html, css y javascript estan muy relacionados entre sí y una forma muy habitual en javascript de acceder a los elementos es mediante el método "getElementById()" el cual nos proporciona un acceso directo a el elemento que posea ese id, si esta se encuentra duplicada accederá al primer elemento e ignorará al resto.
  • Es para mantener esta integridad entre lenguajes que es aconsejable usar identificadores únicos: Para comprender en profundidad este concepto te será util leer sobre "modelo de objeto de documento", "document object model" o simplemente "dom" que es la forma en la cual los navegadores interpretan/renderizan el html creando un modelo o "api" de objetos (nodos) la cual está disponible para javascript y otros lenguajes.
Cita:
por que usar una y por que usar otra
  • No se trata de usar una u otra, puedes usar ambas al mismo tiempo. Según lo que hagas te hará falta un id o un class, o ambos. Destacar que el atributo html class permite una lista de palabras separadas por espacios, es decir, múltiples clases.
Veamos esto que dijimos pero a través de un ejemplo:
Código HTML:
Ver original
  1. <p id="parrafo">lorem ipsum</p> <!-- JS solo afecta a este parrafo -->
  2. <p id="parrafo">dolor amet</p>
  3. <p id="p3" class="parrafo">párrafo 3</p>
  4. <p id="p4" class="parrafo negritas">párrafo 4</p>
  5. <span class="negritas">negrita</span>
Código CSS:
Ver original
  1. #parrafo{
  2.     color:cornflowerBlue;
  3. }
  4. .parrafo{
  5.     color:crimson;
  6. }
  7. .negritas{
  8.     font-weight:bold;
  9. }
Código Javascript:
Ver original
  1. window.onload = function(){
  2.     //con id duplicada: solo afecta al primer parrafo
  3.     document.getElementById("parrafo").innerHTML = "texto nuevo";
  4.     //con id unica:
  5.     document.getElementById("p3").innerHTML = "el tercero";
  6.     document.getElementById("p4").innerHTML = "el cuarto";
  7. }
2) Apilar capas en css es una tarea que requiere comprender dos cosas: la propiedad z-index y los tipos de posicionamiento disponibles (y su incidencia en el flujo de documento).
Si prescindieramos de z-index, "#aves" no se hubicaría entre "#cielo" y "#universo" porque "por flujo" está por encima de "#universo", entonces como arreglamos esto: dando valores a la propiedad z-index, los cuales pueden ser negativos o positivos. Usamos un contenedor relativo para que las cotas de los hijos absolutos dependan de su posición y no de body, en el link que te pasé, está muy bien explicado.
Para ser más claros veamos esto nuevamente con un ejemplo:

Código HTML:
Ver original
  1. <div id="wrap">
  2.     <p class="capas" id="tierra">tierra</p>
  3.     <p class="capas" id="cielo">cielo</p>
  4.     <p class="capas" id="universo">universo</p>
  5.     <p class="capas" id="aves">v v v v v v v v v v v v v v v v v v v v v v v v v v v v v vv v v v</p>
  6. </div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
Código CSS:
Ver original
  1. #wrap{
  2.     width:300px;
  3.     height:300px;
  4.     background:beige;
  5.     overflow:hidden;
  6.     position:relative;
  7. }
  8. .capas{
  9.     padding:10px;
  10.     width:180px;
  11.     height:180px;
  12.     position: absolute;
  13. }
  14. #tierra{
  15.     background:peru;
  16.     top: 0;
  17.     left:0;
  18.     z-index: 0;
  19. }
  20. #cielo{
  21.     background:skyBlue;
  22.     top: 33px;
  23.     left:33px;
  24.     z-index: 1;
  25. }
  26. #universo{
  27.     background:black; color:whitesmoke;
  28.     top: 100px;
  29.     left:100px;
  30.     z-index: 3;
  31. }
  32. #aves{
  33.     font-weight:bold;
  34.     color:white;
  35.     outline: 2px dotted yellow;
  36.     font-size:2em;
  37.     top: 66px;
  38.     left:66px;
  39.     z-index: 2;
  40. }

Aquí los ejemplos funcionando. espero te haya sido útil. Saludos.

Última edición por cristian_cena; 04/06/2012 a las 23:38

Etiquetas: preguntas, basicos
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 11:45.