maquetando fieldset/legend en Mozilla

caricatos · #1 (**permalink**) 21/11/2005, 04:11

Hola:

Al querer poner un fieldset/legend dentro de una capa dando width y height al 100%, el recuadro en mozilla (firefox) se sale de la capa...

Tengo esto:

Código:

<html>
<head>
<style type="text/css">
fieldset	{
	/*width: 100%;*/
	height: 100%;
	border: 2px gray solid;
	margin: 3px;
}

#general	{
	background-color: transparent;
	border: 0px;
	width: 700px;
	padding: 0px;
	position: relative;
}

#menu	{
	background-color: transparent;
	margin: 5px 0px 0px;
	padding: 5px 0px 0px;
	z-index: 1;
	height: 30px;
	position: absolute;
	left: 0px;
	top: 0px;
}

#contenido	{
	position: relative;
	/*left: -5px;*/
	top: 32px;
	border: 2px inset gray;
	height: 300px;
	padding: 0px;
	/*margin: auto auto 0 auto;*/
}

#izq	{
	/*background-color: cyan;*/
	/*display: inline;*/
	width: 170px;
	height: 100%;
	/*float: left;*/
}

#der	{position: absolute; top:0px;
	/*background-color: pink;*/
	left: 170px;
	width: 526px;
	height: 100%;
	/*float: right;*/
}

.op1	{
	background-color: #aaeeee;
}

.op2	{
	background-color: #eebbee;
}

.op3	{
	background-color: #aaaaee;
}

.op4	{
	background-color: #eeeedd;
}

.op5	{
	background-color: #eecccc;
}

.pestaña	{
	border: 2px inset gray;
	border-bottom: 0px transparent solid;
	padding: 2px 10px 5px;
	margin: 2px 0 3px; 0;
	cursor: pointer;
	z-index: 200;
}

</style>
<script>
function sel(clase)	{
	document.getElementById("contenido").className = clase;
}
</script>
</head>
<body>

<div id="general" >
	<div id="menu" >
		<span id="op1" class="pestaña op1" onclick="sel(this.id)" >opcion 1
		</span><span id="op2" class="pestaña op2" onclick="sel(this.id)" >opcion 2
		</span><span id="op3" class="pestaña op3" onclick="sel(this.id)" >opcion 3
		</span><span id="op4" class="pestaña op4" onclick="sel(this.id)" >opcion 4
		</span><span id="op5" class="pestaña op5" onclick="sel(this.id)" >opcion 5
		</span>
	</div>
	<div id="contenido" class="op1" >
		<div id="izq">
			<fieldset ><legend align=center > Izquierda </legend>
			</fieldset>
		</div>

		<div id="der">
			<fieldset><legend>Derecha</legend>
			</fieldset>
		</div>
	</div>
</div>
<br/>
</body>
</html>

Como se puede ver hay algunos estilos hechos comentario que indican alguna de las pruebas que hice... intento que se vea igual en los 3 navegadores (IE, FF y opera)

Subí esta página: http://www.pepemolina.com/mapas/esqueleto3.html donde se puede escribir en el textarea y ver los resultados en un iframe... también he probado con float...

Saludos

kemie · #2 (**permalink**) 21/11/2005, 05:06

OT: que linda pagina esa para previsualizar el css/html! :D

caricatos · #3 (**permalink**) 21/11/2005, 06:00

¡Je, je!

, Gracias kemie:

Es un truco que hice para probar script (Lo he presentado en javascript como probador de código)... claro que sirve también para probar una maquetación o la funcionalidad de las páginas...

Gracias por el comentario: Puedes hacerlo tuyo (sabes que me gusta compartir mis "cosillas")

Saludos

yogiri · #4 (**permalink**) 21/11/2005, 08:15

#contenido {
position: relative;
/*left: -5px;*/
top: 32px;
border: 2px inset gray;
height: auto;
padding: 0px;
/*margin: auto auto 0 auto;*/
}

#izq {
/*background-color: cyan;*/
/*display: inline;*/
width: 170px;
height: auto;
/*float: left;*/
}

#der {position: absolute; top:0px;
/*background-color: pink;*/
left: 170px;
width: 526px;
height: auto;
/*float: right;*/
}

Asi no se sale, claro que el tamaño de left y right variara dependiendo del contenido, pero colocando divs que le agreguen algo se arreglaria... es esto lo que necesitabas?

caricatos · #5 (**permalink**) 21/11/2005, 17:25

Hola:

Bueno, entre poner "height: auto" y no poner nada no creo que haya mucha diferencia...

Te agradezco la respuesta, pero buscaba que tuviera todos los márgenes iguales... supongo que podría reemplazar el fieldset por otra capa con otro margen y borde, pero quería saber si se podía solucionar con el fieldset (es el tag que me interesa)

Saludos

RoQ · #6 (**permalink**) 21/11/2005, 17:33

ponle height:90%;

caricatos · #7 (**permalink**) 22/11/2005, 02:33

Hola otra vez:

Bueno, un height a 90% podría servir en algunos casos, pero si las capas son más grandes o más pequeññas también se desagustarían...

Probé usar capas y simular la pareja fieldset/legend, y tampoco fué bien en firefox...

Código:

<div class="contenedor" id="prueba1" >
   <div class="fieldset">
      <div class="legend"> Prueba 1 </div>
   </div>
</div>

Y estas declaraciones:

Código:

#prueba1{
 background-color: red;
 width: 200px;
 height: 200px;
 border: 1px solid blue;
}

.contenedor {
 position: relative;
}

.fieldset {
 position: relative;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: 2px solid gray;
 margin: 8px;
}

.legend {
 background-color: red;
 text-align: center;
 position: absolute;
 top: -10px;
 left: 10px;
 padding: 0px 5px;
}

Y también se salía... (Será un bug de firefox...

)

Por ahora funciona consigo el efecto ayudándome de un script:

Código:

<script>
function ini() {
for (var i = 0, Fs = document.getElementsByTagName("fieldset"), total = Fs.length; i < total; i ++) {
 divPadre = Fs[i].parentNode;
 while (divPadre.tagName != "DIV") divPadre = divPadre.parentNode;
 altura = divPadre.offsetHeight;
 Fs[i].style.height = altura - 30 + "px";
}
}
if (!document.all) window.onload = ini;
</script>

Si no encuentro nada mejor, tendré que usar ese sistema.

Saludos y gracias.