18041 sujets

Questions générales et questions de débutants

[RESOLU] Encadrer un titre avec deux images latérales

Bonjour.

Je crois avoir compris que les conteneurs <div> (non positionnés, en relatif,...) :
- s'adaptaient (sauf spécification d'une hauteur) en hauteur au contenu : ils s'étirent vers le bas au fur et à mesure que le texte s'y place.
- occupaient en largeur (sauf spécification d'une largeur) tout l'espace disponible (jusqu'aux frontières du conteneur qui les contient).

Comment obtenir qu'ils s'adaptent en largeur à leur contenu ? Autrement dit, comment faire qu'ils ne soient pas plus larges que leur contenu (à la manière d'un tableau html dont les mesures ne sont pas précisées) ?

J'ai constaté que les <div> en position absolue fonctionnaient apparemment comme cela (si on met en position absolue un <div> vide, il "disparaît" même), mais n'y a-t-il pas moyen de faire autrement (<div> non positionnés ou positionnés en relatif, ou flottants) ?

Merci pour toute explication. Et pardon si la réponse est quelque part sur le site : mes interrogations du moteur de recherche n'ont rien donné (peut-être m'y suis-je mal pris)...
Modifié par Piteur511 (24 Oct 2007 - 23:32)
Modérateur
Bonjour Piteur511,

J'avais cru avoir trouvé une solution, qui était de mettre le div en display:inline, mais après quelques tests, les résultats étaient peu concluants.

Il existe aussi le display:table-cell; qui fonctionne bien dans Firefox, mais pas dans Internet Explorer.

Est-ce que tu pourrais nous montrer exactement le résultat graphique que tu voudrais obtenir, avec un exemple du type de contenu de ton div ?

N'ayant jamais eu a faire ce type d'affichage, je ne peux pas t'aider pour l'instant. Je vais devoir faire quelques recherches. En attendant, tu peux toujours lire cet article sur le Display.
Modifié par Tony Monast (23 Oct 2007 - 02:46)
Modérateur
Piteur511, si je comprend bien, tu veux que le div s'adapte au contenu sans utiliser ni les positions absolues ni les flottants ?

C'est que les flottants (float:left par exemple) se comporte plutôt bien à ce niveau. Il s'adapte au contenu.
Modifié par Tony Monast (23 Oct 2007 - 02:58)
Merci, Tony, pour tes réponses.

Voici l'effet recherché :
http://img152.imageshack.us/img152/3899/titreui3.jpg

Pour obtenir les deux extrémités, je voulais utiliser deux <div> imbriqués, l'un ayant le motif gauche en arrière-plan gauche, l'autre le motif droit en arrière-plan droit. Si les <div> s'adaptaient au plus près de leur contenu, il aurait suffi de régler les padding-left et padding-right du texte en titre pour assurer un écartement suffisant.

Le titrage se retrouve sur de nombreuses pages, avec un texte chaque fois différent ; j'aurais voulu ne pas avoir à redonner une taille (en 'em' pour la proportionalité en cas d'agrandissement du texte) à chaque fois.

Remarque : le titre devrait se trouver au centre de son conteneur (margin-left: auto; margin-right: auto;) ; le float ne me paraît pas utilisable (du moins de manière simple).

J'avais bien pensé à display:table-cell, mais, comme toi, j'ai constaté une absence de reconnaissance de IE...

Merci pour toute suggestion. Smiley confused
Modérateur
Bonjour Piteur511,

Ah et bien voilà ! Rien de mieux qu'un exemple concret pour proposer la bonne solution.

L'idée est de découper ton image en deux parties : le demi-cercle à gauche et le demi-cercle à droite. Il faut ensuite les positionner à gauche et à droite.

Comme c'est un titre, nous allons utiliser une balise de titre, disons h1. Dans ce h1, nous allons mettre un span qui ne servira qu'à positionner la seconde image. Chaque balise ne peut contenir qu'un seul background, c'est pourquoi nous devons ainsi imbriquer le span dans le h1.


<!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" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
<meta http-equiv="Content-language" content="fr-FR" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Test</title>
<style type="text/css" media="screen">
h1 {
background-image:url(titre-gauche.jpg);
background-repeat:no-repeat;
background-position:left 50%;
padding:21px 0 21px 30px;
}

h1 span {
background-image:url(titre-droit.jpg);
background-repeat:no-repeat;
background-position:right 50%;
padding:21px 30px 21px 0;
}
</style>
</head>

<body>
<h1><span>Mon titre à longueur variable</span></h1>
</body>
</html>


Je crois que ca devrait aller avec ce code.

Bonne journée
Modifié par Tony Monast (23 Oct 2007 - 15:04)
Mais ouiiiiiiiiiiiiiii ! Quand on voit la solution, on se dit toujours, plein de honte, que c'est évident !

J'oublie toujours d'utiliser <span> pour les backgrounds.

Grand merci encore ! http://www.fredator.com/smileys/Cool1.gif

=========EDIT=============

Il reste cependant un petit problème : comment centrer l'ensemble ? Si j'ajoute un "text-align: center;", le texte se centre, l'élément décoratif droit suit, mais pas l'élément décoratif gauche, qui reste calé contre le bord gauche du conteneur.

Faut-il utiliser deux span imbriqués (ex. ci-dessous), et y a-t-il une autre solution ?

Par exemple :
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 24 May 2007), see  www.w3.org">
 
    <meta content="text/html; charset=ISO-8859-15" http-equiv="content-type">
    <title>
      Essai4
    </title>
    <style type="text/css" media="screen">
    h1 {
    text-align: center;
    }
    .gauche {
    padding: 21px 0 21px 30px;
    background-image: url(titre-gauche.gif);
    background-repeat: no-repeat;
    background-position: left 50%;
    }
    .droit {
    padding: 21px 30px 21px 0;
    background-image: url(titre-droit.gif);
    background-repeat: no-repeat;
    background-position: right 50%;
    }

    </style>
  </head>
  <body>
    <h1>
      <span class="gauche"><span class="droit">Voici un titre</span></span>
    </h1>
  </body>

Modifié par Piteur511 (23 Oct 2007 - 16:16)
Modérateur
Je crois que oui, une solution pour centrer le tout serait d'utiliser deux spans. Cependant, il faut spécifier un padding au h1 sinon dans Internet Explorer 6, les fonds sont tronqués.

Voici mon code final pour centrer le titre et les fonds. Afin d'alléger le code qui utilise déjà deux spans pas très jolis, j'ai éliminé les class qui sont inutiles en utilisant l'effet de cascade.


<!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" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
<meta http-equiv="Content-language" content="fr-FR" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Test</title>
<style type="text/css" media="screen">
 	h1 {
    	text-align: center;
	padding:21px 0 21px 30px;
    }

    h1 span {
    background-image:url(titre-gauche.jpg);
    background-repeat: no-repeat;
    background-position: left 50%;
    padding:21px 30px;
    }

    h1 span span {
    background-image:url(titre-droit.jpg);
    background-position: right 50%;
    }
</style>
</head>

<body>
 <h1>
      <span><span>Voici un titre</span></span>
 </h1>
</body>
</html>


À tester dans plusieurs navigateurs. Je n'avais que Firefox et Internet Explorer 6 sous la main.
Modifié par Tony Monast (23 Oct 2007 - 16:39)
Hum : il va falloir chercher encore Smiley rolleyes : l'ajout du padding fait qu'un espace important s'ajoute dans FFX au dessus du titre, et cet espace n'est pas de même taille dans IE6 : la présentation n'est pas suffisamment homogène d'un navigateur à l'autre.

Le padding imposé à h1 doit être ramené à 0 : quelle solution dès lors pour que l'affichage des fonds ne soit pas tronqué dans IE ?

=========EDIT=================

Il semblerait qu'il faille des margin (pour plus de clarté, j'ai commencé par mettre tous les margin et tous les padding à 0). Avec le code suivant, j'obtiens quelque chose d'assez homogène entre IE6 et FFX.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr-fr">
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 24 May 2007), see  www.w3.org">
 
    <meta content="text/html; charset=ISO-8859-15" http-equiv="content-type">
    <title>
      Essai4
    </title>
    <style type="text/css" media="screen">
    body {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 76%;
    }
    * {
    margin: 0px;
    padding: 0px;
    }
    h1 {
    text-align: center;
    margin-top: 21px;
    margin-bottom: 21px;
    font-size: 2.5em;
    }
    h1 span {
    padding: 21px 30px 21px 0px;
    background-image: url(titre-gauche.gif);
    background-repeat: no-repeat;
    background-position: left 50%;
    }
    h1 span span {
    padding: 21px 30px;
    background-image: url(titre-droit.gif);
    background-repeat: no-repeat;
    background-position: right 50%;
    }
    p {
    background-color: #ffffcc;
    font-size: 1em;
    }

    </style>
  </head>
  <body>
    <h1>
      <span><span>Voici un titre</span></span>
    </h1>
    <p>
      voici o&ugrave; se situe le paragraphe suivant
    </p>
  </body>
</html>

Maintenant, je voudrais que tu me dises pourquoi tu sembles rechigner à écrire deux span en cascades : qu'est-ce qui te gêne là-dedans ? OK, c'est de la bidouille, mais en quoi cela est-il gênant : ce n'est que de la mise en forme, sans tableau, avec uniquement des CSS... J'avoue que j'ai du mal à comprendre Smiley ohwell Crains-tu des pb d'interprétation avec d'autres navigateurs ?

Merci pour ton aide, en tout cas ! Smiley biggrin
______________________________________
PS : j'ai modifié l'objet du message par : "encadrer un titre avec deux images latérales" ; ça m'a paru plus clair ; j'espère que ça ne fait problème.
Modifié par Piteur511 (23 Oct 2007 - 18:54)
Modérateur
Piteur511 a écrit :

Maintenant, je voudrais que tu me dises pourquoi tu sembles rechigner à écrire deux span en cascades : qu'est-ce qui te gêne là-dedans ?


Cela ne me gêne pas étant donné que c'est la seule solution que je vois pour obtenir ce type d'affichage. Je trouve seulement dommage qu'à l'heure actuelle, nous ne pouvons pas mettre plus d'un background par balise, ce qui nous force à ajouter des balises sans signification particulière. Je n'ai rien contre. J'utilise cette technique régulièrement pour les squelettes de mes sites.

Il fallait prendre mon commentaire de cette façon : Déjà qu'il est nécessaire d'ajouter deux spans dans le h1 pour arriver à nos fins, nous n'allons pas en plus mettre des class à chaque span. Smiley cligne

Pour ce qui est du code pour que l'affichage soit identique dans Firefox et IE, je vais y jeter un oeil plus attentivement. Lorsque je t'ai donné mon code, je venais d'arriver au bureau et j'ai pondu ça rapidement avant de commencer à travailler.
Modérateur
Je viens de vérifier. J'arrive à un résultat identique dans Firefox, IE6 et IE7. Je crois que l'espace que tu avais était soit :

- La marge par défaut du navigateur pour la balise body
- La marge par défaut du navigateur pour la balise h1

Il suffit de les définir dans la feuille de style.

Voici mon code final. À noter que je travaille en XHTML 1.0 strict, alors c'est possible qu'on arrive pas au même résultat.


<!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" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
<meta http-equiv="Content-language" content="fr-FR" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Test</title>
<style type="text/css" media="screen">
html,body {
margin:0;
padding:0;
}

h1 {
text-align: center;
margin:0;
padding:30px 0;
}

h1 span {
background-image:url(images/test/titre-gauche.jpg);
background-repeat: no-repeat;
background-position: left 50%;
padding:30px;

}

h1 span span {
background-image:url(images/test/titre-droit.jpg);
background-position: right 50%;
}
</style>
</head>

<body>
 <h1>
      <span><span>Voici un titre</span></span>
 </h1>
 <p>Lorem ipsum</p>
</body>
</html>

Modifié par Tony Monast (23 Oct 2007 - 23:02)
Modérateur
Ce n'est rien, ce fut un plaisir.

Si ton problème est résolu, merci de bien vouloir l'indiquer comme tel. Il suffit d'ajouter le mot [Résolu] au début du titre du sujet. Smiley smile

Merci et à une prochaine fois !
Sujet clos
Aller à