Foros del Web » Creando para Internet » CSS »

maquetando fieldset/legend en Mozilla

Estas en el tema de maquetando fieldset/legend en Mozilla en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/11/2005, 04:11
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
maquetando fieldset/legend en Mozilla

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #2 (permalink)  
Antiguo 21/11/2005, 05:06
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
OT: que linda pagina esa para previsualizar el css/html! :D
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #3 (permalink)  
Antiguo 21/11/2005, 06:00
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
¡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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #4 (permalink)  
Antiguo 21/11/2005, 08:15
 
Fecha de Ingreso: noviembre-2005
Mensajes: 21
Antigüedad: 12 años
Puntos: 0
#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?
  #5 (permalink)  
Antiguo 21/11/2005, 17:25
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #6 (permalink)  
Antiguo 21/11/2005, 17:33
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 7 meses
Puntos: 0
ponle height:90%;
  #7 (permalink)  
Antiguo 22/11/2005, 02:33
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
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.
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
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 00:10.