Autor Tema: Centrar elementos en IE (SOLUCIONADO)  (Leído 10557 veces)

Desconectado Rododendro

  • Junior Member
  • **
  • Mensajes: 95
Re: Centrar elementos en IE
« Respuesta #10 en: 11 de Enero de 2008, 07:05:20 pm »
Muchas gracias, WillyN, probaré ese código lo antes posible. No obstante, necesito saber un detalle antes de cualquier ensayo: la parte del código -comentario creo que se llama- donde se lee "/*center #navcontainer in IE5 */", ¿basta para que el menú quede centrado en todas las versiones de IE anteriores a la más moderna? Pregunto esto porque yo en IE6 lo veo desplazado a la izquierda...

Desconectado WillyN

  • Member
  • ***
  • Mensajes: 234
    • Escuela Canina Maya
Re: Centrar elementos en IE
« Respuesta #11 en: 11 de Enero de 2008, 07:44:02 pm »
Pués yo en IE6 lo veo centrado,

Mira lo que has hecho, y claro, si tienes más código en la página de prueba, éste influirá.
Si te interesa el comportamiento de los perros, visíta Escuela Canina Maya

Desconectado Rododendro

  • Junior Member
  • **
  • Mensajes: 95
Re: Centrar elementos en IE
« Respuesta #12 en: 12 de Enero de 2008, 07:44:20 pm »
Pues ahí va el último de los varios códigos que he ido probando. Con el tuyo sí veo el menú centrado, pero había una pequeña separación entre cada enlace, y además el cambio de color no me funcionaba.

  Bien, primero el CSS:

<style type="text/css">

#pagina {
text-align: center;
width: 740px;
margin: auto;
}

#contenido {
width: 720px;
position: relative;
top: 50px;
left: 270px;
margin-top: 35px;
}

H1 {
text-align: center;
}

H2 {
text-align: justify;
}

H3 {
text-align: justify;
}

table {
width: 80%;
text-align: center;
margin-left: auto;
margin-right: auto;
}

#navcontainer {
margin: 0 auto;
}

#navlist {
padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdans, sans-serif;
text-align: center;
position: relative;
top: 25px;
left: 210px;
}

#navlist li {
list-style: none;
margin: 0;
border-top: 1px solid gray:
display: inline;
}

#navlist li a {
padding: 0.25em 0.5 em 0.25em 0.75em;
border-left: 1em solid #AAB;
text-decoration: none;
width: 160px;
display: block;
float: left;
}

#navlist li a: link {color: #448;}
#navlist li a: visited {color: #667;}

#navlist li a: hover {
border-color: #FE3;
color: #FFF;
background: #332;
}

</style>


  Y ahora, el documento html propiamente dicho:

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <head>
<title>Ejercicio</title>
<link href="..//carpetauno/estilo.css" rel="stylesheet" type="text/css" />
<style>

.floatright {
float: right;
margin: 2px 2px 12px 12px;
}

.floatleft {
float: left;
margin: 2px 12px 12px;
}

</style>
</head>
<body style=background: #00FF00;>
<div id="pagina">
<div id="contenido">
<p><H1>Título del ejercicio</H1></p>
<p><H2>
<img class="floatright" src="../imagenes/playa.jpg" alt="arenal" />Aquí ponemos un rollete de varías líneas...</H2></p>
<br><br>
<center>
<table>
<tbody>
<tr>
<td>
<p><H3>Blablablá...</H3></p>
</td>
</tr>
</tbody>
</table>
</center>
<br><br>
<p><H2>Blablablá...</H2></p>
<br><br>
<div id="navcontainer">
<ul id="navlist">
<li id="active">
<li><a href="#">Enlace uno</a></li>
<li><a href="#">Enlace dos</a></li>
<li><a href="#">Enlace tres</a></li>
<li><a href="#">Enlace cuatro</a></li>
<li><a href="#">Enlace cinco</a></li>
</ul>
</div>
</div>
</body>
</html>

  Bueno, pues salvo error de transcripción ése es el último código en el que fracasa el centrado del menú. He obviado algunos datos irrelevantes, como el color de fondo, el tipo de fuente, etc .(Otro detalle: si especifico unl color distinto para "pagina" y "contenido", ¿cómo se hace para que el color del body esté indicado ya en el archivo CSS sin tener que especificarlo en la propia página? ¿"Body" y "página son lo mismo a efectos de código?)

  Un saludo y gracias por la ayuda que me estás brindando, WillyN   ;-)
   

Desconectado WillyN

  • Member
  • ***
  • Mensajes: 234
    • Escuela Canina Maya
Re: Centrar elementos en IE
« Respuesta #13 en: 13 de Enero de 2008, 06:10:25 pm »
Estás liando mucho más de la cuenta las cosas, tanto que me mareo pensando en cómo explicarte como deberías hacerlo.

Te vendría bién un cursillo de html y de css.

Me gustaría poder darte ese cursillo yo aquí pero tampoco soy un enterado del tema, lo siento.
Si te interesa el comportamiento de los perros, visíta Escuela Canina Maya

Desconectado Rododendro

  • Junior Member
  • **
  • Mensajes: 95
Re: Centrar elementos en IE
« Respuesta #14 en: 14 de Enero de 2008, 12:55:06 pm »
Estás liando mucho más de la cuenta las cosas, tanto que me mareo pensando en cómo explicarte como deberías hacerlo.

  Pues, la verdad, pienso que el diseño mencionado es de lo más simple que pueda haber, no incorpora efectos de ninguna clase, sólo es una mera presentación de texto con alguna imagen y un menú horizontal, por eso me extraña la dificultad de centrar ese menú, que es lo çunico que no acabo de lograr.
 
Citar
Te vendría bién un cursillo de html y de css.

He mirado ya unos cuantos, y todos dicen que poniendo tal código se consigue tal efecto. Yo me he fiado de ellos, y resulta que cuando eso no ocurre, ni el cursillo ni nadie es capaz de hacerte salir del atolladero. Se supone que es preferible maquetar con divs, pero si uno se topa con un problema tan elemental como irresoluble (centrar el menú en el navegador más utilizado-  ¿no será mejor tirar de tablas y menú con Javascript?

   

Me gustaría poder darte ese cursillo yo aquí pero tampoco soy un enterado del tema, lo siento.
[/quote]

Desconectado Liamngls

  • Moderador
  • ******
  • Mensajes: 15689
    • Manuales-e
Re: Centrar elementos en IE
« Respuesta #15 en: 14 de Enero de 2008, 03:22:26 pm »
¿Lo que quieres que salga centrado es esto?

Código: [Seleccionar]
<center>
<table>
<tbody>
<tr>
<td>
<p><H3>Blablablá...</H3></p>
</td>
</tr>
</tbody>
</table>
</center>

¿Por qué tienes una etiqueta center ahí? ¿No se supone que el CSS ya te centra la tabla?

Un enlace interesante: http://www.forosdelweb.com/f53/centrar-tabla-segun-resolucion-251356/
Otro: http://www.mclibre.org/consultar/amaya/css/css_le_tablas.html
Otro: http://www.mail-archive.com/[email protected]/msg02348.html
Y este está contenido en el anterior, pero mal enlazado ... http://www.minid.net/2004/09/29/%c2%a1mamita%e2%80%a6-%c2%a1que-pedazo-de-tablas/

En cuanto al color de fondo de contenido y página ....al CSS le tiene que dar un poco igual y a tí también, los nombres son solo eso, si vas a aplicar estilos a elementos comunes lo mejor es que no uses nombres genéricos ... por lo demás luego los aplicas donde sea y listo.

Desconectado WillyN

  • Member
  • ***
  • Mensajes: 234
    • Escuela Canina Maya
Re: Centrar elementos en IE
« Respuesta #16 en: 14 de Enero de 2008, 04:45:53 pm »
Así tienes más o menos lo que intentabas hacer

Código: [Seleccionar]
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <head>
<title>Ejercicio</title>
<style type="text/css">
body {
text-align:center; /* center #navcontainer in IE5 */
}
#navcontainer {
margin: 0 auto;
}

#navlist {
width: 100%;
padding: 0 1px 1px;
font: bold 12px Verdana, sans-serif;
}

#navlist li {
list-style: none;
margin: 0;
border-top: 1px solid gray;
display: inline;
}

#navlist li a {
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}

#navlist li a:link {
color: #448;
}
#navlist li a:visited {
color: #667;
}

#navlist li a:hover {
border-color: #FE3;
color: #FFF;
background: #332;
}
</style>
</head>
<body>
<div id="pagina">
<div id="contenido">
<h1>Título del ejercicio</h1>
<h2>Aquí ponemos un rollete de varías líneas...</h2>
<h2>Blablablá...</h2>
<h3>Blablablá...</h3>
<div id="navcontainer">
<ul id="navlist">
<li id="active">
<li><a href="#">Enlace uno</a></li>
<li><a href="#">Enlace dos</a></li>
<li><a href="#">Enlace tres</a></li>
<li><a href="#">Enlace cuatro</a></li>
<li><a href="#">Enlace cinco</a></li>
</ul>
</div>
</div>
</body>
</html>
Si te interesa el comportamiento de los perros, visíta Escuela Canina Maya

Desconectado Rododendro

  • Junior Member
  • **
  • Mensajes: 95
Re: Centrar elementos en IE
« Respuesta #17 en: 14 de Enero de 2008, 06:51:42 pm »
    Hola de nuevo. Respondiendo primeramente a Liamgls (ante todo, gracias por los enlaces), lo que intento es que el menú horizontal quede centrado en Internet Explorer. Respecto a la tabla, sé que debe (o debería) quedar centrada según lo prefijado en el CSS; pero durante mis ejercicios con varios tipos de diseño he notado que a veces debo añadir esea etiqueta <center>, pues algunos elementos indicados con posición central en el CSS no acatan esa instrucción . El porqué de eso es algo que por ahora escapa a mi entendimiento, así como el hecho de que el color de fondo especificado para #pagina o #body en el CSS tampoco se aplique y deba, por tanto, determinarlo en el documento html.

  En cuanto a ti, WillyN, te agradezco una vez más tu ayuda; por supuesto, luego probaré ese código revisado y mañana "forearé" de nuevo para comentar el resultado.

  Un saludo.   

Desconectado WillyN

  • Member
  • ***
  • Mensajes: 234
    • Escuela Canina Maya
Re: Centrar elementos en IE
« Respuesta #18 en: 14 de Enero de 2008, 07:06:08 pm »
para dar un color de fondo añades a body el background-color.

Quedaría p.ej. asi:
Código: [Seleccionar]
body {
background-color: #00ff00;
text-align:center; /* center #navcontainer in IE5 */
}

Si quieres cambiar la distancia entre ciertos elementos también se hace en el css, no usando <br>.

Nota también como un <h1></h1> no queda dentro de <p></p>.
Debes respetar un órden con los <h>, un <h2> aparece antes de un <h3> y un <h3> antes de un <h4>. Acuérdate siempre de que cualquier elemento se puede dar el estilo deseado usando class o id.

El código que te pongo es una cosa básica, un ejemplo.

Y como noté que faltaba un </div> en el código que te dí antes te pego de nuevo el código completo:
Código: [Seleccionar]
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <head>
<title>Ejercicio</title>
<style type="text/css">
body {
background-color: #00ff00;
text-align:center; /* center #navcontainer in IE5 */
}

#navcontainer {
width:100%;
margin: 0 auto;
}

#navlist {
width: 100%;
padding: 0 1px 1px;
font: bold 12px Verdana, sans-serif;
}

#navlist li {
list-style: none;
margin: 0;
border-top: 1px solid gray;
display: inline;
}

#navlist li a {
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}

#navlist li a:link {
color: #448;
}
#navlist li a:visited {
color: #667;
}

#navlist li a:hover {
border-color: #FE3;
color: #FFF;
background: #332;
}
</style>
</head>
<body>
<div id="pagina">
<div id="contenido">
<h1>Título del ejercicio</h1>
<h2>Aquí ponemos un rollete de varías líneas...</h2>
<p>Blablablá...</p>
<p>Blablablá...</p>
</div>
<div id="navcontainer">
<ul id="navlist">
<li id="active">
<li><a href="#">Enlace uno</a></li>
<li><a href="#">Enlace dos</a></li>
<li><a href="#">Enlace tres</a></li>
<li><a href="#">Enlace cuatro</a></li>
<li><a href="#">Enlace cinco</a></li>
</ul>
</div>
</div>
</body>
</html>

Si quieres saber cómo hacer ciertas cosas para ampliar este ejemplo, pregunta. :)
Si te interesa el comportamiento de los perros, visíta Escuela Canina Maya

Desconectado Rododendro

  • Junior Member
  • **
  • Mensajes: 95
Re: Centrar elementos en IE
« Respuesta #19 en: 15 de Enero de 2008, 12:55:05 pm »
Muy buenas, he aprovechado ek código que me facilitaste para introducir algunos cambios.
   
   Ahí van:
 
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <head>
<title>Ejercicio</title>
<style type="text/css">
body {
background-color: #00ff00;
text-align:center; /* center #navcontainer in IE5 */
}

#contenido {
width: 740px;
background-color: lime;
position: absolute;
top: 40px;
left: 260px;
}

h1 {
font: bold 28px Arial;
color: red;
}

h2 {
font: bold 24px Courier, sans-serif;
color: black;
}

h3 {
font: bold 22px Arial, sans-serif;
color: blue;
}


#navcontainer {
width:100%;
margin: 0 auto;
}

#navlist {
width: 100%;
padding: 0 1px 1px;
font: bold 12px Verdana, sans-serif;
}

#navlist li {
list-style: none;
margin: 0;
border-top: 1px solid gray;
display: inline;
}

#navlist li a {
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
width: 120px;
display: block;
float: left;
}

#navlist li a:link {
   color: #448;
}
#navlist li a:visited {
   color: #667;
}

#navlist li a:hover {
border-color: #FE3;
color: #FFF;
background: #332;
}
</style>
</head>
<body>
<div id="contenido">
<h1>Título del ejercicio</h1>
<h2><span style="text-align: justify; text-indent: 1cm">Aquí ponemos un rollete de varías líneas...</span></h2>
<h3></span style="text-align: justify; text-indent: 1cm">Blablablá...</span></h3>
<p>Blablablá...</p>
</div>
<div id="navcontainer">
<ul id="navlist">
<li id="active">
<li><a href="#">Enlace uno</a></li>
<li><a href="#">Enlace dos</a></li>
<li><a href="#">Enlace tres</a></li>
<li><a href="#">Enlace cuatro</a></li>
<li><a href="#">Enlace cinco</a></li>
</ul>
</div>
</div>
</body>
</html>

  Salvo errores de transcripción, ése es el código ampliado. Agrego algunas observaciones:

  - el problema del centrado de menú radica en "#navlista li a". Tal y como me apuntabas en el primer código, el menú aparecía centrado, pero cada enlace era de un tamaño distinto (según la longitud del texto), y además mediaba entre ellos una pequeña separación que mostraba el color del body. Con "display block" el menú aparece como un bloque, pero en sentido vertical y-esto me parece curioso-, centrado en IE y desplazado a la izquierda en Firefox. La solución podría ser un sustitutivo de "float: left" que centrase el bloque, pero no sé cuál podría ser.

-He recurrido a "<span style>" para que el texto esté justificado y sangrado, evitando así el centrado impuesto por el "text-align: center" del body.

-Para concluir, diré que en el conjunto del resultado final se aprecia lo siguiente en cada navegador:
 
   * En IE, el título se ve casi pegado al borde superior del #contenido. En cambio,
   a la derecha de los textos hay un margen holgado, y el menú está prácticamente centrado y con espaciado suficiente a los lados y arriba y abajo.

   * En Firefox, el título está más separado del borde superior, pero el margen derecho de los textos es nulo, y el menú está algo desplazado a la izquierda; de hecho, su extremo izquierdo toca el borde del div "contenido", y todo el menú toca el borde inferior de ese div.

       ¿Alguna propuesta de enmienda para esos fallos?  :???:   



 

Aviso Legal | Política de Privacidad | Política de Cookies

el contenido de la web se rige bajo licencia
Creative Commons License