Foros del Web » Creando para Internet » CSS »

Centrar Header

Estas en el tema de Centrar Header en el foro de CSS en Foros del Web. Buenas tardes, 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 ...
  #1 (permalink)  
Antiguo 17/07/2008, 10:47
Avatar de Isdiar  
Fecha de Ingreso: junio-2008
Ubicación: Sevilla, España
Mensajes: 179
Antigüedad: 9 años, 6 meses
Puntos: 1
Exclamación Centrar Header

Buenas tardes,

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:
<%@ 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>
Código del style.css
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;
}


¿Cómo puedo hacer para solucionar ambos problemas, y que todo sea compatible con ambos navegadores?


Muchas gracias por todo. Un saludo.
  #2 (permalink)  
Antiguo 17/07/2008, 13:28
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Centrar Header

En primer lugar cosas como esta las puedes simplificar:

#container{
width: 880px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

Así:

#container{
width: 880px;
margin: 0 auto;
}

Tanto margin como padding, border, etc. funcionan agrupados:

arriba-derecha-abajo-izquierda

Por lo que con esto:

Cita:
h1{
font-family: Calibri;
font-size: 32px;
padding: 0 0 10px 15px;
}
le estás diciendo al H1 que tenga 10px de relleno abajo y 15 a la izquierda, y con esto otro:

Cita:
#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;
}
que tenga un relleno de 50px arriba, 30 abajo y 20 a la izquierda, ya que al ponerlo como:

<h1 id="header">

le están afectando los dos selectores, tanto el genérico h1 como el del ID #header.

Dale unas vueltas por ahí.

En cuanto a los png deberás buscar PNG+IE6, que hay ríos enteros de información.

Mikel.
  #3 (permalink)  
Antiguo 17/07/2008, 18:23
Avatar de Isdiar  
Fecha de Ingreso: junio-2008
Ubicación: Sevilla, España
Mensajes: 179
Antigüedad: 9 años, 6 meses
Puntos: 1
Respuesta: Centrar Header

Gracias Mikel, me has aclarado algunas cosillas que no sabía. Ya me puedo acostar sabiendo algo más hoy... jajaja

En "h1" he eliminado el padding, para que no haya conflicto con el padding del "#header". Sin embargo, eso no soluciona nada respecto a que el fondo de "Administración de la Base de Datos..." se centre correctamente. Sigue igual que antes.

Respecto a lo de la imagen PNG en IE6... gracias, no sabía que IE6 tuviese problemas con los PNG, aunque al parecer, en IE7 ya se soluciona el problema (yo sigo con mi IE6, que no casca como IE7, y como siempre uso Firefox... no me es problema).

Espero a ver qué otras ideas hay para centrar el dichoso header... Si necesitáis algo (líneas de código de algún fichero o lo que sea), pedídmelo, pues no tendo ni idea de cómo solucionar el problemilla, y queda muy feo eso ahí...

Un abrazo!
  #4 (permalink)  
Antiguo 17/07/2008, 18:53
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Centrar Header

Si pones estos dos selectores así:

Cita:
h1{
font-family: Calibri;
font-size: 32px;
padding: 0 0 10px 0px;
}

#header{
width: 880px;
padding: 50px 0px 30px 0px;
background: url('bg_header_900x136.gif') no-repeat left bottom;
background-position: center;
color: #fff;
height: 0px;
margin: 0 auto;
}
el bloque de "Administración de la Base de Datos..." debería quedar centrado. Ten en cuenta que en FF parece verse más a la derecha, pero es porque no muestra la barra de scroll vertical hasta que haga falta, miestras que IE la muestra siempre, y en realidad está centrada en ambos.

Mikel.
  #5 (permalink)  
Antiguo 18/07/2008, 05:19
Avatar de Isdiar  
Fecha de Ingreso: junio-2008
Ubicación: Sevilla, España
Mensajes: 179
Antigüedad: 9 años, 6 meses
Puntos: 1
Respuesta: Centrar Header

Pero Mikel, cuando yo veo las páginas con FF, tengan o no Scroll están centradas. Sin embargo, si miras las imágenes que puse arriba (te pongo sus URL más abajo), verás que no es normal lo que a mi me pasa...

Captura de Pantalla: Internet Explorer
http://www.imagebam.com/image/59b2499509181

Captura de Pantalla: Firefox
http://www.imagebam.com/image/9a64259509183

Un saludo!
  #6 (permalink)  
Antiguo 18/07/2008, 06:30
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Centrar Header

Es que con tu código yo no veo eso que se ve en las capturas.
¿podrías poner el código exacto que te genera eso?

Por ejemplo, si quieres centrar el h2 es lo mismo que habíamos hablado, ponerle un margin: o auto;

Mikel.
  #7 (permalink)  
Antiguo 18/07/2008, 10:13
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Centrar Header

Mira a ver si lo que estás queriendo conseguir es algo como esto más o menos.

Lçogicamente no tengo tus imágenes.

Mikel.
  #8 (permalink)  
Antiguo 18/07/2008, 18:23
Avatar de Isdiar  
Fecha de Ingreso: junio-2008
Ubicación: Sevilla, España
Mensajes: 179
Antigüedad: 9 años, 6 meses
Puntos: 1
Respuesta: Centrar Header

Mikel, eres un crack... xD

Es lo que quiero... cómo lo hiciste? Se ve perfectamente tanto en IE como en FF...

Gracias! ;)

Última edición por Isdiar; 18/07/2008 a las 18:34
  #9 (permalink)  
Antiguo 18/07/2008, 18:39
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Centrar Header

Mira el código fuente de ese archivo, que he cambiado unas cuantas cosas y limpiado otras más.

Mikel.
  #10 (permalink)  
Antiguo 28/07/2008, 10:42
Avatar de Isdiar  
Fecha de Ingreso: junio-2008
Ubicación: Sevilla, España
Mensajes: 179
Antigüedad: 9 años, 6 meses
Puntos: 1
Respuesta: Centrar Header

Hola Mikmoro,

perdona que me haya llevado varios días sin responder, pero estuve pasando unos días en la playa con algunos amigos (serán posiblemente mis únicas vacaciones), y me despreocupé por completo de todo esto, quería desconectar.

La verdad es que gracias a tí he podido solucionar el problemilla, al menos en Firefox, pues en IE sigue estando desviado un pixel a la izquierda. Seguiré intentando averiguar por Internet a ver cómo solucionar el problema. Si no puedo, pues... me aguantaré, y lo dejaré, aunque sea, con ese pixel desviado del camino del bien y la felicidad... xD

Muchas gracias por todo. Un saludo!
  #11 (permalink)  
Antiguo 28/07/2008, 10:54
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Centrar Header

Hola, Isdiar. No está mal faltar aquí por estar en la playa

Si pones el código en alguna parte y un enlace, igual podemos mirar eso del pixel que dices.
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 28/07/2008, 11:33
Avatar de Isdiar  
Fecha de Ingreso: junio-2008
Ubicación: Sevilla, España
Mensajes: 179
Antigüedad: 9 años, 6 meses
Puntos: 1
Respuesta: Centrar Header

Hola Mikmoro,

he colgado en http://www.elhuequito.com/TEMP/Doukonia los ficheros que estoy usando. El index2.jsp es el que te interesa, aunque no puede verse, pues imagino que mi hosting no aceptará JSP... (luego hablaré con los del hosting).

Te dejo un par de capturas, la primera en IE, la segunda en Firefox:
IE: http://img371.imageshack.us/img371/8...eaderiesa0.png
FF: http://img513.imageshack.us/img513/3...eaderfftq4.png

Si te fijas, en IE, a la derecha del Header "Administración de la ..." y del "Index", hay una línea que pertenece al fondo amarillito ese. He intentado solucionarlo con el padding, pero nada...


Un saludo amigo!! ;)
  #13 (permalink)  
Antiguo 28/07/2008, 11:55
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Centrar Header

No estoy del todo seguro de a qué te refieres, pero lo que sí veo es que el espacio superior antes de la imagen de fondo del header, no es un espacio, sino un borde superior del mismo color del fondo:

Cita:
#header{
width: 900px;
padding: 50px 0px 30px 0px;
background: url(bg_header_900x136.gif)/* no-repeat left bottom*/;
border-top: 3px solid #BFB8A1;
/*background-position: center;
color: #fff;*/
}
y el que hay encima del index exactamente lo mismo:

Cita:
#top-menu{
/*clear: both;
float: none;
width: 880px;*/
font-family: Calibri;
font-style: normal;
text-align: left;
border-top: 2px solid #BFB8A1;
border-bottom: 3px solid #BFB8A1;
background: #736E60;
padding: 5px 0px 5px 0px;
}
Esos son los espacios que quedan, pero no sé si es a lo que te refieres.
__________________
Visita mi nueva web idplus.org
  #14 (permalink)  
Antiguo 28/07/2008, 12:18
Avatar de Isdiar  
Fecha de Ingreso: junio-2008
Ubicación: Sevilla, España
Mensajes: 179
Antigüedad: 9 años, 6 meses
Puntos: 1
Respuesta: Centrar Header

No, esos espacios están controlados, y son así por estética.

Yo me refiero a la línea amarilla clara que te señalo a continuación: http://www.elhuequito.com/TEMP/centrarheaderIE.png

Uso IE6, puede ser eso?

Un saludo!
  #15 (permalink)  
Antiguo 28/07/2008, 12:45
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Centrar Header

Pues la cosa es que esa línea yo no la veo, es decir, he cogido tu código, he quitado de la css todo lo que no necesitaba y he dejado sólo los selectores necesaios para lo de la cabecera, y esa línea no aparece.

Míralo aquí

Así que será algún otro selector de la css que está ensanchando la caja de alguna manera (lo más probable es algún padding o así.

Revisa el código css que he dejado, compáralo con el tuyo y luego vete eliminado clase por clase hasta que des con ella.
__________________
Visita mi nueva web idplus.org
  #16 (permalink)  
Antiguo 28/07/2008, 13:29
Avatar de Isdiar  
Fecha de Ingreso: junio-2008
Ubicación: Sevilla, España
Mensajes: 179
Antigüedad: 9 años, 6 meses
Puntos: 1
Respuesta: Centrar Header

Esto es... impresionante...

Con tu Web me pasa lo mismo: en FF la veo de lujo, y en IE sigo viendo la línea amarillenta, y eso que he instalado ya IE7...

Déjalo, tampoco nos vamos a marear más por esa línea...

Gracias de todos modos!!!! ;)
  #17 (permalink)  
Antiguo 28/07/2008, 16:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Centrar Header

¡Ah, demonios! Creía que estábamos hablando de IE6.

Prueba a hacer una cosa: vete reduciendo o aumentando la ventana del navegador muy poco a poco, y verás cómo va bailando el header ese pixel de lado a lado, y si te fijas, hay un momento en el que se ve y otro en el que no se ve. Ese es un problema de dibujado del IE7 que ya me había ocurrido en el portátil con una pantalla panorámica y con una resolución de 1440. Había un micro desajuste y no sabía por qué, hasta que al mover el ancho de la ventana muy muy despacio me dí cuenta de que aparecía y desaparecía, como ocurre en tu caso.

No sé si pasará en cualquier otro monitor a esa resolución con IE7, pero lo cierto es que creo que con el diseño que has hecho no creo que tenga solución. Si te preocupa habría que cambiar de estrategia, como poner el fondo al contenedor o así.
__________________
Visita mi nueva web idplus.org
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:53.