IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Mise en page CSS alignement


Sujet :

Positionnement en CSS

  1. #1
    Membre averti
    Femme Profil pro
    Propriétaire de gite
    Inscrit en
    Avril 2020
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Finistère (Bretagne)

    Informations professionnelles :
    Activité : Propriétaire de gite
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Avril 2020
    Messages : 8
    Par défaut Mise en page CSS alignement
    Bonjour,

    Ma demande d'aide concerne la page https://gite-tigoudoul.bzh/guide-accueil/enfants.

    - Je constate que les 3 boutons ne sont pas centrés verticalement dans la bande bleue. Pourtant je ne vois pas de padding ou de margin qui pourraient empêcher le centrage vertical.
    - Toutes les zones des boutons ne sont pas cliquables. Par exemple si on clique sur la zone située entre l'icône Fontawesome et le libellé du bouton, le lien ne fonctionne pas.

    Merci pour votre aide.
    Marie

  2. #2
    Membre chevronné Avatar de ASCIIDEFOND
    Homme Profil pro
    Autodidacte
    Inscrit en
    Novembre 2002
    Messages
    235
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Autodidacte

    Informations forums :
    Inscription : Novembre 2002
    Messages : 235
    Par défaut
    Salut gite-ti-goudoul,

    Pour le centrage vertical des boutons et les zones cliquables, tout fonctionne chez moi.

    Par contre les href des boutons 2 et 3 sont identiques et apparemment incorrects.

    Pour le bouton du milieu en modifiant le href "#archikurieux" par "#archi-kurieux" et pour le bouton de droite, href "#archikurieux" par "#kidiclick"

  3. #3
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 696
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 696
    Par défaut
    quand je réduit l'affichage à 1 000 pixels de large, je vois que les boutons sont collés en bas. c'est de cela dont vous parlez ?

    je vois que vous utilisez un modèle de boite "grid" avec plein de petites cases et le contenu commence à la ligne 2. avez-vous essayé de faire 3 cases avec un bouton par case ?
    peut-être même qu'un modèle "flex" sera plus pratique et comme vous aurez déjà l'effet responsif qui mettra les boutons en colonne sur les petits écrans.

  4. #4
    Membre averti
    Femme Profil pro
    Propriétaire de gite
    Inscrit en
    Avril 2020
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Finistère (Bretagne)

    Informations professionnelles :
    Activité : Propriétaire de gite
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Avril 2020
    Messages : 8
    Par défaut
    Merci pour vos réponses qui m'ont permis de résoudre mes problèmes.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Mise en page CSS: menu élastique?
    Par glourby dans le forum Mise en page CSS
    Réponses: 10
    Dernier message: 09/10/2008, 17h14
  2. aide pour mise en page CSS
    Par vachefolle91 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 04/03/2008, 10h24
  3. [AJAX] Perte de mise en page css avec UpdatePanel
    Par mappy dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 13/01/2008, 20h53
  4. Mise en Page CSS
    Par rems033 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 28/11/2007, 12h34
  5. Réponses: 3
    Dernier message: 30/10/2007, 23h59

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo