Foros del Web » Creando para Internet » CSS »

Problemas con cajas en css

Estas en el tema de Problemas con cajas en css en el foro de CSS en Foros del Web. Hola a todos. Tengo un problema con css, tengo una página en la cual emplee un efecto que encontré en una página usando una imágen ...
  #1 (permalink)  
Antiguo 06/02/2010, 14:34
Avatar de venom_mau  
Fecha de Ingreso: julio-2009
Mensajes: 152
Antigüedad: 8 años, 4 meses
Puntos: 2
Problemas con cajas en css

Hola a todos.

Tengo un problema con css, tengo una página en la cual emplee un efecto que encontré en una página usando una imágen con bordes redondeados, pero al aplicarlo, la imagen se muestra con fondo de otro color, uso imagenes con extension .gif, y usé imagenes .jpg pero el resultado es el mismo, como podrán ver en la página:

http://www.freewebs.com/crmzumpango/

Si necesitan el código, lo muestro:
Este es el css:
Código:
BODY {
	SCROLLBAR-FACE-COLOR: #1d537f; FONT-SIZE: 11pt; BACKGROUND: url(fondo.png); SCROLLBAR-HIGHLIGHT-COLOR: #fff; SCROLLBAR-SHADOW-COLOR: #1d537f; COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #fff; SCROLLBAR-ARROW-COLOR: #fff; SCROLLBAR-TRACK-COLOR: #dbeaf1; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; SCROLLBAR-DARKSHADOW-COLOR: #1d537f; TEXT-ALIGN: justify
}
#encabezado {
	PADDING-RIGHT: 50px; DISPLAY: inline; PADDING-LEFT: 50px; PADDING-BOTTOM: 50px; MARGIN: 20px; WIDTH: 900px; PADDING-TOP: 50px; BORDER-BOTTOM: #ff0000 5px solid; HEIGHT: 50px; BACKGROUND-COLOR: #fff
}
#cont {
	CLEAR: both; PADDING-RIGHT: 50px; PADDING-LEFT: 50px; FLOAT: left; PADDING-BOTTOM: 50px; MARGIN: 0px 40px 40px; WIDTH: 800px; PADDING-TOP: 50px
}
#menu {
	FLOAT: left; MARGIN: 0px 20px 20px 65px; WIDTH: 750px; HEIGHT: 15px
}
.caja {
	PADDING-RIGHT: 30px; PADDING-LEFT: 30px; BACKGROUND: url(fondocont.png) no-repeat left top; PADDING-BOTTOM: 30px; MARGIN: 10px auto; WIDTH: 970px; PADDING-TOP: 30px; POSITION: absolute; TOP: 5%; HEIGHT: 80%
}
.caja-pie {
	BACKGROUND: url(fondocont.png) no-repeat left bottom; MARGIN: 0px -30px -30px; HEIGHT: 30px
}
.cajanar {
	PADDING-RIGHT: 30px; PADDING-LEFT: 30px; BACKGROUND: url(fondocont_nar.png) no-repeat left top; PADDING-BOTTOM: 30px; MARGIN: 10px auto; WIDTH: 970px; PADDING-TOP: 30px; POSITION: absolute; TOP: 5%; HEIGHT: 80%
}
.caja-pienar {
	BACKGROUND: url(fondocont_nar.png) no-repeat left bottom; MARGIN: 0px -30px -30px; HEIGHT: 30px
}
.cajaver {
	PADDING-RIGHT: 30px; PADDING-LEFT: 30px; BACKGROUND: url(fondocont_ver.png) no-repeat left top; PADDING-BOTTOM: 30px; MARGIN: 10px auto; WIDTH: 970px; PADDING-TOP: 30px; POSITION: absolute; TOP: 5%; HEIGHT: 80%
}
.caja-piever {
	BACKGROUND: url(fondocont_ver.png) no-repeat left bottom; MARGIN: 0px -30px -30px; HEIGHT: 30px
}
.cajaazr {
	PADDING-RIGHT: 30px; PADDING-LEFT: 30px; BACKGROUND: url(fondocont_azulr.png) no-repeat left top; PADDING-BOTTOM: 30px; MARGIN: 10px auto; WIDTH: 970px; PADDING-TOP: 30px; POSITION: absolute; TOP: 5%; HEIGHT: 80%
}
.caja-pieazr {
	BACKGROUND: url(fondocont_azulr.png) no-repeat left bottom; MARGIN: 0px -30px -30px; HEIGHT: 30px
}
.cajaazc {
	PADDING-RIGHT: 30px; PADDING-LEFT: 30px; BACKGROUND: url(fondocont_azulc.png) no-repeat left top; PADDING-BOTTOM: 30px; MARGIN: 10px auto; WIDTH: 970px; PADDING-TOP: 30px; POSITION: absolute; TOP: 5%; HEIGHT: 80%
}
.caja-pieazc {
	BACKGROUND: url(fondocont_azulc.png) no-repeat left bottom; MARGIN: 0px -30px -30px; HEIGHT: 30px
}
.cajaro {
	PADDING-RIGHT: 30px; PADDING-LEFT: 30px; BACKGROUND: url(fondocon_roj.png) no-repeat left top; PADDING-BOTTOM: 30px; MARGIN: 10px auto; WIDTH: 970px; PADDING-TOP: 30px; POSITION: absolute; TOP: 5%; HEIGHT: 80%
}
.caja-piero {
	BACKGROUND: url(fondocon_roj.png) no-repeat left bottom; MARGIN: 0px -30px -30px; HEIGHT: 30px
}
#footer {
	PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 80%; PADDING-BOTTOM: 10px; WIDTH: 560px; COLOR: #000066; PADDING-TOP: 10px; FONT-STYLE: italic; TEXT-ALIGN: right
}
#navcontainer {
	DISPLAY: block; LEFT: 30px; WIDTH: 160px; POSITION: absolute; TOP: 470px; HEIGHT: 25px
}
#navcontainer UL {
	PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 11px; MARGIN-LEFT: 0px; COLOR: gold; FONT-FAMILY: Verdana, Helvetica, sans-serif; LIST-STYLE-TYPE: none
}
#navcontainer A {
	PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 5px; BACKGROUND: url(boton.png) no-repeat; PADDING-BOTTOM: 5px; WIDTH: 120px; PADDING-TOP: 5px; HEIGHT: 25px; TEXT-ALIGN: center
}
#navcontainer A:link {
	COLOR: #ff0000; TEXT-DECORATION: none
}
#navlist A:visited {
	COLOR: #ff0000; TEXT-DECORATION: none
}
#navcontainer A:hover {
	BACKGROUND: url(boton2.png) no-repeat; COLOR: #fff
}
En el cual trato de ubicar bien todas las cajas, pero como verán hay una que queda encimada, ese es otro problema.

El código de la página es este:
Código:
<html>
<head>
<title>Cruz Roja Mexicana - Zumpango</title>
<link href="objetos/estilo.css" rel="stylesheet" type="text/css" />
<link href="objetos/dropdown.css" media="all" rel="stylesheet" type="text/css" />
<link href="objetos/default.css" media="all" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<script type="text/javascript" src="objetos/jquery.js"></script>
<script type="text/javascript" src="objetos/jquery.dropdown.js"></script>
<![endif]-->
	</head>

<body>
 
   <div class="caja">
   <div id="encabezado">
     <img src="objetos/logocrm.gif">
     <img src="objetos/cabecera.gif">
   </div>
 
   <div id="menu">
   <ul id="nav" class="dropdown dropdown-horizontal">
	<li><a href="historia.html">Inicio</a></li>
        <li><a href="capacitacion.html">Capacitaci&oacute;n</a></li>
        <li><a href="administracion.html">Administraci&oacute;n</a></li>
	<li><a href="juventud.html">Juventud</a></li>
	<li><a href="serv_medico.html">Servicio M&eacute;dico</a></li>
	<li><a href="socorros.html">Socorros</a></li>
        <li><a href="veteranos.html">Veteranos</a></li>
	<li><a href="voluntariado.html">Voluntariado</a></li>
	
	
    </ul>
   </div>
  
 
   
      <div id="navcontainer">
        <ul id="navlist">
		<li><a href="index.html">Qui&eacute;nes Somos</a></li>
		<li><a href="historia.html">Historia</a></li>
		<li><a href="principios.html">Principios</a></li>
		<li><a href="#">Otro 2</a></li>	
	</ul>
      </div>


   <div id="cont">
   <p>
    <h1>¿Quienes Somos?</h1>
    

Cruz Roja Mexicana Delegación Zumpango, brinda servicios de hospitalización, consulta, urgencias y servicios de ambulancia a la comunidad y visitantes que lo requieran en 
cualquier momento y en cualquier lugar.

Los servicios de Atención Médica Pre-hospitalaria son solicitados por personas de cualquier nivel socioeconómico. 

Los Servicios Médicos de Urgencia son solicitados principalmente por las clases socioeconómicas media y baja, sin que esto sea exclusivo a estos sectores. 

Los logros que viene realizando Cruz Roja Mexicana Delegación Zumpango, han sido acordes a las necesidades de la poblacional y de los servicios que se ofrecen en nuestro municipio. 

Nuestra Gente
Buscamos continuamente atraer y conservar al talento humano hombres y mujeres, ya que estamos conscientes de que son el pilar fundamental de nuestra Institución. 

Contamos con personal altamente calificado para hacer frente a cualquier contingencia que se presente, nuestra infraestructura de capacitación nos permite mantener un 
nivel de conocimiento y practica óptimos, en nuestra personalidad y perfil predomina el espíritu de atención y servicio. 


  </p>
  </div>
  <div id="footer">
  <p> Derechos Reservados Diseño www.freewebs.com/grupospo </p>
  </div>
  <div class="caja-pie"></div>
 </div>
<!-- --><script type="text/javascript" src="http://images.webs.com/static/global/js/webs/usersites/escort.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="none";_uff=false;urchinTracker();}</script></body>
</html>
Espero se entienda un poco el problema, o si me pueden dar una opción, quisiera seguir usando los bordes redondeados.
Ah por cierto, si le entienden al código :P lo pueden usar, no importa, tengo la idea del código libre jejeje.
Gracias y Saludos
  #2 (permalink)  
Antiguo 06/02/2010, 14:42
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
Hola venom_mau

Muevo tu tema al foro de CSS desde Web general.

Saludos,
  #3 (permalink)  
Antiguo 06/02/2010, 22:25
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Problemas con cajas en css

no entendi muy bien lo de tu imagen, en cuanto a la alineacion te seria mas facil colocar el navcontainer y cont dentro de otra capa algo asi
Código HTML:
Ver original
  1. <div class="content">
  2.     <div class="navcontainer"></div>
  3.     <div class="cont"></div>
  4. </div>

y en tu css
Código CSS:
Ver original
  1. .content{width:100&#37;;}
  2. .navcontainer{width:200px; float:left;}
  3. .cont{width:700px; float:right;}

Por cierto se me olvido mensionar siempre debes empezar tus documentos declarando el doctype
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....

Última edición por ArturoGallegos; 06/02/2010 a las 22:37
  #4 (permalink)  
Antiguo 10/02/2010, 13:35
Avatar de venom_mau  
Fecha de Ingreso: julio-2009
Mensajes: 152
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: Problemas con cajas en css

Ok sabía que moverían el tema, de todas formas gracias JavierB


Gracias por la respuesta Ag666. Y por el comentario del doctype.
Por cierto alguna opción para redondear las esquinas de una capa en css?
Probaré el código, si no funciona, seguiré molestando por acá.

Saludos :)
  #5 (permalink)  
Antiguo 10/02/2010, 14:11
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 9 meses
Puntos: 1314
Respuesta: Problemas con cajas en css

Cita:
Iniciado por venom_mau Ver Mensaje
Por cierto alguna opción para redondear las esquinas de una capa en css?
Esta el border-radius, pero no funciona en todos los navegadores, puedes usar imágenes para eso, aquí algo de ayuda:
http://www.smileycat.com/miaow/archi...p#nojavascript

Saludos
__________________
Grupo Telegram Docker en Español

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