Navegación por pestañas con imagen fija

[pao01]

Hola, a ver si me doy a enteder:
Estoy trabajando con el siguiente código y de hecho funciona perfecto.

Lo que yo deseo hacer es lo siguiente:


quiero saber cómo hago para que en la pestaña 1, muestre una imágen (marcada en la zona roja) sin necesidad alguna de clickear en ella.
El motivo radica en que sino quedaría ese espacio vacío y va en medio de la página.
He intentado colocando la imágen en el div id "explicación", y si bien logro el cometido, todos los contenidos de las demás pestañas, se desplazan hacia abajo.
Si hay alguien que me pueda orientar o sugerirme otra forma de lograr lo que busco, agradecida.

[David]

Espero no estar ayudando al enemigo .

Si colocas la imagen flotada (float) dentro del div explicacion no debería haber problemas.

[Aresillo]

Parece que sí que estás ayudando al enemigo...
Cuidadito con Pao que es una chica de recursos!!

Lo que deseas hacer es poner las pestañas por debajo verdad? y después que debajo haya una imagen de fondo no?
me lo aclaras...?

[pao01]

Gracias Ares, te explico:

a simple vista, debería verse tal como el boceto, y en la parte roja verse una imágen.
Luego clickeando sobre pestaña 2, que se abra sobre el div el contenido correspondiente a esa pestaña y así sucesivamente.
A lo que me refiero es que lo que correspondería a la pestaña 1 que será únicamente contenido de una imágen, el mismo se presente visible sin necesidad de clickear en la pestaña 1.
Espero haber sido más clara.

[David]

¿Dices que si colocas dentro del div explicacion la imagen el resto de contenido de pestañas queda debajo? Porque yo probé hacerlo y eso no ocurre .

[pao01]

No, lo que yo digo es que si coloco la imágen en el div id "explicación" que se ve en el ejemplo de Mikel, la imágen queda como yo quiero "fija", pero todos los contenidos de las demás pestañas abren por debajo.

David: Da gusto competir con vos.

[Aresillo]

Creo haberte entendido y lo suyo sería que esa imagen, si va a estar fija y como parte del diseño no estuviera vinculada a la pestaña 1 sino en otro div. Si quieres que esté debajo del otro entonces utiliza position:relative, el desplazamiento y el z-index.
Si lo que quieres es que la imagen de abajo roja se cambie en cada pestaña, ya es un poco más engorroso, pero creo que lo que quieres es lo primero que te he dicho

[pao01]

Ares, a esta hora no estoy muy lúcida; voy a probar con lo que me decís.
De todas formas explico lo siguiente: lo que ves en rojo es una imágen pero no necesariamente de fondo, es una imágen del diseño que sólo debería estar oculta en el caso de clickear en la pestaña 2, 3 ó 4. y presentarse visible independientemente de tener que clickear en la pestaña 1.
Mañana cuento como me fue y sino vuelvo a la carga.

[Aresillo]

Ok, aventuro que te va a costar realizar lo que quieres...

[pao01]

Finalmente lo logré; en cuanto tenga un momento, paso el código en limpio y lo subo por si a alguien puede servirle.