Esta es una discusión para el tema Centrar Header en el foro vBulletin 3 - Preguntas, Problemas y Soluciones, bajo la categoría Soporte vBulletin; Hola amigos, aqui mis dudas
1. Como hago para que el Header, me quede completamente en el centro, ya intente de todo y nada, en la captura no sale completo la imagen hasta donde se ...
Página:
URL del LinkBack
Acerca de los LinkBacks
Centrar Header
Hola amigos, aqui mis dudas
1. Como hago para que el Header, me quede completamente en el centro, ya intente de todo y nada, en la captura no sale completo la imagen hasta donde se estiende pero es mas larga, mide 785px les dejo la imagen y los Codigos
Mira les dejo el cod de Definición Adicional de CSS, a ver si alguien me ayuda a que me quede centrada
El Stilo que uso se llama CENTURA.Código PHP:/* ***** styling for 'big' usernames on postbit etc. ***** */
.bigusername { font-size: 11pt; }
/* ***** small padding on 'thead' elements ***** */
td.thead, div.thead { padding: 4px; }
/* ***** basic styles for multi-page nav elements */
.pagenav a { text-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }
/* ***** define margin and font-size for elements inside panels ***** */
.fieldset {
border: 1px solid #1e2930;
margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li {font-size: 11px; }
/* ***** don't change the following ***** */
form { display: inline; }
label { cursor: default; }
.normal { font-weight: normal; }
.inlineimg { vertical-align: middle; }
/* ***** Begin eXtremepixels custom CSS properties ***** */
/* ***** used to create shadow affect for sides ***** */
#brd_in {
border-left: 1px solid #2d3842;
border-right: 1px solid #2d3842;
}
/* ***** used to create shadow affect for sides ***** */
#brd_outer {
border-left: 3px solid #343f49;
border-right: 3px solid #343f49;
}
/* ***** SETS LOGO AREA FOUND IN HEADER AND ALL OF IT'S PROPERTIES ***** */
#logo {
background: url(centura/misc/header_logo.gif);
width: 785px;
height: 180px;
float: left;
margin: 0;
padding: 0;
background-position: top center;
}
/* ***** sets background for header area - No need to change this ***** */
#hdr {
background: #F3F5F5 url(centura/misc/header_back.gif) ;
width: 0%;
height: 180px;
margin: 0;
padding: 0;
}
#hdr_body_ls {
background: #F3F5F5 url(centura/misc/header_body_ls.gif) ;
width: 0px;
height: 180px;
float: left;
margin:0px;
padding: 0px;
}
/* ***** SETS HEADER RIGHT SIDE AREA FOUND IN HEADER AND ALL OF IT'S PROPERTIES ***** */
#hdr_rs {
background: url(centura/misc/header_rs.gif);
width: 0px;
height: 180px;
float: left;
padding: 0;
}
/* ***** NAVIGATION BOTTOM ***** */
#nav_btm {
background: url(centura/misc/nav_btm.gif);
width: 100%;
height: 10px;
margin: 0;
padding: 0;
}
/* ***** used for navigation background ***** */
#nav_back {
background: #F1F2F2 url(centura/misc/nav_background.gif);
width: 95%;
height: 22px;
margin: 0;
padding: 0;
}
#nav_ls {
background: #F1F2F2 url(centura/misc/nav_ls.gif);
width: 18px;
height: 22px;
float: left;
margin: 0;
padding: 0;
}
#nav_rs {
background: #F1F2F2 url(centura/misc/nav_rs.gif);
width: 22px;
height: 22px;
float: right;
margin: 0;
padding: 0;
}
/* ***** rounded corners - TOP of page ***** */
#round_top_ls {
width: 38px;
height: 24px;
margin: 0;
padding: 0;
float: left;
}
#round_top_main {
background: #2c3841;
width: 100%;
height: 24px;
margin: 0;
padding: 0;
}
#round_top_rs {
width: 38px;
height: 24px;
margin: 0;
padding: 0;
float: right;
}
/* ***** rounded corners - BOTTOM of page ***** */
#round_btm_ls {
width: 38px;
height: 24px;
margin: 0;
padding: 0;
float: left;
}
#round_btm_main {
background: #2c3841;
width: 100%;
height: 24px;
margin: 0;
padding: 0;
}
#round_btm_rs {
width: 38px;
height: 24px;
margin: 0;
padding: 0;
float: right;
}
.info {
padding-left: 3px;
padding-right: 0px;
padding-top: 3px;
padding-bottom: 3px;
background-color: #29363f;
border-top: 1px solid #1d282f;
border-right: 2px solid #1d282f;
border-left: 1px solid #1d282f;
border-bottom: 2px solid #1d282f;
margin-bottom: 3px;
}
.announce_l {
background: #26323a;
color: #cdd0d3;
border-left: 1px solid #44525c;
border-top: 1px solid #44525c;
}
.announce_r {
background: #2c3841;
color: #cdd0d3;
border-left: 1px solid #44525c;
border-top: 1px solid #44525c;
}
.stuck {
background: #2c3841;
color: #cdd0d3;
border-left: 1px solid #44525c;
border-top: 1px solid #44525c;
}
.spacer {
padding: 7px 7px 7px 7px;
}
/* ***** used to 1 px sides for bottom category etc ***** */
.hdr_spacer {
padding: 4px 4px 4px 4px;
}
/* ***** Navigation Link Text Properties ***** */
.h_nav {
color: #2c3841;
font: 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
padding: 3px 6px 3px 6px;
white-space: nowrap;
}
.h_nav a:link
{
color: #2c3841;
text-decoration: none;
}
.h_nav a:visited
{
color: #2c3841;
text-decoration: none;
}
.h_nav a:hover, .h_nav a:active
{
color: #3d4c57;
text-decoration: none;
}
Respuesta: Centrar Header
Tambien pongo aqui mi Plantilla Header
Código PHP:<!-- set below for skin width-->
<table width="83%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#303c45">
<tr>
<td width="100%" align="left" valign="top">
<div id="brd_outer">
<div id="brd_in">
<!-- begin header / logo is controlled via #logo in main CSS file -->
<div align="center"><div id="hdr"><div id="hdr_rs"></div><div id="logo"></div><div id="hdr_body_ls"></div></div></div>
<!-- nav buttons bar -->
<div align="center">
<div id="nav_back"><div id="nav_rs"></div><div id="nav_ls"></div>
<table cellpadding="0" cellspacing="0" border="0" width="50%" align="center">
<tr>
<td><img src="$stylevar[imgdir_misc]/nav_div.gif" alt="" /></td>
<td class="h_nav"><a href="$vboptions[forumhome].php?$session[sessionurl]">Portal</a></td>
<if condition="$show['member']">
<td><img src="$stylevar[imgdir_misc]/nav_div.gif" alt="" /></td>
<td class="h_nav"><a href="foro.php$session[sessionurl_q]" accesskey="5">Foro</a></td>
<td><img src="$stylevar[imgdir_misc]/nav_div.gif" alt="" /></td>
<td align="center" class="h_nav"><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_cp]</a></td>
<td><img src="$stylevar[imgdir_misc]/nav_div.gif" alt="" /></td>
</if>
<if condition="$show['registerbutton']">
<td><img src="$stylevar[imgdir_misc]/nav_div.gif" alt="" /></td>
<td class="h_nav"><a href="register.php$session[sessionurl_q]" rel="nofollow">$vbphrase[register]</a></td>
<td><img src="$stylevar[imgdir_misc]/nav_div.gif" alt="" /></td>
</if>
<td class="h_nav"><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a></td>
<td><img src="$stylevar[imgdir_misc]/nav_div.gif" alt="" /></td>
<td class="h_nav"><a href="calendar.php$session[sessionurl_q]">$vbphrase[calendar]</a></td>
<td><img src="$stylevar[imgdir_misc]/nav_div.gif" alt="" /></td>
<if condition="$show['popups']">
<if condition="$show['searchbuttons']">
<if condition="$show['member']">
<td class="h_nav"><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></td>
<td><img src="$stylevar[imgdir_misc]/nav_div.gif" alt="" /></td>
<else />
<td class="h_nav"><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></td>
<td><img src="$stylevar[imgdir_misc]/nav_div.gif" alt="" /></td>
</if>
<td id="navbar_search" class="h_nav"><a href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow">$vbphrase[search]</a> <script type="text/javascript"> vbmenu_register("navbar_search"); </script></td>
<td><img src="$stylevar[imgdir_misc]/nav_div.gif" alt="" /></td>
</if>
<if condition="$show['member']">
<td id="usercptools" class="h_nav"><a href="$show[nojs_link]#usercptools">$vbphrase[quick_links] </a> <script type="text/javascript"> vbmenu_register("usercptools"); </script></td>
<td><img src="$stylevar[imgdir_misc]/nav_div.gif" alt="" /></td>
</if>
<else />
<if condition="$show['searchbuttons']">
<td class="h_nav"><a href="search.php$session[sessionurl_q]" accesskey="4">$vbphrase[search]</a></td>
<if condition="$show['member']">
<td class="h_nav"><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></td>
<else />
<td class="h_nav"><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></td>
</if>
</if>
<td class="h_nav"><a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a></td>
<if condition="$show['member']">
<td class="h_nav"><a href="#" onclick="window.open('misc.php?$session[sessionurl]do=buddylist&focus=1','buddylist','statusbar=no,menubar=no,toolbar=no,scrollbars=yes,resizable=yes,width=250,height=300'); return false;">$vbphrase[open_buddy_list]</a></td>
</if>
</if>
<if condition="$show['member']">
<td class="h_nav"><a href="login.php?$session[sessionurl]do=logout&logouthash=$bbuserinfo[logouthash]" onclick="return log_out()">$vbphrase[log_out]</a></td>
<td><img src="$stylevar[imgdir_misc]/nav_div.gif" alt="" /></td>
</if>
</tr>
</table>
</div>
<!-- / nav buttons bar -->
<if condition="$show['popups']">
<!-- NAVBAR POPUP MENUS -->
<if condition="$show['searchbuttons']">
<!-- header quick search form -->
<div class="vbmenu_popup" id="navbar_search_menu" style="display:none">
<form action="search.php?do=process" method="post">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">$vbphrase[search_forums]</td>
</tr>
<tr>
<td class="vbmenu_option" title="nohilite">
<input type="hidden" name="do" value="process" />
<input type="hidden" name="quicksearch" value="1" />
<input type="hidden" name="s" value="$session[sessionhash]" />
<div><input type="text" class="bginput" name="query" size="25" tabindex="1001" /><input type="submit" class="button" value="$vbphrase[go]" tabindex="1004" /></div>
</td>
</tr>
<tr>
<td class="vbmenu_option" title="nohilite">
<label for="rb_nb_sp0"><input type="radio" name="showposts" value="0" id="rb_nb_sp0" tabindex="1002" checked="checked" />$vbphrase[show_threads]</label>
<label for="rb_nb_sp1"><input type="radio" name="showposts" value="1" id="rb_nb_sp1" tabindex="1003" />$vbphrase[show_posts]</label>
</td>
</tr>
<tr>
<td class="vbmenu_option"><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]:</a></td>
</tr>
<tr>
<td class="vbmenu_option"><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]:</a></td>
</tr>
<tr>
<td class="vbmenu_option"><a href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow">$vbphrase[advanced_search]</a></td>
$template_hook[navbar_search_menu]
<!-- Start Post Thank You Hack -->
</tr>
<tr>
<td class="vbmenu_option"><a href="search.php?$session[sessionurl]do=findallthanks">$vbphrase[post_thanks_search]</a></td>
<!-- End Post Thank You Hack -->
</tr>
</table>
</form>
</div>
<!-- / header quick search form -->
</if>
<if condition="$show['member']">
<!-- user cp tools menu -->
<div class="vbmenu_popup" id="usercptools_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr><td class="thead">$vbphrase[quick_links]</td></tr>
<if condition="$vboptions['enablesearches']"><tr><td class="vbmenu_option"><a href="search.php?$session[sessionurl]do=getdaily">$vbphrase[todays_posts]</a></td></tr></if>
<tr><td class="vbmenu_option"><a href="forumdisplay.php?$session[sessionurl]do=markread">$vbphrase[mark_forums_read]</a></td></tr>
<tr><td class="vbmenu_option"><a href="#" onclick="window.open('misc.php?$session[sessionurl]do=buddylist&focus=1','buddylist','statusbar=no,menubar=no,toolbar=no,scrollbars=yes,resizable=yes,width=250,height=300'); return false;">$vbphrase[open_buddy_list]</a></td></tr>
<tr><td class="thead"><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_control_panel]</a></td></tr>
<if condition="$show['siglink']"><tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editsignature">$vbphrase[edit_signature]</a></td></tr></if>
<!--<if condition="$show['avatarlink']"><tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editavatar">$vbphrase[edit_avatar]</a></td></tr></if>-->
<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editprofile">$vbphrase[edit_profile]</a></td></tr>
<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editoptions">$vbphrase[edit_options]</a></td></tr>
<tr><td class="thead">$vbphrase[miscellaneous]</td></tr>
<if condition="$show['pmstats']"><tr><td class="vbmenu_option"><a href="private.php$session[sessionurl_q]" rel="nofollow">$vbphrase[private_messages]</a></td></tr></if>
<tr><td class="vbmenu_option"><a href="subscription.php$session[sessionurl_q]" rel="nofollow">$vbphrase[subscribed_threads]</a></td></tr>
<tr><td class="vbmenu_option"><a href="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[my_profile]</a></td></tr>
<if condition="$show['wollink']"><tr><td class="vbmenu_option"><a href="online.php$session[sessionurl_q]">$vbphrase[whos_online]</a></td></tr></if>
</table>
</div>
<!-- / user cp tools menu -->
</if>
<!-- / NAVBAR POPUP MENUS -->
Respuesta: Centrar Header
Pos lo intente y nada, la parte que debo modificar es con cod CSS, es estaIniciado por cj_ghost
Código PHP:/* ***** SETS LOGO AREA FOUND IN HEADER AND ALL OF IT'S PROPERTIES ***** */
#logo {
background-position: top center;
background: url(centura/misc/header_logo.gif);
width: 785px;
height: 180px;
float: left;
margin: 0;
padding: 0;
}
Respuesta: Centrar Header
entonces prueba en ese mismo código que pusiste, reemplazar esto:
background-position: top center;
background: url(centura/misc/header_logo.gif);
por
background: url(centura/misc/header_logo.gif) top center;
con eso debería arreglarse, ya que de las dos llamadas que hace a background, siempre se interpreta la ultima (salvo que la segunda sea específica, caso que no es este).
Re: Centrar Header
a ver.. al parecer ahi tendrías más de una imagen y por eso siempre la chica de la foto se ve a la derecha..
fíjate en esta parte..
Código:/* ***** SETS LOGO AREA FOUND IN HEADER AND ALL OF IT'S PROPERTIES ***** */ #logo { background: url(centura/misc/header_logo.gif); width: 785px; height: 180px; float: left; margin: 0; padding: 0; background-position: top center; } /* ***** sets background for header area - No need to change this ***** */ #hdr { background: #F3F5F5 url(centura/misc/header_back.gif) ; width: 0%; height: 180px; margin: 0; padding: 0; }
has un backup de tu plantilla y elimina
Código:/* ***** sets background for header area - No need to change this ***** */ #hdr { background: #F3F5F5 url(centura/misc/header_back.gif) ; width: 0%; height: 180px; margin: 0; padding: 0; }
si no funciona, es probable que no sea lo que debes modificar..
asegúrate con algo..
Revisa que nombre tiene el banner (debería ser "header_logo.gif") y sólo eso NO eliminas... por que según lo que veo en el código esa imagen está arriba en el centro..
Saludos
Respuesta: Centrar Header
Ya intente ambas Ayudas, tanto la de IsraelSKA, com la de rusoftware, pero nada.
No se por que es tan complicada la aplicacion para ese Skin, solo he probado ese en vBulletin, creo que otros Skin no son tan complicados.
La parte de que el header lo comprenden varias imagenes es cierto, por eso le habia puesto en with:, a la mayoria 0, y yo edite el height en 180, ya que es el tamaño de la imagen.
Lo otro, ahy una forma que me varea, es cuando le cambio la definicion en la parte de Float: left; (ya le he puesto right, none y both. y solo cambia con right pero me queda completamente a la derecha y el texto center, no funciona para el Float.
Agradesco mucho su atencion amigos, la verdad que este es un gran foro, espero que ustedes me puedan seguir ayudando, y si yo soy quien puedo centrar ese header, les dire aqui la forma de como lo hice.
Re: Centrar Header
He instalado tu skin (centura), para hacer pruebas y la imagen queda centrada. Adjunto un recorte del foro.
Lo unico que he modificado, ha sido la parte del CSS principal, relativa al logo. Lo he dejado igual que tú.
Código:/* ***** SETS LOGO AREA FOUND IN HEADER AND ALL OF IT'S PROPERTIES ***** */ #logo {background: url(centura/misc/header_logo.gif);width: 785px;height: 197px;float: left;margin: 0; padding: 0;/* ***** SETS HEADER RIGHT SIDE AREA FOUND IN HEADER AND ALL OF IT'S PROPERTIES ***** */} /* ***** sets background for header area - No need to change this ***** */ #hdr { background: #F3F5F5 url(centura/misc/header_back.gif) ; width: 0%; height: 197px; margin: 0; padding: 0; } #hdr_body_ls { background: #F3F5F5 url(centura/misc/header_body_ls.gif) ; width: 0px; height: 197px; float: left; margin:0px; padding: 0px; }#hdr_rs {background: url(centura/misc/header_rs.gif);width: 0px;height: 197px; float: right;padding: 0; }Revisa bien, a ver si has hecho algun cambio en otro sitio y por eso no se centra la imagen.
Por cierto, ¿tienes marcada la opción de Guardar Hojas de Estilo CSS como Archivos?.
Si es así, mira que no hayas cambiado algo esa CSS.
Respuesta: Centrar Header
El float es un comando demasiado poderoso, pero que tiene una sola aplicación, y no es la de centrar ni alinear el contenido de una layer...
Digo lo de poderoso porque suele anteponerse a cualquier alineación previa y posterior, pero la utilidad es para "adosar" layers diferentes en distintas posiciones... Por eso, lo del float te recomiendo lo descartes.
Con los tips que pasamos en este post, (todos correctos si no me equivoco) ese css tendría que funcionar a la perfección... Habría que revisar si has hecho alguna modificación en otro lado como dice mcloud...
Has modificado la plantilla HEADER?
Tu header, en la parte del logo dice:
<div align="center"><div id="hdr"><div id="hdr_rs"></div><div id="logo"></div><div id="hdr_body_ls"></div></div></div>
Pasanos completo el css con esas 4 capas... Tu nos muestras dos de ellas (hdr y logo)... HDR tiene dentro 3 capas... una es hdr_rs, la del medio es logo, y la otra es hdr_body_ls (estas tres capas deberían tener si el float left.
Fíjate que mcloud pego las 4 capas que componen esa sección... El error puede estar en cualquiera de las otras dos que no vimos.
Ah y como editaste el height, debes hacerlo tambien en las otras dos capas. Las cuatro deberían medir 180px (al menos las 3 de adentro).
Ahhh y por cierto... Lo más importante!!!
NO DEBES USAR EL "with:0"... Si tu foro se va a adaptar al tamaño del monitor (definido ancho por porcentajes) haz lo siguiente...
a #logo, le das el ancho que tiene la imágen del logo, exacto y en píxels (ej. width:640px)
a #hdr y a #hdr_rs y #hdr_body_ls, BORRALES el width, dejalo vacío pero no le pongas 0px.
Creo que son todas las opciones posibles para solucionarlo desde el CSS...
Si no te funciona, luego lo montas de cero, si precisas una mano nos dices, creo que será lo más fácil si no se soluciona con esto.
Saludos
Re: Centrar Header
Tienes razón rusoftware, con lo de no utilizar width=0px, yo lo dejé así, porque solo hacía una prueba rápida, para ver donde podía estar el error. Desde luego es mejor utilizar porcentajes, por el motivo que dices.
En cuanto al hecho de que no le funcione bien a Torn, debe ser por algun cambio que ha hecho y no vemos.
El header que pega al inicio parece correcto, tiene las 4 capas, aunque creo que le sobra la linea "background-position: top center;" en #logo
Yo he probrado a dejar solo esa capa, la #logo, eliminando las otras tres y eliminando tambien todo lo referente a esas capas en el CSS principal, dejandolo así:
He puesto float: center, para que centre la capa y así tambien funciona.Código:....... /* ***** SETS LOGO AREA FOUND IN HEADER AND ALL OF IT'S PROPERTIES ***** */ #logo { background: url(centura/misc/header_logo.gif); width: 785px; height: 197px; float: center; margin: 0; padding: 0; } /* ***** NAVIGATION BOTTOM ***** */ #nav_btm { .........
Creo que lo mejor que podía hacer es poner el header y el CSS principal originales y comenzar las modificaciones de nuevo.
Respuesta: Centrar Header
Como lo puse antes, esa línea "sobra" pero está bien definida, solo que debería estar integrada en la anterior... De todos modos es solo un detalle, con esto asi debería verse bien igual, lo que si cambiaría la otra línea por background-image, sino es lo primero que puse, llamas a background y en esa sola todo el codigo, imagen posición etc.El header que pega al inicio parece correcto, tiene las 4 capas, aunque creo que le sobra la linea "background-position: top center;" en #logo
Respecto de las capas en el header, como dices, parecen estar bien puestas, pero las encuentro completamente innecesarias...
Yo haría lo siguiente...
1 sola capa con la imágen de fondo de hdr, y un width en % que sea igual al % del foro. En esta una línea de "text-align:center"
Dentro de esta, una capa que tenga el width exacto del logo, que contenga la imágen del mismo...
Eso es todo, lo más simple... Quedaría:
Codigo del HEADER:
CSS:Código HTML:<div id="fdo_logo"><div id="logo"></div></div>
Si no me saltie nada, creo q eso sería todo. Aunque si buscamos el mejor método, yo peferiría incluir la imágen directamente en el HEADER y con enlace al index del foro, justo así:Código HTML:#fdo_logo{ width: xx%; //xx debe ser el ancho de tu foro heigth: 180px; background: url("imagen de fondo para header"); text-align:center; } #logo{ width: xxxpx; //(tamaño en píxels de tu logo) heigth: 180px; background: url("imagen del logo"); }
Código HTML:<div id="fdo_logo"><a href="index.php"><img src="Imagen de tu logo.jpg" alt="My Foro" border="0" /></a></div>
Portal
Foro
Reglamento
Traducciones
Citar