Partage

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.
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.

J'apprends actuellement le C ! | EnragedGamers | Bien à vous, Gaby !
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.

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

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown