Float: left

Bonjour,

Voilà je suis perplexe quant au cas que je viens vous soumettre.

J'intègre des pub avec du texte à droite en utilisant float: left;

structure CSS

.floatLeft {

margin: 0 5px 20px 0px;
display:block;
float: left;

}


structure HMTL

<p class="floatLeft">

code pub

</p>


Comme vous pouvez le voir dessous 1- Device Central

http://www.fireworkszone.com/Devicecentralintegration_589.html

Constation:

Le titre "2-Adobe Fireworks CS5" devrait se trouver à gauche de la ligne et on dirait que cette ligne est comme absorbée par le float: left du dessus.

Avez vous une idée de ce qui se passe? Merci

Avant de se soucier du code CSS, il y a déjà de gros problèmes de code HTML.
Voici ce que donne le HTML dans lequel est inclut ton paragraphe (je ne reprend ici que l'arborescence):

<ol>
  <li></li>
  <p class="floatLeft"></p>
  <p></p>
  <p></p>
  <li></li>
  <p></p>
  <ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ol>
  <div></div>
  <script></script>
  <iframe></iframe>
  <noscript></noscript>
  <h3></h3>
  <div class="wheretogofrom"></div>
</ol>

Les balises sont situées dans n'importe quel ordre. Il te faut déjà réussir à obtenir un code valide, afin d'éviter des erreurs d'interprétation par les navigateurs web. Ce n'est qu'une fois le code validé que tu pourras te pencher sur la mise en forme.

La structure html est en fait comme ceci si l'on prend toute la page:

<ol>

<li>titre 1</li>

<ol>
<li>sous titre 1</li>
<li>sous titre 5</li>
<li>sous titre 3</li>
</ol>

<li>titre 2</li>
<ol>
<li>sous titre 1</li>
<li>sous titre 5</li>
<li>sous titre 3</li>
</ol>

</ol>

Par contre je n'ai pas vu d'iframe

fireworkszone a écrit :
La structure html est en fait comme ceci si l'on prend toute la page

Même si elle était comme tu viens de l'indiquer, elle comporterait encore des erreurs, car un élément ol ou ul ne peut avoir comme éléments enfants que des li.

Je copie ici ce que m'affiche l'inspection du code source de la page avec Firefox (raccourci clavier Ctrl+U):

<h1>Article</h1>
<ol>
  <li><span>Device Central</span></li>
  <p class="floatLeft">
  <SCRIPT LANGUAGE="JavaScript1.1" SRC="http://bdv.bidvertiser.com/BidVertiser.dbm?pid=315657&bid=779758" type="text/javascript"></SCRIPT>
<noscript><a href="http://www.bidvertiser.com/bdv/BidVertiser/bdv_advertiser.dbm">internet advertising</a></noscript>
</p>
  <p>Device Central provides designers and coders a comprehensive testing facility that approximates how pages and graphics will look on a variety of cell phones with different screen resolutions, color depths, memory constraints, and other performance characteristics. </p>
  <p>It simplifies the mobile authoring workflow and allows developers to preview designs and test content on the desktop before loading it on the mobile devices for final testing.</p>
  <li><span>Adobe Fireworks CS5</span></li>

Il y a donc bien des problèmes, puisque des paragraphes (entre autres) se retrouvent enfants d'un élément ol.

fireworkszone a écrit :
Par contre je n'ai pas vu d'iframe

C'est parce qu'elle est créée par le JS, et que l'affichage de la source ne permet pas de voir le code que le script génère.
Modifié par octopus984 (13 May 2010 - 20:44)

donc si je vous comprend bien on ne peut pas avoir:


<ol>

<li>titre 1</li>
<p>texte</p>
<ol>
<li>sous titre 1</li>
<p>texte</p>
<li>sous titre 5</li>
<p>texte</p>
<li>sous titre 3</li>
</ol>



</ol>

Quel serait à votre avis la bonne structure à adopter?

Ce que je souhaite obtenir sous forme de CSS c'est:

1- titre

1-sous titre
2-sous titre
3-sous titre

2- titre

3- titre

Merci
Modifié par fireworkszone (13 May 2010 - 22:23)

Bonjour,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

Bonne continuation