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 :

[Bootstrap] Span et offset problème de positionnement


Sujet :

Positionnement en CSS

  1. #1
    Membre actif
    Homme Profil pro
    Inscrit en
    Mars 2005
    Messages
    546
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France

    Informations forums :
    Inscription : Mars 2005
    Messages : 546
    Points : 219
    Points
    219
    Par défaut [Bootstrap] Span et offset problème de positionnement
    Bonjour,

    J'ai un site qui utilise le framework CSS bootstrap en version 2.
    Je voudrais affiche sur une même ligne :
    - à gauche un logo
    - à droite un menu
    J'utilise donc la propriété span et offset comme expliqué dans la doc : http://getbootstrap.com/2.3.2/scaffo...tml#gridSystem
    Voici mon code :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
            <div class="container">
                <div class="row-fluid">
                    <div class="span3"><a href="http://monsite.com/"><img src="monimage.jpg" /></a></div>
                    <div class="span8 offset4">mon menu
                    </div>
                </div>
            </div>
    Le problème c'est qu'il ne met pas l'image et le menu sur la même ligne, il fait 2 lignes.
    Comment faire pour que ce soit sur la même ligne ?
    Merci.
    Jérôme

  2. #2
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 868
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 868
    Points : 16 258
    Points
    16 258
    Par défaut
    D'après ce que j'ai compris, par défaut tu as une grille de 12 colonnes. Or ici, tu utilises un span3 et un span8 (ce qui fait 11) ainsi qu'un offset4 (ce qui fait 15). 15 étant supérieur à 12, il est normal que ton deuxième élément passe sur la ligne du dessous.
    Essaie donc de mettre offset1 à la place.

  3. #3
    Membre actif
    Homme Profil pro
    Inscrit en
    Mars 2005
    Messages
    546
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France

    Informations forums :
    Inscription : Mars 2005
    Messages : 546
    Points : 219
    Points
    219
    Par défaut
    Merci Bisûnûrs, c'était bien ça !
    En fait je croyais que l'offset définissait le nombre de colonnes "vides" avant mon span, mais en réalité non.
    Dans un même row il faut que : tous les span + tous les offset = 12
    Merci !
    Jérôme

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

Discussions similaires

  1. Problème de positionnement de span firefox et IE
    Par sebpsi dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 19/01/2007, 14h15
  2. [CSS] Problème de positionnement de DIV
    Par Oberown dans le forum Mise en page CSS
    Réponses: 11
    Dernier message: 31/01/2006, 18h03
  3. [CSS]Problème de positionnement avec div
    Par Tueur_a_gage dans le forum Mise en page CSS
    Réponses: 11
    Dernier message: 26/10/2005, 00h48
  4. [Jtree][JScrollPane] problème de positionnement
    Par billynirvana dans le forum Agents de placement/Fenêtres
    Réponses: 2
    Dernier message: 07/07/2005, 17h53
  5. Problème pour positionner une liste déroulante
    Par ouckileou dans le forum XSL/XSLT/XPATH
    Réponses: 3
    Dernier message: 30/09/2004, 02h05

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