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.

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
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.

Avoir un string dans l'array, c'est pas forcément agréable !
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é.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown