Problème pour structurer le design

Bonjour à tous et toutes, je suis actuellement en train de réaliser (gratuitement ) un site pour des amis qui organisent prochainement un festival de musique.

Cependant, je semble rencontrer un petit problème avec le design !
En effet l'image de fond se répète bien mais pas jusqu'au bout et bizarrement cela s'affiche correctement sur Internet explorer mais pas pour les autres navigateurs !

Je suis sur qu'il s'agit d'un tout petit soucis, mais n'arrivant à déterminer à quel endroit il se situe, je viens donc vous trouvez !

Est-ce que quelqu'un saurait me dire ou je me suis planté, ca serait très sympa.

adresse modifiée

D'avance, un grand merci
Modifié par LuciferX (07 Apr 2008 - 00:11)

Bonsoir LuciferX,

A priori un simple overflow sur ton conteneur "content" devrait résoudre ce petit soucis :

#content {
	position: relative;
	width: 800px;
	min-height: 100%;
	background: url("bg-horizontal.jpg") repeat-y;
	margin: auto;
	[#blue]overflow:auto/hidden;[/#]
}

Don't forget : http://validator.w3.org/ est ton ami

Cdt,
Sylvain

Merci, mais apparemment le problème est toujours la !

Quelqu'un (ou toi) avez une autre idée ?

LuciferX a écrit :
Merci, mais apparemment le problème est toujours la !

Si tu a écris overflow:auto/hidden; dans ta feuille de styles au lieu d'écrire soit overflow:auto;, soit overflow:hidden;, c'est normal, la propriété CSS n'accepte pas "auto/hidden" comme valeur.

Concrètement, tu as un problème très simple de dépassement de blocs flottants. Par défaut, les éléments flottants ne repoussent pas les limites des blocs mais les survolent (ils repoussent par contre le contenu, texte et images notamment). Mais dans ton cas ce problème simple est peu visible car faussé:
1. dans la plupart des navigateurs modernes, par le min-height: 100% (l'image de fond se répète donc bien en hauteur, et pas seulement sur une partie du bloc mais sur toute la hauteur du bloc... hauteur déterminée uniquement par ce min-height: 100%);
2. dans Internet Explorer, par la largeur fixe de div#content (en passant, une largeur de 800px c'est une bêtise... pas bien méchant mais bon...), qui confère le layout à ce bloc, ce qui empêche le dépassement des flottants.

En savoir plus:
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

LuciferX a écrit :
Merci, mais apparemment le problème est toujours la !

Effectivement ma réponse manquait sans doute de clarté, merci Florent pour ces éclaircissements

@LuciferX, bien qu'évidente, la solution a tout de même été vérifiée sous Firefox, Safari, Opera, IE6 et 7 sous windows XP (pour éviter de rajouter à la longue liste de sottises que je peux écrire...) et semble parfaitement fonctionnelle...

Cdt,
Sylvain

Ok, merci pour ces quelques précisions, il me semblait bien que quelque chose clochait !

Pour finir, (histoire de bien comprendre) quel est la différence entre overflow:auto; et overflow:hidden; ???

Salut,

en l'occurrence ce serait plus logique de supprimer le min-height:100% et le float:left inutiles plutôt que de rajouter un overflow ...

Sinon le overflow permet de spécifier la façon de gérer "ce qui déborde" du bloc conteneur. La différence entre auto et hidden c'est que le premier va rajouter une scrollbar si nécessaire alors que le second va simplement le cacher.

A+
Modifié par Heyoan (25 Mar 2008 - 23:33)

LuciferX a écrit :
quel est la différence entre overflow:auto; et overflow:hidden; ???

Lorsque on utilise la propriété overflow pour créer un contexte de formatage (concept un peu obscur, mais en gros c'est l'«état» du bloc qui ici évite le dépassement des flottants), il n'y a pas une grande différence.

La différence intervient quand on utilise overflow dans son rôle principal: dire ce qu'il advient du contenu qui dépasse des dimensions d'un bloc. Tu peux faire le test en figeant la hauteur du bloc (avec un height: 300px par exemple).
- overflow: hidden cache le contenu qui dépasse;
- overflow: auto déclenche l'apparition de barres de défilement si le contenu est plus grand que la hauteur (barre de défilement verticale) ou que la largeur (barre de défilement horizontale);
- overflow: visible (par défaut) dit que le contenu doit déborder et être visible;
- overflow: scroll oblige le navigateur à afficher des barres de défilement quel que soit le contenu.

Mais tout ceci peut se lire dans diverses documentations en ligne (à commencer par la spécification CSS 2.1). Pense à faire une recherche la prochaine fois.
Modifié par Florent V. (25 Mar 2008 - 23:11)

a écrit :
Mais tout ceci peut se lire dans diverses documentations en ligne (à commencer par la spécification CSS 2.1). Pense à faire une recherche la prochaine fois.

En fait, j'avais fait une petite recherche mais c'est tellement mieux quand c'est expliqué par quelqu'un de compétent , du coup, j'ai tout compris

Merci beaucoup à tous pour ces précisions !

Sinon sujet à part, je n'avais pas demandé, mais comment trouvez-vous le design ?
Modifié par LuciferX (25 Mar 2008 - 23:48)

LuciferX a écrit :
mais comment trouvez-vous le design ?

Sobre et lisible, mais assez loin de l'objet (festival de musique) en l'état.

En fait, je voyais justement quelque chose d'assez sombre tout en restant clair et fluide.

J'avais fais une petite recherche pour voir un peu à quoi ressemblais les autres sites traitant également de festival de rock dans ma région et je me suis rendu compte que leur design n'était pas des plus fameux.

Exemple:
http://www.autumnrockfestival.be/
http://www.lesardentes.be/
http://www.gerpinnesrockfestival.org/accueil.htm

Je voulais apporter un peu d'harmonie dans tout ca en proposant un design relativement différent tout en restant légé et où le visiteur aurait plaisir à naviguer entre les différents menus !

Maintenant, va falloir réaliser le dessin dans le header, je compte m'inspirer du flyers mais comme ce n'est pas moi qui le réalise, j'attend de voir à quoi il ressemblera pour m'en inspirer ou non !
Modifié par LuciferX (27 Mar 2008 - 05:19)