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:
En el cual trato de ubicar bien todas las cajas, pero como verán hay una que queda encimada, ese es otro problema.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
}
El código de la página es este:
Código:
Espero se entienda un poco el problema, o si me pueden dar una opción, quisiera seguir usando los bordes redondeados.
<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ón</a></li>
<li><a href="administracion.html">Administración</a></li>
<li><a href="juventud.html">Juventud</a></li>
<li><a href="serv_medico.html">Servicio Mé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é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>
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
