Apparence de site web

[Guest Floy]

Bonjour à tous et toutes, je développe le site de mon groupe de musique depuis plus d'un an, et je n'arrive pas à prendre le recul nécéssaire pour évaluer objectivement l'actuel résultat.

J'aimerais donc savoir ce que vous pensez de:

-l'index (que je compte refaire en flash pour pallier aux problèmes de lenteur de chargement)

-l'accueil (principalement l'utilité des pages en"acces direct")

-le design général

-dans la rubrique galerie, que pensez-vous des pages avec des vidéos?

-dans la rubrique compos, l'intégration du lexteur exportable.

Ouf, je crois que j'ai regroupé la plupart de mes questions.

Bien sur voici l'url: www.stunerase.com

Merci d'avance et n'hésitez pas à poster critiques et/ou compliments

Petite précision,à l'exception de l'achet du nom de domaine il y a peu, j'ai toujours travaillé avec des ressources totalement freewares, donc je me bats pour démentir que tout ce qui est beau est cher, et si mon site reflète l'inverse... :s

voili voilou merci encore et bonne soirée à tous!

Floy

[destroyedlolo]

Mon avis, tout ce qu'il y a de plus perso

J'aimerais donc savoir ce que vous pensez de:

-l'index (que je compte refaire en flash pour pallier aux problèmes de lenteur de chargement)

Je ne sais pas ou tu vois de la lenteur car avec ma pauvre connexion a 2 MO, la page d'accueil est tres rapide a s'afficher (firefox 2.5).

Et puis j'aime pas les pages d'accueil en flash : ca prend un temps monstre a charger et ca n'apporte rien. Le visiteur qui tombe sur ton site par un moteur recherche des infos, et donc ca ne lui sert a rien. L'habitue aussi cherche a avoir des nouvelles, lui aussi il n'a rien a faire de cette page.

A nouveau, ce n'est que mon avis perso, mais ma station de ski preferee a ce genre de page, et la seule et uniquement chose que j'y cherche, c'est le bouton "passer l'intro".

Pour le reste, ce ne sont que des affaires de gout. mais la page selectionnee du menu n'est pas tres lisible ...

Lolo (faudrait un jour que je change mon propre site qui fait vraiment viello )

[thick]

Oublie la splash page que tu appelles l'index. C'est un clic et une attente inutile qui gave plus qu'autre chose.

Est-ce que tu as regardé du côté des solutions CMS (Content Management System) de type Wordpress ou Dotclear ? Cela permet l'installation et la gestion d'un site de manière limpide.

En tout cas, je préconise toujours la simplicité car sur le Web c'est la solution à 99% des problèmes ou questions.

Il est aussi intéressant de travailler au préalable sur une feuille de papier pour penser à la disposition et la navigation tout en réfléchissant à l'arborescence.

[Guest Floy]

Pour le reste, ce ne sont que des affaires de gout. mais la page selectionnee du menu n'est pas tres lisible ...

Oui j'avais remarqué... C'est vrai que bleu sombre entouré de rouge sombre on voit pas grand chose... Ptêt que si je les entourais de blanc?

Bon donc je note d'oublier le flash, mais le problèmeb des *.gif c'est que pour avoir une image de qualité il faut des fichiers avec un poids énorme, et c'est la que je crains pour des éventuels internautes en connexion bas-débit (des modems 56k ça doit encore se trouver nan?)

Merci à destroyedlolo et thick pour vos réponses

[Régis]

(...) Bon donc je note d'oublier le flash (...)

Bonjour 'Floy',

Il ne s'agit pas d'oublier le flash à proprement parlé mais plutôt d'oublier "la splash page" comme le dit 'thick'

Oublie la splash page que tu appelles l'index. (...)

La splash page est aussi appelée "page tunnel"... elle a pour inconvénient, entre autres, de retarder l'accès à l'information pour les internautes...

[Nullette]

Bonjour,

mon avis de simple visiteuse lambda :

J'ai du mal à lire les grosses polices des menus. Pas parce que elles sont grosses, c'est le type de lettres.

J'aime le bleu, mais j'ai du mal aussi à lire les textes.

Sinon, le téléchargement est rapide.

[Guest Floy]

La splash page c'est joli... même si je reconnais être le premier à me plaindre de ce genre de fioritures qui obligent à recliquer alors qu'on croyait avoir trouvé l'info.

Pour ce qui est de la difficulté de lecture, le problème n'avait jamais été évoqué mais effectivement c'est embêtant.

Pour les pages plus poussées dans l'arborescence j'utilise un background noir, ça peut peut être résoudre le problème.

"Cooper Black" est selon moi relativement lisible, avant j'utilisais "morpheus" qui en rebutait beaucoup.

Et je trouve Arial Mosh. Trèèèèès Mosh.

[Régis]

(...) je n'arrive pas à prendre le recul nécéssaire pour évaluer objectivement l'actuel résultat.(...)

La splash page c'est joli... même si je reconnais être le premier à me plaindre de ce genre de fioritures qui obligent à recliquer alors qu'on croyait avoir trouvé l'info.(...)

Lol... fais-tu un site pour toi ou pour les internautes afin de faire connaître le groupe ?

[Guest Floy]

Je crois que c'est un peu la le problème, je m'amuse beaucoup à faire ce site et je me rends finalement compte que le but a plus été de me poser des défis à résoudre en html que de réellement faire connaitre le groupe.

Mais à partir de septembre on devrait faire pas mal de concerts, et donc faire une promotion du site par le biais de flyers, etc. Donc on se doit d'avoir un site qui réponde aux attentes des internautes.

Donc apparament le site ne rebute catégoriquement personne, c'est un peu du "bien mais pas top".

Y'a plus qu'à reprendre à la base et à changer les couleurs, les polices...

Quoi d'autre?

[ghost]

salut,

Je vais resté assez technique quoique je ne sois pas fan du scroll vertical sur une fenêtre.

Tu n'as pas de DOCTYPE valide ce qui pousse IE à passer en mode quirks et peut poser des problèmes de portabilité sur d'autres navigateurs malgré le (mauvais ) choix de la mise en page en tableau.

Ensuite un petit passage de ton html au validateur serait le bienvenu et une CSS externalisée et valide serait également plus "propre".

Allez un bon défit html: une bonne mise en page sans tableau sur un code valide... Après pourquoi pas quelques animations flash pour égayer la chose... car pour un site de groupe de musique ton site manque pour moi d'un peu de contenu média (photos, anim etc).

A encore pourquoi ce format 800px de large alors que l'on tends vers le 19' ou encore 17' (1040 soit 960 utilisable).

Voilou

[Dadou]

A encore pourquoi ce format 800px de large alors que l'on tends vers le 19' ou encore 17' (1040 soit 960 utilisable).

Et que fais tu des notebook qui ont le vent en poupe? Des navigateurs nomades sur les téléphones?

[ghost]

Et que fais tu des notebook qui ont le vent en poupe? Des navigateurs nomades sur les téléphones?

Je tenterais une css dédiée, why not

[thick]

Je plussoie Ghost dans ses remarques auxquelles je répète qu'il faut impérativement oublier la splash page. Ce n'est pas joli et c'est contre-productif. A la limite quand on maîtrise à fond Flash couplé d'une créativité débordante je veux bien le supporter ou même l'apprécier, mais dans ce cadre qui nous occupe ici c'est à proscrire absolument.

En parlant de validation HTML, lorsqu'un site affiche quelque chose du genre "site compatible Explorer, Mozilla et Chrome en 600*800" cela dénote un amateurisme évident. Il faut absolument t'éloigner de ce genre de remarque et surtout faire en sorte qu'il n'y a pas besoin de le préciser puisque ton site est universellement compatible avec n'importe quel navigateur. En plus, je ne vois pas bien l'intérêt d'être "compatible" avec des navigateurs alternatifs tout en oubliant le principal. Ce n'est pas parce que tu déteste un navigateur qu'il faut le zapper au niveau de la validation. Encore une fois, tu fais un site pour l'internaute et pas pour toi !

J'ajoute aussi un manque d'interactivité avec l'internaute. Le lien MySpace est une bonne idée, mais il faut tendre à faire aussi bien voire mieux en termes de fonctionnalités "sociales". Aujourd'hui, Twitter a le vent en poupe. Il serait bon d'ouvrir un compte et d'ajouter le widget sur le site. Cela permettrait à vos groupies de savoir ce que vous faites à tout moment.

De plus, la galerie photo est vraiment basique à souhait. Va voir comment est goupillée celle du Hub pour observer un exemple de galerie bien faite et agréable à visionner tout en permettant une interactivité.

Pour finir, où sont les goodies ? Je parle de vidéos, fonds d'écran pour ordinateur et mobiles, sonneries, mp3, etc.

[destroyedlolo]

Bon donc je note d'oublier le flash, mais le problèmeb des *.gif c'est que pour avoir une image de qualité il faut des fichiers avec un poids énorme

Ben essaie le PNG En plus, comme tu as un fond uni, tu pourra meme t'affranchir de la gestion deplorable de ce format par M$IE. Et sur les navigateurs civilises, tu aura une image bien plus jolie.

Concernant Myspace et autre twiter, je trouve qu'il te manque aussi un flux RSS concernant les news. C'est facile a faire et super utile pour ceux qui souhaitent rester au courant de ce qu'il se passe pour le groupe.

[thick]

Flash n'est pas du tout "à oublier". Il faut juste oublier cette satané splash page, mais Flash est un outil merveilleux lorsqu'il est bien utilisé.

Les différents formats d'images ont tous leurs utilité. L'important est de savoir quand utiliser l'un ou l'autre. Pour cela, il faut un minimum d'expérience et de connaissances.

[Guest Floy]

==> ghost

bon le scroll vertical s'en va et revient au gré de ses envies, selon que la page contienne des textes, des liens, des photos, j'ai arrêté de chercher...

Moui le doctype je vais faire ça ce soir comme ça le "problème" sera définitivement réglé.

Pour ce qui est de la validation, j'aurais tendance à dire qu'entre le validateur et moi c'est pas la joie, il s'obstine à me trouver 3535353 erreurs critiques par page, ce qui m'énerve passablement... Y'en a quand même pas autant ?!

Externaliser les css, oui j'avais lu cela quelque part, mais j'avais pas bien saisi l'intérêt?

Et je note l'ajout des animations flash pour dynamiser le site!!

Et pour le 600*800, j'ai pas d'excuses Je suis incapable de faire en sorte que le site s'adapte à la résolution donc j'avais préféré faire petit mais visible par tous...

==> thick

Alors dans le désordre: les goodies, j'ai toujours trouvé ça un peu marginal, mais bon je reconnais que c'est un truc qu'on est content d'avoir quand on aime bien un groupe. Je prends note.

Au départ, l'intérêt du site était de donner les mêmes infos que myspace + youtube + facebook, en plus perso et en mieux Mais c'est vrai que se couper des réseaux sociaux... c'est risqué.

==> destroyedlolo

Le png, qu'est-ce que j'ai pu m'arracher les cheveux en essayant de gérer la transparence avec ce format... Mais donc c'est aps une vue de l'esprit, le rendu est mieux qu'en gif?

Un flux Rss. LE truc que j'utilise mais auquel je n'aurais jamais, mais alors jamis pensé pour le site du groupe. Comme quoi j'aurais eu tort de croire avoir atteint la perfection XD

Merci à tout pour vos remarques et suggestions, ça a de quoi m'occuper une bonne semaine au moins! (parfait en attendant les résultats du bac )

floy

[destroyedlolo]

Le png, qu'est-ce que j'ai pu m'arracher les cheveux en essayant de gérer la transparence avec ce format... Mais donc c'est aps une vue de l'esprit, le rendu est mieux qu'en gif?

Ben va sur le site de mon club photo (dans ma signature) avec autre chose qu'IE, et voie la difference entre l'appareil photo a gauche et le logo du club a droite. La grosse difference visuelle entre les 2 formats est que le PNG gere la transparence comme un alpha channel (donc avec des degrades sur 256 niveaux) alors que le GIF ne le gere que par un masque (donc en tout ou rien). C'est pourquoi il y a du crènelage sur l'appareil photo alors qu'il n'y en a pas sur le logo ou on a pu faire de l'anti aliasing sur la transparence.

Le bleme, c'est que bien evidement, M$IE est bien entendu le seul navigateur incapable de gerer ces transparences, meme en tout ou rien. Mais comme ton fond est uni, ca ne genera pas.

Un flux Rss. LE truc que j'utilise mais auquel je n'aurais jamais, mais alors jamis pensé pour le site du groupe. Comme quoi j'aurais eu tort de croire avoir atteint la perfection XD

[captain_torche]

Externaliser les css, oui j'avais lu cela quelque part, mais j'avais pas bien saisi l'intérêt?

Il y a plusieurs avantages. Le premier, est que tes pages seront légèrement moins lourdes, le fichier CSS n'est chargé qu'une fois. La seconde est que si tu fais une modification dans le CSS, elle est automatiquement appliquée à l'ensemble des pages de ton site, sans que tu aies besoin de "propager" ta modification.

Et pour le 600*800, j'ai pas d'excuses Je suis incapable de faire en sorte que le site s'adapte à la résolution donc j'avais préféré faire petit mais visible par tous...

En fonction de ton public, tu peux aussi partir sur une résolution un peu plus large, mais toujours fixe.

Mais donc c'est aps une vue de l'esprit, le rendu est mieux qu'en gif?

Tout dépend de ce que tu souhaites faire. Les logiciels comme Photoshop gèrent deux "types" de PNG : le PNG-8 et le PNG-24.

Le PNG-8 est équivalent en tous points au GIF : il gère 256 couleurs et la transparence sur une couleur. C'est juste un choix à faire (à la base, PNG était un format ouvert et GIF un format propriétaire, mais GIF est dans le domaine public depuis 2006)

LE PNG-24 gère 16 millions de couleurs (comme le JPEG). Ce n'est pas un format destructif (tu ne peux pas régler sa qualité, comme pour le JPEG), et donc son poids peut être relativement important (en fonction de ce que tu souhaites faire). Son algorithme est très performant pour gérer les dégradés. Et, bien entendu, c'est le seul format qui gère la transparence sur plusieurs niveaux.

Le fichier joint est un dégradé en PNG, qui fait moins de 1Ko.

En résumé :

- pour des images avec peu de couleurs (interface, dessin au trait, etc), tu peux utiliser selon ta préférence PNG-8 ou GIF

- pour des dégradés, ou si tu as besoin d'utiliser la transparence sur plusieurs niveaux, tu prendras du PNG

- pour le reste (principalement des photos), tu choisiras le JPEG

[Monique]

Bonjour,

Et je note l'ajout des animations flash pour dynamiser le site!!

Un article intéressant pour une utilisation judicieuse de flash : Flash non intrusif

[destroyedlolo]

Et un autre sur les formats du PNG.

[Guest Floy]

Alala... c'est pas faute d'y mettre de la bonne volonté, mais... je n'arrive pas à tout faire.

Premièrement j'ai suite à vos remarques décidé d'abondonner les tableu, et de refaire une tentativ avec des div et des float. En gros je m'en sors, à l'exception d'un problème récurrent, l'overflow. Dès que je le mets en scroll ou en auto, ça me fiche un bazar monstre dans les blocs...

Ca peut paraître idiot, mais ça me bloque parce que du coup je ne peux pas finir la structure du site, qui permettrait une amélioration notoire de tous les défaits précédemment soulignés.

Si l'un d'entre vous a envie de jeter un coup d'oeil sur le code de la page ou de la css, je vous les mettrais ici.

Floy

[thick]

Bien sûr que tu devrais poster ton souci d'overflow.

Je viens moi même de batailler pendant 3 jours avec Float à cause des vieilles version d'Internet Explorer qui ne l'interprètent pas bien, donc je comprends ta douleur.

[Guest Floy]

Alors voici le code html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Positionnement CSS</title>
</head>
<body>
<div id="page">
	<div id="bandeau">header</div>
	<div id="menugauche">menugauche</div>
	<div id="menudroite">menudroite</div>
	<div id="contenu">contenu</div>
		<div id="bloc_news">copyright</div>
	</div>
</div>
</body>
</html>

et la css

div {
	text-align:center;
	}

div#page {
		height:450px;
		width:600px;
	}

div#bandeau {
	width:600px;
	height:50px;
	background-color:#00CCFF;
	}
div#menugauche {
	float:left;
	width:100px;
	height:400px;
	background-color:#FF6699;
	}
div#menudroite{
	float:right;
	width:100px;
	height:400px;
	background-color:#FF6699;
	}

div#contenu {
	width: 500px;
	height:350px;
	background-color:#FFCC00;

	}
div#bloc_news {
	width:500px;
	height:50px;
	background-color:#FF3300;
	}

L'objectif étant de pouvoir mettre un overflow-y:auto à la div contenu

Capture d'écran sans overflow:

Capture d'écran avec overflow:

On voit que le contenu et le copyright s'en vont dans les pâquerettes... c'est triste hein?

Sinon autre question, quand on a fait un bloc par exemple le "menu gauche", dedans on peut mettre un tableau ou alors ça vous hérisse le poil et je dois faire plusieurs blocs?

[Guest Floy]

Je suis désolé, mais je n'arrive pas à éditer mes posts donc ça fera un double-post...

J'ai énormément avancé, mon nouveau design est fini, mais un problème persiste:

Sans overflow, le texte sort de la div. Jusqu'ici tout va bien.

A l'ajout d'un overflow:auto;, le texte ne sort plus de la div, certes, mais celle-ci s'en vaaaaa dans la montagne, et ça c'est pas cool.

le code html de la page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css">
<TITLE>¤ Accueil - STUNERASE vous souhaite une bonne visite de son site! ¤</TITLE>
</head>
<body>
<div id="page">
	<div id="bandeau">
		<div id="flash"></div>
		<ul id="menu">
			<li id="h1"></li>
			<li id="h2"><a href="membres/membres.html"></a></li>
			<li id="h3"></li>
			<li id="h4"><a href="bio/bio.html"></a></li>
			<li id="h5"></li>
			<li id="h6"><a href="dates/dates.html"></a></li>
			<li id="h7"></li>
			<li id="h8"><a href="galerie/galerie.html"></a></li>
			<li id="h9"></li>
			<li id="h10"><a href="zik/zik.html"></a></li>
			<li id="h11"></li>
			<li id="h12"><a href="amis/amis.html"></a></li>
			<li id="h13"></li>
		</ul>
	</div>
	<div id="menugauche">
		<div id="mg1"></div>
		<a href="contact/contact.html" class="contact"></a>
		<a href="presse/presse.html" class="presse"></a>
		<a href="fichetechnique/fichetechnique.html" class="fichetechnique"></a>
	</div>
	<div id="menudroite">
		<div id="md1"></div>
		<a href="http://www.myspace.com/stunerase" class="myspace"></a>
	</div>
	<div id="contenu">
		<div id="contenu1"></div>
		<div id="contenu2"><BR>Bienvenue sur notre site!<BR><BR>
<BR><BR>News du 30/06: Inscrivez-vous à la newsletter pour rester informés de l'actualité du groupe!!!
<BR><BR><A HREF="../mj/mj.html">News du 26/06: Hommage à l'un des plus grands que la Terre a accueilli...</A>
<BR><BR>News du 15/06: Bannières publicitaires du site
<BR>à télécharger sur la page <A HREF="../pub/pub.html">¤ Pub ¤</A>
<BR><BR>News du 14/06: Lecteur exportable dispo dans la rubrique ¤ Compos ¤
<BR><BR>News du 13/06: Nouveau contenu dans la rubrique ¤ Galerie ¤
<BR><BR>News du 12/06: création du nom de domaine www.stunerase.com !!
<BR><BR>News du 11/06: Nouvelles versions de certaines compositions en écoute!
<BR>Mise à jour de la rubrique ¤ Amis ¤
<BR><BR>News du 02/06: Meilleure compatibilité avec différents navigateurs.</div>
	</div>
	<div id="footer"><BR>¤ Tous droits réservés © Stunerase 2008-2009 ¤</div>
</div>
</body>
</html>

la css

body {
	text-align:center;
	margin-top: 0px;
	margin-bottom: 0px;
	margin: 0 auto;
		width: 960px; 
		text-align:center; 
		font: 24px Cooper Black, Arial, sans-serif;
	   color : #FFFFFF;
		background-color: #000000}

A{
color:#FF0000;
font:  14px Cooper Black, Arial, sans-serif ;
text-decoration:none;
}
A:hover {
color:#FFFFFF;
font:   14px Cooper Black, Arial, sans-serif   ;
text-decoration:none;
}
A:visited {
color:#FF0000;
font:   14px Cooper Black, Arial, sans-serif   ;
text-decoration:none;
}

div#page {
		height:720px;
		width:960px;
		margin: auto;
	}

div#bandeau {
	width:960px;
	height:153px;
		}

	div#flash {
	width:960px;
	height:91px;
	background-image: url("images/header0.bmp");
		}

		#menu {
			list-style: none;
			margin: 0;
			padding: 0;
			overflow: hidden;
			}
		#menu li {
			float: left;
			height: 62px;
			border: 0px;
			margin-right: 0px;
			}
		#menu li a {
			display: block;
			padding: 62px 0;
			}


			li#h1{
				width:25px;
				height:62px;
				background-image: url("images/header1.bmp");
				float:left;
				}

			li#h2{
				width: 154px; 
				height: 62px; 
				background-image: url('images/header2passif.bmp');
				float:left; 
				}

			li#h2:hover{
				background-image: url('images/header2actif.bmp');
				}

			li#h3{
				width:42px;
				height:62px;
				background-image: url("images/header3.bmp");
				float:left;
				}

			li#h4{
				width: 62px; 
				height: 62px; 
				background-image: url('images/header4passif.bmp');
				float:left; 
				}

			li#h4:hover{
				background-image: url('images/header4actif.bmp');
				}

			li#h5{
				width:42px;
				height:62px;
				background-image: url("images/header5.bmp");
				float:left;
				}

			li#h6{
				width: 112px; 
				height: 62px; 
				background-image: url('images/header6passif.bmp');
				float:left; 
				}

			li#h6:hover{
				background-image: url('images/header6actif.bmp');
				}

			li#h7{
				width:44px;
				height:62px;
				background-image: url("images/header7.bmp");
				float:left;
				}

			li#h8{
				width: 141px; 
				height: 62px; 
				background-image: url('images/header8passif.bmp');
				float:left; 
				}

			li#h8:hover{
				background-image: url('images/header8actif.bmp');
				}

			li#h9{
				width:44px;
				height:62px;
				background-image: url("images/header9.bmp");
				float:left;
				}

			li#h10{
				width: 131px; 
				height: 62px; 
				background-image: url('images/header10passif.bmp');
				float:left; 
				}

			li#h10:hover{
				background-image: url('images/header10actif.bmp');
				}

			li#h11{
				width:42px;
				height:62px;
				background-image: url("images/header11.bmp");
				float:left;
				}

			li#h12{
				width: 87px; 
				height: 62px; 
				background-image: url('images/header12passif.bmp');
				float:left; 
				}

			li#h12:hover{
				background-image: url('images/header12actif.bmp');
				}

			li#h13{
				width: 34px; 
				height: 62px; 
				background-image: url('images/header13.bmp');
				float:left; 
				}

div#contenu {
	width: 717px;
	height:514px;
	margin-left: 123px;
	}

	div#contenu1 {
   width: 717px;
   height: 41px;
   background-image: url("images/contenu1.bmp"); 
	}

	div#contenu2 {
   width: 717px;
   height: 473px;
   background-image: url("images/contenu2.bmp"); 
   padding:5px;

   	}


div#menugauche {
	float:left;
	width:123px;
	height:400px;
	display: block;
	}

	div#mg1 {
   width: 123px;
   height: 416px;
   background-image: url("images/menugauche1.bmp");

	}

div#menudroite{
	float:right;
	width:120px;
	height:567px;
	}

	div#md1 {
   width: 120px;
   height: 398px;
   background-image: url("images/menudroite1.bmp"); 
	}

div#footer {
	width:717px;
	height:53px;
	background-image: url("images/footer.bmp"); 
	margin-left: 123px;
	}

a.contact { display:block; width: 123px; height: 50px; background-image: url('images/menugauche2passif.bmp')}

a.contact:hover { width: 123px; height: 50px; background-image: url('images/menugauche2actif.bmp')}

a.presse { display:block; width: 123px; height: 49px; background-image: url('images/menugauche3passif.bmp')}

a.presse:hover { width: 123px; height: 49px; background-image: url('images/menugauche3actif.bmp')}

a.fichetechnique { display:block; width: 123px; height: 51px; background-image: url('images/menugauche4passif.bmp')}

a.fichetechnique:hover { width: 123px; height: 51px; background-image: url('images/menugauche4actif.bmp')}

a.myspace { display:block; width: 120px; height: 169px; background-image: url('images/menudroite2passif.bmp')}

a.myspace:hover { width: 120px; height: 169px; background-image: url('images/menudroite2actif.bmp')}

Je ne trouve pas la solution, malgré de multiples essais...

Sinon, j'ai respecté tout ce que vous m'aviez conseillé, le doctype, le validateur... je suis tout près du but, nan?

Modifié 17 Juillet 2009 par Monique
Merci d'utiliser codebox pour plus de 10 lignes de code :)

[Ernestine]

Salut,

Je n'avais pas vu ton message précédent plus tôt, mais il était parfaitement normal que ça ne fonctionne pas, puisque la largeur totale était de 600px, que les colonnes de droite et de gauche faisaient 100px chacune et celle du milieu faisait 500, soit un total de 700px. Impossible de le faire rentrer dans un conteneur de 600 Et même sans l'overflow ça ne fonctionnait pas, c'était juste une impression (la div centrale passait sous la colonne de droite).

D'une manière générale, et je suppose que ça vaut pour ton dernier message, sache qu'il est inutile (et même gênant) d'attribuer une width à la div centrale. La div centrale, tu lui donnes un margin-left égal à la largeur de la colonne de gauche, et un margin-right égal à la largeur de la div de droite, et tu ne lui donnes pas de largeur : elle s'étirera naturellement entre les deux (qu'il y ait un overflow ou pas).

Sinon, je vois que tu sous Internet Explorer. Je te recommande chaudement d'utiliser Firefox avec le pluggin Webdevelopper Toolbar : il offre des tas de fonctionnalités pour faire du CSS proprement. Il permet par exemple d'entourer les divs dans la page (ce qui t'aurait permis de constater le dépassement de la div contenu par dessous la div droite dans ton exemple précédent )

Modifié 17 Juillet 2009 par Ernestine