Centrar Header estoy creando el diseño de una web para una intranet que está escrita en JSP, pero el diseño lo estoy intentando hacer el CSS, y es la primera vez que toco las Hojas de Estilo. Por tanto, estoy un poco perdido.
Estoy siguiendo unos manuales de CSS y más o menos van saliendo las cosas, aunque con trabajo. La cuestión es que el header no se centra correctamente.
El fondo sobre el que pone "Administración de la Base de Datos..." está desplazado a la izquierda un par de píxeles cuando lo miramos desde IE, pero desde Firefox un montón hacia la derecha.
El fondo sobre el que pone "Index", en IE no está bien centrado tampoco, se queda a mitad, y en Firefox, está hacia la izquierda... Un caos total, vaya...
La imagen (la que en las imágenes de abajo se ve cortada por la mitad), ¿por qué en IE no se ve transparente mientras que en Firefox sí? Aclarar que el fondo de la imagen es transparente, y está en formato PNG.
Captura de Pantalla: Internet Explorer
http://www.imagebam.com/image/59b2499509181
Captura de Pantalla: Firefox
http://www.imagebam.com/image/9a64259509183
Código del index.jsp
Cita:
Código del style.css<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Administración de la Base de Datos de Doukonía</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="container">
<h1 id="header">Administración de la Base de Datos de Doukonía</h1>
</div>
<h2 id="top-menu">Index</h2>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<img src="LogoDoukonia.png" alt="Logo" width="242" height="65" align="center" longdesc="Logo Doukonia" />
<br />
<br />
<br>
<a href="formInsertarUsuario.jsp">Insertar Usuario</a>
<br>
<br>
<a href="formModificarUsuario.jsp">Modificar Usuario</a>
<br>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Administración de la Base de Datos de Doukonía</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="container">
<h1 id="header">Administración de la Base de Datos de Doukonía</h1>
</div>
<h2 id="top-menu">Index</h2>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<img src="LogoDoukonia.png" alt="Logo" width="242" height="65" align="center" longdesc="Logo Doukonia" />
<br />
<br />
<br>
<a href="formInsertarUsuario.jsp">Insertar Usuario</a>
<br>
<br>
<a href="formModificarUsuario.jsp">Modificar Usuario</a>
<br>
Cita:
body{
margin: 0;
font-family: Calibri;
font-size: 14px;
text-align: center;
vertical-align: top;
background: #bfb8a1 url('bg_page.gif') repeat-y 50% top;
color: #222;
}
h1{
font-family: Calibri;
font-size: 32px;
padding: 0 0 10px 15px;
}
h2{
font-family: Calibri;
font-size: 20px;
padding: 0 0 0 0;
}
img{
text-align: center;
}
h3{
font-family: Calibri;
padding: 15px 0 15px 0;
}
h4{
font-family: Calibri;
padding: 0 0 0 15px;
}
/* CENTRADO VERTICAL */
#wrapper{
width: 100%; /* Ancho: 100% de la página */
text-align: center;
margin-top: 0px; /* Separación superior del navegador */
}
#container{
width: 880px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header{
width: 880px;
padding: 50px 0px 30px 20px;
background: url('bg_header_900x136.gif') no-repeat left bottom;
background-position: center;
color: #fff;
height: 0px;
margin-bottom: 0px;
}
#content{
width: 100%;
background-color:#FFFFFF;
height: 400px;
}
/* BARRA DE NAVEGACIÓN */
#top-menu{
clear: both;
float: none;
width: 880px;
font-family: Calibri;
text-align: left;
border-top: 2px solid #BFB8A1;
border-bottom: 3px solid #BFB8A1;
background: #736E60;
}
#top-menu a{
text-decoration: none;
color: #fff;
}
#top-menu a:hover{
text-decoration: underline;
}
#top-menu ul{
margin: 0 auto;
width: 850px;
padding: 5px 0;
text-align: left;
}
#top-menu ul li{
display: inline;
padding: 0 20px 0 0;
font-size: 14px;
}
margin: 0;
font-family: Calibri;
font-size: 14px;
text-align: center;
vertical-align: top;
background: #bfb8a1 url('bg_page.gif') repeat-y 50% top;
color: #222;
}
h1{
font-family: Calibri;
font-size: 32px;
padding: 0 0 10px 15px;
}
h2{
font-family: Calibri;
font-size: 20px;
padding: 0 0 0 0;
}
img{
text-align: center;
}
h3{
font-family: Calibri;
padding: 15px 0 15px 0;
}
h4{
font-family: Calibri;
padding: 0 0 0 15px;
}
/* CENTRADO VERTICAL */
#wrapper{
width: 100%; /* Ancho: 100% de la página */
text-align: center;
margin-top: 0px; /* Separación superior del navegador */
}
#container{
width: 880px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header{
width: 880px;
padding: 50px 0px 30px 20px;
background: url('bg_header_900x136.gif') no-repeat left bottom;
background-position: center;
color: #fff;
height: 0px;
margin-bottom: 0px;
}
#content{
width: 100%;
background-color:#FFFFFF;
height: 400px;
}
/* BARRA DE NAVEGACIÓN */
#top-menu{
clear: both;
float: none;
width: 880px;
font-family: Calibri;
text-align: left;
border-top: 2px solid #BFB8A1;
border-bottom: 3px solid #BFB8A1;
background: #736E60;
}
#top-menu a{
text-decoration: none;
color: #fff;
}
#top-menu a:hover{
text-decoration: underline;
}
#top-menu ul{
margin: 0 auto;
width: 850px;
padding: 5px 0;
text-align: left;
}
#top-menu ul li{
display: inline;
padding: 0 20px 0 0;
font-size: 14px;
}
¿Cómo puedo hacer para solucionar ambos problemas, y que todo sea compatible con ambos navegadores?
Muchas gracias por todo. Un saludo.
