28220 sujets

CSS et mise en forme, CSS3

Ascenceurs qui apparaissent

Bonjour,
je me suis trouvé face au fameux problème des float qui débordent. J'ai bien lu http://forum.alsacreations.com/faq/#item6 et j'ai appliqué. Mon problème fut réglé, mais je constate mes lacunes quand je vois ceci :
img {float: left;}

p {
	overflow: auto; /* Si un float déborde */
	width: 100%;
}

/* Structure : */
<div>
<p>paragraphe 1</p>
<p>paragraphe 2</p>
</div>

<div>
<p>paragraphe 3</p>
<p>paragraphe 4</p>
</div>

Quelques paragraphes se voient dotés de 2 ascenceurs vertical/horizontal, ou seulement un horizontal, qu'ils contiennent ou non une image, alors qu'ils sont absolument semblables à tous les autres paragraphes, qui n'ont rien à signaler. Ces ascenceurs disparaissent puis réapparaissent en redimensionnant la fenêtre, parfois quelques pixels font la différence. Je n'ai pas ce problème sous IE, que sous Firefox. (Par contre, sous IE c'est toute la page qui se voit en permancence dotée d'ascenceurs horizontaux, mais c autre chose)
Est-ce que j'ai fait une stupide faute de conception de débutant ?

Vous pouvez voir le phénomène avec FireFox ici (le 2e paragraphe des 2 dernières news) ou là : upload/1070-artefact.jpg

D'avance merci de m'éclairer.
Modifié par PsychoMessiah (25 Aug 2005 - 22:05)
salut


retréci ton image de background à 750/760px.839 c'est trop large.d'où les ascenseurs.

de plus, tu as trois ou quatre erreurs javascript sur la page.

sinon, c'est du bon boulôt, j'aime.musicien?
keran a écrit :
salut


retréci ton image de background à 750/760px.839 c'est trop large.d'où les ascenseurs.

de plus, tu as trois ou quatre erreurs javascript sur la page.

sinon, c'est du bon boulôt, j'aime.musicien?

Merci énormément, ça me fait très plaisir Smiley smile Smiley confused non, pas musicien juste "adorateur" de System Of A Down. Toi par contre tu as l'air de l'être (guitweb)

J'imagine que tu as visualisé avec IE, J'ai rétréci l'image à 425 de large, mais chez moi les ascenceurs de la page avec IE subsistent. Enfin le problème le plus important reste ces ascenceurs que j'ai entouré sur mes paragraphes Smiley sweatdrop si qqn a une idée... ils apparaissent et disparaissent comme par magie quand je survole un lien dans ces paragraphes...

Pour les erreurs JavaScript, stp vérifie car chez moi tout est OK..

Merci Smiley cligne
Modifié par PsychoMessiah (26 Aug 2005 - 00:04)
en fait les erreurs n'apparaisent qu'avec firefox??elles sont situées dans le fichier date.js
pb de variables, ligne1/4/5

en décalant le background des pixels nécéssaires vers la gauche tu réglera le pb des ascenseurs.

pour le reste, ce n'est pas du code pour moi.désolé.pourquoi ne pas coder de façon valide?
en fait, cé très simple: c'est le width:100% le problème.
met width:auto et tout ira bien Smiley cligne

(m'enfin, sous toutes réserve!)
keran a écrit :
retréci ton image de background à 750/760px.839 c'est trop large.d'où les ascenseurs.

Les images de fond n'influent pas sur les dimensions d'un élément. Si l'image est trop grande on ne la verra que partiellement, et si elle est trop petite elle sera répétée selon la valeur de background-repeat.
djfeat a écrit :

Les images de fond n'influent pas sur les dimensions d'un élément. Si l'image est trop grande on ne la verra que partiellement, et si elle est trop petite elle sera répétée selon la valeur de background-repeat.



img trop grande et alignée à droite= ascenseur horizontal

avec ie je me suis retrouver confronté à ce pb plus d'une fois.mais dans l'absolu tu à raison.
keran a écrit :
en fait les erreurs n'apparaisent qu'avec firefox??
Je crois qu'il y a confusion : Avec Firefox : ascenceurs sur certains paragraphes. Avec IE : ascenceurs sur la page.
keran a écrit :
elles sont situées dans le fichier date.js
pb de variables, ligne1/4/5
Corrigé.
keran a écrit :
en décalant le background des pixels nécéssaires vers la gauche tu réglera le pb des ascenseurs.
Tu parles des quels ? Le bg fait 425px et même en le positionnant à gauche les ascenceurs subsistent sous IE.
keran a écrit :
pour le reste, ce n'est pas du code pour moi.désolé.pourquoi ne pas coder de façon valide?
Que veux-tu dire par là ?
Asakurayoh a écrit :
en fait, cé très simple: c'est le width:100% le problème. met width:auto et tout ira bien
Essayé : ce n'est pas cela. Les ascenceurs restent et l'overflow ne fonctionne plus sous IE.

J'ai fait des essais (sous Firefox) :
overflow: visible => pas d'ascenceurs, mais le but recherché ne fonctionne pas (agrandir le conteneur lorsqu'un float déborde)
overflow: hidden => pas d'ascenceurs, ok pour les float, mais quelques jambages de p, q, g, j, ... sont rognés (ca reste le meilleur compromis, mais je cherche à comprendre pourquoi l'auto ne fonctionne pas, et non à faire du bricolage)
overflow: auto (valeur problématique) => ok pour les float, mais certains paragraphes se voient doté d'ascenceurs alors que d'autres non, et qu'ils ne sont pas dimensionnés en hauteur...

J'espère que j'ai bien résumé le souci.
PsychoMessiah a écrit :

Que veux-tu dire par là ?


Il voulaient probablement parler du fait que tu n'a pas déclaré de doctype, que tu utilises encore des frames ou autre...
Pour ce qui est de la validité , probablement de ceci
Smiley murf
a écrit :
Je crois qu'il y a confusion : Avec Firefox : ascenceurs sur certains paragraphes. Avec IE : ascenceurs sur la page


je parlais des js pas des ascenseurs

a écrit :
Tu parles des quels ? Le bg fait 425px et même en le positionnant à gauche les ascenceurs subsistent sous IE.


si ce n'est pas le background, c'est forcément un conteneur.les ascenceurs horizontaux apparaissent quand un élément est plus large que l'écran.donc tu as forcément une valeur surévaluée.

a écrit :
Que veux-tu dire par là ?


tu dis ne pas vouloir faire du bricolage mais ton code html ce n'est rien de plus.soigner les css, tu vas me dire on à pas le choix..,c'est top mais si tu ne fais l'éffort lui ajouter le language navigateur qui và avec, à savoir, xhtml, çà déprécie les efforts fournis pour les css.dommage.
keran a écrit :
tu dis ne pas vouloir faire du bricolage mais ton code html ce n'est rien de plus.soigner les css, tu vas me dire on à pas le choix..,c'est top mais si tu ne fais l'éffort lui ajouter le language navigateur qui và avec, à savoir, xhtml, çà déprécie les efforts fournis pour les css.dommage.

C'est vrai, j'ai commencé ce site il y a des années avec frontpage, et ce n'est qu'il y a quelques jours que j'ai vu l'importance du xhtml. J'ai gardé cette structure (sans doctype vu qu'à l'époque je ne savais pas ce que c'est) et j'ai opéré une refonte totale du style, à savoir passer du <font face...> au CSS. Je veux simplement terminer mon site, pour pouvoir commencer un autre encore plus important, et cette fois accessible, propre, xhtml strict.

Est-ce que les erreurs JS ont disparu chez vous ? car chez moi je n'en ai aucune (j'ai corrigé les lignes 1-5).

Je vois aussi que si j'aligne le texte à gauche, le problème disparaît (j'ai l'impression que son c'est son justifiage qui agrandit le conteneur Smiley ohwell ).

Que veux-tu dire par ton dernier post, diminuer le sommaire et agrandir le reste ? Je n'ai pas bien saisi.

En tout cas merci pour vos réponses.
Sujet clos
Aller à