Foros del web, para los que viven de bits

puchitol · 24-feb-2006, 12:05

Hola amigos,

tengo un problema, estoy maquetando con css y tanto en Firefox como en IE crea espacios en blanco entre capas adyacentes sinmotivo aparente, espero que me podais ayudar.
Os dejo el codigo HTML y el CSS

Codigo html:

Código HTML:

<html>
<head>
 <link rel="STYLESHEET" type="text/css" href="./css/estilo.css">
</head>
<body>

<div id="contenedor">
  <div id="cabecera">CABECERA</div>
 <div id="cuerpo">
	<div id="menu">
	 <div class="barraMenu">
	  <a class="botonMenu" href="">Opción 1</a>
   	  <a class="botonMenu" href="">Opción 2</a>
	  <a class="botonMenu" href="">Opción 3</a>
	  <a class="botonMenu" href="">Opción 4</a>
         </div>
        </div>
<!-- aqui es donde obtengo un espacio en blanco: en Firefox y IE -->
        <div id="principal">
             AQUI IRIA TODO EL TEXTO
             <div id="derecha"><img src=".\fotos\DSCN2621.JPG"/></div>
        </div>
  </div>
<!-- aqui es donde obtengo un espacio en blanco: solo en Firefox -->
  <div id="pie">pIE</div>
</div>
</center>
</body>
</html>

Codigo css:

body {background: #CCFFCC;}
#contenedor { background: #FFFFFF;
margin:auto;
width: 770px;
}
#izquierda { float: left;
padding-right: 10px;
}
#cuerpo {}
#principal { text-align: justify;
font-family: arial;
font-size: 11px;
padding-left: 10px;
padding-right: 10px;
background: #CCCCCC;
}
#cabecera { text-align: center;
background: #0000FF;
}
#pie { text-align: center;
background: #00FF00;
}
a { text-decoration: none; }
#derecha {float: right;
margin-left: 10px;
}
/* estilos para el menu */
#menu {
height: 20px;
background: #EEFFEE;
}
#menu div.barraMenu,
#menu div.barraMenu a.botonMenu {
font-family: sans-serif, Verdana, Arial;
font-size: 8pt;
color: white;
}

#menu div.barraMenu {
text-align: left;
}

#menu div.barraMenu a.botonMenu {
background-color: #556975;
color: white;
cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}

#menu div.barraMenu a.botonMenu:hover {
background-color: #637D4D;
}

#menu div.barraMenu a.botonMenu:active {
background-color: #637D4D;
color: black;
}

gracias de antemano y saludos

man0l0 · 24-feb-2006, 12:40

Hola!..

A mi parece vi varias cosas algo extrañas en tu código CSS, aproveché de ordenar un poco y eliminar código de sobra, y me quedó algo así:

Código:

body {background: #CCFFCC;}
#contenedor { background: #FFFFFF;
margin:auto;
width: 770px;
}
#izquierda { float: left;
padding-right: 10px; 
}
#cuerpo {}
#principal { text-align: justify;
font-family: arial;
font-size: 11px;
padding-left: 10px;
padding-right: 10px;
background: #CCCCCC;
}
#cabecera { text-align: center;
background: #0000FF;
}
#pie { text-align: center;
background: #00FF00;
}
a { text-decoration: none; }
#derecha {float: right;
margin-left: 10px;
}
/* estilos para el menu */
#menu {
height: 20px;
background: #EEFFEE;
}
.barraMenu, .botonMenu a {
font-family: sans-serif, Verdana, Arial;
font-size: 8pt;
color: white;
background-color: #556975;
color: white;
cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}

.barraMenu {
text-align: left;
}

.botonMenu a:hover {
background-color: #637D4D;
}

.botonMenu a:active {
background-color: #637D4D;
color: black;
}

Y ya no sale el dichoso espacio.

Saludos!

puchitol · 24-feb-2006, 14:12

Hola,
Gracias por contetar tan rapido, pero he de decirte que sigo con el mismo problema y ademas el efecto de iluminacion del menu al seleccionar una opcion lo he perdido, asi que lo siento, pero de momento no hec onseguido solucionar el problema.

Aprovecho para aclarar, que cuando digo espacio en blanco me refiero a como un salto de linea (que no deberia aparecer) y deja un espacio entre las dos capas adyacentes ...

alguna sugerencia mas?

saludos

man0l0 · 24-feb-2006, 17:29

Hola,

Mira, se me pasó un estilo en el link, pero eso lo corriges fácilmente en la hoja de estilos, a mi no me aparece el espacio que mencionas, con el nuevo código, solamente te hace falta modificar el estilo.

Saludos.

puchitol · 25-feb-2006, 07:41

Hola de nuevo, y perdona otra vez,

pero, donde esta el nuevo codigo?, quizas se te olvidó ponerlo?

saludos

man0l0 · 25-feb-2006, 19:21

¿? en el mensaje Nº2!, no es el CSS original ni una cita a tu mensaje, es el código que modifiqué y probé en mi navegador.

Saludos!

24-feb-2006, 12:05	#1 (permalink)
puchitol Fecha de Ingreso: diciembre-2003 Ubicación: ELCHE Mensajes: 309	espacio blanco entre capas Hola amigos, tengo un problema, estoy maquetando con css y tanto en Firefox como en IE crea espacios en blanco entre capas adyacentes sinmotivo aparente, espero que me podais ayudar. Os dejo el codigo HTML y el CSS Codigo html: Código HTML: <html> <head> <link rel="STYLESHEET" type="text/css" href="./css/estilo.css"> </head> <body> <div id="contenedor"> <div id="cabecera">CABECERA</div> <div id="cuerpo"> <div id="menu"> <div class="barraMenu"> <a class="botonMenu" href="">Opción 1</a> <a class="botonMenu" href="">Opción 2</a> <a class="botonMenu" href="">Opción 3</a> <a class="botonMenu" href="">Opción 4</a> </div> </div> <!-- aqui es donde obtengo un espacio en blanco: en Firefox y IE --> <div id="principal"> AQUI IRIA TODO EL TEXTO <div id="derecha"><img src=".\fotos\DSCN2621.JPG"/></div> </div> </div> <!-- aqui es donde obtengo un espacio en blanco: solo en Firefox --> <div id="pie">pIE</div> </div> </center> </body> </html> Codigo css: body {background: #CCFFCC;} #contenedor { background: #FFFFFF; margin:auto; width: 770px; } #izquierda { float: left; padding-right: 10px; } #cuerpo {} #principal { text-align: justify; font-family: arial; font-size: 11px; padding-left: 10px; padding-right: 10px; background: #CCCCCC; } #cabecera { text-align: center; background: #0000FF; } #pie { text-align: center; background: #00FF00; } a { text-decoration: none; } #derecha {float: right; margin-left: 10px; } /* estilos para el menu */ #menu { height: 20px; background: #EEFFEE; } #menu div.barraMenu, #menu div.barraMenu a.botonMenu { font-family: sans-serif, Verdana, Arial; font-size: 8pt; color: white; } #menu div.barraMenu { text-align: left; } #menu div.barraMenu a.botonMenu { background-color: #556975; color: white; cursor: pointer; padding: 4px 6px 2px 5px; text-decoration: none; } #menu div.barraMenu a.botonMenu:hover { background-color: #637D4D; } #menu div.barraMenu a.botonMenu:active { background-color: #637D4D; color: black; } gracias de antemano y saludos __________________ If you think fuck is funny, fuck yourself and save your money, espero que entendais la moraleja... je, je, je

24-feb-2006, 14:12	#3 (permalink)
puchitol Fecha de Ingreso: diciembre-2003 Ubicación: ELCHE Mensajes: 309	Hola, Gracias por contetar tan rapido, pero he de decirte que sigo con el mismo problema y ademas el efecto de iluminacion del menu al seleccionar una opcion lo he perdido, asi que lo siento, pero de momento no hec onseguido solucionar el problema. Aprovecho para aclarar, que cuando digo espacio en blanco me refiero a como un salto de linea (que no deberia aparecer) y deja un espacio entre las dos capas adyacentes ... alguna sugerencia mas? saludos __________________ If you think fuck is funny, fuck yourself and save your money, espero que entendais la moraleja... je, je, je

25-feb-2006, 07:41	#5 (permalink)
puchitol Fecha de Ingreso: diciembre-2003 Ubicación: ELCHE Mensajes: 309	Hola de nuevo, y perdona otra vez, pero, donde esta el nuevo codigo?, quizas se te olvidó ponerlo? saludos __________________ If you think fuck is funny, fuck yourself and save your money, espero que entendais la moraleja... je, je, je

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado

24-feb-2006, 17:29	#4 (permalink)
man0l0 Fecha de Ingreso: febrero-2006 Mensajes: 114	Hola, Mira, se me pasó un estilo en el link, pero eso lo corriges fácilmente en la hoja de estilos, a mi no me aparece el espacio que mencionas, con el nuevo código, solamente te hace falta modificar el estilo. Saludos.

25-feb-2006, 19:21	#6 (permalink)
man0l0 Fecha de Ingreso: febrero-2006 Mensajes: 114	¿? en el mensaje Nº2!, no es el CSS original ni una cita a tu mensaje, es el código que modifiqué y probé en mi navegador. Saludos!