Foros del Web » Creando para Internet » CSS »

Contenedores diferentes con el mismo estilo

Estas en el tema de Contenedores diferentes con el mismo estilo en el foro de CSS en Foros del Web. Hola a todos Estoy creando mi pagina web en html5 y css3 y tengo una pequeña duda sobre los contenedores. He creado una div y ...
  #1 (permalink)  
Antiguo 28/11/2011, 08:30
 
Fecha de Ingreso: noviembre-2011
Mensajes: 5
Antigüedad: 12 años, 4 meses
Puntos: 0
Contenedores diferentes con el mismo estilo

Hola a todos

Estoy creando mi pagina web en html5 y css3 y tengo una pequeña duda sobre los contenedores.

He creado una div y le e asignado el estilo midiv, con los siguientes estilos:

.midiv{
position: absolute;
Background-color: black;
top: 200px;
Margin-right: 0px;
padding: 15px;
width: 300px;
Height: 500px;
}

Hasta aqui todo correcto, pero ahora quiero crear otro contenedor con los mismos estilos PERO con el "height (altura)" de 100px, ¿cual es la forma correcta de proceder? ¿crear una "id" y cambiar el tamaño de la div desde esta?
  #2 (permalink)  
Antiguo 28/11/2011, 08:43
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: Contenedores diferentes con el mismo estilo

Podés hacer esto

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-ar">
  3. <meta charset="utf-8" />
  4. <title>XHtml5</title>
  5.  
  6. <style type="text/css">
  7. /*<![CDATA[*/
  8. .midiv{
  9. position: absolute;
  10. Background-color: black;
  11. top: 200px;
  12. Margin-right: 0px;
  13. padding: 15px;
  14. width: 300px;
  15. Height: 500px;
  16. color: #FFF;
  17. }
  18.  
  19. .midivcien{
  20. Background-color: blue;
  21. Height: 100px;
  22. }
  23. /*]]>*/
  24. </head>
  25. <div class="midiv">
  26. A
  27. </div>
  28. <div class="midiv midivcien">
  29. B
  30. </div>
  31. </body>
  32. </html>

Le agregué un texto para que veas que la capa midivcien se sobrepone y oculta los 100 primeros pixeles de alto de la primer capa.
En tu ejemplo en particular, la 2ª capa, aunque parezca obvio, debe estar declarada en segundo lugar, si no vas a ver solo la primera, a menos que también les declares un z-index e inviertas la situación


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Última edición por emprear; 28/11/2011 a las 08:49
  #3 (permalink)  
Antiguo 28/11/2011, 10:51
 
Fecha de Ingreso: noviembre-2011
Mensajes: 5
Antigüedad: 12 años, 4 meses
Puntos: 0
Respuesta: Contenedores diferentes con el mismo estilo

Gracias por tu respuesta Emprear, en realidad quiero colocar la div en otra posicion de la pagina, pero tu explicación me sirve igualmente. ¿Este procedimiento es correcto para la validación de mi web en w3c? Estoy haciendo la web con html5 y css3


Muchas gracias!
  #4 (permalink)  
Antiguo 28/11/2011, 11:15
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: Contenedores diferentes con el mismo estilo

si estas posicionando con "absolute", tenes que ubicarlas con las propiedades
top (posicion vertical)
left (horizontal respecto del margen izquierdo del body)

Con respecto de la validación, preocupate fundamentalmente de lo que valide sea tu html. Por el css, dado de que todavía hay muchos atributos propietarios de los diferentes navegadores, no me preocuparía tanto, ejemplo
Firefox utiliza para ciertas propiedades el prefijo
-moz
safari y Chrome
-webkit
Eso te generaría errores y advertencias de css, pero de todas formas el css se ejecutaría correctamente, pero no hay confundir eso con cosas como
border; 3px solid #FFF; --> despues de border iría : no ;
ó
outline: overflow; --> overflow no existe como valor de outline
que decididamente son errores

Podés validar el Css para verificar la sintáxis correcta, pero no hacer tanto caso de las advertencias que enumeré en primer lugar

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 29/11/2011, 03:59
 
Fecha de Ingreso: noviembre-2011
Mensajes: 5
Antigüedad: 12 años, 4 meses
Puntos: 0
Respuesta: Contenedores diferentes con el mismo estilo

Gracias por todo, a sido de gran ayuda ;) .

Etiquetas: contenedores, estilo, html, tamaño, fondo
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:13.