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,
Forum Programmation.web c'est pas facile le web...
23
jan.
2008
# div = division
Posté par Ph Husson (site web personnel) . Évalué à 1.
Pour ce que tu veux faire, remplace le div par span
[^] # Re: div = division
Posté par NeoX . Évalué à 1.
[^] # float:right
Posté par fabien . Évalué à 2.
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 fabien . Évalué à 2.
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 NeoX . Évalué à 2.
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 Nerdiland de Fesseps . Évalué à 2.
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 fabien . Évalué à 2.
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 Nerdiland de Fesseps . Évalué à 4.
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 fabien . Évalué à 2.
en effet, l'utilisation du float est une erreur...
Merci pour tout.
et merci aux autre aussi, ce fut interessant.
Salutations,
# inverse
Posté par imalip . Évalué à 2.
# Deux floats ?
Posté par XHTML/CSS inside (site web personnel) . Évalué à 1.
[div style="border:1px solid blue; float:right;"]xxx[/div]
ça te va ainsi ?
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.