Me ayudan con el header?

magiccen · 26 Abr 2008

Saludos amigos, tengo un problema con el header, soy co-admin de un foro y estamos haciendo innovaciones en el, decidimos cambiar el header, pero al hacerlo este salia descentrado, el anterior era de tres imagenes, entonces se veia rastros de un anterior, indagando en el codigo del header vi que habia referencias a otras imagenes, asi que en el ftp elimine a las anteriores, dejaron de verse pero no estaba bien el resultado, la imagen del header no ocupaba el espacio integro, nuevamente al codigo, elimine algunas lineas (previo backup del original como lo encontre pues de php no entiendo nada jeje), y mejoro un poco, pero aun no queda totalmente bien, les dejo los codigos del header para que ustedes vean si pueden ayudarme.

<center><a set="yes" href="http://www.************.com" title="***************">
<span id="alt_area" style="font-size: 1px;"><font style="color: rgb(0, 0, 0);">vBulletin tema vBulletin Temasý vBulletin Skin vBulletin Style Joomla Tema Joomla Temasý Joomla Skin Joomla Templates Joomla Themes ipb Temasý ipb temalarý ipb tema ipb temasý ipb temalarý smf tema smf temasý smf temalarý MkPortal Tema MkPortal Temasý MkPortal Temalarý MyBB Tema MyBB Temasý MyBB Temalarý PhpNuke Tema PhpNuke Temasý PhpNuke Temalarý WordPress Tema WordPress Temasý WordPress Temalarý PhpBB Tema PhpBB Temasý PhpBB Temalarý vbülletin tema vbulletin 3.6.0 tema vbulletin 3.6.0 temasý vbulletin 3.6.0 temalarý vbulletin 3.6.3 tema vbulletin 3.6.3 temasý vbulletin 3.6.3 temalarý vbulletin 3.6.4 tema vbulletin 3.6.4 temasý vbulletin 3.6.4 temalarý vbulletin 3.6.5 tema vbulletin 3.6.5 temasý vbulletin 3.6.5 temalarý mkportal skin mk portal style mk portal templates
</font></span>
</a></center>
<a name="top"></a>
<table cellSpacing="0" cellPadding="0" width="90%" align="center" bgColor="#fafafa" border="0" id="table1">
<tr>
<td style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 9pt; font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; background-image: url('images/vista/misc/vlogo1.jpg'); background-repeat: repeat-x" vAlign="top" align="middle" height="97">
<a style="color: #0A246A" href="$vboptions[forumhome].php$session[sessionurl_q]">
<img title="Windows Vista Forums" alt="Windows Vista Forums" src="images/vista/misc/vlogo.jpg" border="0"></a>
</td>
<td style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 9pt; font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; background-image: url('images/vista/misc/vlogo2.jpg'); background-repeat: no-repeat" vAlign="top" align="right" width="126" height="97">
 </td>
</tr>
</table>
<table cellSpacing="0" cellPadding="0" width="80%" align="center" bgColor="#fafafa" border="0" id="table2">
<tr>
<td class="thead" align="left" height="20"> </td>
<td class="thead" align="right" height="20"> </td>
</tr>
<tr>
<td colSpan="2" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 9pt; font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif">
</td>
</tr>
</table>



$spacer_open

$_phpinclude_output

en FTP solo esta la imagen vlogo.jpg, por favor si me echan una mano en eso ok? Muchas gracias por sus respuestas

imported_matias · 26 Abr 2008

Respuesta: Me ayudan con el header?

No sé que es todo lo del comienzo, por las dudas los saco...
y la tabla que esta abajo de todo está vacia, asi que tambien la borro...
te quedaria algo asi:

HTML:

<!-- logo -->
<a name="top"></a>
<table cellSpacing="0" cellPadding="0" width="90%" align="center" bgColor="#fafafa" border="0" id="table1">
<tr>
<td style="background:url('images/vista/misc/vlogo1.jpg') repeat-x" valign="top" align="middle" height="97">
<a style="color: #0A246A" href="$vboptions[forumhome].php$session[sessionurl_q]">
<img title="Windows Vista Forums" alt="Windows Vista Forums" src="images/vista/misc/vlogo.jpg" border="0"></a>
</td>
<td style="background: url('images/vista/misc/vlogo2.jpg') no-repeat" valign="top" align="right" width="126" height="97">&nbsp;</td>
</tr>
</table>
<!-- /logo -->

Una tabla con 2 td's.
el primer td con un background que se repita horizontalmente y el logo
y el 2do td con un background que no se repite.

Probalo.
Saludoss!

mcloud · 26 Abr 2008

Desde luiego tienes un monton de basura dentro del header. ¿De donde has copiado eso?, ¿tu foro se llama CHCre.....?

No sé a qué te refieres cuando dices que en FTP (File Transfer Protocol->Protocolo de Transferencia de Archivos) solo tienes la imagen vlogo.jpg. Imagino que quieres decir que en tu servidor, solo tienes esa imagen. Si es así, toda referencia a las demas imagenes es inutil; por eso, yo dejaría lo que está entre  y  de la siguiente manera:

Insertar CODE, HTML o PHP:

[I][COLOR=navy]<!--logo-->[/COLOR][/I]
[I][SIZE=2][COLOR=seagreen]<a name="top"></a>[/COLOR][/SIZE][/I]
[I][SIZE=2][COLOR=seagreen]<table cellSpacing="0" cellPadding="0" width="90%" align="center" bgColor="#fafafa" border="0" id="table1">[/COLOR][/SIZE][/I]
[I][SIZE=2][COLOR=seagreen]<tr>[/COLOR][/SIZE][/I]
[I][SIZE=2][COLOR=seagreen]<td style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 9pt; font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; vAlign="top" align="middle" height="97">[/COLOR][/SIZE][/I]
[I][SIZE=2][COLOR=seagreen]<a style="color: #0A246A" href="$vboptions[forumhome].php$session[sessionurl_q]">[/COLOR][/SIZE][/I]
[I][SIZE=2][COLOR=seagreen]<img title="Windows Vista Forums" alt="Windows Vista Forums" src="images/vista/misc/vlogo.jpg" border="0"></a> [/COLOR][/SIZE][/I]
[I][SIZE=2][COLOR=seagreen]</td></tr></table>[/COLOR][/SIZE][/I]
[I][COLOR=navy]<!-- /logo -->[/COLOR][/I]

Ya nos contaras...

Saludos

magiccen · 26 Abr 2008

Les agradezco mucho la ayuda a ambos, les cuento lo que paso, primero los tantos codigos a los cuales llaman basura (jejeje), eran los creditos del vbulletin.
Probe con ambos, el primero limpia la parte superior que la tenia con los creditos, pero me lo deja descentrado jalado a la izquierda, el segundo lo mismo de arriba, pero lo deja centrado y con espacios en blanco a los lados laterales, pense que se debia a la resolucion de monitores distintos, pero he visitado otras webs y las veo normal sus headers, centrados y totalmente expandidos, pregunto que puede estar pasando con el header que uso?, muchas gracias a ambos por responder
Les dejo aca unas imagenes en resoluciones de distintos monitores, la primera en un widescreen de 19", la segunda en uno de 17" normal

Insertar CODE, HTML o PHP:

http://i181.photobucket.com/albums/x145/magiccen/screen.jpg

Insertar CODE, HTML o PHP:

http://i181.photobucket.com/albums/x145/magiccen/screen2.jpg

imported_matias · 26 Abr 2008

Respuesta: Me ayudan con el header?

la imagen que estas usando tiene 1020 x 350...
1020+18(barra scroll) = 1038.
sobre pasa la resolucion de la pantalla por eso te scrolea horizontalmente...
hace la imagen de 980 de ancho y te va a quedar bien.

Saludos!

magiccen · 26 Abr 2008

Probe con la resolucion 9800X 300 y continua igual. Alguna otra idea de lo que se puede hacer?

mcloud · 27 Abr 2008

Si a la linea siguiente
<img title="Windows Vista Forums" alt="Windows Vista Forums" src="images/vista/misc/vlogo.jpg" border="0">
le añádes width="980", antes o despues de border="0" da igual, se quitará la barra de scroll horizontal. El problema vendrá cuando alguiente tenga una resolución de pantalla menor.

Lo que no entiendo es por qué al cambiarle 980 por un porcentaje, no funciona.

Mas tarde lo seguiré mirando

Saludos
-------------------
Lo he vuelto a mirar, no me gusta que las cosas no salgan bien

Creo que la imagen que tienes es muy grande, enorme, así es que lo mejor es que hagas una mas pequeña. Mientras tanto puedes solucionarlo de la siguiente manera,

Escribe dentro del css lo siguiente:

Insertar CODE, HTML o PHP:

[SIZE=2].header {[/SIZE]
[SIZE=2]height: [COLOR=red]alto de la cabecera[/COLOR] 200px;[/SIZE]
[SIZE=2]width: [COLOR=red]ancho de la cebecera[/COLOR] 980px;[/SIZE]
[SIZE=2]background: [COLOR=red]color que quieras[/COLOR] #320001;[/SIZE]

Lo que está en rojo es una explicación, no tienes que ponerlo

Luego entre  y  escribe esto:

Insertar CODE, HTML o PHP:

[SIZE=2]<A name=top></A>[/SIZE]
[SIZE=2]<div class="header">[/SIZE]
[SIZE=2]<span style="float:center"><a href="index.php"><img src="images/vista/misc/vlogo.jpg" alt="" width="980" border="0" /></a></span>[/SIZE]

Lo he probado en local y se ve bien, sin barra de desplazamiento horizontal.

Espero que lo consigas solucionar y no olvides comentarnos el resultado.

Saludos de nuevo

magiccen · 27 Abr 2008

Muchas gracias nuevamente por sus respuestas, eso demuestra la calidad de personas que hay en este site, y eso es lo que les hace ser grandes, les explico: le agregue las lineas arriba:
.header {
height: 300px;
width: 980px;
background:#320001;

Y eso compartio los espacios tanto en la parte superior como en la inferior de la imagen. mejor mucho en la vista, ademas modifique el valor de width="95%", dejandolo asi: width="" , y eso elimino espacios en blanco laterales a la imagen del header, pero no consiguio hacerlo expandir en una resolucion mayor a la de 1024 X 768, (en esta resolucion si no hay problemas)
Los valores que me diste para agregar entre  y , no surtio ningun efecto, al contrario hacia que la imagen jalara siempre hacia la izquierda.
Les dejo unas imagenes tanto en una resolucion de 1024X768 y otra en 1280X768, para que noten las diferencias, pero quedo ya mucho mejor que antes, claro que no es lo optimo, pero si mucho mejor que antes:

Insertar CODE, HTML o PHP:

http://i181.photobucket.com/albums/x145/magiccen/screen-1.jpg

Insertar CODE, HTML o PHP:

http://i181.photobucket.com/albums/x145/magiccen/screen1.jpg

Les quedo muy agradecido por la ayuda que me han brindado, y si por ahi encuentran una mejor forma de arreglar esto les quedare mucho mas en deuda. Un abrazo

mcloud · 27 Abr 2008

Debes tener algo cambiado en algun sitio que afecta a esta plantilla. Es muy raro que poniendo el código que te dije, la imagen salga alineada a la izquierda.

Todas las pruebas que he hecho daban un resultado correcto.

En cuanto a que se vea bien en distintas resoluciones, es casi imposible, con lo que tu tienes.
Deseas que la cabecera se llene con la imagen y esta tiene unas dimensiones fijas. Así pues, si la cabecera es mas grande, la imagen se tiene que estirar y se deformará.

Al poner las dimensiones con medidas en px, se tiene el problema de que a mayor resolución, quedan espacios sin rellenar. Es mejor poner todo con porcentajes, pero ahí surge el problema de la imagen, que tienen medidas fijas.

Lo mejor sería que utilizaras una imagen que no tenga que rrellenar toda la cabecera, o utilizar una imagen como fondo de la tabla y que se repita.

No sé si me he explicado muy bien, pero si miras el otro estilo que utilizas en tu foro, verás una forma de solucionarlo.

Saludos