Foros del Web » Creando para Internet » CSS »

Superponer imagen y que concuerde con el fondo

Estas en el tema de Superponer imagen y que concuerde con el fondo en el foro de CSS en Foros del Web. Aquí estoy de nuevo, si es que soy pesado lo se jajaja pero es lo que tiene ponerse con una web salen dudas y dudas ...
  #1 (permalink)  
Antiguo 26/01/2010, 03:30
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 7 meses
Puntos: 15
Superponer imagen y que concuerde con el fondo

Aquí estoy de nuevo, si es que soy pesado lo se jajaja pero es lo que tiene ponerse con una web salen dudas y dudas :) Bueno esto es algo que en un principio había logrado pero que luego con el maldito IE se me descuadra y es que no le veo solución. Probé hasta con tablas (las odio) y ni si quiera por lo tanto no se como hacerlo. Lo que quiero es hacer concordar la imagen en blanco que pone HOME (si la que marché con rayas rojas) con la que está abajo ya que es una especie de transparencia. No quiero que sea perfecto al milímetro pero tampoco que quede desfasado por lo menos en estos dos navegador. A ver si alguien tiene idea de como lo podría hacer. Dejo la imagen para que lo vean :)



Saludos y gracias
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #2 (permalink)  
Antiguo 26/01/2010, 03:46
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 7 meses
Puntos: 15
Respuesta: Superponer imagen y que concuerde con el fondo

Más o menos lo he podido solucionar. Ahora viene el gran problema (que raro). En FF se ve muy bonito pero en IE sale un espacio en blanco muy feo :S no se porqué. Os dejo las comparaciones y el código que llevo y tal para ver si encuentran algún error:

Firefox:


Internet Explorer:


Código HTML:

Código HTML:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Turismo Madrid</title>
<link href="css/learnspanish.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="central">
        <div class="logo"><img src="images/logo.jpg" alt="Turismo Madrid - Aprende Español - Learn Spanish" />
        <div class="barinf">
            <div class="menu">
                <a href="#">Home</a> <span class="separacion">|</span>
                <a href="#">¿Porqué Madrid?</a> <span class="separacion">|</span>
                <a href="#">Escuelas</a> <span class="separacion">|</span>
                <a href="#">Universidades</a> <span class="separacion">|</span>
                Síguenos en
                        
                    <span class="siguenos">
                        <a href="#"><img src="images/ico_face.gif" alt="Facebook"/></a>
                        <a href="#"><img src="images/ico_twi.gif" alt="Facebook"/></a> 
                        <a href="#"><img src="images/ico_deli.gif" alt="Facebook"/></a> 
                        <a href="#"><img src="images/ico_madrid.gif" alt="Facebook"/></a> 
                        <a href="#"><img src="images/ico_flick.gif" alt="Facebook"/></a> 
                    </span>
             </div>
        </div>
        <div class="contenido">
        	<div id="blanco"></div>
            <div class="info">
            	<div class="padre">
                	<span class="fotos">
                        <img src="images/img.jpg" alt="Libros" />
                        <p/>
                        <img src="images/img2.jpg" alt="Estudiante" />
                    </span>
                    
                    <div class="noticias">
                      <div class="titulo">
                        	<table border="1">
                            	<tr>
                                	<td width="117" nowrap="nowrap" class="tituloizda">Noticia 1 asdfaf</td>
                                    <td width="181" nowrap="nowrap" class="titulodcha"></td>
                              </tr>
                            </table>
                            <!--<span class="tituloizda">Noticia De hoy por la mañana</span>
                            <div class="titulodcha">a</div>-->
                        </div>
                      <br />
                      <br />
                        <div class="texto">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ullamcorper mollis arcu. Quisque libero tortor, venenatis quis, rhoncus sit amet, lacinia sit amet, sapien. Proin ultrices ante id libero. Phasellus nec tellus. Nunc eu nisi et ipsum molestie dictum. </div>
                    </div>
                 </div>
            </div>
    
            <div class="botones">
            	<div class="boton">
                	<a href="#"><img src="images/b_ocio.gif" alt="Ocio"/></a>
                </div>
                <div class="boton">
                	<a href="#"><img src="images/b_rutas.gif" alt="Ocio"/></a>
                </div>
                <div class="boton">
                	<a href="#"><img src="images/b_deportes.gif" alt="Ocio"/></a>
                </div>
                <div class="boton">
                	<a href="#"><img src="images/b_guias.gif" alt="Ocio"/></a>
                </div>
            </div>
        
        </div>
    </div>
    
</body>

</html> 

Código CSS


Código HTML:
body{
    font-family: Helvetica, Arial, sans-serif;
	font-size:13px;
}

img {
  border: none;
}

a:link{
	text-decoration:none;
	color:#FFF;
}

a:hover{
	text-decoration:underline;
}

a:visited{
	text-decoration:none;
	color:#FFF;
}

.central{
	width:800px;
	height:600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
	border:1px solid #ef2b2d;
}

/**************************************************
				Menú de Opciones
**************************************************/

.barinf{
	height:27px;
	background-image:url(../images/sub.jpg);
}

.barinf .menu{
	color: white;
	margin:auto;
	height:26px;
	margin-left: 20px;
	text-align:left;
	display:table-cell;
    vertical-align:middle;
	padding-left:58px;
}

.barinf .menu .separacion{
	padding:0 10px;
}

.barinf .menu .siguenos{
	padding-left: 20px;
	position:absolute;
	line-height: 10px;
}

/**************************************************
				Contenido de la Web
**************************************************/

.contenido{
	background-image:url(../images/fondo.jpg);
	height:456px;
}

.info{
	background-image:url(../images/info.jpg);
	height:307px;
	width:707px;
	position:relative;
	top:35px;
	left:46px;
}

#blanco{
	height:0px;
	background-color:#0FF;
}

/*.info{
	background-image:url(../images/info2.jpg);
	height:304px;
	width:704px;
	position:relative;
	top:22px;
	left:48px;
}*/

.padre{
	width:100%;
}

.fotos{
	width:208px;
	float:left;
	position:relative;
	top:60px;
	margin:0 15px;
}

.noticias{
	width:457px;
	height:200px;
	float:left;
	position:relative;
	top:60px;
}


/**************************************************
					Noticia
**************************************************/

.tituloizda{
	float:left;
	color:#ef2b2d;
	font-size:16px;
	font-weight:bold;
}

.titulodcha{
	float:right;
	background-image:url(../images/linea.gif);
	margin:0 2px;
	height:20px;
}

.texto{
	font:Helvetica;
	font-size:14px;
	width:100%;
	text-align:left;
}

.botones{
	position:relative;
	bottom:-50px;
	margin:0 50px;
}

.boton{
	float:left;
	width:175px;
	
}
Zanks =) !!
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #3 (permalink)  
Antiguo 26/01/2010, 11:09
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 7 años, 11 meses
Puntos: 45
Respuesta: Superponer imagen y que concuerde con el fondo

Buenas,

he observado algunas veces comportamientos extraños de este tipo, aunque no especialmente en IE, apareciendo sin motivo separaciones entre elementos y he comprobado que era por existir espacios en blanco o saltos de linea en el código html detrás de elementos en línea. También lo he observado entre estos mismos elementos con otros idénticos creados dinamicamente con javascript. que supongo no agrega ni espacios ni saltos de línea. Tu estás usando varios elementos en línea dentro de otro y aunque es lícito (no lo es para elementos en bloque) eso te podría dar algun problema de este tipo. Los enlaces creo que serían mas accesibles dentro de una lista y no necesitarias el span de separación
  #4 (permalink)  
Antiguo 26/01/2010, 17:31
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Superponer imagen y que concuerde con el fondo

Hola:

Por lo que veo no utilizas ningún reset en tu css. Los distintos navegadores dan valores por defecto a los distintos selectores.

La mejor solución para esto es colocar al inicio de tu hoja de estilos lo siguiente

Código CSS:
Ver original
  1. * {padding: 0; margin:0 auto;}

Lo más probable es que soluciones ese problema, pero se te puede descolocar alguna otra cosa que tendrás que recolocar. Mi consejo es que utilices siempre un reset para evitarte problemas.

Saludos.


Etiquetas: fondo, superponer
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:21.