Div contenant d'autres div

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

Gribouille26 · 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 :huh:

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 !

ElMoustiko · 29 Septembre 2004

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

Gribouille26 · 29 Septembre 2004

Avec ça, tu n'aura pas d'épaisseur. Elle ne repoussera donc pas ce qui risque de se trouver derrière....

ElMoustiko · 29 Septembre 2004

Avec un hr (ou br) ca ne fonctionne pas sous IE

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>

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....

ElMoustiko · 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.

ElMoustiko · 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

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 !)

ElMoustiko · 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, ...

Gribouille26 · 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.

ElMoustiko · 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.

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"...

ElMoustiko · 29 Septembre 2004

Ahh bah ... wé

bon bah je sais pas trop, faudrait trouver autre chose.

Gribouille26 · 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....?

ElMoustiko · 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.

LaurentDenis · 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>

ElMoustiko · 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.

LaurentDenis · 30 Septembre 2004

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

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... :blush:

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>

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...

Connexion

Div contenant d'autres div

Sujets conseillés

Guest bobdeo

Gribouille26

Guest bobdeo

ElMoustiko

Gribouille26

ElMoustiko

Guest bobdeo

Guest narcisse

ElMoustiko

ElMoustiko

Guest bobdeo

ElMoustiko

Gribouille26

ElMoustiko

Guest bobdeo

ElMoustiko

Gribouille26

ElMoustiko

LaurentDenis

ElMoustiko

LaurentDenis

Guest bobdeo

Guest bobdeo

Guest bobdeo

Veuillez vous connecter pour commenter

Parcourir

Activité