Capas flotantes

Bernix · #1 (**permalink**) 21/05/2008, 10:53

Buenas, el problema es el de siempre, los navegadores.

Tengo una capa principal y a la derecha tengo una flotante. Cuando inserto una imagen en un texto a la capa principal, en IE7 se ve bien y con Firefox se ve desplazada hacia abajo.

¿Alguien sabe como solucionarlo? Gracias.

[NiRVaNa] · #2 (**permalink**) 21/05/2008, 12:43

Lo ideal para estos casos es mostrar el codigo que estas utilizando... ya que la mera explicación no basta...

Salu2!

Bernix · #3 (**permalink**) 22/05/2008, 08:44

Ok! Te pongo un trozito de codigo y el css de la div flotando

HTML:

<body>
<div id="contenedor">
<div id="topmenu">
<ul>
<li><a href="#inici" accesskey="i">Saltar al contingut</a></li>
<li><a href="accesibilitat">Contacta</a></li>
<li><a href="accesibilitat">Enllaços</a></li>
</ul>
</div>

<div id="banner">
<p><h1>CECELL</h1></p>
<p>Centre d'Esports del Camp Escolar de Lleida</p>
</div>

<div style="display: none; color: rgb(204, 0, 0);" id="video">
<object width="425px" height="355px"><param name="movie" value="http://www.youtube.com/v/Uk89CO7419w&rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/Uk89CO7419w&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>
<br/>
<a href="javascript:void(0);" onclick="javascript:ocultar('video')">He acabat de veure el video</a>
</div>

<div style="display: none; color: rgb(204, 0, 0);" id="presentacio">
<embed src="http://www.box.net/static/flash/box_explorer.swf?widgetHash=gqbnalsowo&cl=0" width="460" height="345" wmode="transparent" type="application/x-shockwave-flash"></embed><br/>
<a href="javascript:void(0);" onclick="javascript:ocultar('presentacio')">He acabat de veure la presentació </a>
</div>

<div id="menu">
<ul>
<li><a href="index.htm">Presentació</a></li>
<li><a href="noticies.htm">Notícies</a></li>
<li><span>Història</span></li>
<li><a href="dades.htm">Dades del club</a></li>
<li><a href="junta.htm">Junta</a></li>
<li><a href="equips.htm">Equips</a></li>
<li><a href="fotos.htm">Fotografies</a></li>
</ul>
</div>

<div id="barra-dreta">
<h4>Destacat</h4>
El club creu que les bananes són bones per la salut
<br/><br/><br/>
</div>

<div id="barra-dreta">
<h4>Video</h4>
<a href="javascript:void(0);" onclick="javascript:mostrar('video')">
<img alt="JSC" src="imatges/imavideo.jpg" height=100 width=100/><br/>
<center>Clic per veure el video</center></a>
</div>

<div id="barra-dreta">
<br/><br/>
<h4>Projecte</h4>
<a href="javascript:void(0);" onclick="javascript:mostrar('presentacio')">
<img src="imatges/imaprojecte.jpg" alt="JSC" width=100/><br/>
<center>Clic per veure la presentació</center></a>
</div>

<div id="inici">

<h2>Història</h2>

<div id="text">

<div class="imahistoria"><img src="imatges/imahistoria.png" align="left"></div>
<p align="justify">A finals del curs 1987-88, concretament el 23 de Maig de 1988, data en que van ésser aprovats els Estatuts, neix el “Centre d'Esports del Camp Escolar de Lleida”(CECELL). L'esmentat Centre és una associació creada per iniciativa de les APAS dels instituts de batxillerat “Màrius Torres”, “Joan Oró” i "Samuel Gili i Gaia” recolzada pel Departament d'Ensenyament de la Generalitat de Catalunya que li dona suport a través de la Gerència del Camp Escolar, considerant al CECELL com una eina fonamental en la formació esportiva i educativa dels alumnes dels instituts. Igualment el CECELL rep el suport de la Secretaria General de l'Esport de la Generalitat, concedint-li un Centre de Tecnificació de Voleibol, únic centre d'esports d'equip existent a Lleida en aquells moments.</p>
<p align="justify">El CECELL va passar per diferents etapes tenint equips en diferents modalitats esportives, desprès es va quedar únicament amb el voleibol masculí i femení; i a partir d'una sèrie de problemes econòmics es va decidir quedar-se únicament els equips femenins sense oblidar que l'important era l'esport de base i d'aquesta manera es va tenir regularment equips en competició a les categories infantil, cadet, juvenil i sènior. Durant els últims anys, per part de la junta directiva s'ha fet una tasca de sanejament econòmic del club, intentant ajustar al màxim els pressupostos segons les possibilitats reals del club i pensant en avançar sempre amb pas ferm.</p>
<p align="justify">La política que porta a terme el club és la formació de noies tant en l'àmbit esportiu com educatiu, pensant que el fomentar l'esperit de l'esport les pot ajudar en la seva formació tan humana com física. Un dels pilars fonamentals del nostre club es que els nostres tècnics així com algunes de les jugadores porten equips de categories escolars en centres educatius de Lleida i comarca, fomentant d'aquesta manera la pràctica del voleibol i possibilitant que desprès les jugadores d'aquests equips puguin arribar a formar part de la base del club.</p>
<p align="justify">Esportivament, aquesta tasca en els equips de base ens ha situat des de fa uns anys entre els millors equips de Catalunya aconseguint classificar els equips juvenil, cadet i infantil pels Intersectors i per a la Fase Final del Campionat d'Espanya en més d'una ocasió. L'equip sènior, desprès de jugar durant varies temporades a la lliga de Primera Nacional, la temporada 2003-2004 aconsegueix l'ascens a la lliga FEV per primer cop a la seva història. Partint dels equips de la base, es vol arribar a formar un equip sènior on puguin tenir cabuda el màxim de jugadores del nostre club i de l'àmbit de les nostres terres.</p>

</div>
</div>

El "align left" hace que el texto se coloque al lado y abajo de la imagen

CSS:

#barra-dreta{
float:right;
width:25%;
clear:right;
position:relative;
}

#inici{
border:1px solid #8facc8;
border-top:4px solid #4386ce;
background-color:#ffffff;
padding:5px;
min-height:300px;
width:70%;
float:none;
clear:none;
position:relative;
}

A ver si con este trozo de codigo hay suficiente. Muchas gracias!

Mikmoro · #4 (**permalink**) 22/05/2008, 11:03

No sé qué hace realmente tu código, pero sí puedo decirte un par de cosas:

1.- estás usando varias veces el mismo id (barra_dreta). El id es un identificador único, que se debe usar para un único elemento. Para lo que quieres hacer, deberías usar class en lugar de id.

2.- no entiendo bien la consulta, pero si el texto no se pone al lado de la imagen y ésta se desplaza hacia abajo, es porque necesitas cambir el align left por float left

<img src="imatges/imahistoria.png" style="float: left;">

No obstante, ya te digo que no entiendo bien cuál es el problema que tienes.

Mikel.

Bernix · #5 (**permalink**) 27/05/2008, 01:51

Gracias Mikel, provare eso en cuanto pueda. Si pudiera subir fotos te pasaria la captura de pantalla. El problema es que si tu pones la img antes de un <p> y el align left, el texto de ese <p> se queda a la derecha de la foto y si es muy largo se pone por debajo tambien. El problema es que con firefox no interpreta bien donde se tiene que poner la imagen (la pone a la izquierda pero no pilla lo del paragrafo, la pone a mitad de pantalla y no al <p> que le digo.