Foros de daboweb
MULTIMEDIA, Video digital, Grabación, Diseño gráfico, Diseño web, Programación => Webmasters - Diseño Web - Programación - Diseño gráfico => Mensaje iniciado por: Rododendro en 07 de Enero de 2008, 06:33:23 pm
-
Hola, necesito saber si existe algún codigo o script específico que permita centrar en Internet Explorer los elementos que Firefox muestra sin problema correctamente centrados -me refiero sobre todo a menús horizontales elaborados con CSS-.
Un saludo y feliz año a todos.
-
margin: 0 auto;
Pero me temo que necesitas algo más complicado porque estás hablando de un menú.
¿Qué código estás usando?
-
El código general lo he ido variando con varias alternativas, pero como el problema persiste supongo que la pega estará en el menú propiamente dicho. Es el descrito en http://css.maxdesgin.com.au/listamatic/horizontal04.htm (http://css.maxdesgin.com.au/listamatic/horizontal04.htm). Curiosamente, luego he visto que otro usuario tenía dificultades con ese código, en el sentido de ver los diferentes enlaces desordenados o algo así. Yo lo veo perfectamente, sólo que en IE aparece desplazado a la izquierda, y como digo, por más que cambio el diseño general de la página no hay forma de centrarlo en ese navegador.
Un saludo y gracias por contestar.
-
¿Estas usando exactamente el mismo código, éste?
HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
CSS
#navlist
{
padding: 0 1px 1px;
margin-left: 0;
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;
}
Tal como está ese menu en la página http://css.maxdesign.com.au/listamatic/horizontal04.htm lo veo igualitoigualito tanto en IE7 como en FF.
-
Pues en IE6 no parece haber manera de corregir su desplazamiento a la izquierda, al menos yo no lo consigo. La versión 7 subsana algunos problemas de las anteriores -como la visualización correcta de las imágenes PNG, por ejemplo-, así que posiblemente sea más respetuosa con algunos estándares que sus predecesoras; aunque esto, obviamente, no exime de buscar un remedio (no todo el mundo usa la versión más actual de su navegador...).
Saludos.
-
En IE6 también lo veo igualito.
Sospecho que el problema tiene que ver con el resto del código que estás usando.
Si pones un enlace a una página donde tienes incorporado el menú se puede mirar más a fondo el asunto.
-
Si cuando dices que lo ves igualito en IE6 te refieres a verlo tal y como aparece en la página del ejemplo, pues la verdad es que yo también lo veo tal cual. Lo que pasa es que en las pruebas que estoy haciendo en local se ve de esa misma forma, lo que significa entre otras cosas... a la izquierda. He usado Google para buscar información; y en varias páginas y blogs donde se explica cómo crear un menú con CSS, entre los comentarios añadidos por los visitantes casi siempre hay alguno con la misma duda que yo: "sí, me funciona bien, pero ¿cómo puedo centrarlo?"
-
Lo puedes centrar colocándolo en un div al cual pones en el css la siguiente propiedad:
margin: 0 auto;
-
Y tomando como referencia el código del menú, ¿dónde iría ese añadido? ¿Te refieres simplemente a dejar el código igual, pero "encerrándolo" en un div horizontal, transparente, algo mayor que el menú y dándole ese "margin: 0 auto;" que mencionas?
-
Así queda centrado:
<html>
<head>
<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>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
</div>
</body>
</html>Para verlo tal cual copias este código, lo pegas en un documento, lo guardas como p.ej. menu.html y lo abres en tu navegador.
-
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...
-
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á.
-
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 ;-)
-
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.
-
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.
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]
-
¿Lo que quieres que salga centrado es esto?
<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.
-
Así tienes más o menos lo que intentabas hacer
<!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>
-
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.
-
para dar un color de fondo añades a body el background-color.
Quedaría p.ej. asi:
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:
<!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. :)
-
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? :???:
-
Otro sitio muy interesante es TomaToma.ws (http://www.tomatoma.ws/subsecciones.php?forum_id=28&catid=22&todos=1), tiene unos cuantos tutos buenos para aprender acerca de html y css, échale un vistazo. ;-)
-
De acuerdo, le echaré una ojeada. Debo decir que estos días intenté colocar alguna imagen con un float y el código en cuestión no es capaz de hacerla visualizar.
Saludos.
-
Bueno, me costó lo suyo, pero a base de probar al fin conseguí un resiultado aceptable. Gracias a todos por vuestros consejos ;-)
-
Bién hecho,
Así se aprende, probando... ;-)