Salut.
Je suis en plein développement de mon site web, je programme à la main grâce à mes cours mais j'ai un soucis.
Sur ma page d'accueil, je voudrais que les éléments des différentes div ne se superposent pas lorsqu'on réduit la fenêtre/taille de l'écran. C'est à dire avoir des tailles minimales pour mes div.
http://alouest.hebfree.org/
Le site est encore en construction donc si vous avez des remarques, un débutant comme moi accepte absolument toutes les critiques ! c'est surtout pour sa que je post ici ^^    
thanks.
 
Al Ouest

Si tu le permets, je vais en profiter    
 
Tu fais un lien vers bandit.js, mais ce script n'existe pas.  
Et tu devrais mettre tous les js que tu utilises dans un seul fichier, ainsi tu as seulement une connection pour le télécharger.
http://www.elctech.com/tutorials/r [...] bine-files
 
Tu as une taille en pixel comme propriété de body. Mais IE6 (20% des usagers) ne sait pas augmenter les polices en taille fixe. Je te conseille de donner 62.5% comme taille, ainsi 1em équivaut à 10px
http://mondaybynoon.com/2006/03/13 [...] e-with-em/
 
Tu dois aussi faire un reset des margin et padding de body, car les différents browsers ont chacun leur propre distance, et ce pour chaque tag
http://sixrevisions.com/css/css-ti [...] css-reset/
 
Le nom de ton site est dans un background image en css, mais rien ne remplace le contenu quand tu navigue sans image. Tu dois avoir du contenu pour les robots qui viennent sur ton site pour l'indexer.
Bien sur il faut faire une seule image pour le casque et le titre (toujours pour réduire les connections)
http://css-tricks.com/nine-techniq [...] placement/
 
Tu commences par un h2 (presentation), mais il te manque un h1, pourquoi pas dans ton  titre (en fait je suis partisan de ne pas mettre le nom du site dans un h1, mais bon, c'est un débat et il s'applique pas ici)
http://h1debate.com/
 
L'image de guitare à gauche de tes h2 devrait être un background-image, car illustrative. Et autant bien le faire, donc employer la technique des sprites. (tu auras dans le même image aussi l'icone du haut parleur, qui elle, est bien mise dans la css)
http://www.smashingmagazine.com/20 [...] tutorials/
 
Tu n'as pas de style sur tes <p> sauf la taille et la police hérité par le body. Donc chaque browser affiche comme il veux certaines propriétés. Voilà des conseils.  
http://www.aisleone.net/2009/desig [...] ypography/
 
Tu peux aussi retirer le div qui entoure ton <ul> class "pupuce", il ne sert à rien.
Idem entre le <div> cronikeurs et la table. D'ailleurs pourquoi faire une table ?
Même remarque pour le pied de page.
 
Commence par retirer les tables pour avoir ton layout uniquement en css. Le site Alsacrétions possède des tutoriels très bien fait
http://www.alsacreations.com/tutoriels/
Les autres conseils sont plus de bonnes pratiques, de l'optimisation, en outre c'est sans doute compliqué par rapport à ton niveau.
 
Par rapport à ta question de départ, tu dois regarder du coté des layout fluides
http://www.alsacreations.com/tuto/ [...] float.html
 
Voilà un système de grid basé sur 960px. Le code est bien, c'est pas mal pour comprendre comment fonctionne un site web.
http://www.designinfluences.com/fluid960gs/  
 
Bonne chance  
 

ouaouh, ca c'est de l'argumentaire! merci pour tes liens David...

merci David !
Tu m'aides beaucoup, je n'ai pas encore tous ses réflexes mais ils vont venir grâce à tes conseils !

         Merci pour les liens, encore merci et merci, sa va aider pas mal de collègues aussi ^^.  
   
@ bientôt, je ne manquerais pas de poser d'autres questions ^^  

Bwwwa, encore un pb, pourquoi sa marche pas ......
Je ne comprend pas : j'essaye juste de faire bouger une image de la gauche vers la droite, tout semble bon mais pourtant ...

Et puis pour ce qui est du css :

 
Merci pour votre aide !    
 
Al

Désolé, HS, mais je rajoute aussi un merci pour les liens super utiles !

up

Tu peux faire un reset de certaines propriétés mais * { margin: 0; padding: 0; } c'est bien le truc à pas faire car derrière tu dois re-styler tout même ce qui est stylé à l'identique par les différents navigateurs (80% des trucs en gros). Et ça pollue l'affichage dans Firebug, c'est pas agréable.
Voir plutôt "Reset CSS" d'E. Meyer http://www.css4design.com/blog/5-r [...] avigateurs
 

Pas besoin d'utiliser les sprites CSS pour démarrer, c'est bon pour des sites pro à fort trafic mais en l'absence d'outil automatique et quand on démarre en webdesign, ouch. Déjà utiliser correctement images CSS ou images HTML (et alt vides ou pas dans ce dernier cas) ce sera pas mal

1. Il vaudrait mieux ouvrir un autre sujet, et tant qu'à faire mets un titre explicite...
 
2.   Fais une recherche sur - par exemple - "marquee javascript" (marquee étant une pseudo-balise IE qui fait défiler le texte)
 
3. Je ne suis pas un expert en JS, mais voilà un petit truc qui fonctionne :

<script type="text/javascript">
  var i=0;
  function defiler(){
   i+=1;
   document.getElementById("image1" ).style.margin = "0 0 0 "+i+"px";
   setTimeout("defiler()",100);
  }
 </script>
</head>
<body onload="defiler()">
  <img id="image1" src="image1.jpg" alt="image_defilante" />
</body>

drapal une vrai mine d'or ici !!
je suis un petit dev web : voici un de mes sites http://www.prixjeuxvideo.com (loiiiiiiiiin d'être fini)