Discussion :

[frog43]

Bonjour,
j'aurais besoin de vos conseils pour optimiser le création d'une partie de cette page.

Voila la partie unique en Ardèche est faite comme ceci (en 3 parties) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div id="info1">  
    	<div id="titre1" style="background-image:url(images/fond_barre.png); background-repeat:no-repeat; height:131px;"></div> 
      <div style="background-color:#fffdeb;"><img src="images/tof1.png" alt="Traversée des rivières !" style="margin-left:20px; margin-top:-75px;" />
       	  <p  align="justify" style="float:right; margin-top:-150px; margin-right:10px; padding-left:250px;">
       		  <span class="Marron">Situé au confluent de 3 rivières, la ferme équestre de Chavetourte vous propose la traversée de ces 3 rivières, unique en Ardèche !</span><br />
   	    </p>
      </div>
    	<div class="fin_info" style="margin-top:-30px;"></div>      
	</div>

et les CSS qui vas avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
#info1{
	width:762px;
	margin:0 auto;
	margin-top:10px;
}
 
.fin_info{
	width:762px;
	height:76px;
	margin:0 auto;
	background-image:url(images/fin_info.png);
	background-repeat:no-repeat;
}

Voila j'image qu'on peut faire mieux que sa, notamment que l'encadre s'agrandisse tout seul en fonction du texte qu'il y a dedans et qu'il repousse vers le bas tout ce qui se trouve plus bas sur la page ...

Voilà si quelqu'un veux bien m'aider ....

Cordialement.

[desert]

Bonjour,
Essaie en mettant un overflow:hidden au div se situant en-dessous du div#titre1.

[grafik.muzik]

J'ai réécris la portion de code que tu nous as donné de façon à la rendre davantage conforme.

• Essentiellement, il est préférable d'utiliser des balises spécifiques plutôt que des DIV. Ainsi, j'ai utilisé <h2> pour le sous-titre et j'ai séparé ton texte dans deux paragraphes (<p>).
  
• Il faut aussi éviter, autant que possible d'utiliser des balises vide destinées à la seule mise en page c'est pourquoi j'ai remplacé le « <div class="fin_info" ...> » par un arrière-plan CSS.
  
• Ensuite, il faut éviter de mettre des styles directement dans le code HTML, il est possible de tout transférer dans la feuille de style.
  
• Puis, idéalement, il est préférable d'éviter les marges négatives. Il y a généralement toujours moyen de faire la même chose en réduisant la taille de certains éléments et de leur marges.
  
• Enfin, l'idéal pour toi serait de rechercher à en apprendre davantage sur les « sélecteur CSS » (une petite recherche d'une heure ou deux sur le Web pourrait améliorer grandement tes capacités).

Donc voilà! J'ai testé le code ci-dessous dans une page et ça donne le même résultat que dans ta page. Je te conseille de tester mon code dans une nouvelle page vierge en premier lieu, afin de bien comprendre les mécanismes utilisés. Ensuite, tu pourras copier coller dans ta page originale et adapter ton code.

J'espère que ça t'aide! Il y a beaucoup de petites choses à corriger dans ton code mais on voit que tu comprends les principes de base: un petit pas de plus et tes codes seront bien

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div id="info1">  
	<h2><span>Unique en Ardèche, la traversée des rivières !</span></h2> 
	<div>
		<img src="images/tof1.png" alt="Traversée des rivières !" />
 
		<p id="sommaire">Situé au confluent de 3 rivières, la ferme équestre de Chavetourte vous propose la traversée de ces 3 rivières, unique en Ardèche !</p>
 
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor.</p>
	</div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/*Section principale*/
#info1 {
	margin: 10px auto 0 auto;
	width: 762px;
 
	/*Arrière-plan, qui apparait en bas*/
	background-image:url(images/fin_info.png);
	background-repeat:no-repeat;
	background-position: bottom left;
	padding-bottom: 60px;
}
 
/*Titre de la section, h2 est mieux que div pour un titre*/	
h2 {
	background-image:url(images/fond_barre.png);
	background-repeat:no-repeat;
	height:80px;
	margin: 0;
}
 
/*Ceci masque un texte que j'ai ajouté au XHTML,
cela permet à quelqu'un qui n'a pas CSS de consulter ta page aisément*/
h2 span {
	display: none;
}
 
/*Phrase résumée, en marron gras*/
#sommaire {
	padding-top: 10px;
	color: #930;
	font-weight: bold;
}
 
/*Arrière-plan beige de la section centrale*/
#info1 div {
	background-color:#fffdeb;
}
 
/*image affichée à gauche, avec une marge de 15px à gauche et à droite*/
#info1 img {
	float: left;
	margin: 0 15px ;
}
 
#info1 p {
	margin: 0 10px;
	text-align: justify;
}

[frog43]

Bonjour,
et merci pour les réponses !

* Essentiellement, il est préférable d'utiliser des balises spécifiques plutôt que des DIV. Ainsi, j'ai utilisé <h2> pour le sous-titre et j'ai séparé ton texte dans deux paragraphes (<p>).
* Il faut aussi éviter, autant que possible d'utiliser des balises vide destinées à la seule mise en page c'est pourquoi j'ai remplacé le « <div class="fin_info" ...> » par un arrière-plan CSS.
* Ensuite, il faut éviter de mettre des styles directement dans le code HTML, il est possible de tout transférer dans la feuille de style.
* Puis, idéalement, il est préférable d'éviter les marges négatives. Il y a généralement toujours moyen de faire la même chose en réduisant la taille de certains éléments et de leur marges.
* Enfin, l'idéal pour toi serait de rechercher à en apprendre davantage sur les « sélecteur CSS » (une petite recherche d'une heure ou deux sur le Web pourrait améliorer grandement tes capacités).

Parfait ce petit cours ! Sa va permettre de m'améliorer ! Je test le code que tu as bien voulu refaire et je vais bien le regarder pour comprendre !

Sinon merci pour ta critique :

J'espère que ça t'aide! Il y a beaucoup de petites choses à corriger dans ton code mais on voit que tu comprends les principes de base: un petit pas de plus et tes codes seront bien

Sa motive pour continuer à apprendre !

Bonne journée !

PS : je reviens ici poster mes conclusions ...