Retourner aux forums || Retourner au forum Programmation.web
Programmation.web : c'est pas facile le web...
Posté par fabien () le 23 janvier 2008je 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,
> Lire le message (11 commentaires, moyenne: 1,9).
div = division
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 NeoX () le 23/01/2008 à 20:36. (lien). Évalué à 1.< div style="border:1px solid red;">1 2 3< span style="solid blue" >xxx< /span >< /div >
--
Apprendre par les autres, c'est bien.
Apprendre par soi-meme (RTFM, man, et notre ami google) c'est mieux-
[^]float:right
Posté par fabien () le 23/01/2008 à 23:36. (lien). É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 fabien () le 23/01/2008 à 23:43. (lien). É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 NeoX () le 24/01/2008 à 10:30. (lien). É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--
Apprendre par les autres, c'est bien.
Apprendre par soi-meme (RTFM, man, et notre ami google) c'est mieux
-
-
-
Où veux-tu aller ?
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.
Persiste.
-
[^]Re: Où veux-tu aller ?
Posté par fabien () le 23/01/2008 à 23:33. (lien). É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 MilkaJinka () le 24/01/2008 à 03:09. (lien). É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).--
Persiste.-
[^]Re: Où veux-tu aller ?
-
-
inverse
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.
"While a monkey can be a manager, it takes a human to be an engineer" Erik Zapletal
Deux floats ?
[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 ?
In tartiflette we trust !
Revenir en haut de page || Retourner aux forums || Retourner au forum Programmation.web
Cette page a été générée par Templeet en 0.0689s (dont 0.0078 de SQL).
Cette page est peut-être conforme xhtml 1.0.
Information sur le site.
Faire un don !
Cette discussion est archivée, il n'est plus possible de laisser des commentaires.
Note : les commentaires appartiennent à ceux qui les ont postés. Nous n'en sommes pas responsables.