Foros del Web » Creando para Internet » CSS »

Marco rectangular con css

Estas en el tema de Marco rectangular con css en el foro de CSS en Foros del Web. Hola a tod@s, me gustaría realizar un marco rectangular con capas pero o consigo completarlo. Lo tengo casi terminado, a falta del lado derecho pero ...
  #1 (permalink)  
Antiguo 06/01/2011, 06:11
 
Fecha de Ingreso: noviembre-2005
Ubicación: Alicante (España)
Mensajes: 242
Antigüedad: 19 años
Puntos: 1
Marco rectangular con css

Hola a tod@s,

me gustaría realizar un marco rectangular con capas pero o consigo completarlo. Lo tengo casi terminado, a falta del lado derecho pero no me aclaro muy bien. Este es mi css y mi código:

CSS

#capa_add {
width: 235px;
height: 150px;
background-color="#FFFFFF";
}

#capa_margen_horizontal {
width: 100%;
height: 15px;
background-color="#9EA6A9";
}

#capa_margen_vertical_izquierdo{
width: 15px;
height: 100%;
background-color="#9EA6A9";
float: left;
}

#capa_margen_vertical_derecho{
width: 15px;
height: 100%;
background-color="#9EA6A9";
float: right;
}

#capa_interior{
width: 100%;
height: 120px;
background-color="#FFFFFF";
}


Código html

<div id="capa_add">
<div id="capa_margen_horizontal"></div>
<div id="capa_interior">
<div id="capa_margen_vertical_izquierdo"></div>
<div id="capa_margen_vertical_derecho"></div>
</div>
<div id="capa_margen_horizontal"></div>
</div>



¿Cómo hago para dibujar algo en el interior del marco sin romperlo?
Me gustaría introducir un par de botones en el interior sin que se rompa el marco.
Sería algo como un marco gris con dos botones en el centro alineados verticalmente. LLevo dos horas y no lo consigo porque se me rompen los márgenes ;(

Última edición por Tarzan; 06/01/2011 a las 06:36
  #2 (permalink)  
Antiguo 06/01/2011, 07:54
 
Fecha de Ingreso: noviembre-2005
Ubicación: Alicante (España)
Mensajes: 242
Antigüedad: 19 años
Puntos: 1
Respuesta: Marco rectangular con css

Vale, creo que lo he conseguido pero,

¿Alguien puede decirme por qué la capa no respeta el alto de 15 pixeles?

<div style = "display: table; width: 220px; height: 150px; background-color:red;">
<div style = "float: left; height: 150px; width: 15px; background- color:grey;"></div>
<div style = "float: left; width: 190px; height: 150px; background-color:blue;">
<div style = "height: 15px; width: 190px; background-color:grey;"></div>
<div style = "height: 120px; width: 190px; background-color:yellow;"></div>
<div style = "height: 15px; width: 190px; background-color:grey;"></div>
</div>
<div style = "float: right; height: 150px; width: 15px; background-color:grey;"></div>
</div>


Si pegais el código en un html, veréis que no encaja bien porque pilla el alto de las capas en gris con 18 pixeles cuando le estoy especificando 15.

¿Alguien sabe por qué?
  #3 (permalink)  
Antiguo 06/01/2011, 11:54
 
Fecha de Ingreso: octubre-2010
Mensajes: 136
Antigüedad: 14 años
Puntos: 4
Respuesta: Marco rectangular con css

No entiendo bien lo que dices...ya lo monte en un html, use un inspector de codigos y el tamaño es de 15px...
  #4 (permalink)  
Antiguo 06/01/2011, 19:37
 
Fecha de Ingreso: noviembre-2005
Ubicación: Alicante (España)
Mensajes: 242
Antigüedad: 19 años
Puntos: 1
Respuesta: Marco rectangular con css

Pues no lo entiendo,

ése mismo código lo pego en un html, lo abro con el IE 8 y me marca que los márgenes horizontales tienen 18 pixeles en lugar de 15.

¿Es posible que sea por la resolución?

Tengo 1280x1024.

No sé qué otra cosa puede ser... pero os aseguro de que, a pesar de que viene especificado que sean de 15, me salen con 18 pixeles ;(
  #5 (permalink)  
Antiguo 06/01/2011, 22:28
 
Fecha de Ingreso: noviembre-2010
Ubicación: On a world of Anime & Web.
Mensajes: 137
Antigüedad: 14 años
Puntos: 4
Respuesta: Marco rectangular con css

no tengo ni la minima ni absoluta idea de lo que quereis lograr.

Porque mejor lo haces en photoshop y nos enseñas una imagen de lo que quieres lograr.

Y para empezar teneis un error:
Cita:
<div style = "display: table; width: 220px; height: 150px; background-color:red;">
<div style = "float: left; height: 150px; width: 15px; background- color:grey;"></div>
<div style = "float: left; width: 190px; height: 150px; background-color:blue;">
<div style = "height: 15px; width: 190px; background-color:grey;"></div>
<div style = "height: 120px; width: 190px; background-color:yellow;"></div>
<div style = "height: 15px; width: 190px; background-color:grey;"></div>
</div>
<div style = "float: right; height: 150px; width: 15px; background-color:grey;"></div>
</div>
background- color:grey

no le pongas espacio entre el - y el color
que quede asi:

background-color:grey
  #6 (permalink)  
Antiguo 07/01/2011, 13:44
 
Fecha de Ingreso: diciembre-2010
Ubicación: en el fin del mundo
Mensajes: 199
Antigüedad: 13 años, 11 meses
Puntos: 3
Respuesta: Marco rectangular con css

Cita:
¿Cómo hago para dibujar algo en el interior del marco sin romperlo?
Me gustaría introducir un par de botones en el interior sin que se rompa el marco.
Sería algo como un marco gris con dos botones en el centro alineados verticalmente. LLevo dos horas y no lo consigo porque se me rompen los márgenes ;(
Marco gris??
Entonces para que aplicas miles de colores más?

Puedes hacer un div poniendole un border de xx pixeles de ancho, solid y un color gris.
y metes los botones dentro.

Dberias explicarte un poco mejor, que no logro comprender al100
  #7 (permalink)  
Antiguo 14/01/2011, 12:24
 
Fecha de Ingreso: noviembre-2005
Ubicación: Alicante (España)
Mensajes: 242
Antigüedad: 19 años
Puntos: 1
Respuesta: Marco rectangular con css

Los colores los utilizo para delimitar el tamaño de las capas y ver hasta donde llegan. ;)

He seguido vuestro consejo y utilizado un border de 15pixeles solid de color blanco, ahora me pasa lo siguiente.

Si la capa es

.capa {
width:528px;
border: 15px solid white;
background-color:yellow;
}

en Internet Explorer me pinta una capa de 413pixeles en amarillo y un borde de 15 blanco pero en Mozilla me pinta una capa de 528 pixeles amarillo y 15 blanco, es decir una capa de 543!! y se me descuadra todo.

¿Por qué IE mantiene el tamaño a 528 y rellena el borde en esos 528 y mozilla se lo suma?

¿Cómo lo arreglo?
  #8 (permalink)  
Antiguo 17/01/2011, 03:43
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 22 años, 4 meses
Puntos: 361
Respuesta: Marco rectangular con css

Hola:

Léete el capítulo 4 (Modelo de cajas) de www.librosweb.es

La forma de solucionarlo es utilizando los comentarios condicionales de IE.

Saludos.

  #9 (permalink)  
Antiguo 18/01/2011, 06:22
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 10 meses
Puntos: 36
Respuesta: Marco rectangular con css

Seguramente no estás usando DOCTYPE.
Si declaras el tipo de documento con algo como

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

el borde se añade al tamaño que ya has dado con width. Funcionará también en explorer.

Etiquetas: marco
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 18:01.