Foros del web, para los que viven de bits

pedrojo · 21-mar-2007, 03:40

Mi problema basicamente es que yo tengo un menú de pestañas dinámico (modifica su longitud según el texto que se ponga dentro) en horizontal basada en tres imagenes por pestaña (para las partes: izquierda, central y derecha) que quiero que si por la longitud no cabe la pestaña en la línea salte TODA la pestaña a la linea siguiente (actualmente si la parte derecha sobrepasa solo salta de línea esta parte, dejando a las otras dos en la líena anterior). Mi intentción es conseguir que toda la pestaña sea un bloque y que si no cabe una parte salte todo el bloque a la siguiente línea. Os paso una prueba que os que puesto para que os hagais una idea (no puedo poner el código tal como lo tengo puesto porque es confidencial la información), en vez de las imagenes están puestos espacios y bordeados con la propiedad border.Si os fijais si sacas la "f" de la segunda pestaña verás como funciona bien (es ahí donde verás realmente mi problema). Los dos ficheros que os he copiado son prueba.html y auxiliar.css (está referenciado en el html). Lo dicho, muchisimas gracias por vuestra ayuda. Os copio los dos códigos de los archivos (falta poner en el html lo de <!DOCTYPE HTML PUBLIC (ya que en este foro no me deja poner enlaces y no puedo poner lo de w3.org):

<html lang="ca"><head><title>Prueba</title>

<link href="auxiliar.css" rel="stylesheet" type="text/css"></head><body>

<div id="contenedor">
<div id="contentTabBegin">
<div id="tabs">

<!BEGIN SELECTED TAB>

<div id="TabSelected">
<div id="TabSelectedLeft">&nbsp</div>
<div id="TabSelectedCentral"><a href='' class="secciono10px">texto bueno que no falla</a></div>
<div id="TabSelectedRight">&nbsp</div>
</div>

<!BEGIN NORMAL TAB>

<div id="TabUnselected">
<div id="TabUnselectedLeft">&nbsp &nbsp</div>
<div id="TabUnselectedCentral"><a href='' class="texto_normal_peq10Negrita">texto que se sale de la pestaña f</a></div>
<div id="TabUnselectedRight">&nbsp &nbsp</div>
</div>
</div>

<div id="centralBox">

<div id="centralContent">

<div id="levelContent3">

<div id="genericTable">

<div class="texto_normal" colspan="3">?s
que els alumnes, els pares i els
professors puguin tenir respecte a l'acc?s a la universitat i la tria
d'estudis. <br>
<br>
<a href="https://google.es">Formulari per als alumnes</a> <br>
<a href="https://marca.com">Formulari per als pares</a> <br>
<a href="https://yahoo.es">Formulari per als professors</a></div>

</div>
</div>

</div>
</div>
</div>

------------------------Ahora el css (esta linea no copiarla)-------------------

#contenedor{
width:400px;
}

#contentTabBegin{
margin-top: 25px;
}

#levelContent3{
margin-left: 25px;
margin-right: 15px;
margin-top:15px;
margin-bottom:15px;
}

#centralBox{
overflow: auto;
border: 1px #645748 solid;
/*border-bottom: 1px #645748 solid;
border-left: 1px #645748 solid;
border-right: 1px #645748 solid;
width:98.6%;*/
}

/*New version of Tabs*/

#tabs{
overflow:hidden;
height: 100%;
}

#TabUnselected{
float:left;
/*overflow:hidden;*/
text-align:center;
padding-bottom: 999em;
margin-bottom: -999em;
}

#TabSelected{
float:left;
/* overflow:hidden; */
text-align:center;
padding-bottom: 999em;
margin-bottom: -999em;
}

#TabUnselectedLeft{
float:left;
border-left:1px solid red;
border-top:1px solid red;
padding-bottom: 999em;
margin-bottom: -999em;
}

#TabUnselectedRight{
float:left;
border-right:1px solid red;
border-top:1px solid red;
padding-bottom: 999em;
margin-bottom: -999em;
}

#TabUnselectedCentral{
display:block;
border-top:1px solid red;
float:left;
text-align:center;
font-weight:bold;
padding-bottom: 999em;
margin-bottom: -999em;
}

#TabSelectedCentral{ /*currently selected tab*/
border-top:1px solid black;
float:left;
font-weight:bold;
padding-bottom: 999em;
margin-bottom: -999em;
}

#TabSelectedLeft{
float:left;
border-left:1px solid black;
border-top:1px solid black;
padding-bottom: 999em;
margin-bottom: -999em;
}

#TabSelectedRight{
float:left;
border-right:1px solid black;
border-top:1px solid black;
padding-bottom: 999em;
margin-bottom: -999em;
}

/*End of the new version of Tabs*/

pedrojo · 27-mar-2007, 05:12

por favor, ¿no hay nadie que me pueda ayudar? Si quereis ver el problema unicamente hay que copiar la primera parte del código en un archivo .html y la otra parte en un .css y ya está, no hay que hacer nada más. Ayuda por favor.

pedrojo · 30-mar-2007, 02:27

por favor que alguien me ayude que me hace mucha falta!!! gracias por anticipado

21-mar-2007, 03:40	#1 (permalink)
pedrojo Fecha de Ingreso: enero-2007 Mensajes: 22	problema con las pestañas en IE Mi problema basicamente es que yo tengo un menú de pestañas dinámico (modifica su longitud según el texto que se ponga dentro) en horizontal basada en tres imagenes por pestaña (para las partes: izquierda, central y derecha) que quiero que si por la longitud no cabe la pestaña en la línea salte TODA la pestaña a la linea siguiente (actualmente si la parte derecha sobrepasa solo salta de línea esta parte, dejando a las otras dos en la líena anterior). Mi intentción es conseguir que toda la pestaña sea un bloque y que si no cabe una parte salte todo el bloque a la siguiente línea. Os paso una prueba que os que puesto para que os hagais una idea (no puedo poner el código tal como lo tengo puesto porque es confidencial la información), en vez de las imagenes están puestos espacios y bordeados con la propiedad border.Si os fijais si sacas la "f" de la segunda pestaña verás como funciona bien (es ahí donde verás realmente mi problema). Los dos ficheros que os he copiado son prueba.html y auxiliar.css (está referenciado en el html). Lo dicho, muchisimas gracias por vuestra ayuda. Os copio los dos códigos de los archivos (falta poner en el html lo de <!DOCTYPE HTML PUBLIC (ya que en este foro no me deja poner enlaces y no puedo poner lo de w3.org): <html lang="ca"><head><!--OMKT--><!--OMKT--><!-- drawing head from esqueleto--><!-- user code here --><!--OMKT--><!-- user code here --><!-- Load level 1 page --><!-- Load Associated Header --><!--OMKT--><!-- Load associated CSS --><title>Prueba</title> <link href="auxiliar.css" rel="stylesheet" type="text/css"><!--<link href="/Xcelerate/graphics/UAB/common/basic.css" type="text/css" rel="stylesheet"/>--><!--/OMKT--><!--/OMKT--><!-- end drawing head from esqueleto--></head><body> <div id="contenedor"> <div id="contentTabBegin"> <div id="tabs"> <!BEGIN SELECTED TAB> <div id="TabSelected"> <div id="TabSelectedLeft">&nbsp</div> <div id="TabSelectedCentral"><a href='' class="secciono10px">texto bueno que no falla</a></div> <div id="TabSelectedRight">&nbsp</div> </div> <!BEGIN NORMAL TAB> <div id="TabUnselected"> <div id="TabUnselectedLeft">&nbsp &nbsp</div> <div id="TabUnselectedCentral"><a href='' class="texto_normal_peq10Negrita">texto que se sale de la pestaña f</a></div> <div id="TabUnselectedRight">&nbsp &nbsp</div> </div> </div> <div id="centralBox"> <!--BEGIN TABLE CONTENT LEVEL3--> <div id="centralContent"> <div id="levelContent3"> <div id="genericTable"> <div class="texto_normal" colspan="3">?s que els alumnes, els pares i els professors puguin tenir respecte a l'acc?s a la universitat i la tria d'estudis. <br> <br> <a href="https://google.es">Formulari per als alumnes</a> <br> <a href="https://marca.com">Formulari per als pares</a> <br> <a href="https://yahoo.es">Formulari per als professors</a></div> </div> </div> <!--END TABLE CONTENT LEVEL3--> </div> </div> </div> ------------------------Ahora el css (esta linea no copiarla)------------------- #contenedor{ width:400px; } #contentTabBegin{ margin-top: 25px; } #levelContent3{ margin-left: 25px; margin-right: 15px; margin-top:15px; margin-bottom:15px; } #centralBox{ overflow: auto; border: 1px #645748 solid; /border-bottom: 1px #645748 solid; border-left: 1px #645748 solid; border-right: 1px #645748 solid; width:98.6%;/ } /New version of Tabs/ #tabs{ overflow:hidden; height: 100%; } #TabUnselected{ float:left; /overflow:hidden;/ text-align:center; padding-bottom: 999em; margin-bottom: -999em; } #TabSelected{ float:left; /* overflow:hidden; / text-align:center; padding-bottom: 999em; margin-bottom: -999em; } #TabUnselectedLeft{ float:left; border-left:1px solid red; border-top:1px solid red; padding-bottom: 999em; margin-bottom: -999em; } #TabUnselectedRight{ float:left; border-right:1px solid red; border-top:1px solid red; padding-bottom: 999em; margin-bottom: -999em; } #TabUnselectedCentral{ display:block; border-top:1px solid red; float:left; text-align:center; font-weight:bold; padding-bottom: 999em; margin-bottom: -999em; } #TabSelectedCentral{ /currently selected tab/ border-top:1px solid black; float:left; font-weight:bold; padding-bottom: 999em; margin-bottom: -999em; } #TabSelectedLeft{ float:left; border-left:1px solid black; border-top:1px solid black; padding-bottom: 999em; margin-bottom: -999em; } #TabSelectedRight{ float:left; border-right:1px solid black; border-top:1px solid black; padding-bottom: 999em; margin-bottom: -999em; } /End of the new version of Tabs*/

27-mar-2007, 05:12	#2 (permalink)
pedrojo Fecha de Ingreso: enero-2007 Mensajes: 22	Re: problema con las pestañas en IE por favor, ¿no hay nadie que me pueda ayudar? Si quereis ver el problema unicamente hay que copiar la primera parte del código en un archivo .html y la otra parte en un .css y ya está, no hay que hacer nada más. Ayuda por favor.

30-mar-2007, 02:27	#3 (permalink)
pedrojo Fecha de Ingreso: enero-2007 Mensajes: 22	Re: problema con las pestañas en IE por favor que alguien me ayude que me hace mucha falta!!! gracias por anticipado

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