Foros del Web » Creando para Internet » CSS »

float y background-image

Estas en el tema de float y background-image en el foro de CSS en Foros del Web. Buenas tardes. Tengo que siguiente problema. Llevo dos dias buscando una solucion, pero no la encuentro. Resulta que tengo una pagina y su correspondiente hoja ...
  #1 (permalink)  
Antiguo 05/08/2010, 11:03
 
Fecha de Ingreso: marzo-2010
Ubicación: Buenos Aires
Mensajes: 44
Antigüedad: 7 años, 8 meses
Puntos: 2
float y background-image

Buenas tardes.

Tengo que siguiente problema. Llevo dos dias buscando una solucion, pero no la encuentro.

Resulta que tengo una pagina y su correspondiente hoja de esilo. El problema es que tengo algunos elementos flotantes y establezco una imagen de fondo, pero en algunas paginas se ve y en otras no.

Les adjunto el HTML y CSS:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>titulo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<meta http-equiv="Pragma" content="no-cache">
		<meta http-equiv="no-cache">
		<meta http-equiv="Expires" content="-1">
		<meta http-equiv="Cache-Control" content="no-cache">
		<link rel="stylesheet"  href="estilo.css" type="text/css" media="screen" />
		<style type="text/css">
			#contenido {
				display:inline-block;
				width:879px;
				padding-left:10px;
				border-left:1px solid #B0C4DE;
				margin:0px !important;
				background-image:url("contacto.jpg") !important;
				background-position:right center !important;
				background-repeat:no-repeat !important;
			}
		</style>
	</head>
	<body>
		<div id="cabecera">
			<span class="logo">
				<img src="logo.png" alt="Logo" />
			</span>
		</div>
		<div id="cuerpo">
			<div id="barra_izquierda">
				<div id="menu">
					<a class="menu_item" href="index.php?cat=">inicio</a>
					<a class="menu_item" href="index.php?cat=quien">quien soy</a>
					<a class="menu_item" href="index.php?cat=servicios">servicios</a>
					<a class="menu_item" href="index.php?cat=precios">precios</a>
					<a class="menu_item" href="index.php?cat=contacto">contacto</a>
				</div>
			</div>
			<div id="contenido">
				<div id="min_height"></div>
				<h3>Contacto</h3>
				<p>Para contactarme, completa el siguiente formulario. Los emails los recibo de forma instant&aacute;nea en mi movil.</p>
				<div class="info_derecha">
					Horario de atenci&oacute;n:
					<br />
					Lunes a Viernes
					<br />
					de 8:00 hs. a 20:00 hs.
				</div>
			
				<p class="nota">Los campos en rojo, son obligatorios.</p>

				<form method="post" action="process_contact.php">
					<div>
						<span class="_75 obligatorio_texto">Nombre:</span>
						<span><input type="text" name="nombre" id="nombre" value="" /></span>
					</div>
					<div>
						<span class="_75 obligatorio_texto">Apellido:</span>
						<span><input type="text" name="apellido" id="apellido" value="" /></span>

					</div>
					<div>
						<span class="_75 obligatorio_texto">Email:</span>
						<span><input type="text" name="email" id="email" value="" /></span>
					</div>
					<div>
						<span class="_75 obligatorio_texto">Tel&eacute;fono:</span>

						<span><input type="text" name="telefono" id="telefono" value="" /></span>
					</div>
					<div>
						<span class="_75 obligatorio_texto">Urgencia:</span>
						<span>
							<select name="urgencia" id="urgencia">
								<option value="">Seleccione...</option>
								<option value="1">Normal</option>
								<option value="2">Urgente</option>
								<option value="3">Muy urgente</option>
								<option value="4">Emergencia</option>
								<option value="5">Critica</option>
							</select>
						</span>
					</div>
					<div>
						<span class="_75 obligatorio_texto">Asunto:</span>
						<span><input class="_200" type="text" name="asunto" id="asunto" value="" /></span>
						<span class="nota">Debe tener como m&iacute;nimo 10 caracteres y como m&aacute;ximo 40.</span>
					</div>
					<div><span class="_75 obligatorio_texto">Mensaje:</span></div>
					<div><span><textarea rows="10" cols="70" name="mensaje" id="mensaje"></textarea></span></div>
					<div title="Esto nos sirve para saber que usted es una persona, y no un ordenador. De esta manera, evitamos el SPAM.">
						<span><img src="captcha.php" /></span>
						<span><input type="text" class="_100 obligatorio_control" name="captcha" value="" /></span>
						<span class="_250">Introduzca los caracteres de la imagen.</span>
					</div>
					<div><input class="_100" type="submit" name="Enviar" value="Enviar" /></div>
				</form>
				<br />
			</div>
		</div>
		<div style="clear:both; margin:0px !important">&nbsp;</div>
	</body>
</html>
Código:
* {
	padding:0px;
	margin:0px;
	border:0px;
	border:none;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#000000;
	background-color:#FFFFFF;
	text-align:justify;
	outline:0;
}
body {
	width:1000px;
	margin:0 auto 0 auto;
}
#cabecera {
	width:1000px;
	height:50px;
	border-bottom:1px solid #B0C4DE;
	margin:0px !important;
}
.logo img { margin-top:3px; }
#cuerpo {
	margin:0px !important;
}
#barra_izquierda {
	width:110px;
	float:left;
	margin:0px !important;
}
#contenido * {
	z-index:100000;
}
#min_height { height:500px; width:0px; float:right; z-index:-100; margin:0px !important; }

#menu {
	width:110px;
	border-bottom:1px solid #B0C4DE;
}
#menu .menu_item {
	text-decoration:none;
	padding:2px;
	font-size:10px;
	color:#000000 !important;
	text-align:center;
	background-image:none;
	display:block;
}
#menu .menu_item:hover {
	background-color:#B0C4DE;
	font-weight:bold;
	color:#000000 !important;
}


input, textarea, select {
	border-width:1px;
	border-style:solid;
	text-align:left;
}
input[type="submit"], input[type="button"] {
	padding-left:5px;
	padding-right:5px;
	border-color:#B0C4DE;
	padding:3px;
	text-align:center;
}
a, a:link, a:active, a:visited { 
	text-decoration:underline;
	font-size:12px;
}
hr { width:1px; }
h1 { font-size:20px; margin-top:10px; margin-bottom:10px; }
h2 { font-size:18px; margin-top:10px; margin-bottom:10px; }
h3 { font-size:16px; margin-top:10px; margin-bottom:10px; }
h4 { font-size:14px; margin-top:10px; margin-bottom:10px; }
h5 { font-size:13px; margin-top:10px; margin-bottom:10px; }
h6 { font-size:12px; margin-top:10px; margin-bottom:10px; }
p { font-size:12px; line-height:18px; margin-bottom:5px; }
div { margin-bottom:10px; }
form { margin-top:20px; margin-bottom:5px; }
form div span { display:inline-block; }

ul {
	margin-left:10px !important;
	padding-left:12px !important;
	list-style-image:url("vinetas.png");
}
li {
	font-size:12px;
	margin-bottom:5px !important;
}
.info_derecha {
	float:right;
	display:inline-block;
	margin-left:10px;
	padding:10px;
	border:1px solid #B0C4DE;
	width:200px;
	text-align:center;
	clear:left;
}

.exito {
	padding:2px;
	border: 1px solid #009900;
	background-color:#00FF33;
}
.exito p { margin-bottom:3px; background-color:#00FF33; }
.error {
	padding:2px;
	border: 1px solid #FF0000;
	background-color:#FFFF66;
}
.error p { margin-bottom:3px; background-color:#FFFF66; }
.nota {
	font-size:9px;
	color:#B0C4DE;
}
._25 { width:25px; }
._50 { width:50px; }
._75 { width:75px; }
._100 { width:100px; }
._150 { width:150px; }
._200 { width:200px; }
._250 { width:250px; }
._300 { width:300px; }
._350 { width:350px; }
._400 { width:400px; }


.obligatorio_control {
	border-width:1px;
	border-style:solid;
	border-color:#FF0000;
}
.obligatorio_texto {
	color:#FF0000;
}
.margen_izquierdo { margin-left:20px; }
.resaltar {
	font-weight:bold;
	font-size:12px;
}

.hr {
	margin-top:3px;
	margin-bottom:3px;
	color:#B0C4DE;
	background-color:#B0C4DE;
	height:1px;
}
Nota: Todas las imagenes existen y todos los archivos estan bien ubicados. En principio, tampoco he cometido errores tipograficos.

Muchas gracias.
  #2 (permalink)  
Antiguo 05/08/2010, 11:26
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 7 años, 6 meses
Puntos: 6
Respuesta: float y background-image

Hola..

revise tu css y como comentas q algunos de tus contenedores flotantes tenian problemas por q no mostraban la imagen de fondo... pero ninguno de tus elementos flotantes en tu css llevan un background... ahora si los pones facil te ayudo.. pon solo el codigo necesario donde se encuentra tu problema

en tu html tmb veo q se redefine el div contenido seria mejor q lo adjuntaras a tu hoja de estilos...
para q evites codigo innecesario prueba asi==>background:url(ruta relativa de imagen) no-repeat right;
ahh y el !important es el q permite ignorar el orden de la "cascada" de los estilos. asi q has un buen uso de el

Saludos
  #3 (permalink)  
Antiguo 05/08/2010, 11:59
 
Fecha de Ingreso: marzo-2010
Ubicación: Buenos Aires
Mensajes: 44
Antigüedad: 7 años, 8 meses
Puntos: 2
Respuesta: float y background-image

Hola, gracias por la respuesta.

El asunto de la "redefinicion" del div #contenido se debe a que dependiendo de la pagina, uso una imagen de fondo u otra. Ese es el unico div que tiene una imagen de fondo.

La forma corta de background la conozco, pero como tenia problemas, decidi utilizar la forma larga.

Lo que no entiendo, es que tengo dos paginas mas que son exactamente iguales y en ellas funciona correctamente. Cambia el contenido, pero los divs y las p son los mismos, con las mismas propiedades.
  #4 (permalink)  
Antiguo 05/08/2010, 12:13
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 7 años, 6 meses
Puntos: 6
Respuesta: float y background-image

Cita:
Iniciado por 7sistemas Ver Mensaje
Lo que no entiendo, es que tengo dos paginas mas que son exactamente iguales y en ellas funciona correctamente. Cambia el contenido, pero los divs y las p son los mismos, con las mismas propiedades.
Hola si te explicaras mejor te lo agradeceria.. o mejor aun pon el codigo de los estilos q tengas problemas derepente es algun detallito q te lo saltas...

Saludos
  #5 (permalink)  
Antiguo 06/08/2010, 03:41
 
Fecha de Ingreso: marzo-2010
Ubicación: Buenos Aires
Mensajes: 44
Antigüedad: 7 años, 8 meses
Puntos: 2
Respuesta: float y background-image

Ya se que cual era el problema. Es que el form, al ser un elemento de bloque y ocupar todo el ancho, ocultaba con su fondo blanco la imagen de fondo.

Gracias de todas formas.

Última edición por 7sistemas; 06/08/2010 a las 03:57

Etiquetas: float
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 06:27.