Guest bobdeo Posté 29 Septembre 2004 Partager Posté 29 Septembre 2004 Salut, J'ai ce code : <html> <body> <div style="background-color:#CCCCCC;width:80%;"> <div style="float:left;text-align:left;width:20%;border:1px solid red;">allo</div> <div style="float:right;text-align:right;width:20%;border:1px solid black;">OUIIIIII!!!</div> </div> </body> </html> La première Div contient donc les 2 autres... par contre, je suis obligé de spécifier le Height pour la voir sous Firefox... Ai-je fait une erreur qq part ? merci Lien vers le commentaire Partager sur d’autres sites More sharing options...
Gribouille26 Posté 29 Septembre 2004 Partager Posté 29 Septembre 2004 La première Div contient donc les 2 autres... par contre, je suis obligé de spécifier le Height pour la voir sous Firefox... <{POST_SNAPBACK}> Salut, Je comprend pas bien ce que tu veux dire par là? Peux-tu reprendre ta question, stp? "la voir" pourquoi, comment Lien vers le commentaire Partager sur d’autres sites More sharing options...
Guest bobdeo Posté 29 Septembre 2004 Partager Posté 29 Septembre 2004 ok La première Div contient les deux autres. Elle me sert à faire une barre colorée (le fond)... Si je prends le code tel qu'il est ci-dessus, cette barre ne s'affiche pas sous Firefox... pour quelle s'affiche, je suis obligé de lui spécifier un Height... Idéalement, j'aimerai que la première Div prennent automatiquement la hauteur des Div qu'elle contient ! Lien vers le commentaire Partager sur d’autres sites More sharing options...
ElMoustiko Posté 29 Septembre 2004 Partager Posté 29 Septembre 2004 (modifié) C'est le problème des flottant, il faut "regonfler" la divsion, parceque les flottant sortent du flux et ta div conteneuse est considérée comme vide, en rajoutant un element (p par exemple) sous tes 2 div et en lui donnant le style clear: both ; tu retabli la hauteur voulue, c'est une petite bidouille peu recommandée mais parfois indispensable <html><body><div style="background-color:#CCCCCC;width:80%;"><div style="float:left;text-align:left;width:20%;border:1px solid red;">allo</div><div style="float:right;text-align:right;width:20%;border:1px solid black;">OUIIIIII!!!</div><p style="clear: both"> </p></div></body></html> A part ça, préfère utiliser des styles dans un fichier css externe (*.css) ca decharge un peu (beaucoup) le poids de tes pages. Modifié 29 Septembre 2004 par ElMoustiko Lien vers le commentaire Partager sur d’autres sites More sharing options...
Gribouille26 Posté 29 Septembre 2004 Partager Posté 29 Septembre 2004 <hr style="clear:both;width:0;height:0;border:0;" /> Avec ça, tu n'aura pas d'épaisseur. Elle ne repoussera donc pas ce qui risque de se trouver derrière.... Lien vers le commentaire Partager sur d’autres sites More sharing options...
ElMoustiko Posté 29 Septembre 2004 Partager Posté 29 Septembre 2004 Avec un hr (ou br) ca ne fonctionne pas sous IE Lien vers le commentaire Partager sur d’autres sites More sharing options...
Guest bobdeo Posté 29 Septembre 2004 Partager Posté 29 Septembre 2004 Merci pour vos réponses. Que j'ajoute : <p style="clear: both"> </p> ou <hr style="clear:both;width:0;height:0;border:0;" /> après les Div contenues (et avant fermeture Div Conteneuse), j'ai une ligne vide qui apparait dasn la Div conteneuse sous IE... Avant, j'utilisais les TABLEs pour ma mise en page, et je suis en train de traduire en CSS pour alléger mes pages... Existe-il un moyen simple pour faire l'équivalent du code ci-dessous en CSS ? <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td>Allo</td> <td><div align="right">Oui</div></td> </tr></table> Lien vers le commentaire Partager sur d’autres sites More sharing options...
Guest narcisse Posté 29 Septembre 2004 Partager Posté 29 Septembre 2004 Je ne suis pas sur que la propriété border puisse prendre la valeur 0, d'aillerus ni que l'élément HR puisse pour l'instant être défini en CSS. A confirmer.... Lien vers le commentaire Partager sur d’autres sites More sharing options...
ElMoustiko Posté 29 Septembre 2004 Partager Posté 29 Septembre 2004 Tu peux faire ceci : Allo ? <span style="float: right">Oui</span> Ca devrait fonctionner. Tout dépend de ce que tu cherches à faire au final. Si tu pouvais nous dire pour quoi c'est faire exactement... parcequ'ensuite tout dépend de ce pour quoi c'est faire. Certaines choses sont plus adaptées que d'autres. Lien vers le commentaire Partager sur d’autres sites More sharing options...
ElMoustiko Posté 29 Septembre 2004 Partager Posté 29 Septembre 2004 Avec cet exemple, ca semble etre pour un dialogue... Il me semble que les listes de definitions sont utilisables aussi pour ce genre de choses. Place aux experts Lien vers le commentaire Partager sur d’autres sites More sharing options...
Guest bobdeo Posté 29 Septembre 2004 Partager Posté 29 Septembre 2004 Merci pour ton aide... En fait, c'est pour une barre qui apparait dans mon header et mon footer. Elle fait 100% de largeur et a du texte justifié à droite et à gauche sur une même ligne (the pb !) Lien vers le commentaire Partager sur d’autres sites More sharing options...
ElMoustiko Posté 29 Septembre 2004 Partager Posté 29 Septembre 2004 Bah mon exemple avec le p et le span semble indiqué alors. Il faut que tu te demandes ensuite si c'est sémantiquement correcte suivant l'utilisation que tu en fait. C'est à dire, les balises utilisées correspondent elles à l'usage que tu en fait. Un paragraphe sert par exemple à mettre du texte, un hN à faire un titre, ... Lien vers le commentaire Partager sur d’autres sites More sharing options...
Gribouille26 Posté 29 Septembre 2004 Partager Posté 29 Septembre 2004 J'utilise: <hr style="clear:both;width:0;height:0;border:0;" /> Sur ce site, et ça marche très bien sur IE et Mozilla!!! Je ne suis pas sur que la propriété border puisse prendre la valeur 0, d'aillerus ni que l'élément HR puisse pour l'instant être défini en CSS.A confirmer.... Je confirme que l'on peut mettre border:0 Je confirme également que l'on peut définir hr dans une css. Lien vers le commentaire Partager sur d’autres sites More sharing options...
ElMoustiko Posté 29 Septembre 2004 Partager Posté 29 Septembre 2004 Pour le hr et le clear: both ; ... hmm je sais pas comment je me suis debrouillé, ca ne marchait pas chez moi... enfin bref Je confirme on peut mettre en forme hr dans les css comme N'IMPORTE QUEL élément html. Par ailleur sous IE la bordure persiste même si on la met à 0 je crois. a verifier. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Guest bobdeo Posté 29 Septembre 2004 Partager Posté 29 Septembre 2004 Elmousitko, si je prends ton code Allo ? <span style="float: right">Oui</span> le "oui" apparait à la ligne en dessous de celle qui contient "allo"... Lien vers le commentaire Partager sur d’autres sites More sharing options...
ElMoustiko Posté 29 Septembre 2004 Partager Posté 29 Septembre 2004 Ahh bah ... wé bon bah je sais pas trop, faudrait trouver autre chose. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Gribouille26 Posté 29 Septembre 2004 Partager Posté 29 Septembre 2004 Et tu as essayé avec ça: <hr style="clear:both;width:0;height:0;border:0;" /> au-dessus de tes deux div, dans la grande....? Lien vers le commentaire Partager sur d’autres sites More sharing options...
ElMoustiko Posté 29 Septembre 2004 Partager Posté 29 Septembre 2004 Oui mais les div ne sont pas sémantiquement correctes... il faudrait mettre des <p> à la place <div><p>allo</p><p>oui</p><hr /></div> En mettant les styles appropriés. Lien vers le commentaire Partager sur d’autres sites More sharing options...
LaurentDenis Posté 29 Septembre 2004 Partager Posté 29 Septembre 2004 Et si vous faisiez simple ? p {background-color:#ccc;width:80%;text-align: right;}span {float:left;text-align:left;width:20%;}<p> <span>allo </span> OUIIIIII!!!</p> Lien vers le commentaire Partager sur d’autres sites More sharing options...
ElMoustiko Posté 29 Septembre 2004 Partager Posté 29 Septembre 2004 ahh bah voilà j'avais juste oublié de donner une largeur au p et au span Voilà qui regle la question ! Il me semblait bien que j'avais déjà vu ça quelque part. Lien vers le commentaire Partager sur d’autres sites More sharing options...
LaurentDenis Posté 30 Septembre 2004 Partager Posté 30 Septembre 2004 (modifié) Pour être tout à fait honnête, ce n'est pas si simple : tout va bien tant qu'on s'abstient de réclamer un padding et/ou des arrières-plans de couleurs différentes et/ou des bordures, et tant que les contenus du <p> et du <span> restent sagement chacun sur une seule ligne... Sinon, le problème devient nettement plus amusant. Essayons de styler les 3 cas de figures suivants, avec: - le span à gauche et le reste du paragraphe à droite (Eh non, pas le droit de mettre un span aussi pour le contenu de droite ) - une bordure autour du tout et une bordure verticale séparant les contenus gauche et droite. - deux couleurs différentes d'arière-plan - un padding pour chacun <p> <span>gauche</span> droite</p><p> <span>gauche Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat.</span> droite</p><p> <span>gauche</span> droite Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> Comme souvent, les navigateurs les plus respectueux de CSS2 s'en tirent facilement, mais il reste à gérer la dégradation dans IE. J'ai une solution (imparfaite), mais je ne voudrais pas vous orienter a priori. Que proposez-vous ? Modifié 30 Septembre 2004 par LaurentDenis Lien vers le commentaire Partager sur d’autres sites More sharing options...
Guest bobdeo Posté 30 Septembre 2004 Partager Posté 30 Septembre 2004 On s'approche en effet... Par contre en utilisant la <p> j'ai une ligne blanche au-dessus et en dessous de la "barre"... et j'ai besoin de coller ça au contenu... Lien vers le commentaire Partager sur d’autres sites More sharing options...
Guest bobdeo Posté 30 Septembre 2004 Partager Posté 30 Septembre 2004 J'AI ! <p style="background-color:#CCCCCC; padding:3px; margin-top:0px; margin-bottom:0px"><span style="float:right; text-align:right; padding-right:3px">droite</span>gauche</p> Lien vers le commentaire Partager sur d’autres sites More sharing options...
Guest bobdeo Posté 30 Septembre 2004 Partager Posté 30 Septembre 2004 enfin j'ai... c'est vite dit... Impossible de régler la hauteur de ligne (vides) au-dessus et en-dessous... Je crois que je vais garder mes tableaux... Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant