28172 sujets

CSS et mise en forme, CSS3

[Résolu] Titre centré et sous titre qui est alligné avec le titre

Bonjour à tous.

J'essaye de réaliser quelques alignements qui me posent problème.

Voici visuellement le résultat que j'aimerai obtenir :
                      Titre centré
                      sous-titre aligné sur la gauche du titre



Ca a l'air tout con mais je sèche.

Comment faire ça en css ?
Modifié par Aquaphobe (20 Oct 2011 - 18:02)
Coucou,

Un exemple:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titres au centre</title>
<style type="text/css">

h1{
margin:0;/*  remettre les marges à 0, c'est mieux */
text-align:center;/* on centre le titre principal */

}

h2{
  margin:0 auto; /* centrage équivalent à une margin-left et une marign-right en auto */
  width:?px; /* a spécifier obligatoirement pour le centrage */
  text-align: left; /* alignement à gauche du sous-titre */

}
</style>

</head>

<body>

<h1>Titre centré</h1>
<h2>sous-titre aligné sur la gauche du titre</h2>
</body>
</html>



Smiley cligne
Modifié par jmlapam (15 Oct 2011 - 19:00)
@Jmlapam > ton exemple compliquera plus la vie qu'autre chose, et la solution ne sera pas réellement flexible.

Je crois qu'y aller ainsi sera beaucoup plus aisé:


<!DOCTYPE HTML>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .bloc-title{
            /* tu style ton bloc de titre */
            margin-left: 100px;
        }
        .bloc-title h1,
        .bloc-title h2{
            text-align: left;
        }
    </style>
</head>
<body>
    <div class="bloc-title">
        <h1>Titre principal</h1>
        <h2>Sous-titre</h2>
    </div>
</body>
</html>


Suffit de positionner .bloctitle et les titres à l'intérieur commenceront toujours à gauche de leur parent.
Ah, en effet, ce sera donc légèrement plus compliqué. Mais je proposerais comme suit:


<!DOCTYPE HTML>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .bloc-title{
            text-align: center;
        }
        .bloc-title > span{
            display: inline-block;
            position: relative;
            padding-bottom: 1em; /* pour s'assurer que le sous-titre ne chevauche aucun élément */
        }
        .bloc-title .sous-titre{
            position: absolute;
            top: 1em; /* on garde une hauteur de ligne en haut pour le titre complet.
                        et cette hauteur sera toujours proportionnelle à la taille du titre principal. */
            left: 0; /* on cale le bloc à gauche de son conteneur qui est le premier span servant de référence. */
        }
    </style>
</head>
<body>
    
    <h1 class="bloc-title">
        <span>
            Titre
            <span class="sous-titre">
                Sous-titre
            </span>
        </span>
    </h1>
    
</body>
</html>


La limite de cette technique sera si le titre principal tombe sur deux lignes. Alors, il sera préférable de donner la valeur de bottom: 0; en place et lieu de l'actuel top: 1em;
Je préfère jouer sur les marges qu'avec les positions, surtout pour un débutant qui aura tendance à mettre des positions partout contrairement à toi qui sait ce que tu fais.

Bah comme cela il aura 2 méthodes pour le prix d'une. Smiley cligne
Modifié par jmlapam (16 Oct 2011 - 00:57)
1ère solution : Il faut connaitre la largeur du h1 pour pouvoir positionner correctement le h2, or, je ne la connais pas, et pire, elle va varier.

2ème solution : pas de centrage du titre

3ème solution : IE8 n'aime pas, et c'est donc inapplicable. Dommage, je la trouve sympa.

La question reste ouverte et je me demande sérieusement si c'est possible.

EDIT :
Il faut mettre des espaces insécables et des traits d'union insécables &#8209; (s'il y en a dans le texte) pour que cela fonctionne sur IE8. Sinon il donne comme largeur au sous titre la largeur du plus grand mot.
Modifié par Aquaphobe (16 Oct 2011 - 08:46)
Suffit de mettre une class au H1 et H2 en question mais que veux-tu faire, que cela s'applique à tous les H1 et H2 ?
Dans ta solution, ce qui me dérangeait grandement c'était ça :

a écrit :
width:?px; /* a spécifier obligatoirement pour le centrage */


le ? dépendra de la largeur du h1 pour avoir l'effet désiré et n'est dont pas applicable pour un titre quelconque.
Modifié par Aquaphobe (16 Oct 2011 - 17:39)
bonsoir,

visuellement je ne vois pas l'effet d'un text-align:center; mais peut-etre du margin-left ou padding-left ou eventuellement un text-indent, identiques sur h1 et h2.

Je verrais au choix pour h1 , h2 (appliqué via une classe ou le parent ):

padding-left:200px;
ou
margin-left:200px;
ou
text-indent:200px;

Cordialement,
GC
Bonjour,

Je me demande s'il ne faudra pas faire appel à JS pour résoudre cela ... car il faut impérativement connaître la position left de l'élément 'titre' et positionner l'élément 'sous-titre' en fonction.
Cordialement
Modifié par lddsoft (16 Oct 2011 - 18:13)
La troisième solution marche très bien sous ie8 (et ie9). Il suffit de donner une largeur au sous-titre si ce dernier est plus long que le titre principal. Mais la largeur sera à figurer selon ta mise en page. Tu n'auras qu'à donner une largeur suffisante et tu n'auras pas de problème.

Pour ie7, il suffira de donner un petit fallback pour inline-block. Pour ie6 aussi, mais il faudra penser à ne pas utiliser le sélecteur d'enfant direct (>)... à remplacer par une classe par exemple.


<!DOCTYPE HTML>

<!--[if lt IE 7]> <html lang="en-us" class="no-js ie6"> <![endif]-->
<!--[if lte IE 7]>    <html lang="en-us" class="no-js ie7less"> <![endif]-->
<!--[if lte IE 8]>    <html lang="en-us" class="no-js ie8less"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        .bloc-title{
            text-align: center;
        }

        .bloc-title > span{
            display: inline-block;
            position: relative;
            padding-bottom: 1em; /* pour s'assurer que le sous-titre ne chevauche aucun élément */
        }
        .ie7less .bloc-title > span{
            display: inline;
            zoom: 1;
        }

        .bloc-title .sous-titre{
            width: 500px;
            text-align: left;
            position: absolute;
            top: 1em; /* on garde une hauteur de ligne en haut pour le titre complet.
                        et cette hauteur sera toujours proportionnelle à la taille du titre principal. */
            left: 0; /* on cale le bloc à gauche de son conteneur qui est le premier span servant de référence. */
        }

    </style>

</head>

<body>

    

    <h1 class="bloc-title">

        <span>

            Titre

            <span class="sous-titre">

                Sous-titre

            </span>

        </span>

    </h1>

    

</body>

</html>

Modifié par Vaxilart (16 Oct 2011 - 19:41)
Aquaphobe a écrit :


le ? dépendra de la largeur du h1 pour avoir l'effet désiré et n'est dont pas applicable pour un titre quelconque.

oK donc tu veux appliquer sur tous les titres et par sur un cas en particulier ce qui change la question.

La solution de Vaxilart est plus appropriée dès lors.
Sujet clos
Aller à