Certains liens se chevauchent sans savoir pourquoi

Salut tous,

J'ai un problèmes avec plusieurs menus de mon site. Par exemple sur cette page http://www.mediacitoyen.fr/plan/index.php je n'arrive pas à bien placer mes liens, certains se mettent à la suite des autres et des liens se chevauchent carément .



Voici ma feuille de style :

	.plan {width: 98%; padding-top:2em; border-bottom: #999999 1px dotted; padding-bottom:1em;}
	.plan h2 {font-size:1.5em; display:inline}
	.plan a {}
	.plan span {}
	.plan ul {margin-left:22px; padding-top:0.5em}
	.plan li {}
	.plan_cat {list-style-type:circle; margin-left:2em}
	.plan_cont {list-style-type:disc; margin-left:4em}
	.plan_plus {margin:1em 0 0 22px; font-weight:bold;}

Merci d'avance

<modération>Merci de fournir des URLs cliquables.
Modifié par Julien Royer (25 May 2007 - 16:20)

Bonjour,
c'est encore moi
Je ne vois pas de quels liens tu veux parler? Pourrais tu être plus précis?

Si tu regarde l'image liée, tu vas voir que les liens "toutes les brèves", "livre d'or" ne sont pas alignés comme il le faudrait.

De plus, les liens suivants devraient ne pas se suivre mais revenir à la ligne a chaque fois :
* International
* France
* Economie
* Politique
* Environnement
* Sport
* Sciences et Technologies
* Culture
* Insolite
* People
* Média Citoyen

Sur mon autre site, je ne rencontre pas ce probleme : -http://www.xelopolis.com/plan/index.php
Modifié par XelNaga (25 May 2007 - 17:36)

Concernant les sous rub de la section dossiers,
elles sont toutes pourvus (<li>) d'un float:left (sur les 2 CSS), donc il est normal qu'elles ne s'affichent pas les une en dessous des autres.

Pour toutes les brèves si tu veux que ça se placent dessous,
tu dois lui attribuer la déclaration clear:left (évite qu'il se place
normalement à droite des <li> flottants).
Pour le <h2> livre d'or, tu devrais commencer à placer ton image de dossier à
l'intèrieur du h2 ou mieux en background CSS, lui retirer le
display:inline (affichage en ligne) et sans doute aussi lui attribuer un clear:left.
C'est un code que t'as récupéré?
Modifié par Hermann (25 May 2007 - 19:56)

Mon site est basé sur le moteur Artiphp, dans le pack, le css est fourni tel quel !

a écrit :
Concernant les sous rub de la section dossiers,
elles sont toutes pourvus (<li>) d'un float:left (sur les 2 CSS), donc il est normal qu'elles ne s'affichent pas les une en dessous des autres.

Je suis désolé mais je ne trouve pas les float:left dans les plan.css ou les autres css, sur quel class ou id as-tu vu ça ?
Modifié par XelNaga (25 May 2007 - 20:20)

Bonjour,

Abus caractérisé de positionnement flottant.

Les flottants, c'est bien, mais à petite dose, et en maitrisant ce qu'on fait. Là, c'est du grand n'importe quoi.

J'en compte des dizaines et des dizaines un peu partout (avec la barre d'outil Webdeveloper pour Firefox, entourer les flottants : c'est un feu d'artifices). Alors que la mise en page en question, pour la page d'accueil, nécessite tout au plus onze flottants :
- dix pour le menu principal ;
- un pour le contenu.
Pour être gentil, on pourra en rajouter deux pour l'en-tête, ce qui nous donne un compte de treize flottants maximum.

Pour info : beaucoup de float:left|right dans general.css, styles.css et articles.css.

XelNaga a écrit :
Mon site est basé sur le moteur Artiphp, dans le pack, le css est fourni tel quel !

Mes condoléances pour toi, et mes antifélicitations aux fournisseurs du CSS.

En passant, la page d'accueil d'Artiloo/artiphp est un autre exemple de chose à ne pas faire. Cette fois-ci, c'est un abus caractérisé de positionnement absolu. Plus que ça : c'est une phase terminale de cas de positionnement CSS mal utilisé.

Pour ce design, ils auraient eu meilleur compte d'utiliser un tableau de mise en forme. En tout cas, ils auraient rendu un meilleur service aux utilisateurs de la sorte.

(Nota : je n'ai aucun grief personnel contre les éditeurs d'Artiphp, et serait heureux dans la limite de mes disponibilités de répondre à leurs éventuelles questions sur pourquoi c'est du grand n'importe quoi).

J'ai supprimé pas mal de flottants.

Pour revenir à mon probleme initial, en regardant sous IE7, c'est pire que tout :

Est-ce un float qui me fait ce genre de chose ?

Les editeurs d'Artiphp ne sont pas nombreux (2 ou 3 seulement), c'est leur première version compatible Xhtml 1.0 strict, une autre est en preparation (ça change des usines à gaz habituelles). Je pense en fait que leur moteur est bon. Ce sont tous mes rajouts qui sont mauvais !

J'ai webdeveloper et je m'en sert assez souvent cependant comment tu fais pour afficher les float toi ?

Merci d'avance

Bonjour,

XelNaga a écrit :

J'ai webdeveloper et je m'en sert assez souvent cependant comment tu fais pour afficher les float toi ?

Entourer > Entourer les éléments positionnés > Float
Dans Webdeveloper 1.1.4

Merci bien, j'adore cet outil !

Sinon des idées sur mon problème sous IE7 ?

Sur la version en ligne indiquée dans le premier post, il semble effectivement qu'il y ait moins de flottants, mais il reste tous ceux-ci :



Faire flotter des éléments pour les mettre les uns en dessous des autres, ça me dépasse...
Si je compte bien, on voit dans cette image 38 flottants. Un seul est indispensable, et deux autres sont à la rigueur utiles.
Modifié par Florent V. (26 May 2007 - 16:14)

Je ne trouve pourtant pas les float responsables de mes problèmes snif...

XelNaga a écrit :
Je ne trouve pourtant pas les float responsables de mes problèmes snif...

C'est à dire ? Tu ne trouves pas dans quelle feuille de style et à quel endroit tu as les propriétés float en question ?

Là, c'est à toi de voir. Un conseil : utilise l'extension Firebug pour Firefox, et en particulier la fonction « inspect ».

Avec Firebug, pour les listes de liens flottants, j'obtiens ceci :

[b]article.css (line 157)[/b]
#col1article li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt;
padding:0pt 25px 0pt 0pt;
}

[b]styles.css (line 659)[/b]
#col1article li {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt;
padding:0pt 25px 0pt 0pt;
}

[b]plan.css (line 6)[/b]
.plan li {
clear:left;
}

Tout ceci me rappelle pourquoi je ne sépare jamais les styles d'un élément dans plusieurs feuilles de style (une pour le positionnement et une pour le reste des styles, par exemple) : après, c'est le bordel pour s'y retrouver...