Contenedores diferentes con el mismo estilo

carlesventa · #1 (**permalink**) 28/11/2011, 08:30

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?

emprear · #2 (**permalink**) 28/11/2011, 08:43

Podés hacer esto

Código HTML:

Ver original<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-ar">
<head>
<meta charset="utf-8" />
<title>XHtml5</title>
 
<style type="text/css">
/*<![CDATA[*/
.midiv{
 position: absolute;
 Background-color: black;
 top: 200px;
 Margin-right: 0px;
 padding: 15px;
 width: 300px;
 Height: 500px;
 color: #FFF;
 }
 
 .midivcien{
Background-color: blue;
Height: 100px;
}
/*]]>*/
</style>
</head>
<body>
<div class="midiv">
A
</div>
<div class="midiv midivcien">
B
</div>
</body>
</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

carlesventa · #3 (**permalink**) 28/11/2011, 10:51

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!

emprear · #4 (**permalink**) 28/11/2011, 11:15

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

carlesventa · #5 (**permalink**) 29/11/2011, 03:59

Gracias por todo, a sido de gran ayuda ;)

.