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 :

Sidebar et contenu à la même hauteur


Sujet :

Dimensionnement en CSS

  1. #1
    Membre régulier
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2014
    Messages
    87
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Octobre 2014
    Messages : 87
    Points : 84
    Points
    84
    Par défaut Sidebar et contenu à la même hauteur
    Bonjour,

    J'apprends le métier de web développeur, je connaissais wordpress, joomla, mais la je débute sans les CMS.
    (mon 1er sit que j'ai commancé hier: http://www.creerwebsite.com/)

    Et j'aurai besoin d'aide SVP:
    je souhaiterai que la sidebar (à droite) et le contenu (la page) soient automatiquement toujours de la même hauteur.

    Par exemple sur cette page : http://www.creerwebsite.com/html.html ça ne fait pas jolie le trou qu'il y a en bas de la page.
    Et sur cette page j'ai le problème inverse : http://www.creerwebsite.com/ le vide qu'il y a en bas de la sidebar ne fait pas joli.

    SVP, quel code faut mettre dans le CSS pour que la sidebar et le contenu soient automatiquement toujours de la même hauteur?

    merci beaucoup.

    cordialement

  2. #2
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    Bonjour,

    l'utilisation de table, table-cell parait approprié pour cela.

    Il faut créer un conteneur supplémentaire.
    http://codepen.io/anon/pen/sotIf
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

  3. #3
    Membre régulier
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2014
    Messages
    87
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Octobre 2014
    Messages : 87
    Points : 84
    Points
    84
    Par défaut
    ok, merci.

    du coup j'y suis arrivé uniquement en modifiant le code css, sans ajouter de conteneur supplémentaire.

    _j'ai juste enlevé dans mon conteneur le "float:left;" et j'ai ajouté à sa place le "display: table-cell;"
    _et dans ma sidebar j'ai enlevé le "float:left;" et le "height:auto;" et j'ai ajouté à leur place le "display: table-cell;".

    et visiblement ça marche bien.

    merci

  4. #4
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    Penser au bouton
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

  5. #5
    Membre régulier
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2014
    Messages
    87
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Octobre 2014
    Messages : 87
    Points : 84
    Points
    84
    Par défaut
    ok

  6. #6
    Membre régulier
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2014
    Messages
    87
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Octobre 2014
    Messages : 87
    Points : 84
    Points
    84
    Par défaut
    Juste comme ça: Comment tu as fait pour trouver mon code CSS?
    car dans le code source en faisant clic droit, je vois que le html
    merci

  7. #7
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    Tu es sur quel navigateur ?
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

  8. #8
    Membre régulier
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2014
    Messages
    87
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Octobre 2014
    Messages : 87
    Points : 84
    Points
    84
    Par défaut
    mozila,
    j'ai aussi essayé avec chrome et explorer, mon code css je ne le voit pas.

  9. #9
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    Appuie sur la touche F12.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  10. #10
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    Et comment utiliser Firebug
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

  11. #11
    Membre régulier
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2014
    Messages
    87
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Octobre 2014
    Messages : 87
    Points : 84
    Points
    84
    Par défaut
    ok merci

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

Discussions similaires

  1. 3 divs avec la même hauteur
    Par reg64 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 25/12/2006, 12h55
  2. Blocs de même hauteur
    Par arnaudrou dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 24/07/2006, 17h08
  3. menu et contenu de même taille
    Par furth dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 27/05/2006, 10h16
  4. [XHTML] xhtml - Une division de même hauteur que le reste
    Par TommyWeb dans le forum Balisage (X)HTML et validation W3C
    Réponses: 8
    Dernier message: 11/02/2006, 18h31

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