Forum d'entraide PHPFrance

Bonjour =)

j'ai une petite question
Je me lance acutellement dans la création d'un site avec du css (j'ai toujours eu l'habitude d'utiliser des tableaux ce qui rendait les sites assez lourd pour la naviguation pour les petites connexions). Et je voudrais surtout que mon site s'adapte à tous les types de résolutions (donc je supose de la mise en place de pourcentage?)
Donc voila je me lance ....

(je tiens à préciser que je me suis déja renseigné sur des tutos et que je n'ai pas trouvé ce que je cherchais sinon je poserais pas de question =p)

Donc voila, je voudrais réaliser le design suivant : (sans le contour du site)
http://img111.imageshack.us/img111/9686/admin4ud.jpg
(grosso merdo bien sur)

J'ai vu que l'on pouvait utiliser les "pseudos frames" pour que la partie "contenu" soit la seule partie qui charge à la naviguation sur le site.... mais le hic c'est que mon sous menu varie sans cesse aussi que mon plan.... donc j'en deduis que toute ma page devra rechargé à chaque fois que je change de pages? ( a par peu être le haut du menu)


Comment je peux réaliser un design de ce style avec du css? comment dois je procéder?
COmment l'adapter à tout type de resolution?

UN ENORME MERCI d'avance =)

Concernant la résolution, tu devrais éviter les pourcentages : sur une trop grande résolution, la page est tellement grande que ça en devient désagréable à la lecture.
Il est préférable, pour les grandes résolutions, d'avoir une page de largeur fixe.

Ou alors, voir si on peut fixer une largeur maximale à un objet : tu lui donne un pourcentage mais aussi une valeur max pour que ça ne fasse pas une page trop large.

Je parlais de fixer des poucentage pour que le site prenne bien toute la largeur de la page quelque soit la résolution.Non?!

Je comprend pas comment on fait que quelqu'un qui a un 800X600 par exemple arrive à voir la même chose que quelqu'un en 1024X768, que le site rende exactement pareil

Oui, oui, c'est une excellente initiative.
Mais sur les trop grande résolutions, un site développé avec des pourcentages devient désagrable parce que justement beaucoup trop large (un bloc de texte devient une ligne par exemple, ce qui rend le texte moins agréable à la lecture, ou alors il y a de grands espaces vides).

J'ai la chance de pouvoir surfer en 1900x1200 et les sites les plus "agréables" à la lecture sont ceux qui ne sont pas développés en pourcentage mais qui ont une largeur maximale (généralement du 1024).

Donc pour l'exemple que j'ai mis plus haut

Je le fais pour une resolution de 800 par 600 et qui s'étire pour que par exmple le sous menu de gauche reste toujours à 20% de la page et le reste à 80%.

Et si la résolution repasse cela, je centre le site et le met un fond une couleur?

Tout ça c'est très beau en theorie mais comment je met ça en place en css? Comment je dois procéder pour que mon site soit le plus leger possible,comment je dois le découper? et faire pour qu'il ne bouge pas suivant les naviguateurs, les resolutions..ect?

Pour ma suggestion de l'utilisation du pourcentage jusqu'à une valeur maximale, tu pourras t'en occuper à la fin (j'ai déjà utilisé l'attribut min-height, il se peut qu'il y ait un max-width qu'on peut fixer à 1024.

Donc travaille avec des pourcentages pour commencer, ça réglera le problème de résolution.
Pour l'affichage selon les navigateurs, à partir du moment où l'affichage du site devient un peu évolué, il est utopique de vouloir exactement le même résultat sur tous les navigateurs au millimètre prés (c'est à s'arracher les cheveux).
Les différences entre navigateurs se traitent au cas par cas, en fonction de l'objet qui est stylé (il y a des différences sur un bon paquet d'éléments).

L'essentiel n'est pas d'avoir quelque chose d'identique sur tous les navigateurs mais d'avoir un résultat agréable sur tous les navigateurs.

Tu me suggère de faire quoi pour la mise en page de mon site en css(sous cette forme la : http://img111.imageshack.us/img111/9686/admin4ud.jpg )?



Ouais je me suis rendu compte que je n'aurais pas la même chose, j'ai deja la mise en page de ma galerie qui varie suivant si je suis sous ie et firefox, mais bon j'avais encore espoir qu'elle se ressemble :p

Ben je peux pas vraiment te suggérer autre chose que te farcir des tutoriels sur les CSS =)
Etant donné que tu sais développer sous forme de tableaux, tu peux même te tourner vers des tutoriels qui explique plus précisément comment passer d'une version en tableau à une version en css.

Je n'y connaissais rien en CSS il y a quelques mois. On m'a conseillé de lire "CSS par Eric Meyer" qui est un excellent ouvrage très facile à lire où l'auteur présente une large couverture des CSS en plusieurs parties, chaque partie abordant un problème particulier (passage de tableaux à du css, mise en place d'un menu vertical, mise en place d'un menu horizontal, mise en page d'un tableau de données, simulation de la transparence, etc).
Bref en quelques jours, j'ai acquis suffisamment de connaissances sur les CSS pour pouvoir réaliser aisément une application les utilisant.

Bref, ça passe par de la lecture générale sur les CSS pour commencer.
Mais le principe est grosso-modo le même que pour la création avec des tableaux : on défini d'abord les grandes parties de la page et petit à petit on s'occupe des plus petites parties.

Je me suis déja documenté sur le css, je fais que ça, mais je demandais jsute si il y avait un méthode plus éfficace pour mettre en place ce modèle de design... parce qu'il y a pleins de méthodes pour le mettre, mais je cherche ce qui serait plus logique et efficace.

Quand au livre que tu me conseille merci, je le lirais, on m'a déja prété, css cours et précis, ce qui donne déja une bonne vue d'ensemble.



Petite question, comment fixer mon menu de gauche bien à l'angle, (il reste un espace blanc entre l'image du menu et l'angle de la page)

il y a une marge minimale sur la page :

body, html {
margin:0;
}

Mille merci =)

Petite question, comment fixer mon menu de gauche bien à l'angle, (il reste un espace blanc entre l'image du menu et l'angle de la page)

Salut, pour éviter ce genre de désagrémentj je commence toujours (à tort ou à raison) mes feuilles de style par : Cela à le mérite de supprimer toutes les marges intérieures et extérieures de toutes les balises.

Car il faut savoir que d'un navigateur à l'autre les réglages de ces marges par défaut sont différent.

@+ fafane84

Oky thanks


Je vais encore vous embetter avec une petite question , vous allez finir par vouloir me taper


J'ai fais des pseudos frames, donc ma partie gauche est "statique" et ne bouge que le contenu de droite, seulement... dans ce contenu de droite j'ai en fait un espèce de sous menu.


Je prends un exemple, dans mon menu de gauche j'ai
- News

et sur la page qui se met dans ma partie contenu en plus du texte, j'ai des liens pour "ajouter", "modifier", "supprimer" en "sous menu".

Je veux que ce sous menu m'amène aux bonnes pages, sans perdre mon sous menu

Je ne suis pas sûr d'avoir bien compris.

Avec un lien et un exemple ce serait plus pratique

Ton menu gauche est en position: fixed; dans ton CSS ?

Quand au sous-menu pour qu'il apparaisse tout le temps dans tes pages, pourquoi ne pas utiliser la fonction include() ?

C'est à dire que tu crées une page avec ton sous-menu et tu l'inclus dans toutes les pages dans lesquelles tu souhaites le voir apparaitre.

@+

J'illustre, c'est vrai que c'est pas très clair


Ma page
http://img112.imageshack.us/img112/8764/delete7tp.jpg

Mon menu fixé ainsi

<? 
 echo "<table Width='100%' height='100%'><tr><td>";
 // menu de gauche, appel de la page de menu
 include('menu.php'); // si menu.php est dans le même dossier que vos pages 
 
 echo "</td><td div align='center' bordercolor='#990000' border='1'>";
 
 
 
 
 			echo "<div align='center'>";
					 
 
					 
					//appel des pages au centre de la page
					switch($_GET['pg']){ 
					
						case 'accueil': // si $_GET['pg'] = accueil
							 include('accueil.php'); 
							 break; 
					
					   case 'actualite': // si $_GET['pg'] = actualite
						 include('form_actu.php'); 
						 break; 
						  
					   case 'presse': // si $_GET['pg'] = presse
						 include('form_presse.php'); 
						 break; 
						  
					   case 'utilisateur': // si $_GET['pg'] = utilisateur
						 include('contact.php'); 
						 break; 
						   
						   //mettre les autres
						   
					   default: // si $_GET['pg'] ne correspond à rien, on inclut accueil.php par défaut.
						 include('accueil.php'); 
					}
			echo "</div>";
 
 
 
 echo "</td></tr></table>";
 
 
 
 ?>

Pour que vous aillez une vue globale sur ce que j'ai fais jusqu'a maintenant.

Maintenant en prenant l'exemple d'actualité, quand je clic sur le bouton, ça m'amène à la page ajout_actualite par exemple, et en "sous" menu en haut de la page j'ai la possiblité de modifier, et supprimer les articles de d'actualité de mon site. Donc il m'amène admetons sur modif_actu, et supp_actu.

Si je clic sur presse, il m'amène sur la page ajout_presse, mais j'ai aussi la possibilité d'attérir sur modif_presse, et supp_presse.

Donc je ne peux pas fixer ce sous menu, puisqu'il depend du bouton de mon menu sur lequel j'aurais cliqué, cependant je voudrais garder la partie gauche statique....

Vous me comprenez mieux? =)