28173 sujets

CSS et mise en forme, CSS3

Bonjour a tous,

Il s'agit d'un problème classique, et je n'y arrive pourtant pas. Je precise que j'ai lu les deux tutoriels sur le sujet du positonnement css.

Je veux arriver a faire des blocs de texte qui se supperposent et dont chaque bloc contient une image sur le cote gauche :

upload/12432-Unbenannt.gif


Le probleme que je rencontre est que le texte "bla bla" vient se coller contre l'image au dessus. En effet, suivant la taille de la fenetre du navigateur, l'image prend plus de place en hauteur que le texte qui y est accolé.

Le seul moyen que j'ai trouve pour que ca fonctionne est de donner a la fois une largeur de 100% aux blocs <p> par l'intermediaire d'une classe et une position flottante :


p.image_and_text_container
{
  float: left;
  width: 100%;
}


Appliqué au code suivant :


<h1>topheading</h1>

<p class="image_and_text_container">
  <a href="http://127.0.0.1/Joomla/images/stories/products/prof07_1.jpg" class="thickbox" rel="">
    <img src="http://127.0.0.1/Joomla/images/stories/products/prof07_1_thumb.jpg" width="120" height="85" align="left" hspace="6" alt="Image" title="Image" border="0" /></a><a href="http://127.0.0.1/Joomla/images/stories/products/prof07_2_Material_waehlen.jpg" class="thickbox" rel=""><img src="http://127.0.0.1/Joomla/images/stories/products/prof07_2_Material_waehlen_thumb.jpg" width="119" height="90" align="left" hspace="6" alt="Image" title="Image" border="0" />
  </a>
  Durch eine einfache Zuordnung von Leuchten, 3D Gestaltungsobjekten sowie Materialien können Sie im §§§§ 2007 in wenigen Schritten eine lebendige und realistische Darstellung Ihrer Planung erreichen.<br />Sie erhalten dadurch nicht nur lichttechnisch korrekte Resultate, sondern auch realistische Helligkeitseindrücke von Gebäuden und Räumen. Das beeindruckt mit Sicherheit jeden Entscheidungsträger.
</p>

<p><strong>Multiraum und Berechnungsmanager</strong></p>
<p class="image_and_text_container">
  <a href="http://127.0.0.1/Joomla/images/stories/products/prof07_3_Berechnungsmanager.jpg" class="thickbox" rel="">
    <img src="http://127.0.0.1/Joomla/images/stories/products/prof07_3_Berechnungsmanager_thumb.jpg" width="120" height="101" align="left" hspace="6" alt="Image" title="Image" border="0" />
  </a>Mit der Multiraum Funktionalität bietet Ihnen &&&&&& 2007 die Möglichkeit, sämtliche relevanten Räume in einem &&&& Projekt zu verwalten. Kombinieren Sie wahlweise Innenräume mit Außenanlagen, ganz wie Sie es wünschen und benötigen.<br />Der neue Berechnungsmanager ist einfach und klar strukturiert. Er hilft Ihnen bei der übersichtlichen Planung sämtlicher Lichtberechnungen.
</p>

<p><strong>bla bla bla</strong></p>

<p>texte texte textetexte texte textetexte texte textetexte texte textetexte texte textetexte texte texte</p>




Ca devrait pouvoir fonctionner sans avoir a specifier une position flottante pour le bloc <p>, non ?
(voir sans avoir a mettre creer une classe pour ce bloc <p> ?)


Merci de bien vouloir m'aiguiller vers la solution la plus simple.
Bonne journée/soirée a tous,
Modifié par innuend0 (19 Jun 2007 - 11:42)
Quelqu'un peut me renseigner s'il vous plait ?
Manque t il une information dans mon message ?

Pour ce qui est de la position du texte "blabla" j'ai résolu le problème : il suffit de comprendre le mécanisme de <<fusion de marges>>.

Cependant, le second probleme est toujours la : je suis obligé de mettre une position flottante : <<float: left;>>