28220 sujets

CSS et mise en forme, CSS3

Problème d'alignement

Bonjour,

J'essaie d'aligner une photo et du texte.

Mais je n'y arrive pas , ma photo et considérée comme un caractère. Le texte s'affiche à la suite de la photo.

Quelqu'un pourrait-il m'aider ?

Merci beaucoup


Voici mon code :

<span class="actualites">

	<span class="tabfd2">
															<? if($res_news['news_photo']!=''){?>
															<img src="administration/news/photos/<? echo $res_news['news_photo'] ?>" width="80" height="80" >
															<? }?> <?  echo substr( strip_tags($res_news['news_corps_1']),0,400)."..."; ?>
														</span>
																	<span class="txt6">
																	Lecteurs : 
																	<? echo $res_news['news_visites'] ?>
																	<? 
																		if($res_news['news_fic_1'] !='')
																		{
																	?>
																	Télécharger le fichier 
																	associé à l'article : <a href="administration/news/fichiers/<? echo $res_news['news_fic_1'] ?>" target="_blank">ici</a>
																	<? 
																		}
																		if($res_news['news_lien']  !='')
																		{
																	?>
																	Lien web :
																	<a href="http://<? echo $res_news['news_lien'] ?>" target="_blank">
																	ici
																	</a> 
																	<?
																	}
																	?>
																</span><span>


Voici le code de mon style :

.tabfd2 {
background-color: #FFFFFF;
width: 100%;
padding-top: 3px;
padding-bottom: 3px;
height: 100px;
display: block;
text-align: left;
vertical-align: top;
Bonjour,
Déjà tu devrais rempacer ton span par un div. Les span sont utilisés en général à l'intèrieur d'un texte pour appliquer un style particulier.
Donc remplace le span et met


div.tabfd2 {
background: #fff; /*background suffit
width: 100%; /*pas utile :valeur par default des div 
padding-top: 3px;
padding-bottom: 3px;
height: 100px;
display: block;  /*plus utile
text-align: left;
vertical-align: top;   /*inutile (s'applique aux éléments en ligne ou aux cellules)
float:left /*pour que ton texte de dessous passe à droite


Tu devrais remplacer
<span class="txt6"></span> par <div class="txt6"></div>
Modifié par Hermann (23 Feb 2006 - 13:58)
ok, je dois avouer que je me lance dans le conception d'un site uniquement en css et j'ai du mal.. ça change complètementmes vieilles méthodes..
Enfin soit.

div.tabfd2 => veut dire que je dois à ma balise <div> lui donner un id=tabfd2

c ça ou je me plante ?
Encore merci
Chère collègue (graphiste) Smiley cligne
Je te conseil vivement si tu veux pas ramer trop longtemps en CSS, d'aller jeter un oeil aux tutoriels qui se trouvent ici : http://css.alsacreations.com/Bases-et-indispensables/
pour les caractéristiques de chaque propriété et leur compatibilité tu px aller sur http://wiki.media-box.net/documentation/css

a écrit :
div.tabfd2 => veut dire que je dois à ma balise <div> lui donner un id=tabfd2


Non le "." est dédiés aux class. Les "#" aux id. Donc tu conserve ton class:

<div class="tabfd2">


Ceci dit si ce div est unique dans la page tu pourra lui donner un id.
Les class sont fait pour les éléments répétitifs.
En fait, j'ai le livre CSS2 Pratqiue du design web.

Mais au niveau de l'intitulé des styles dansla feuille de style je ne capte pas tout encore..

En résumé quand tu notes div.tabfd2 tu veux dire que je dois mettre la class tabfd2 au div ok j'ai pigé.

Il me faut le temps mais j'ai compris Smiley rolleyes
Merci je vais aller tester çaparce qu'hier aprem j'étais en réunion.
ça ne marche pas.. bouhouhou ...
La photo et le texte se suivent comme dans une phrase

    <div class="tabfd2"> 
      <? if($res_news['news_photo']!=''){?>
      <img src="administration/news/photos/<? echo $res_news['news_photo'] ?>" width="80" height="80" > 
        <? }?>
        <?  echo substr( strip_tags($res_news['news_corps_1']),0,400)."..."; ?>
    </div>


Class :

.tabfd2 {
	background: #FFF; 
	padding-top: 3px;
	padding-bottom: 3px;
	height: 100px;
	text-align: left;
	vertical-align: top;
	float:left
Salut,
Ce n'est pas le code que tu avais donné dans ton premier post, normal ça remet tout en question, d'autre part je n'ai pas testé puisqu'il n'y a que des bout de code et pas de page entière.
Il faut parfois présenter un élément dans son contexte pour régler un prob.
Déjà pour faciliter la tâche à ceux qui te répondent il faudrait peut-être penser à fournir du code HTML et non PHP (affichage/view source).
Tu peux supprimer le vertical-align
Modifié par Hermann (24 Feb 2006 - 11:12)
Merci du conseil.
Voici le bout de code HTML...

Si j'ai le temps jemettrai page sur le serveur pour plus de facitlité. Mais bon là je repars en réunion donc.
En tous cas merci beaucoup pour tout.
Une vraie mine d'or ce livre et ce forum.



	<div id="contenumilieu"> 
								  	<span class="tabfd1"><p><font face="verdana,arial,helvetica,sans-serif" color="#000066" size="2">Texte de la page d'accueil</font></p>									</span>
											<hr width="100%" size="1" noshade>
																						<img src="images/tt_actus.gif">
											<br>
									<span class="actualites">
											<img src="images/ico_actus.gif">
														<span class="tt1">nouveauté 1</span>
														<span class="tt2">Date de publication : 
														16/01/2006</span>
														<div class="tabfd2">
																														<img src="administration/news/photos/cha.gif" width="80" height="80" >
															 Description de la nouveauté 1  Description de la nouveauté 1  Description de la nouveauté 1  Description de la nouveauté 1 Description de la nouveauté 1 ...														</div>
																	<span class="txt6">
																	Lecteurs : 
																	15   
																																		Télécharger le fichier 
																	associé à l'article : <a href="administration/news/fichiers/gardes.doc" target="_blank">ici</a>   
																																		 Lien web :
																	<a href="http://www.google.be" target="_blank">
																	ici
																	</a> 
																																	</span>
									</span>
																			<p>
										| <a href="#hautpage" style=" text-decoration:none ; "><span class="txtbleufc11">Haut 
										  page</span></a> |
										</p>
								</div>
Ton code est beaucoup trop indenté!

Bon ça y est j'ai compris ce que tu voulais mais essayes d'être plus claire.
Quand tu dis aligner ça peut être aligner verticalement ou horizontalement!
Ajoute ceci a ta css



.tabfd2 img {display:block; margin-bottom:...}

Ce qui n'affecte que les images qui se trouvent dans l'élément dont la class est tabfd2.
Les images sont des éléments en-ligne et plus précisemment de type inline-block, ce qui veut dire qu'elles ne sont pas suivis d'un retour à la ligne comme le sont les élément de type block (display:block) et quelles ont l'avantage par rapport aux élément de en-ligne (display:inline) d' accepter les marges verticales.
Sujet clos
Aller à