Texte centré sur la page a coté d'une image

10 novembre 2017 à 21:45:37

Bonjour (bonsoir) à tous !

Je cherche à aligner un sous-titre (ici <h2></h2>) par rapport à la page en "ignorant" l'image flottante à sa gauche.

Le problème est que le sous-titre se centre par rapport à l'image et le bord de droite et pas le bord droit et gauche.

Merci d'avance pour vos réponses ! Voici le code html et css simplifié:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>Mon projet</title>
    <link rel="stylesheet" href="StyleSheet1.css" />
</head>
<body>
    <h1 class="grosTitre">Titre !!</h1>
    <img id="imageGauche" src="deboutBoss.png" alt="Bébé Boss">
    <h2 class="sousTitre">Tester maintenant</h2> 
</body>
</html>

#imageGauche{
    float: left;
    width: 430px;
}

.grosTitre{
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 5px;
    text-shadow: 1.5px 1.5px grey;
    font-family: "Century Gothic", "Monospace";
    font-size: 3em;
    padding-top: 10px;
}

.sousTitre{
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: "Century Gothic", "Monospace";
    font-size: 2.2em;
}

-
Edité par CharlesGO 10 novembre 2017 à 21:46:05

On passe une moitié de sa vie à attendre ceux qu'on aimera et l'autre moitié à quitter ceux qu'on aime.

Anonyme

10 novembre 2017 à 22:02:11

CharlesGO a écrit:

Bonjour (bonsoir) à tous !

Je cherche à aligner un sous-titre (ici <h2></h2>) par rapport à la page en "ignorant" l'image flottante à sa gauche.

Le problème est que le sous-titre se centre par rapport à l'image et le bord de droite et pas le bord droit et gauche.

Merci d'avance pour vos réponses ! Voici le code html et css simplifié:

Yop !

Personnellement, j'aurai "bricolé" en ajoutant :

position: absolute;

À ton image. Ça marche

Avant :

Après :

Après, faut voir qu'avec la position absolute, l'image sera au dessus de tous les autres éléments...

Bref, je pense qu'il existe des solutions bien meilleures, mais j'espère tout de même t'avoir aidé

Bien à toi,

Gabriel.

CharlesGO

13 novembre 2017 à 11:56:15

Gabriel SANTAMARIA a écrit:

CharlesGO a écrit:

Bonjour (bonsoir) à tous !

Je cherche à aligner un sous-titre (ici <h2></h2>) par rapport à la page en "ignorant" l'image flottante à sa gauche.

Le problème est que le sous-titre se centre par rapport à l'image et le bord de droite et pas le bord droit et gauche.

Merci d'avance pour vos réponses ! Voici le code html et css simplifié:

Yop !

Personnellement, j'aurai "bricolé" en ajoutant :
position: absolute;
À ton image. Ça marche

Avant :

Après :

Après, faut voir qu'avec la position absolute, l'image sera au dessus de tous les autres éléments...

Bref, je pense qu'il existe des solutions bien meilleures, mais j'espère tout de même t'avoir aidé

Bien à toi,

Gabriel.

Merci pour ta réponse ! Mais après cela tout passe par dessus (ou dessous) l'image ce qui ne convient pas vraiment.

Si quelqu'un à une meilleure solution !

On passe une moitié de sa vie à attendre ceux qu'on aimera et l'autre moitié à quitter ceux qu'on aime.