Insertar logo sin desarmar el sitio

diegors · #1 (**permalink**) 07/09/2009, 20:29

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

deirdre · #2 (**permalink**) 07/09/2009, 20:36

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

kseso? · #3 (**permalink**) 08/09/2009, 06:04

Otra forma, pues no veo la necesidad de utilizar un <p>, y un <div> para alojar tan poca cosa:

Código html:

Ver original<div id="header">  
         <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=""/>
    <h1 style="float: left;">
             <a href="http://www.bomberossanmartin.com.ar/">Bomberos Voluntarios de General San Martín<br/>
        <span style="font-size:.7em;">Abnegación. Sacrificio. Desinterés</span>
             </a>
       </h1>
</div>

Ajusta los valores

Un saludo

diegors · #4 (**permalink**) 15/09/2009, 18:45

Kseso // deirdre

Gracias por la ayuda, sin embargo, el logo continua en el mismo lugar =/

deirdre · #5 (**permalink**) 15/09/2009, 19:23

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

kseso? · #6 (**permalink**) 16/09/2009, 07:37

Cita:

Iniciado por diegors

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

diegors · #7 (**permalink**) 04/10/2009, 12:19

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

kseso? · #8 (**permalink**) 04/10/2009, 12:44

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