Forum Programmation.web c'est pas facile le web...

Posté par .
Tags : aucun
0
23
jan.
2008
Bonjour,

je cherche depuis un p'tit moment déjà, et je viens donc vous poser une question sur du css (qui à l'aire toute simple).

J'ai un div avec une ligne de texte dedans ainsi qu'un autre div(bleu) que j'aimerai mettre sur la même ligne que le texte.

[div style="border:1px solid red;"]1 2 3
[div style="border:1px solid blue; float:right;"]xxx[/div]
[/div]

Je voudrait donc que le xxx soit sur la même ligne que "1 2 3" mais il s'obstine à le passer en dessous, j'ai essayé une fumeuse combinaison de display:block, mélangé a differentes valeurs de "position", mais je m'y pert un peu.

il y a sans doute une explication et une solution (toute simple) mais je peine à la trouver, merci de votre generosité.

Salutations,
  • # div = division

    Posté par (page perso) . Évalué à 1.

    le div de [div] ca veut dire division, et division ca veut dire couper.
    Pour ce que tu veux faire, remplace le div par span
    • [^] # Re: div = division

      Posté par . Évalué à 1.

      < div style="border:1px solid red;">1 2 3< span style="solid blue" >xxx< /span >< /div >
      • [^] # float:right

        Posté par . Évalué à 2.

        ha oui mais non ;)
        vous m'avez supprimé mon float, c'est pas un span, c'est un bloc...
        l'objectif est qu'il soit collé a droite de mon bloc rouge.
        • [^] # Re: float:right

          Posté par . Évalué à 2.

          bon en fait j'ai pas été très explicite,

          par rapport au code que je donne, mon div bleu (celui qui est à l'interieur)... la position qu'il occupe horizontalement me va tres bien, c'est uniquement sa position verticale que je n'aime pas (je veux qu'il soit sur la même ligne).
          mais si vous me le mettez sur la même ligne en me bougeant sa position horizontale (qui dois être a fond a droite dans le div rouge) alors ça ne sert a rien...

          désolé, j'avais oublié de le préciser.

          Merci.
          • [^] # Re: float:right

            Posté par . Évalué à 2.

            à ce moment là il faut le coder proprement
            le float right c'est pour le mettre à droite de la div precedente
            il faut donc fermer la div precedente avant d'ouvrir celle là

            < div style="border:1px solid red;" > 1 2 3 < /div >
            < div style="border:1px solid blue; float:right;" > xxx < /div >

            ensuite si tu veux avoir les 2 div dans une seule ce n'est pas float mais align

            voir eventuellement le site
            http://www.alsacreations.com/

            qui explique tout ca comme il faut
  • # Où veux-tu aller ?

    Posté par . Évalué à 2.

    Reprenons : qu'est-ce que tu veux vraiment faire en affichant 2 div cote à cote ?

    On peut le faire en mettant le second div en display:inline, mais il est probable que juxtaposer les div ne soit pas la bonne solution au problème de départ.
    • [^] # Re: Où veux-tu aller ?

      Posté par . Évalué à 2.

      non je ne veux pas les juxtaposer, j'ai un div externe, et un autre à l'interieur, celui de l'interieur étant a droite (grace au float).

      exemple d'un truc qu'on peu imaginer avec cette construction
      +--------------------+
      |1 2 3              X|
      +--------------------+

      ici le X étant par exemple une image représentant une croix (pour reprendre une representation de type fenetre.
      l'image de la croix étant dans un div (le bleu de mon exemple)
      et le div rouge caracterisant une "barre de titre" dont la taille est variable (dans le sens ou elle n'est pas fixé)

      C'est un exemple hein..
      • [^] # Re: Où veux-tu aller ?

        Posté par . Évalué à 4.

        Dans le cas d'une image, pas besoin de la mettre dans un div supplémentaire (attention à la divite aigue), on peut se contenter d'une balise [img]. Pour le texte, une balise [p] classique.

        Pour reprendre ton exemple ça donnerait ça :
        [div style="position: relative;"]
        [p style="display:inline;"]123[/p]
        [img src="X.png" alt="X" style="display: inline; position: absolute; right: 0;" /]
        [/div]

        Le position:relative est là pour fournir une référence au position:absolute qu'on va trouver plus loin. Le display: inline permet d'afficher les éléments sur une seule ligne, et le right: 0 cale l'image à la bordure droite du conteneur.

        Le float ne fonctionne pas ici parce qu'il refuse de s'afficher sur la meme ligne (sous Gecko).
        • [^] # Re: Où veux-tu aller ?

          Posté par . Évalué à 2.

          Merci, c'est parfait.
          en effet, l'utilisation du float est une erreur...
          Merci pour tout.

          et merci aux autre aussi, ce fut interessant.
          Salutations,
  • # inverse

    Posté par . Évalué à 2.

    Mets ton div imbrique avant le 1 2 3 (qui devrait etre dans un span ou p au passage). Le float ne permet pas de faire remonter un element, seulement aux suivants de se mettre au meme niveau si possible.
  • # Deux floats ?

    Posté par (page perso) . Évalué à 1.

    [div style="border:1px solid red; float:right;"]1 2 3[/div]
    [div style="border:1px solid blue; float:right;"]xxx[/div]

    ça te va ainsi ?

Suivre le flux des commentaires

Note : les commentaires appartiennent à ceux qui les ont postés. Nous n'en sommes pas responsables.