Css pour "Bookmarks" exportés

Bonjour à tous,
Je suis nouvelle sur ce forum joliment "coloré" et débute en Css. J'ai essayé de résoudre mon problème par moi-même mais je ne vois pas très claire dans la manière d'atteindre mon objectif. Je m'explique : J'essaie de créer un "menu" à partir des bookmarks/favoris/signets (plus particulièrement à partir des signets exportés d'Opera) pour transportés ces signets sur une clé usb et pouvoir l'afficher sur tout type de navigateur. Mon objectif est de parvenir à créer ce menu sans modifier le document html. Juste en ajoutant la ligne

<link rel="stylesheet" type="text/css" href="style.css" />

. Pour l'instant, le menu ne s'affiche qu'avec Opera. Le menu "dynamique" fonctionne correctement sous ce navigateur mais pas avec Firefox ni IE. Le but étant au final qu'il soit lisible et accessible afin d'éviter d'avoir une suite de centaines de liens. Je suis consciente des problèmes css sous IE et ai lu cette page. Cependant, je ne vois pas comment appliquer une "formule" pour ce fichier html "standard" sans en modifier le code.

voici ce que j'ai créé pour mettre en page le fichier html :

/* ---A ajouter au début du document html:<link rel="stylesheet" type="text/css" href="opera6_files/style.css" />     */
dt dl {
	display: none;
}
dt:hover dl {
	display: block;
	float: left;
	position: absolute;
	left: 200px;
	margin-top: -35px;
}
dt:hover dl dt dl {
	display: none;
}
dt:hover dl dt:hover dl {
	display: block;
}
dt:hover dl dt:hover dl dt dl {
	display: none;
}
dt:hover dl dt:hover dl dt:hover dl {
	display: block;
}
dt:hover dl dt:hover dl dt:hover dl dt dl {
	display: none;
}
dt:hover dl dt:hover dl dt:hover dl dt:hover dl {
	display: block;
}
dt:hover dl dt:hover dl dt:hover dl dt:hover dl dt dl {
	display: none;
}
dt:hover dl dt:hover dl dt:hover dl dt:hover dl dt:hover dl {
	display: block;
}
h3 {
	display: block;
	height: 35px;
	font-family: verdana;
	font-size: 70%;
	float: none;
	color: #000000;
	font-weight: normal;
	background: none;
	width: 200px;
	background-color: #f2f2f2;
	margin: 0px 0px -16px 5px;
}
h3:hover {
	background: #000040;
	color: #ffffff;
}
h3:before {
	content: url(folder_closed.png);
	margin-right: 5px;
	width: 12px;
}
h3:after {
	content: url(arrow_right.png);
	width: 12px;
	float: right
}
dd {
	display: none;
}
a {
	display: block;
	font-family: Verdana;
	font-weight: normal;
	font-style: normal;
	font-size: 60%;
	width200px;
	padding: 0px 0px 0px 5px;
	color: #000000;
	text-align: justify;
	text-decoration: none;
	background-color: #f2f2f2;
	overflow: hidden;
}
dl {
	margin: 0px 0px -5px 0px;
	background-color: #f2f2f2;
	width: 200px;
}
a:hover {
	color: #ffffff;
	background: #000040;
}
a:before {
	content: url(star.png);
	background: none;
	margin-right: 5px;
	width: 12px;
}
h1 {
	display: none;
}
body {
	background-color: #FFFFFF;
	margin: 0;
}
hr {
	display: block;
	padding:;
	margin: 20px 0px -15px 0px;
	width: 200px;
	text-align: left;
}
p {
	display: none;
}

Et voici un exemple du code html.

Je ne demande pas forcément un code tout fait que je n'aurais qu'à appliquer mais plutôt que vous m'expliquiez comment y parvenir. Peut-être avez-vous des liens précis à me donner en premier. Ce forum est assez vaste et je n'ai pas trouvé de sujets correspondant. Peut-être ai-je mal cherché ou alors je ne vois pas très bien ce qui est en jeu.
Merci d'avance de votre aide.
Modifié par Sophie Monde (06 Aug 2007 - 21:23)

Bonjour,

Déjà, si l'effet «dynamique» est obtenu uniquement via la pseudo-classe CSS :hover, cette page ne sera jamais compatible avec Internet Explorer 6. Quant à la version 7, j'ai un doute (à voir...).

Ne serait-il pas plus simple de laisser tous les éléments s'afficher dans la page, et de se contenter de mettre ça en forme pour que ça soit plus sympa/plus ergonomique?

Merci Florent de ta réponse. Oui l'effet dynamique n'est obtenu que par le :hover (ne voyant que cette solution...). As-quoi penses-tu alors? Du javascript?

Pour ta dernière question: c'est ce que je faisais jusqu'à présent : Diminuer la taille, couleurs, marges, ... Mais le nombre de favoris augmentant chaque jour (+ d'un mega de fichier), je cherche une solution super "légère" pour faciliter la recherche des liens. Le but étant de ne pas utiliser de logiciel dédié. J'ai donc penser à un menu en css. Laisser tous s'afficher prend plus de temps pour arriver au favoris.

Je me doutais que pour IE ça serait difficile mais Firefox me cause du soucis également...

Sophie Monde a écrit :
As-quoi penses-tu alors? Du javascript?

Oui, plutôt du Javascript effectivement.

Sophie Monde a écrit :
je cherche une solution super "légère" pour faciliter la recherche des liens.

Toujours en Javascript, si tu as des listes de liens précédés par un titre (nom de dossier par exemple, ou de catégorie), tu peux utiliser une fonction qui, au clic sur le titre, va cacher/montrer la liste de liens correspondante.

Par contre, la faisabilité de la manoeuvre va dépendre du code HTML dont tu disposes au départ.

Sinon, il n'y a pas de module pour Opera qui permet de générer ce genre de page d'accueil dynamique? Qui sait, tu es peut-être en train de réinventer la roue.