Colocar imagen en mi web

Yo tengo el menu ya puesto y quisiera colocar una imagen debajo del menu como lo muestro en la foto
como hago para que no se interponga en el lugar del menu?

[contenido no disponible]

Hola,

para insertar la imagen, tienes que hacer lo siguiente:

1. crear un div o capa para la imagen inmediatamente después del div del menu de arriba. Ejm.: en html: <div id="foto"></div> Entre ambas etiquetas, insertas la imagen (o foto).

2. Luego, en la hoja de estilos, le das las propiedades, ejemplo:
#foto {float:right ; width:...px ; height:...px ; padding:...

3. Pero, ojo, como ya tienes 2 div o capas en la izquierda, para que no se te desborden, esas 2 capas deben ir dentro de una tercera que será mayor que la capa menu y capa foto. Suficiente con que sea 2 px de ancho más que las otras 2 capas y la coloreas del mismo color que el contenido para que pase desapercibida.

Espero haberme explicado bien, cualquier cosa, por aquí estamos.

Saludos.

no me sale. El codigo en html es el siguiente:


<h1>Soto es Rock:</h1>

[contenido no disponible]

[contenido no disponible]

[contenido no disponible]

[contenido no disponible]

[contenido no disponible]

</div>

donde tendria que poner el div para la imagen
ssaludos!

Hola Guasón.17,

digamos que deseas insertar una foto que mide 150 de ancho por 200px de alto, justo debajo del menu tal como señalas en la imagen, ok?

Para eso, tienes que crear una nueva capa o div, no puedes ponerlo dentro del div menu. Así como creaste un div o capa para el menu, tienes que crear otro para la foto. Pero, para que no se descuelgue nada, esos dos divs (el del menu y el de la foto) tienen que ir dentro de un div que ha de ser más grande, digamos que el tercer menu se llame Menugrande. Y esos 3 divs o capas estarían dentro del div CONTENIDO. En plantilla.html tendrías que poner así:

<div id="contenido">
<div id="menugrande">
<div id="menu">
<ul>

...(aquí entra el menu que ya tienes hecho)...

</div>
<div id="foto">(aquí debes insertar la imagen que deseas)</div>
</div>
</div>

comprendes??? Acuérdate que menugrande es más ancho, por ejemplo si el menu mide 160px de ancho y la foto 150px ancho, entonces, menugrande medirá 162px de ancho, estamos? En estilos, debajo de CONTENIDO, pondrías:

#menugrande {float:left ; width:162px ; background-color:(le pones el verde que tienes en contenido para que pase desapercibido)}

#menu {...(lo que ya tienes puesto)...}

#foto {float:left ; width:150px ; height:200px ; padding:...(a tu gusto)...}

Eso sería todo, ojo, no dejes de insertar el "menugrande" para que no se descuelgue y nos cuentas!!! Saludos.

muchisimas gracias por tu explicacion ...
la imagen que queria poner debajo del menu me quedo excelente, pero el contenido quedo mal posicionado!
muchas gracias por tu explicacion lastima que ahora quedo mal el conetenido

saludos!

Hola guason17,

El contenido no tiene por qué quedarte mal. Terminas de poner la imagen con su etiqueta de cierre al div de la imagen (</div>). Inmediatamente después, pones lo que va en tu contenido y al terminar, pones la etiqueta de cierre del CONTENIDO (</div>).

<div id="contenido"
<div id="menugrande">
<div id="menu">
...
</div>
<div id="foto">...</div>
bla, bla, bla, bla,...(lo que deseas poner aquí en tu contenido)...
</div>

Los div en color verde corresponden a la capa CONTENIDO. El último div en color verde, al final de todo, cierra todo lo que va en tu capa contenido, así que no tiene por qué quedarte mal. Aplica lo que te digo y me cuentas. Saludos!!!

EXCELENTE, no respondi en estos dias porque no me salia pero ya salio
solo coloque bien donde debia ir el contenido(es decir entre que divs)

muchas gracias por tu ayuda
suerte!

:lol: