MULTIMEDIA, Video digital, Grabación, Diseño gráfico, Diseño web, Programación > Webmasters - Diseño Web - Programación - Diseño gráfico
Centrar elementos en IE (SOLUCIONADO)
Liamngls:
¿Lo que quieres que salga centrado es esto?
--- Código: ---<center>
<table>
<tbody>
<tr>
<td>
<p><H3>Blablablá...</H3></p>
</td>
</tr>
</tbody>
</table>
</center>
--- Fin del código ---
¿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.
WillyN:
Así tienes más o menos lo que intentabas hacer
--- Código: ---<!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>
--- Fin del código ---
Rododendro:
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.
WillyN:
para dar un color de fondo añades a body el background-color.
Quedaría p.ej. asi:
--- Código: ---body {
background-color: #00ff00;
text-align:center; /* center #navcontainer in IE5 */
}
--- Fin del código ---
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: ---<!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>
--- Fin del código ---
Si quieres saber cómo hacer ciertas cosas para ampliar este ejemplo, pregunta. :)
Rododendro:
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? :???:
Navegación
[#] Página Siguiente
[*] Página Anterior
Ir a la versión completa