Problème de design

Espacement entre deux titres

Sujet résolu

12 octobre 2006 à 5:54:44

J'ai un petit problème au niveau d'un espacement entre deux titres. Je ne sais pas pourquoi mais au lieu de se suivre, il y a une sacrée hauteur à descendre avant d'arriver au titre suivant (qui est l'élément qui suit directement le premier titre)

Voici ce que cela donne (et encore, on ne voit même pas le titre du dessous.:
Image utilisateur

Voici le code XHTML :
Image utilisateur

Voici le code CSS qui correspond aux balises insérées ici :
Image utilisateur

Merci d'avance pour votre aide.

Schumiga.

Perlejade

12 octobre 2006 à 6:41:53

Je n'arrive vraiment pas à reproduire le problème chez moi. Pourrais-tu poster une plus grande partie de ton code, s'il te plaît ? (Si possible à l'aide des balises <code></code> : les images ne sont pas visibles par tout le monde, sont plus lourdes à charger et ne permettent pas de copier/coller le code.)

Candygirl

12 octobre 2006 à 12:06:20

C'est probablement à cause du clear both que tu as dans ton h5. Vu ton margin-left de 295, je suppose que tu as un menu flottant à gauche et que ton titre suivant arrive après la fin de ton menu ? En fait ton h5 applique son clear et se positionne donc en-dessous des flottants, soit aussi au-dessous des menus.

msg_dracula

12 octobre 2006 à 12:20:51

Les balises <h1>....<h6> sont utilisés pour définir des styles pour des titres et des textes a mettre en avant.
Ce ne sont en aucun cas des balises de positionnement.

h5
{
clear : both ;
}

A mon avis, ton probleme d'ecart viens de la. La balise clear ne peut etre appliqué qu'a des éléments de bloc, (div, p, etc...)

Candygirl

12 octobre 2006 à 13:32:05

Citation : msg_dracula

Les balises <h1>....<h6> sont utilisés pour définir des styles pour des titres et des textes a mettre en avant.
Ce ne sont en aucun cas des balises de positionnement.

Tu entends quoi exactement par des balises de "positionnement" ?

Un clear peut tout à fait se jusitifier sur un titre. Imagine, qu'au-dessus, il y ait un paragraphe avec une image en float plus longue que le texte. Si on veut voir notre h5 en-dessous plutôt qu'à côté le clear sera adapté, non?

msg_dracula

12 octobre 2006 à 14:02:03

Oui, c'est vrai que je me suis mal exprimé. Par balises de positionnement, je voulais dire élément de bloc.

A savoir que la propriété clear ne peut s'appliquer qu'a des éléments de bloc (div, p, blockquote, pre, form, fieldset, etc...)

Dans ton exemple, le clear ne peut etre appliqué seulement a l'élément <h5>, mais au bloc, c'est a dire <p>. A mon sens, si tu souhaite mettre un texte au dessous de l'image, ou a coté, selon la taille de celle ci, il faudrait ecrire le texte dans le <h5> avec des espaces insécables pour forcer le passage a la ligne si l'image est trop large. ou créer une fonction php qui te positionnera le <h5> en fonction de la largeur de l'image.

schumiga

12 octobre 2006 à 21:07:46

Bon,je vais essayer cela.

En effet, le problème vient bien du "clear". Ca fonctionne mieux maintenant sauf que j'ai le problème qu'alors mes images dans le corps restent flottantes. Voici ce que cela donne :

Image utilisateur

En fait, je voudrais que la petite image (du gars qui met ses pieds derrière sa tête) se trouve en-dessous de la photo du moniteur (donc il faudrait enlever le float à cet endroit mais sans que l'image ne se mette tout en dessous du menu.

Voici mon code XHTML (je mets seulement le début car c'est tout le temps la même chose et je veux éviter de faire un post à rallonge) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Les moniteurs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <meta name="author" content="Gaëlle Joris" />
   <meta name="description" content="Site du club de gymnastique la Royale Etoile Ensivaloise" />
   <meta name="keywords" content="gymnastique, artistique, Ensival, Verviers, GAF, GAM, sport, club" />
   <meta name="reply-to" content="ree@skynet.be" />
   <link rel="stylesheet" media="screen" type="text/css" title="Essai" href="design1.css" />
   <link rel="start" title="Accueil" href="index.html" />
   <link rel="shortcut icon" type="image/x-icon" href="images/gymnastique/anneaux/hirondelle_anneaux.png" />
</head>
<body>
<div id="en_tete"> 
<img style="display:block;margin:auto;" src="images/logos/baniere2.php" alt="Bannière du site" />
</div>

<div id="menu"> 
<?php
include("menu.php");
?>
</div>

<div id="corps"> 
<h2>Les moniteurs</h2>
<h4 id="baby">Chez les baby-gym :</h4>
<h5>COLLINS CHANTAL</h5>
<p class="moniteurs">
<img src="images/photos/moniteurs/chantal_c.jpg" alt="Chantal Collins" class="float" />
Née le 18 juin 1951.<br />
Gymnaste de 1958 à 2001.<br />
Monitrice depuis 1969.
</p>

<p class="body_center"><img src="images/gymnastique/assouplissement/gym0.png" alt="Assouplissement" /></p>

<h5>HAUGLUSTAINE SOPHIE</h5>
<p class="moniteurs">
<img src="images/photos/moniteurs/sophie_h.jpg" alt="Sophie Hauglustaine" class="float" />
Née le 31 mai 1990.<br />
Gymnaste depuis 1993.<br />
Monitrice depuis 2004.
</p>

<p class="body_center"><img src="images/gymnastique/assouplissement/gym0.png" alt="Assouplissement" /></p>

<h5>HONNETTE CHRISTIAN</h5>
<p class="moniteurs">
<img src="images/photos/moniteurs/christian_h.jpg" alt="Christian Honnette" class="float" />
Né le 6 mai 1967.<br />
Gymnaste de 1973 à 1990.<br />
Moniteur depuis 1992.<br />
Il est également le <a href="comite.php/#secretaire">secrétaire</a> du club.
</p>

<p class="body_center"><img src="images/gymnastique/assouplissement/gym0.png" alt="Assouplissement" /></p>

<h5>HONNETTE EVELYNE</h5>
<p class="moniteurs">
<img src="images/photos/moniteurs/evelyne_h.jpg" alt="Evelyne Honnette" class="float" />
Née le 24 avril 1975.<br />
Gymnaste de 1979 à 1991.<br />
Monitrice depuis 1992.
</p>

<p class="body_center"><img src="images/gymnastique/assouplissement/gym0.png" alt="Assouplissement" /></p>

<h5>RAMET ARLETTE</h5>
<p class="moniteurs">
<img src="images/photos/moniteurs/arlette_r.jpg" alt="Arlette Ramet" class="float" />
Née le 12 décembre 1948.<br />
Gymnaste de 1993 à 2002.<br />
Monitrice depuis 1995.
</p>

<p class="body_center"><img src="images/gymnastique/assouplissement/gym0.png" alt="Assouplissement" /></p>

<p class="body_center2"><a href="description_sections.php#baby">Plus d'informations sur cette section</a></p>

<h4 id="benja">Chez les benjamins :</h4>
<h5>GROSJEAN CLAUDINE</h5>
<p class="moniteurs">
<img src="images/photos/moniteurs/claudine_g.jpg" alt="Claudine Grosjean" class="float" />
Née le 22 octobre 1965.<br />
Gymnaste depuis 1976.<br />
Monitrice depuis 2004.
</p>

Et mon code CSS (je le mets tout même si plein de choses ne servent pas pour ce problème) :

body
{
background-image: url(images/fond/jaune.jpg);
}

#en_tête
{
position:absolute;
margin-top:20px;
}

#menu
{
float: left;
}

.titre_menu
{
font-family: georgia, verdana, serif;
text-align: center;
color: rgb(177,12,9);
border: medium ridge rgb(60,88,202);
padding: 2px;
margin-left: 20px;
margin-top: 60px;
width: 235px;
background-color: rgb(177,183,255);
}

h3
{
font-family: georgia, verdana, serif;
text-align: center;
color: rgb(177,12,9);
}

.menu
{
font-family: georgia, verdana, serif;
text-align: left;
color: rgb(212,10,7);
border: medium ridge rgb(60,88,202);
padding: 2px;
margin-left: 20px;
margin-top: 10px;
width: 235px;
background-color: rgb(177,183,255)
}

.liste_menu
{
list-style-type: none;
}

#logo
{
text-align: center;
color: rgb(177,12,9);
padding-left: 2px;
margin-left: 20px;
margin-top: 60px;
width: 235px
}

a
{
text-decoration: none;
color: rgb(22,67,136);
}

a:hover
{
text-decoration: underline;
}

a:active
{
background-color: rgb(33,164,62);
}

a:focus
{
background-color: rgb(33,164,62);
}

a:visited
{
color: rgb(22,67,255);
text-decoration: none;
}

a img
{
border: none;
}

#corps
{
font-family: georgia, verdana, serif;
text-align: left;
color: rgb(212,10,7);
border: medium ridge rgb(60,88,202);
padding: 2px;
margin-left: 295px;
margin-right: 20px;
margin-top: 60px;
}

h1, h2
{
font-family: georgia, verdana, serif;
color: rgb(177,12,9);
background-color: rgb(177,183,255);
text-align: center;
padding: 0px;
}

p
{
font-family: georgia, verdana, serif;
text-align: justify;
color: rgb(212,10,7);
padding: 2px;
margin-right: 20px;
}

.body_center
{
font-size: small;
text-align: center;
color: rgb(212,10,7);
margin-right: 20px;
margin-left: 23px;
padding: 2px;
}

#inscription_newsletter
{
text-align: center;
padding: 2px;
margin-right: 20px;
margin-top: 60px;
color: rgb(212,10,7);
}

.newsletter
{
text-align: center;
padding: 2px;
margin-right: 20px;
}

form, .center
{
text-align: center;
padding: 2px;
margin-left: 295px;
margin-right: 20px;
margin-top: 40px;
}

.pied_de_page
{
font-size: x-small;
text-align: center;
color: rgb(212,10,7);
margin: 20px;
margin-top: 125px;
clear: both;
}

h4
{
text-decoration: underline;
}

.float
{
float: left;
}

.moniteurs
{
font-size: large;
text-align: center;
color: rgb(212,10,7);
margin-right: 20px;
margin-left: 23px;
margin-top: 20px;
margin-bottom: 20px;
padding: 2px;
}

.body_center2
{
font-size: small;
text-align: center;
color: rgb(212,10,7);
margin-right: 20px;
margin-left: 23px;
margin-top: 20px;
padding: 2px;
clear: both;
}

.petit
{
font-size: small;
}

#compteur
{
font-weight: bold;
color: rgb(0,103,36);
}

.logo_news
{
float: left;
}

ul
{
list-style-type: disc;
}

Je vais retourner voir le tuto sur les fonction de php pour voir comment appliqué ce style à une image. Si quelqu'un a une autre idée, elle est également la bienvenue.

Merci

Schumiga.

Candygirl

12 octobre 2006 à 21:18:27

Citation : msg_dracula

Dans ton exemple, le clear ne peut etre appliqué seulement a l'élément <h5>, mais au bloc, c'est a dire <p>.

Non, je maintiens qu'on peut appliquer un clear directement au h5; d'ailleurs, un h5 est de type block d'après les annexes ici

schumiga

12 octobre 2006 à 21:25:26

De toute façon, même s'il peut être appliqué à h5, cela ne résoud pas le problème.

Candygirl

12 octobre 2006 à 21:53:36

En fait c'est un problème de flux. En positionnant ton corps avec la technique des marges, le contenu reste dans le flux normal et un clear agit donc aussi sur le menu. Il faut donc créer un nouveau contexte de formattage, un flux "parallèle". pour cela deux idées:

- mettre ton corps en float

- mettre un overflow:auto; ou autre qui permet de créer un contexte de formattage.

Un peu de lecture sur le sujet ici: http://www.blog-and-blues.org/articles/Float%2C_clear_et_contextes_de_formatage

schumiga

12 octobre 2006 à 22:16:02

Malheureusement le "overflow: auto;" ne fonctionne pas. La photo reste flottante et l'image ne se met pas en-dessous.
Voici mon nouveau code xhtml :

<h2>Les moniteurs</h2>
<h4 id="baby">Chez les baby-gym :</h4>
<h5>COLLINS CHANTAL</h5>
<p class="moniteurs">
<img src="images/photos/moniteurs/chantal_c.jpg" alt="Chantal Collins" class="float" />
Née le 18 juin 1951.<br />
Gymnaste de 1958 à 2001.<br />
Monitrice depuis 1969.
</p>

<p class="img_center"><img src="images/gymnastique/assouplissement/gym0.png" alt="Assouplissement" /></p>

<h5>HAUGLUSTAINE SOPHIE</h5>
<p class="moniteurs">
<img src="images/photos/moniteurs/sophie_h.jpg" alt="Sophie Hauglustaine" class="float" />
Née le 31 mai 1990.<br />
Gymnaste depuis 1993.<br />
Monitrice depuis 2004.
</p>

<p class="img_center"><img src="images/gymnastique/assouplissement/gym0.png" alt="Assouplissement" /></p>

Et le css :

h5
{
overflow: auto;
}

.img_center
{
font-size: small;
text-align: center;
color: rgb(212,10,7);
margin-right: 20px;
margin-left: 23px;
padding: 2px;
overflow: auto;
}

J'ai également essayé en n'utilisant pas la propriété CSS sur les h5 mais le résultat est le même.

Je ne pense pas que mettre le body en float résoudra le problème car quand je vais enlever le float left de la photo, j'irai tout de même en-dessous du menu.

Je n'ai pas réussi à créer une fonction php qui permette de faire cela mais je vais encore cherché. Si l'un d'entre vous à une idée, elle est bien sûr la bienvenue.

Merci.

Schumiga.

Candygirl

12 octobre 2006 à 22:27:52

Ce n'est est pas au h5 que tu dois appliquer le overflow mais à un conteneur qui englobe tes éléments en float et le clear.

Et autrement oui, mettre ton corps (et pas le body) en float résoudrait ton problème puisque le clear n'agirait alors plus sur le menu.

schumiga

12 octobre 2006 à 23:44:05

Merci. Ca marche avec le overflow. Problème résolu!

Schumiga.