28173 sujets

CSS et mise en forme, CSS3

Un paragraphe avec des images de part et d'autre du texte

Bonjour,
je tente de faire un truc très simple : introduire des images à l'intérieur d'un texte, à droite à ou à gauche. Voilà le résultat à peu près fonctionnel :

http://www.uniterre.com/r_boutique/carnets/brasilia/brasilia_css.htm
Je voudrais faire un modèle générique pour ce genre de texte :
upload/10528-texte.gif

Voilà mon code :

.conteneur {	width: 590px;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	background-image: url(images/fond.jpg);
	background-repeat: no-repeat;
}
.droite {	float: right;
	position: relative;
	margin: 10px;
}
.gauche {	float: left;
	position: relative;
	margin: 10px;
}
.texte {	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	margin-right: 35px;
	margin-left: 10px;
}
}

<table border="0" cellpadding="0" cellspacing="0" width="790">
  <tr valign="top">
    <td><img src="../../../g_images/g3.gif" width="5" height="446" border="0" /></td>
    <td>&nbsp;</td>
    <td><div class="conteneur">
      <div class="bloc_bas">
              <div class="texte">Brasilia est le carnet...</div>
        <img class="droite" src="images/BebDeum_p.jpg" width="200" height="275" alt="page" />
        <div class="texte">Avoir imagin&eacute; une r&eacute;.<img src="images/JochenGerner_p.jpg" alt="" width="200" height="280" class="gauche" />Mais le dessin brouill&eacute; ...</div>
      </div>
    </div></td>
  </tr>
</table>

Quelqu'un peut-il donner le code fonctionnel parfait ?!
Merci,
Alexandre
Modifié par uniterre (22 Jan 2007 - 13:59)
Bonjour et bienvenue à toi sur le Forum Smiley smile

Pourrais-tu éditer ton message afin de mettre en forme ton code au moyen des boutons [ code]... [ /code], comme cela est stipulé dans l'a Règle 13 du forum et aussi corriger ton url qui ne pointe actuellement sur rien (elle est mal construite) ?

N'oublie pas de faire un tour dans les différentes catégories pouvant t'aider à mieux te familiariser avec le fonctionnement du Forum.

A bientôt,
Cygnus Smiley cligne
Modifié par Cygnus (22 Jan 2007 - 13:54)
Je profite également de l'occasion pour te rappeller que ce forum est spécialisé dans les Standards du Web or, la mise en page que tu proposes, elle n'est pas tout à fait ... ce que l'on pourrait qualififée de standard. Smiley cligne

Je te conseille donc différents lien qui pourraient t'aider dans ta démarche.
Et surtout, qui pourraient te permettre de comprendre le fonctionnement des différentes éléments HTML :
- Comment débuter avec XHTML et les CSS ? Que sont les standards web ?
- Comprendre le positionnement des éléments en CSS

Bonne lecture Smiley smile
ggrrrr j'avais rédigé tout un joli post reprenant ce qui ne vas pas dans ta page, et voilà que je ferme le mauvais onglet! Smiley fache

Du coup, en très gros:
- l'élément <table> structure des données tabulaires et ne doit pas être utilisé pour autre chose (lire: construire ta mise en page)
- tu ne précises pas de doctype, or c'est essentiel
- tu mélanges positionnements relatifs et flottants, ce qui démontre une réelle incompréhension du positionnement en css (voir lien fourni par Cygnus)
- n'utilise pas une unité fixe telle que le pixel pour gérer les tailles de tes polices, privilégie une unité relative
- prends l'habitude d'ajouter systématiquement un texte alternatif à tes images. Un bon moyen de ne pas l'oublier est de l'insérer en premier dans ta balise "img", avant l'attribut src donc:
<img alt="Texte alternatif" src="image.png" />


Bon courage Smiley cligne
Modifié par Benjamin D.C. (22 Jan 2007 - 14:26)
en tout cas, je ne m'en s'hors pas !

j'avais déjà lu la doc ici et c'est pour cela que j'avais fait ce premier code. Je veux bien supprimer la table et n'avoir qu'une feuille de style mais j'ai vraiment du mal. Je trouve que les CSS sont super compliquées tout de même !
j'ai viré 
position: relative;

ca marche aussi bien.
je vais en rester là car ca marche sur PC IE 7. et Firefox 1.5

j'ai relu la doc + d'autres sur yoyodesign etc, il y a tellement de cas spécifiques que c'est décourageant !

j'ai vu des sites qui critiquent d'autres sites en disant justement qu'ils omettent des cas particuliers, que c'est pas strictement compatible.
Ca semble vraiment être l'affaire de professionnels tout ceci. Je donnerai donc à faire la nouvelle version de mon site !
Sujet clos
Aller à