Superponer imagen y que concuerde con el fondo

Jask · #1 (**permalink**) 26/01/2010, 03:30

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

Jask · #2 (**permalink**) 26/01/2010, 03:46

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 =) !!

Tecna · #3 (**permalink**) 26/01/2010, 11:09

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

jomaruro · #4 (**permalink**) 26/01/2010, 17:31

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* {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.