Petite question toute conne CSS

18 réponses

Auteur	Message
krucial \| Administrateur Inscrit le : 09/03/2005	# Le 07/10/2010 à 10:19 Salut Le problème est présenté ici : http://www.forumconstruire.com/aeff.html A ne pas savoir comment remédier proprement au problème, j'utilise toujours les tables. Alors voila, vous faites comment vous ? Merci JC - Mes sites \| Affiliation devis travaux \| Cotes voitures anciennes
jdelire \| Lilian Membre Inscrit le : 14/05/2005	# Le 07/10/2010 à 10:22 overflow:auto; dans ton bloc principal ? Slwo.fr
JeromeF \| Jérôme Membre Inscrit le : 10/05/2005	# Le 07/10/2010 à 10:26 Je ne sais pas si c'est propre mais c'est ce que j'utilise. J'ai testé avec Firebug sur ton exemple et c'est ok avec Firefox. Tu ajoutes juste avant la fin de ta div principal <div class="separateur"></div> avec le css .separateur { display: block; position: relative; margin: 0; padding: 0; clear: both; }
krucial \| Jean Christophe Administrateur Inscrit le : 09/03/2005	# Le 07/10/2010 à 10:30 @jdelire : non, je veux que le cadre s'agrandisse pour englober le foncé @JeromeF : merci. Donc, il n'y a pas plus "propre" ? JC - Mes sites \| Affiliation devis travaux \| Cotes voitures anciennes
devtribu \| Olivier Modérateur Inscrit le : 16/06/2005	# Le 07/10/2010 à 10:33 ajoute <p style="clear:both;"></p> juste a la fermeture de ton div gris clair Février 2019, mon futur livre Tout JavaScript chez Dunod https://amzn.to/2PoLd0f
jdelire \| Lilian Membre Inscrit le : 14/05/2005	# Le 07/10/2010 à 10:36 Quelque chose comme ca ? Voir l'image Slwo.fr
MathieuC \| Mathieu Modérateur Inscrit le : 15/07/2005	# Le 07/10/2010 à 10:39 devtribu a dit : ajoute <p style="clear:both;"></p> juste a la fermeture de ton div gris clair exactement
tonguide \| Jeremy Modérateur Inscrit le : 09/05/2005	# Le 07/10/2010 à 10:42 j'aurai aussi dis <div style="clear:both;"></div> (ou utiliser une class comme JeromF), mais la solution de jdelire semble bien fonctionner aussi, va falloir tester ça ça marche sur tous les navigateurs ça ?
wiloo \| Wilfried Membre Inscrit le : 22/09/2008	# Le 07/10/2010 à 10:43 Hop, une méthode en plus ^^ // class à ajouter sur le conteneur : .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;font-size:0;} http://wilfried.me
cerise \| Gaël Modérateur Inscrit le : 31/10/2008	# Le 07/10/2010 à 11:03 c'est ça que tu veux kru ? http://www.lacerisebleue.com/test.php
krucial \| Jean Christophe Administrateur Inscrit le : 09/03/2005	# Le 07/10/2010 à 11:33 L'overflow auto, ca marche sous IE ? Parce que là, c'est super propre ! JC - Mes sites \| Affiliation devis travaux \| Cotes voitures anciennes
tonguide \| Jeremy Modérateur Inscrit le : 09/05/2005	# Le 07/10/2010 à 11:39 j'ai testé sur IE6/7/8 chrome et FF, ça fonctionne sur tous.
cerise \| Gaël Modérateur Inscrit le : 31/10/2008	# Le 07/10/2010 à 11:43 oui ça marche bien sur ie7 et 8 et ie6 (faut pas tenir compte des messages d'erreurs par contre pour ie6 ) http://www.lacerisebleue.com/images/ie8.png http://www.lacerisebleue.com/images/ie6.png
MathieuC \| Mathieu Modérateur Inscrit le : 15/07/2005	# Le 07/10/2010 à 11:51 je savais pas que overflow:auto resolvait ce probleme la, cool
cerise \| Gaël Modérateur Inscrit le : 31/10/2008	# Le 07/10/2010 à 11:54 je l'avais trouvé il y a pas si longtemps parce que c'est vrai que c'est un gros casse-tête les div, et comme kru avant j'utilisais les tables à cause de ça. Il y a plein d'autres solutions, mais c'est vraiment la plus simple et la plus propre je trouve.
devtribu \| Olivier Modérateur Inscrit le : 16/06/2005	# Le 07/10/2010 à 12:01 Marrant de voir toutes les solutions possibles Le conteneur avec un overflow est effectivement plus logique et plus lisible Février 2019, mon futur livre Tout JavaScript chez Dunod https://amzn.to/2PoLd0f
krucial \| Jean Christophe Administrateur Inscrit le : 09/03/2005	# Le 07/10/2010 à 12:03 Adopté ! JC - Mes sites \| Affiliation devis travaux \| Cotes voitures anciennes
JeromeF \| Jérôme Membre Inscrit le : 10/05/2005	# Le 07/10/2010 à 16:37 ah oui c'est plus simple. je vais changer ça à l'occasion.
tonguide \| Jeremy Modérateur Inscrit le : 09/05/2005	# Le 18/11/2010 à 16:12 Petite précision, apparemment il faut obligatoirement mettre une largeur (width) pour que ça fonctionne sur IE 6/7, sinon ça ne fait rien. (width:100%; par défaut donc)

Auteur

Message

krucial |
Administrateur

Inscrit le : 09/03/2005

# Le 07/10/2010 à 10:19

Salut

Le problème est présenté ici :
http://www.forumconstruire.com/aeff.html

A ne pas savoir comment remédier proprement au problème, j'utilise toujours les tables. Alors voila, vous faites comment vous ?

Merci

JC - Mes sites | Affiliation devis travaux | Cotes voitures anciennes

jdelire | Lilian
Membre

Inscrit le : 14/05/2005

# Le 07/10/2010 à 10:22

overflow:auto; dans ton bloc principal ?

Slwo.fr

JeromeF | Jérôme
Membre

Inscrit le : 10/05/2005

# Le 07/10/2010 à 10:26

Je ne sais pas si c'est propre mais c'est ce que j'utilise.
J'ai testé avec Firebug sur ton exemple et c'est ok avec Firefox.

Tu ajoutes juste avant la fin de ta div principal
<div class="separateur"></div>

avec le css

.separateur {
display: block;
position: relative;
margin: 0;
padding: 0;
clear: both;
}

krucial | Jean Christophe
Administrateur

Inscrit le : 09/03/2005

# Le 07/10/2010 à 10:30

@jdelire : non, je veux que le cadre s'agrandisse pour englober le foncé
@JeromeF : merci. Donc, il n'y a pas plus "propre" ?

JC - Mes sites | Affiliation devis travaux | Cotes voitures anciennes

devtribu | Olivier
Modérateur

Inscrit le : 16/06/2005

# Le 07/10/2010 à 10:33

ajoute
<p style="clear:both;"></p>
juste a la fermeture de ton div gris clair

Février 2019, mon futur livre Tout JavaScript chez Dunod https://amzn.to/2PoLd0f

jdelire | Lilian
Membre

Inscrit le : 14/05/2005

# Le 07/10/2010 à 10:36

Quelque chose comme ca ?

Voir l'image

Slwo.fr

MathieuC | Mathieu
Modérateur

Inscrit le : 15/07/2005

# Le 07/10/2010 à 10:39

devtribu a dit :
ajoute
<p style="clear:both;"></p>
juste a la fermeture de ton div gris clair

exactement

tonguide | Jeremy
Modérateur

Inscrit le : 09/05/2005

# Le 07/10/2010 à 10:42

j'aurai aussi dis <div style="clear:both;"></div> (ou utiliser une class comme JeromF), mais la solution de jdelire semble bien fonctionner aussi, va falloir tester ça ça marche sur tous les navigateurs ça ?

wiloo | Wilfried
Membre

Inscrit le : 22/09/2008

# Le 07/10/2010 à 10:43

Hop, une méthode en plus ^^

// class à ajouter sur le conteneur :
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;font-size:0;}

http://wilfried.me

cerise | Gaël
Modérateur

Inscrit le : 31/10/2008

# Le 07/10/2010 à 11:03

c'est ça que tu veux kru ? http://www.lacerisebleue.com/test.php

krucial | Jean Christophe
Administrateur

Inscrit le : 09/03/2005

# Le 07/10/2010 à 11:33

L'overflow auto, ca marche sous IE ? Parce que là, c'est super propre !

JC - Mes sites | Affiliation devis travaux | Cotes voitures anciennes

tonguide | Jeremy
Modérateur

Inscrit le : 09/05/2005

# Le 07/10/2010 à 11:39

j'ai testé sur IE6/7/8 chrome et FF, ça fonctionne sur tous.

cerise | Gaël
Modérateur

Inscrit le : 31/10/2008

# Le 07/10/2010 à 11:43

oui ça marche bien sur ie7 et 8 et ie6 (faut pas tenir compte des messages d'erreurs par contre pour ie6 )

http://www.lacerisebleue.com/images/ie8.png

http://www.lacerisebleue.com/images/ie6.png

MathieuC | Mathieu
Modérateur

Inscrit le : 15/07/2005

# Le 07/10/2010 à 11:51

je savais pas que overflow:auto resolvait ce probleme la, cool

cerise | Gaël
Modérateur

Inscrit le : 31/10/2008

# Le 07/10/2010 à 11:54

je l'avais trouvé il y a pas si longtemps parce que c'est vrai que c'est un gros casse-tête les div, et comme kru avant j'utilisais les tables à cause de ça. Il y a plein d'autres solutions, mais c'est vraiment la plus simple et la plus propre je trouve.

devtribu | Olivier
Modérateur

Inscrit le : 16/06/2005

# Le 07/10/2010 à 12:01

Marrant de voir toutes les solutions possibles

Le conteneur avec un overflow est effectivement plus logique et plus lisible

Février 2019, mon futur livre Tout JavaScript chez Dunod https://amzn.to/2PoLd0f

krucial | Jean Christophe
Administrateur

Inscrit le : 09/03/2005

# Le 07/10/2010 à 12:03

Adopté !

JC - Mes sites | Affiliation devis travaux | Cotes voitures anciennes

JeromeF | Jérôme
Membre

Inscrit le : 10/05/2005

# Le 07/10/2010 à 16:37

ah oui c'est plus simple.
je vais changer ça à l'occasion.

tonguide | Jeremy
Modérateur

Inscrit le : 09/05/2005

# Le 18/11/2010 à 16:12

Petite précision, apparemment il faut obligatoirement mettre une largeur (width) pour que ça fonctionne sur IE 6/7, sinon ça ne fait rien. (width:100%; par défaut donc)

Répondre

Vous ne pouvez pas participer au forum, car votre inscription n'a pas été validée. Pour vous faire valider en tant que Membre, cliquez ici.