quitar un ¿margen?

manguiti · #1 (**permalink**) 17/09/2008, 02:52

Hola, necesito quitar la franja amarilla que aparece en esta imagen que está entre las etiquetas del menu y la linea de color marrón, le he quitaro el border, el margin y el paddin y sigue igual, a veer que podeis decirme pq me estoy volviendo loco con esta "tonteria"....

menu.html

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>menu.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="../estilos/menu.css" type="text/css">
<script type="text/javascript" src="../scripts/imagenes.js"></script>
</head>

<div id="BloqueMenu">
	<div id="BloqueContenedorLabels">
		<div id="CerrarSesion"><? echo session_name();?></div>
		<div id="Autenticado"><? echo $_SESSION['usuario'] ?></div>
	</div>
	<div id="BloqueContenedorMenu">
		<a href="tecnHTML.htm" target="principal" class="ficha" onMouseOver="cambia_ficha(this, '../imagenes/ficha_activa.png', 'FFFFFF')" onMouseOut="cambia_ficha(this,'../imagenes/ficha.png','8B0000')" >HTML</a>
		<a href="en_construccion.html" target="principal" class="ficha" onMouseOver="cambia_ficha(this, '../imagenes/ficha_activa.png', 'FFFFFF')" onMouseOut="cambia_ficha(this,'../imagenes/ficha.png','8B0000')">CSS</a>
		<a href="en_construccion.html" target="principal" class="ficha" onMouseOver="cambia_ficha(this, '../imagenes/ficha_activa.png', 'FFFFFF')" onMouseOut="cambia_ficha(this,'../imagenes/ficha.png','8B0000')" > T.Cliente</a> 
		<a href="en_construccion.html" target="principal" class="ficha" onMouseOver="cambia_ficha(this, '../imagenes/ficha_activa.png', 'FFFFFF')" onMouseOut="cambia_ficha(this,'../imagenes/ficha.png','8B0000')" > T.Servidor</a> 
		<a href="en_construccion.html" target="principal" class="ficha" onMouseOver="cambia_ficha(this, '../imagenes/ficha_activa.png', 'FFFFFF')" onMouseOut="cambia_ficha(this,'../imagenes/ficha.png','8B0000')" >XML</a> 
		<a href="recursos.html" target="principal" class="ficha" onMouseOver="cambia_ficha(this, '../imagenes/ficha_activa.png', 'FFFFFF')" onMouseOut="cambia_ficha(this,'../imagenes/ficha.png','8B0000')" >Recursos</a>
	</div>
</div>
<div id="LineaMenu"></div>
</body>
</html>

Menu.css

Código HTML:

body{
	
	background-image:url(../imagenes/fondo_menu.png);
	text-align:center;

}

#BloqueMenu{

	background-image:url(../imagenes/menu.png);
	background-position:center;
	width:770px;
	height:60px;
	text-align:center;
	margin:0;
	border:0;
	padding:0;
}

#BloqueContenedorLabels{

	width:766px;
	height:26px;

}

#CerrarSesion{

	float:left;
	width:50px;
	height:26px;

}

#Autenticado{

	float:right;
	width:200px;
	height::26px;

}
	
#BloqueContenedorMenu{
	
	text-align: center;
	width:766px;
	height:30px;
	margin:0;
	border:0;
	padding:0;

}

.ficha{

	background-image:url(../imagenes/ficha.png);
	width:100px;
	height:30px;
	float:left;
	border:0;
	margin:0;
	padding:0;
	
}

a{
	text-decoration:none;
	color:#8B0000;
}

a:hover{
	text-decoration:none;
}

#LineaMenu{

	background-image:url(../imagenes/menu_linea.png);
	text-align:center;
	height:4px;
	width:766px;
	margin:0;
	border:0;

}

datatraveler · #2 (**permalink**) 17/09/2008, 03:00

Hola,

En menu.css, en #BloqueMenu, ¿has probado de bajar el height?

Saludos.

manguiti · #3 (**permalink**) 17/09/2008, 03:08

GRACIAS por responder....es la altura que me viene en el guion de practicas, pero aún así le he bajado 4 pixels y se ve correctamente, no se si habrá otra solución o será que viene mal en el ejercicio...

Código HTML:

#BloqueMenu{

	background-image:url(../imagenes/menu.png);
	background-position:center;
	width:770px;
	height:56px;
	text-align:center;
	margin:0;
	border:0;
	padding:0;
}

Mikmoro · #4 (**permalink**) 17/09/2008, 03:17

Pues es que viene así, porque fíjate:

#BloqueMenu{height:60px;}

#BloqueContenedorLabels{height:26px;}

#BloqueContenedorMenu{height:30px;}

Es decir, el contenedor mide 60px, la primera caja mide 26px y la segunda 30px, luego sobran 4px por debajo.

Haz que "#BloqueContenedorLabels" mida 30px e imagino que se arreglará.

datatraveler · #5 (**permalink**) 17/09/2008, 03:21

Tambien podría ser que la altura de la imagen "../imagenes/menu.png" no sea 60px y sea inferior... pero personalmente la imagen no la tocaría, cambiaría el height de #BloqueMenu hasta la altura correcta.

manguiti · #6 (**permalink**) 17/09/2008, 03:33

al haber puesto al #bloquecontenedorlabels 30 px y vuelto a dejar 60px en el otro, en dreamweaver se ve correctamente, pero luego en el navegador, tanto en iexplorer como en firefox se ve mal...la imagen tiene 2 px de alto, tengo que especificar en el elemento contenedor de ella, la altura que debe tener, 4px....

manguiti · #7 (**permalink**) 17/09/2008, 03:36

ya está...arreglado, como siempre, un despiste tonto....tenía que meter el elemento contenedor de la linea dentro del elemento contenedor del bloquemenu

Código HTML:

<div id="BloqueMenu">
	<div id="BloqueContenedorLabels">
		<div id="CerrarSesion"><? echo session_name();?></div>
		<div id="Autenticado"><? echo $_SESSION['usuario'] ?></div>
	</div>
                <div id="BloqueContenedorMenu">
		.....
.................................
..................................
.................................
	</div>
        <div id="LineaMenu">
        </div>
</div>
</body>
</html>

Muchas gracias por la ayuda !!

Mikmoro · #8 (**permalink**) 17/09/2008, 03:38

Cita:

Iniciado por datatraveler

Tambien podría ser que la altura de la imagen "../imagenes/menu.png" no sea 60px y sea inferior... pero personalmente la imagen no la tocaría, cambiaría el height de #BloqueMenu hasta la altura correcta.

No, creo que la altura de la imagen sería en todo caso 30px, no 60px. Y creo que eso no importa, porque en realidad lo que ocurre es que el primer bloque del flujo del documento sólo ocupa 26px, de manera que el segundo bloque comienza en el pixel 27 en vertical, por lo que si mide 30px o menos, deberá dejar un espacio porque no completa a su contenedora que mide 60px.

Una solución sencilla sería eliminar el tamaño de 60px del contenedor y que éste mida exactamente lo que mida su contenido, de manera que siempre se ajustaría midieran lo que midieran tanto la imagen como las dos cajas.

manguiti · #9 (**permalink**) 17/09/2008, 03:43

ya está solucionado....solo era un error a la hora de ubicar uno de los elementos contenedores, que lo hacía fuera del elemento contenedor "padre"....

Antes......
....
</div>
<div id="LineaMenu"></div>
</body>

Ahora
.....
....
<div id="LineaMenu"></div>
</div>
</body>

Mikmoro · #10 (**permalink**) 17/09/2008, 03:46

Sí, si, lo he visto, lo que pasa es que escribía mi respuesta mientras tu ya publicabas la tuya

por lo que la mia ya sobraba.

manguiti · #11 (**permalink**) 17/09/2008, 03:59

ok ok, gracias de todas maneras, otra cosa...a ver si podeis ayudarme....el body de ese documento tiene que tener una imagen de fondo, que ocupe el resto del frame a ambos lados del menu y hacia abajo...en dreamweaver me aparece "bien", pero en el navegador no me aparece dicha imagen de fondo...

dreamweaver

iexplorer

A qué creeis que se debe??

manguiti · #12 (**permalink**) 17/09/2008, 04:01

realmente, falta el fondo del frame de abajo, pero no me indican nada en las practicas que ese frame deba llevar ningun background-image como si hace tanto con el frame titulo y el frame menu, los dos superiores, que llevan respectivamente fondo_titulo.png y fondo_menu.png....