Ajustar logo a diferentes resoluciones.

imported_MIGUELITRO Seguir

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
13 Jul 2008
Mensajes
147
Aquí os dejo otra duda tengo.

Resulta que he creado el foro desde un ordenador pequeño, concretamente un Acer AspireOne que si no me equivoco tiene una resolución de 1024 X 600 px.

Claro, yo he ido diseñando el foro con el logo ajustado a mi resolución y cuando me he ido a conectar desde el ordenador de un amigo me he dado cuenta de que el foro se ve bien ajustado a los laterales pero el logo se me queda encogido y pegado a la izquierda.

Si entráis en mi página podréis verlo y a ver si podéis darme una solución para que el logo se estire o se encoja según la resolución del ordenador.

Estoy utilizando un skin llamado Breeze.

He leido unos cuantos hilos y he visto que se puede hacer poniendo dos imagines (una en cada lado) y otra en el medio que solo se vea el fondo y esta sea la que se encoja al cambiar de resolución, pero no es lo que me interesa, ya que el texto de mi logo va justo en medio.

Aquí os dejo parte de mi código del header por si necesitais echarle un ojo.

PHP:
<div class="above_body"> <!-- closing tag is in template navbar -->
<div id="header" class="floatcontainer doc_header">
	<div><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div>
	<div id="toplinks" class="toplinks">
		<vb:if condition="$show['member']">
			<ul class="isuser">
				<li><a href="login.php?{vb:raw session.sessionurl}do=logout&amp;logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</a></li>
				<vb:if condition="$show['registerbutton']">
				<li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
				</vb:if>
				<li><a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase control_panel}</a></li>
				<li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li>
				<vb:if condition="$notifications_total">
				<li class="popupmenu notifications" id="notifications">
					<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}: <span class="notifications-number"><strong>{vb:raw notifications_total}</strong></span></a>
					<ul class="popupbody popuphover">
						{vb:raw notifications_menubits}
					</ul>
				</li>
				<vb:else />
				<li class="popupmenu nonotifications" id="nonotifications">
					<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a>
					<ul class="popupbody popuphover">
						<li>{vb:rawphrase no_new_messages}</li>
						<li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li>

Gracias por vuestra ayuda.
 

imported_MIGUELITRO

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
13 Jul 2008
Mensajes
147

Gracias Andrés por tu respuesta. Esos dos temas que me indicas ya los leí y probé y no me funcionaron bien.

El foro si consigo centrarlo correctamente, pero cuando le doy anchura para una resolución grande, en los ordenadores pequeños se me sale de la pantalla y no se me ajusta al 100%.

También probé a hacer el logo más grande y ajustar el foro a la medida del mismo, pero igualmente, el logo en el ordenador pequeño se me sigue saliendo por un lado de la pantalla y no lo veo completo.

Cuando marco las opciones en auto, en el ordenador pequeño se me ajusta muy bien, pero en los grandes se me queda centrado pero muy estrecho.

He seguido buscando y leyendo más cosas por internet y encontré el mismo style que tengo pero en fixed que automáticamente hace que me quede centrado, pero igualmente no me lo ajusta al 100%. Y si lo pongo yo para que se ajuste, en el ordenador pequeño sigue saliendose hacia la derecha sin ajustarse.

Gracias por la ayuda. A ver si se os ocurre algo más.


------------------------------------------------------------------------------


EDITO: He conseguido solucionarlo.

Para los que les pueda interesar, lo único que he hecho es añadir un width="100%" en la parte del código que corresponde al logo dentro de mi plantilla header. Eso hace que se me ajuste el logo al 100% de la pantalla.
Entonces he hecho un nuevo logo con el tamaño de la mayor resolución y el solo se reduce para ajustarse.

En mi caso el código que me venía por defecto era este:
Insertar CODE, HTML o PHP:
<div><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:stylevar titleimage} alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div>

Y lo he dejado de esta manera:
Insertar CODE, HTML o PHP:
<div><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:stylevar titleimage} "  alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" [COLOR="red"]width="100%"[/COLOR]/></a></div>

No sé si será la forma más correcta de ponerlo pero me funciona muy bien.

De todas formas, siempre gracias por vuestra ayuda. :)
 
Arriba