Foros del Web » Diseño web » CSS »

Insertar logo sin desarmar el sitio

Estas en el tema de Insertar logo sin desarmar el sitio en el foro de CSS en Foros del Web. Hola! Estoy utilizando un theme de Wordpress y necesito insertar el logo de la organizacion a la izquierda del titulo del blog. Cada vez que ...
  #1 (permalink)  
Antiguo 07/09/2009, 20:29
 
Fecha de Ingreso: abril-2005
Ubicación: 34°35'49.20"S | 58°24'06.
Mensajes: 158
Antigüedad: 9 años
Puntos: 3
Insertar logo sin desarmar el sitio

Hola!
Estoy utilizando un theme de Wordpress y necesito insertar el logo de la organizacion a la izquierda del titulo del blog.

Cada vez que intento poner la imagen, el titulo del blog se desplaza hacia abajo y desarma el maquetado del site.

Tengan en cuenta que no soy WM, ni conozco CSS.
Gracias
__________________
P M3 d4 p0® 3s©r1bir c0mo 1diota 3n el M3sen11er ¿3s0 m3 c0nv13rte en h4ck3r?
R No. Solo eres un tonto.

Última edición por webosiris; 29/04/2012 a las 23:30 Razón: eliminado enlace a petición del usuario
  #2 (permalink)  
Antiguo 07/09/2009, 20:36
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 692
Antigüedad: 4 años, 11 meses
Puntos: 43
Respuesta: Insertar logo sin desarmar el sitio

Hola diegors

Tan sólo necesitas colocarle este estilo al logo:

<p style="position: absolute; top: 5px; left: 5px"><img alt="" src="tu_logo.png" width="200" height="80" /></p>

Dónde pone tu_logo.png escribes el nombre de la imagen y su extensión (p.e. imagen.jpg), ajustas el width y el height al tamaño de tu logo. Y terminas de ajustar los valores top y left a los píxeles que quieres que quede el logo de arriba y de la izquierda de la pantalla (p.e. si lo quieres ajustado completamente (a cero píxeles) pones top: 0 y left: 0.

Bye
  #3 (permalink)  
Antiguo 08/09/2009, 06:04
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.810
Antigüedad: 6 años, 10 meses
Puntos: 535
Respuesta: Insertar logo sin desarmar el sitio

Otra forma, pues no veo la necesidad de utilizar un <p>, y un <div> para alojar tan poca cosa:
Código html:
Ver original
  1. <div id="header">  
  2.          <img width="100" height="100" style="float: left; margin-left: 50px;" src="http://www.bomberossanmartin.com.ar/wp-content/uploads/2009/08/logo.gif" alt=""/>
  3.     <h1 style="float: left;">
  4.              <a href="http://www.bomberossanmartin.com.ar/">Bomberos Voluntarios de General San Martín<br/>
  5.         <span style="font-size:.7em;">Abnegación. Sacrificio. Desinterés</span>
  6.              </a>
  7.        </h1>
  8. </div>
Ajusta los valores

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 15/09/2009, 18:45
 
Fecha de Ingreso: abril-2005
Ubicación: 34°35'49.20"S | 58°24'06.
Mensajes: 158
Antigüedad: 9 años
Puntos: 3
Respuesta: Insertar logo sin desarmar el sitio

Kseso // deirdre

Gracias por la ayuda, sin embargo, el logo continua en el mismo lugar =/
__________________
P M3 d4 p0® 3s©r1bir c0mo 1diota 3n el M3sen11er ¿3s0 m3 c0nv13rte en h4ck3r?
R No. Solo eres un tonto.
  #5 (permalink)  
Antiguo 15/09/2009, 19:23
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 692
Antigüedad: 4 años, 11 meses
Puntos: 43
Respuesta: Insertar logo sin desarmar el sitio

Hola diegors

He cargado tu página y veo que el logo de bomberos queda esquinado arriba y a la izquierda (supongo que es así cómo quieres que quede) y la página no se desarma. Lo único que tienes que arreglar es el título del blog que ahora queda por debajo del logo y debes desplazarlo a la derecha hasta que salga de debajo del logo (también la segunda línea, la que dice 'Abnegación. Sacrificio...')

Podrías intentar de esta forma y ver cómo te queda:

Código HTML:
<h1><span style="margin-left: 75px;"><a href="http://www.bomberossanmartin.com.ar/">Bomberos Voluntarios de General San Martín</a></span></h1>
<div class="description"><span style="margin-left: 75px;">Abnegación. Sacrificio. Desinterés</span></div> 
El ajuste de 75px es aproximado: lo ajustas tú según te guste más o menos separado del logo.

Prueba y nos dices.

O utiliza la solución propuesta por kseso?

(Por cierto tienes declarado dos veces la posición absolute: en "p" y en "img": déjala sólo en una).

Bye
  #6 (permalink)  
Antiguo 16/09/2009, 07:37
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.810
Antigüedad: 6 años, 10 meses
Puntos: 535
Respuesta: Insertar logo sin desarmar el sitio

Cita:
Iniciado por diegors Ver Mensaje
Kseso // deirdre

Gracias por la ayuda, sin embargo, el logo continua en el mismo lugar =/
¿No es esto lo que quiere conseguir?



Su mp era innecesario, pues es el código que le facilité hace 8 días.


Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 04/10/2009, 12:19
 
Fecha de Ingreso: abril-2005
Ubicación: 34°35'49.20"S | 58°24'06.
Mensajes: 158
Antigüedad: 9 años
Puntos: 3
Respuesta: Insertar logo sin desarmar el sitio

Gracias nuevamente a ambos.
Kseso, logre de hacerme tiempo para seguir con el sitio, y al fin pude aplicar tu codigo.

Ahora tengo otro problemita...
Como veras, el fondo blanco del cuerpo principal quedo desplazado a la derecha, aunque dudo que sea por el codigo.




Gracias
__________________
P M3 d4 p0® 3s©r1bir c0mo 1diota 3n el M3sen11er ¿3s0 m3 c0nv13rte en h4ck3r?
R No. Solo eres un tonto.
  #8 (permalink)  
Antiguo 04/10/2009, 12:44
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.810
Antigüedad: 6 años, 10 meses
Puntos: 535
Respuesta: Insertar logo sin desarmar el sitio

Porque estás aplicando una imagen de 661px de ancho a #pageinner con repetición vertical. Y ese div mide lo mismo que #page (su padre) que es el 100% de la pantalla menos los 103px del padding, 53px por lateral). Y el campo de texto es eso mismo menos los 213px del margen izquierdo de #content (que es donde está alojado).

Así que el texto tendrá debajo sólo en casos muy concretos (bajas resoluciones de pantallas).

Añade a #content un fondo blanco (o la imagen que utilizas en #pageinner con repetición.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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:05.
SEO by vBSEO 3.3.2