PB affichage selon définition écran
zatox
Messages postés
640
Date d'inscription
Statut
Membre
Dernière intervention
-
Smoking bird Messages postés 870 Date d'inscription Statut Membre Dernière intervention -
Smoking bird Messages postés 870 Date d'inscription Statut Membre Dernière intervention -
Bonjour, sur le site que je construit, j'ai fait tous mes tests en définition 1024x768. Quand je prends une définition 1280x768 tout le contenu est décalé à gauche, je voudrais qu'il reste centré. Le div#container que j'ai placé poue mettre tout le site dans un bloc m'a été indiqué par un membre de CCM et ça m'a bien arrangé mais il me reste ce problème de centrage que je voudrais quelque soit la définition d'écran. Merci pour vos réponses.
Voici l'adresse:
https://www.sfr.fr/fermeture-des-pages-perso.html
Voici le début de mon CSS:
body
{
background-color: rgb(152,202,229);
font-family: "Comic Sans MS", "Arial Black", "Arial", "Verdana", "serif";
}
div#container
{
width:900px;
position:relative;
top:10px;
left: 490px;
margin-left: -450px;
}
.element_en_tete
{
margin-left: 100px;
width: auto;
text-align: center;
height: 160px;
border: solid green 5px; /*POUR CADRAGE*/
border: solid white 3px;
margin-top: -120px;
background-image: url(images_animees/animation_0005_entete1_0001.gif);
background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
}
.logo_gauche
{
margin-left: 10px;
margin-right: auto;
margin-top: 45px;
width: 70px;
height: 80px;
border: solid white 3px;
background-image: url(images/logo[1]_p.jpg);
background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
}
Voici l'adresse:
https://www.sfr.fr/fermeture-des-pages-perso.html
Voici le début de mon CSS:
body
{
background-color: rgb(152,202,229);
font-family: "Comic Sans MS", "Arial Black", "Arial", "Verdana", "serif";
}
div#container
{
width:900px;
position:relative;
top:10px;
left: 490px;
margin-left: -450px;
}
.element_en_tete
{
margin-left: 100px;
width: auto;
text-align: center;
height: 160px;
border: solid green 5px; /*POUR CADRAGE*/
border: solid white 3px;
margin-top: -120px;
background-image: url(images_animees/animation_0005_entete1_0001.gif);
background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
}
.logo_gauche
{
margin-left: 10px;
margin-right: auto;
margin-top: 45px;
width: 70px;
height: 80px;
border: solid white 3px;
background-image: url(images/logo[1]_p.jpg);
background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
}
A voir également:
- PB affichage selon définition écran
- Double ecran - Guide
- Capture d'écran whatsapp - Accueil - Messagerie instantanée
- Comment agrandir l'affichage de l'écran - Guide
- Retourner ecran pc - Guide
- Capture d'écran samsung - Guide
32 réponses
Merci pour ta réponse, effectivement ça marche au niveau du centrage bien que sur mon écran quand je me mets en 1280x768, j'ai ma fenêtre qui est décentrée sur la gauche, ça doit être autre chose car sur mon bureau je ne vois presque plus les icônes de gauche et le bouton "demarrer" je vois seulement "arrer", donc pour le site c'est pareil la fenêtre est un peu décentrée, mais sinon ça marche sauf que l'autre problème en mettant ce que tu me dis c'est au niveau de l'image d'entête: si tu es allé sur mon site tu as pu voir qu'en passant en 1280x768 tout est décentré à gauche, mais l'image d'entête a bien la même largeur que son conteneur qui est marqué par le border solid white 3px. Maintenant avec le code que tu m'as donné, le conteneur de l'image est plus long que l'image elle même j'aimerais bien qu'elle reste à la même largeur que son conteneur quelle que soit la définition de l'écran. Merci pour ton aide.
Ah attends je crois que j'ai fait une c....... j'avais tout viré dans div#container pour remplacer par ce que tu me dis mais si je mets comme ça :
div#container
{
margin:0 auto;
width:900px;
position:relative;
top:10px;
}
ça a l'air d'aller nettement mieux qu'en penses-tu ?
div#container
{
margin:0 auto;
width:900px;
position:relative;
top:10px;
}
ça a l'air d'aller nettement mieux qu'en penses-tu ?
avec ce que je t'ai donné faut virer les margin-left et left de ton #container normalement^^
J'ai jeté un rapide coup d'oeil à ton site, de quelle image parle tu? je ne constate aucune bizarrerie d'image :s
en même temps mon firefox plante ce soir -_-' enfin, mon webdevelopper toolbar^^
Je jetterais un oeil demain, là ma couette m'appelle :D
PS: vire les " autour des noms des polices, ça ne sert à rien^^, et évite le plus possible les valeurs de positionnement en négatif^^
J'ai jeté un rapide coup d'oeil à ton site, de quelle image parle tu? je ne constate aucune bizarrerie d'image :s
en même temps mon firefox plante ce soir -_-' enfin, mon webdevelopper toolbar^^
Je jetterais un oeil demain, là ma couette m'appelle :D
PS: vire les " autour des noms des polices, ça ne sert à rien^^, et évite le plus possible les valeurs de positionnement en négatif^^
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
normalement ça frise le parfait^^ tu peux faire un margin:10px auto 0 auto; pour le coup, ce qui te vire le top^^
tu fais tes modifs sur le lien que tu as indiqué?
tu fais tes modifs sur le lien que tu as indiqué?
Excuses moi j'étais absent ce matin, ce qui se trouve sur l'adresse indiquée c'est ça:
body
{
padding: 0 auto;
background-color: rgb(152,202,229);
font-family: "Comic Sans MS", "Arial Black", "Arial", "Verdana", "serif";
}
/* ATTENTION CONTAINER DANS LEQUEL ON MET TOUT LE SITE POUR CENTRAGE */
div#container
{
margin:0 auto;
width:990px;
position:relative;
top:10px;
}
.element_en_tete
{
margin-left: 100px;
width: auto;
height: 160px;
border: solid green 5px; /*POUR CADRAGE*/
border: solid white 3px;
margin-top: -120px;
background-image: url(images_animees/animation_0005_entete1_0001.gif);
background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
}
.logo_gauche
{
margin-left: 10px;
margin-right: auto;
margin-top: 45px;
width: 70px;
height: 80px;
border: solid white 3px;
background-image: url(images/logo[1]_p.jpg);
background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
}
et maintenant je trouve que ce n'est pas mal du tout qu'en penses-tu ?
Pour les " autour des polices je vais m'en occuper cet après-midi ainsi que les autres modifs que tu m'as indiquées, par contre pour le positionnement négatif je ne sais pas comment faire autrement. (pour le margin-top de l'élément entete)
En tout cas merci, pour reste ça a l'air de marcher au poil.
body
{
padding: 0 auto;
background-color: rgb(152,202,229);
font-family: "Comic Sans MS", "Arial Black", "Arial", "Verdana", "serif";
}
/* ATTENTION CONTAINER DANS LEQUEL ON MET TOUT LE SITE POUR CENTRAGE */
div#container
{
margin:0 auto;
width:990px;
position:relative;
top:10px;
}
.element_en_tete
{
margin-left: 100px;
width: auto;
height: 160px;
border: solid green 5px; /*POUR CADRAGE*/
border: solid white 3px;
margin-top: -120px;
background-image: url(images_animees/animation_0005_entete1_0001.gif);
background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
}
.logo_gauche
{
margin-left: 10px;
margin-right: auto;
margin-top: 45px;
width: 70px;
height: 80px;
border: solid white 3px;
background-image: url(images/logo[1]_p.jpg);
background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
}
et maintenant je trouve que ce n'est pas mal du tout qu'en penses-tu ?
Pour les " autour des polices je vais m'en occuper cet après-midi ainsi que les autres modifs que tu m'as indiquées, par contre pour le positionnement négatif je ne sais pas comment faire autrement. (pour le margin-top de l'élément entete)
En tout cas merci, pour reste ça a l'air de marcher au poil.
pas de soucis pour l'absence, on a tous une vie en dehors du code ;)... enfin la plupart :D
Ca m'a l'air pas mal aussi, mais côté code, t'as quelques grosses erreurs. Chaque page ne peut avoir qu'un DTD (les méthodes où il y en a plusieurs sont à proscrire), une balise html dans laquelle on met un header, suivi des balises body.
<doctype>
<html>
<head>
<style type='text/css'>
</style>
</head>
<body>
</body>
C'est basique, mais ça résume bien l'idée^^. Il faut donc que tu corrige ton fichier, il n'est pas valide du tout, et j'pense que ça affecte tes css quelque part^^.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
ça faut absolument pas que tu le répètes, ça se mets une seule fois dans un doc, et avant tout le reste^^. En fait j'ai des problèmes à bosser en direct sur tes css, et je pense que c'est lié à ça^^. Une fois que tu auras corrigé ce problème, on pourra se pencher bien plus facilement sur les valeurs négatives et ton fameux margin top ;), et au passage, essais de mettre tes css dans un fichier css en link, ça sera plus simple de s'y retrouver^^
Ca m'a l'air pas mal aussi, mais côté code, t'as quelques grosses erreurs. Chaque page ne peut avoir qu'un DTD (les méthodes où il y en a plusieurs sont à proscrire), une balise html dans laquelle on met un header, suivi des balises body.
<doctype>
<html>
<head>
<style type='text/css'>
</style>
</head>
<body>
</body>
C'est basique, mais ça résume bien l'idée^^. Il faut donc que tu corrige ton fichier, il n'est pas valide du tout, et j'pense que ça affecte tes css quelque part^^.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
ça faut absolument pas que tu le répètes, ça se mets une seule fois dans un doc, et avant tout le reste^^. En fait j'ai des problèmes à bosser en direct sur tes css, et je pense que c'est lié à ça^^. Une fois que tu auras corrigé ce problème, on pourra se pencher bien plus facilement sur les valeurs négatives et ton fameux margin top ;), et au passage, essais de mettre tes css dans un fichier css en link, ça sera plus simple de s'y retrouver^^
Euh, oui tu as certainement raison, alors tout d'abord il faut que je te dise que c'est mon premier site web, bon ja vais pas te raconter ma vie mais simplement j'ai fait de l'informatique (professionnellement) mais qui n'avait rien à voir c'était sur des gros systèmes MVS CICS COBOL DB2 DL1 etc ... donc je pense que je connais un peu l'info mais pas beaucoup la construction de site web et c'est surement ce qui explique les erreirs dont tu me parles et je suis bien décidé à les corriger comme tu me l'indique. Je me suis formé ou du moins le peu que je sais je l'ai appris sur le site du zéro. Alors tout ça pour te dire que je ne suis pas sûr d'avoir tout pigé sur ce que tu viens de m'expliquer. Donc pour résumer j'ai un index.php puis ensuite disons euh une vingtaine d'autres fichiers php dont certains sont des pages donc appelées généralement par des liens et d'autres par des include. Au début je pensais que la balise DOCTYPE ne se mettait que dans l'index, mais quand j'ai passé mes autres fichiers .php sur W3C j'ai eu des erreurs en pagaille liées au fait que je n'avais pas cette balise. Donc est(ce que je dois garder cette balise DOCTYPE dans tous mes fichiers .php et ne mettre
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
que dans l'ndex ? est-ce que j'ai bien compris ? quand tu me dis il faut que tu corriges ton fichier, mais c'est que j'en 20 de fichiers !!! dasn lesquels j'ai effectivement ceci:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="fr">
Merci pour ton aide, si tu peux m'éclairer un peu plus ?
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
que dans l'ndex ? est-ce que j'ai bien compris ? quand tu me dis il faut que tu corriges ton fichier, mais c'est que j'en 20 de fichiers !!! dasn lesquels j'ai effectivement ceci:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="fr">
Merci pour ton aide, si tu peux m'éclairer un peu plus ?
ptdr :D no probs, tout va bien^^ (grosso modo^^)
En fait, une pratique courante quand on créé des sites webs, c'est de diviser son contenu -pour mieux régner cela va de soit^^
Voici comment on procède, et qui me semble assez adapté vu ton projet:
header.php
index.php
ender.php
style.css
Dans ton header.php tu mets une balise de type link:
<link href='style.css' rel='stylesheet' type='text/css'></link>
tu la place dans la balise <head>
Ton header contiendra les informations d'en-têtes partagées par tes vingt fichiers^^, donc à la base le DTD, la balise html et head, et l'ouverture de la balise body. S'ils partagent davantage, genre l'entête et un premier menu, tu peux aussi les mettre dedans.
Dans ton index, et du coup dans tous tes fichiers qui s'ouvriront et qui auront besoin du header.php et du ender.php, tu mets des include_once('header.php') et include_once('ender.php') en début et fin de fichier, comme ça toutes tes pages partageront ces mêmes informations. Et dans le corps de tes pages, tu mets le contenu qui convient à une seule page ;)
Tu vois l'idée? Du coup, si tu as besoin de modifier le header ou la déclaration du type de document, ou encore l'en tête de ton site avec le premier menu, sur toutes tes pages, il te suffira de le faire que sur la page header.php.
Pour exemple, voici le contenu de mon fichier header sur mon projet actuel:
Les css sont partagées partout sans copier-coller
Le DTD aussi
ainsi que le body, le conteneur de mon site, l'espace d'en tête, le menu, et l'ouverture du div contenu ;)
Simple, mais efficace^^
Et pour tes questions,
Pour terminer, le siteduzero est pas mal pour un début, une initiation, mais je t'incite à te pencher sur des bouquins. Trouve celui qui te convient, c'est autrement plus pratique, et ils sont souvent plus complets^^ et manque pas d'en prendre un récent :p
En fait, une pratique courante quand on créé des sites webs, c'est de diviser son contenu -pour mieux régner cela va de soit^^
Voici comment on procède, et qui me semble assez adapté vu ton projet:
header.php
index.php
ender.php
style.css
Dans ton header.php tu mets une balise de type link:
<link href='style.css' rel='stylesheet' type='text/css'></link>
tu la place dans la balise <head>
Ton header contiendra les informations d'en-têtes partagées par tes vingt fichiers^^, donc à la base le DTD, la balise html et head, et l'ouverture de la balise body. S'ils partagent davantage, genre l'entête et un premier menu, tu peux aussi les mettre dedans.
Dans ton index, et du coup dans tous tes fichiers qui s'ouvriront et qui auront besoin du header.php et du ender.php, tu mets des include_once('header.php') et include_once('ender.php') en début et fin de fichier, comme ça toutes tes pages partageront ces mêmes informations. Et dans le corps de tes pages, tu mets le contenu qui convient à une seule page ;)
Tu vois l'idée? Du coup, si tu as besoin de modifier le header ou la déclaration du type de document, ou encore l'en tête de ton site avec le premier menu, sur toutes tes pages, il te suffira de le faire que sur la page header.php.
Pour exemple, voici le contenu de mon fichier header sur mon projet actuel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'/> <link href='style.css' type='text/css' rel='stylesheet'/> <link rel="stylesheet" type="text/css" media="screen" href="styleCloack.css" /> </head> <body> <div id='cartouche'> <div id='header'> </div> <ul id='menu'> <li><a href='index.php?root=news'>Actualités</a></li> <li><a href='index.php?root=1d0134'>Avertissement</a></li> <li><a id='current'href='index.php?root=54bdcd'>Formalités et services</a></li> <li><a href='index.php?root=f0f974'>La présence française</a></li> <li><a href='index.php?root=52654d'>Philantropic Activities</a></li> <li><a href='index.php?root=ff4b22'>Présentation du Consulat Général</a></li> <li><a href='index.php?root=contacts'>Contacts</a></li> </ul> <div id='contenu'>
Les css sont partagées partout sans copier-coller
Le DTD aussi
ainsi que le body, le conteneur de mon site, l'espace d'en tête, le menu, et l'ouverture du div contenu ;)
Simple, mais efficace^^
Et pour tes questions,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">ne doit être mis qu'une seule fois sur toutes les pages de ton site, toujours au début ;). Ca indique le type de html utilisé et déclare l'ouverture de ton document par <html>, et comme pour chaque page il n'y a qu'un type de html utilisé et qu'une page est un document... normal que ce ne soit qu'en un seul exemplaire ;)
Pour terminer, le siteduzero est pas mal pour un début, une initiation, mais je t'incite à te pencher sur des bouquins. Trouve celui qui te convient, c'est autrement plus pratique, et ils sont souvent plus complets^^ et manque pas d'en prendre un récent :p
Je tiens à précisé qu'un margin: auto pour centrer en latéral semble ne pas fonctionné sous IE6.
J'ai déjà fait des tests.
Toutefois on peux centrer un bloc avec ce code:
Le margin-left doit être de la moitié du width et en négatif.
J'ai déjà fait des tests.
Toutefois on peux centrer un bloc avec ce code:
div#container
{width:800px;
position:absolute;
top:10px;
left:50%;
margin-left:-400px;}
Le margin-left doit être de la moitié du width et en négatif.
et ça fonctionne quelle que soit la résolution?
En tous cas, je rentrerais pas dans le débat sur le développement IE6 :D
En tous cas, je rentrerais pas dans le débat sur le développement IE6 :D
Oui car mon left:50%; prends justement la moitié de l'écran comme point de référence et ensuite on décale de la moitié du bloc pour le centrer.
C'est précisément le code que j'utilise pour tout mes sites que je test toujours sur IE6 pour m'assurer que tout va bien pour le placement de mes éléments.
Tu peux très bien tester ça en redimentionnant la fenêtre de ton navigateur. Le bloc centrale devrai resté centrer tant que la largeur de la fenêtre du navigateur de sois pas inférieur à la largeur du bloc.
C'est précisément le code que j'utilise pour tout mes sites que je test toujours sur IE6 pour m'assurer que tout va bien pour le placement de mes éléments.
Tu peux très bien tester ça en redimentionnant la fenêtre de ton navigateur. Le bloc centrale devrai resté centrer tant que la largeur de la fenêtre du navigateur de sois pas inférieur à la largeur du bloc.
ça m'a l'air cohérent^^ mais comme je l'ai sous entendu, je répugne à coder en pensant à IE6 spécifiquement^^ et aussi à utiliser les % ;)
Enfin, les deux solutions fonctionnent au final^^
Enfin, les deux solutions fonctionnent au final^^
Il ne suffit pas de penser spécifiquement mais de le prendre en compte. Comme je le dit souvent, il y a encore trop d'utilisateur de ce navigateur pour les mettre de côté.
Pour ce qui est des % je suis pas spécialement du genre non plus à les utiliser mais dans ce cas précis oui.
Bon, maintenant libre à toi de choisir celle que tu préfèrera.
Pour ce qui est des % je suis pas spécialement du genre non plus à les utiliser mais dans ce cas précis oui.
Bon, maintenant libre à toi de choisir celle que tu préfèrera.
Bon alors pour répondre à smoking bird, comme je te l'ai dit un peu plus haut, je vais essayer de corriger mes erreurs au mieux, mais je ne veux pas non plus tout casser d'autant que ça commence à fonctionner pas trop mal je crois même si mon code est un peu lourdingue. Donc concernant les fichiers header.php index et ender, ce que j'ai fait (en gros) c'est un fichier index.php, plusieurs pages .php (qui sont appelées quand tu cliques sur une rubrique, centre photos, vidéos etc....) puis j'ai d'autres fichiers .php exemple: entete.php, menu.php, pied.php et d'autres encore qui eux sont appelés par include ce qui rejoint ce que tu disais c'est à dire que si je dois modifier mon menu par exemple, je ne touche qu'un seul fichier et basta il est appelé par les autres en faisant un include.(au passage j'ai fait un include simple je ne connaissais pas le include_once bon je ne sais pas la différence). Bref sur ce point je crois que j'ai compris et qu'on est d'accord. Par contre concernant ma balise DOCTYPE et tout le tralala qui va avec, celle-ci je l'ai mise par copier/coller dans tous mes fichiers php y compris dans ceux qui sont appelés par include. Est-ce que là j'ai fais une erreur ? je peux à la rigueur créer un fichier header.php qui ne contiendra que cette balise DOCTYPE mais dois-je appeler ce fichier dans tous les autres auquel cas ça revient au même. Parceque ce que je ne comprends pas (des fois j'ai la tête un peu dure !!) c'est qu'à un endroit tu me dis que cette balise DOCTYPE et tout le tralu ne doit être mise qu'une seule fois dans tous mes fichiers !! mais sauf erreur de ma part, je ne pense pas avoir mis cette balise plusieurs fois dans un fichier .php mais une seule fois dans chaque fichier. Je ne sais pas si je m'explique bien, je reprends un peu différemment par un exemple: mon index.php contient lui-même la balise DOCTYPE et il appelle par include entete.php, menu.php, pied.php et d'autres encore qui contiennent eux-même la balise DOCTYPE donc vu sous cet angle on porrait penser que la balise DOCTYPE se trouve plusieurs fois dans index.php autant de fois qu'il y a d'include !!! donc ma question est: est-ce que c'est là mon erreur et est-ce que je dois supprimer tous les DOCTYPE se trouvant dans des fichiers appelés par incude et ne garder cette balise que dans mon index.php et toutes les pages .php ? si la réponse est oui, alors quand je vais passer par exemple mon menu.php au trapèze W3C il va me dire que j'ai des erreurs vu que c'est un fichiers .php sans balise DOCTYPE. Autre question par rapport à W3C: vaut-il mieux soumettre à W3C le site entier ou fichier par fichier ?
Ensuite pour cette fameuse DOCTYPE tu me dis qu'elle doit se trouver en tout début de fichier, mais si j'ai un start session ce qui est le cas, il doit être situé devant, ensuite j'ai certaines instructions également devant car sinon il me fait à l'exécution l'erreur classique euh je me souviens plus c'est du style que la page à déjà été envoyée, j'ai cru comprendre que c'est lié au fait que le php est exécuté sur le serveur alors que le xhtml c'est sur le client ... Donc voilà pour la 2ième chose, ensuite dernier truc concernant l'appel du css, j'ai tout une bidouille (bidouille peut-être mais qui marche) que j'ai faite par rapport aux différents thèmes. Si tu vas sur mon site, tiens par la même occasion revoici l'adresse:
https://www.sfr.fr/fermeture-des-pages-perso.html
tu verras que sur la page acceuil en haut à gauche il y a une listbox dans laquelle tu peux choisir le thème que tu veux, pour le moment il y en a 6. J'ai fait ça pour savoir le faire techniquement après le désign de chaque thème c'est la personne pour qui je fais le site qui me dira ce qu'il veut. Tout ça pour te dire que l'appel au css c'est pas juste une ligne vu que là j'ai 6 css différents qui sont activés (ou appelés dans la balise <style> en fonction du choix de l'utilisateur puis ce choix est stocké dans un cookie. Bon voilà, dernier truc, il n'est pas impossible que je soit amené à faire 6 css de plus je t'explique pourquoi: actuellement si tu prends mon site sous FF tu verras que le haut du corps colle bien au bas du menu. Par contre si tu le prends sous IE (moi j'ai IE 7 et j'en veux pas plus c'est juste pour tester ça que j'ai IE 7 je préfère FF de loin) donc sous IE le haut du corps ne colle pas au bas du menu et je n'ai pas trouvé de soluce si ce n'est que j'envisage de dupliquer mes css et selon que j'ai IE ou pas IE j'appelle le css qui va bien. Si tu as une soluce pour ce bout de truc de rien mais qui ne me plait pas du tout avec IE, je suis preneur. Bon voilà j'espère que j'ai pu me faire comprendre de mes lacunes en matière de construction de site web et que tu pourras me donner une réponse aux questions que je pose notamment la DOCTYPE. Encore merci à tous pour votre aide.
Pour les bouquins est-ce qu'il n'y aurait pas des tutos sur le web autre que le site du zero qui iraient bien ?
Ensuite pour cette fameuse DOCTYPE tu me dis qu'elle doit se trouver en tout début de fichier, mais si j'ai un start session ce qui est le cas, il doit être situé devant, ensuite j'ai certaines instructions également devant car sinon il me fait à l'exécution l'erreur classique euh je me souviens plus c'est du style que la page à déjà été envoyée, j'ai cru comprendre que c'est lié au fait que le php est exécuté sur le serveur alors que le xhtml c'est sur le client ... Donc voilà pour la 2ième chose, ensuite dernier truc concernant l'appel du css, j'ai tout une bidouille (bidouille peut-être mais qui marche) que j'ai faite par rapport aux différents thèmes. Si tu vas sur mon site, tiens par la même occasion revoici l'adresse:
https://www.sfr.fr/fermeture-des-pages-perso.html
tu verras que sur la page acceuil en haut à gauche il y a une listbox dans laquelle tu peux choisir le thème que tu veux, pour le moment il y en a 6. J'ai fait ça pour savoir le faire techniquement après le désign de chaque thème c'est la personne pour qui je fais le site qui me dira ce qu'il veut. Tout ça pour te dire que l'appel au css c'est pas juste une ligne vu que là j'ai 6 css différents qui sont activés (ou appelés dans la balise <style> en fonction du choix de l'utilisateur puis ce choix est stocké dans un cookie. Bon voilà, dernier truc, il n'est pas impossible que je soit amené à faire 6 css de plus je t'explique pourquoi: actuellement si tu prends mon site sous FF tu verras que le haut du corps colle bien au bas du menu. Par contre si tu le prends sous IE (moi j'ai IE 7 et j'en veux pas plus c'est juste pour tester ça que j'ai IE 7 je préfère FF de loin) donc sous IE le haut du corps ne colle pas au bas du menu et je n'ai pas trouvé de soluce si ce n'est que j'envisage de dupliquer mes css et selon que j'ai IE ou pas IE j'appelle le css qui va bien. Si tu as une soluce pour ce bout de truc de rien mais qui ne me plait pas du tout avec IE, je suis preneur. Bon voilà j'espère que j'ai pu me faire comprendre de mes lacunes en matière de construction de site web et que tu pourras me donner une réponse aux questions que je pose notamment la DOCTYPE. Encore merci à tous pour votre aide.
Pour les bouquins est-ce qu'il n'y aurait pas des tutos sur le web autre que le site du zero qui iraient bien ?
Alors là j'ai une question pour arthezius: moi j'ai IE 7 est-ce que tu me conseilles de le démonter et de remettre IE 6 ? ensuite au niveau où j'en suis actuellement dans la construction de site web, j'ai conclu qu'il est judicieux de faire des tests avec IE et FF faut-il en faire avec d'autres navigateurs ? de plus je teste également en faisant varier ma déf d'écran de 800 à 1280 en passant par 1024 ce qui fait qu'aujourd'hui quand je dois faire une modif qui touche la présentation je fais en tout 6 test: IE plus les 3 def d'écran et idem pour FF je trouve que ça commence à faire un peu lourd mais peut-être que ce n'est pas suffisant ? est-ce qu'il faut faire opéra ou je ne sais olus lesquels ? merci pour ta réponse.
A priori je dirai que si tu test sur Firefox ça devrai allé sur les autres. Ces navigateurs (sauf IE) étant tous respectueux des standards du web.
Passe ensuite ton site eu W3C validator.
Ensuite tu peux faire le test pouvoir sur les autres navigateurs via ce site:
http://browsershots.org/
Il va afficher ta page sur un ensemble de système d'exploitation et navigateur que tu peux sélectionner et t'afficher une capture d'écran.
Y'a d'autre sites sinon (voir ici)
Pour ce qui est d'IE il existe des moyens d'avoir plusieurs version installé en même temps et même de l'avoir sous Linux (ce qui est mon cas).
Pour en avoir plusieurs sous Windows, tu peux avoir par exemple le Pack Multi-IE (voir ici)
Passe ensuite ton site eu W3C validator.
Ensuite tu peux faire le test pouvoir sur les autres navigateurs via ce site:
http://browsershots.org/
Il va afficher ta page sur un ensemble de système d'exploitation et navigateur que tu peux sélectionner et t'afficher une capture d'écran.
Y'a d'autre sites sinon (voir ici)
Pour ce qui est d'IE il existe des moyens d'avoir plusieurs version installé en même temps et même de l'avoir sous Linux (ce qui est mon cas).
Pour en avoir plusieurs sous Windows, tu peux avoir par exemple le Pack Multi-IE (voir ici)
zatox:
premier point, on est d'accord, l'utilisation des include est judicieuse. include_once te permet d'inclure un fichier que s'il ne l'a pas été avant, ça fait une vérification en fait^^
deuxième point, le validateur W3C se passe sur les pages de ton site, celles qui sont visitées, et en aucun cas sur tes fichiers séparément. Par exemple, menu.php ne contient que du php et rien d'autre, ça n'a pas de sens de le faire valider, il n'est qu'un fragment des pages visitées. Il faut donc valider par exemple index.php, qui prend l'en tête, le corps, le pieds, et les ajouts de différents fichiers fait en include, tout ça étant regroupé dans la même page internet, ça fonctionne.
Ton doctype, tu le mets uniquement dans ton fichier le 'plus haut', si la déclaration se fait dans le index, tu le mets dedans et pas ailleurs, si elle se fait dans un document type header.php, inclu dans l'index, c'est dans ce document que tu dois la faire. En d'autres termes, sur chaque page visitée, il ne doit y avoir qu'une fois le DTD et la balise html (avec head). Regarde tes codes sources via ton navigateur pour t'en aperçevoir, on se rend bien compte que tu as plusieurs fichiers inclus qui ont tous un DTD en haut^^, et c'est pas valide ;).
Session_start avant le DTD, c'est pas grave, il m'arrive de le faire aussi. C'est du php pure qui n'affiche rien, l'important est de ne rien avoir qui s'affiche avant le DTD^^. Tu peux mettre d'autres instructions, si elles n'affichent rien à ce moment là (avant la balise body). Des contrôles comme tu disais, ou des includes si tu bosses en POO.
Pour les css, petite recommandation: <select onclick='submit()'> et tu vires le bouton d'envoi de formulaire, du coup c'est plus rapide, plus simple pour le visiteur. Ton système de cookie pour le site sélectionné est bon. Par rapport aux feuilles css, tu peux faire ainsi:
du coup, plus de problème^^, tu peux caler autant de case '' que de feuilles CSS.
Pour le problème de compatibilité, les détections de navigateurs pour charger des css adaptées à IE ou FF ne sont pas fondamentalement fiables, il est donc plus simple et plus sûr de faire des css conformes FF puis IE (je sais, quand on débute c'est carrément reloud, mais le jeu en vaut la chandelle^^).
J'espère que j'me suis mieux fait comprendre pour le doctype^^ sinon dis le moi^^
Pour les tutos sur le net, je n'en connais pas qui vaille un vrai bouquin ;). Si tu as vraiment le courage, rends toi sur les docs officielles W3C, en html et css ce sont les références. Celle de php est très bien faite et très abordable^^.
Ensuite, même si je ne suis pas l'interlocuteur visé ;) tu fais trop de tests^^. Oublis tes tests résolution, la taille du conteneur de ton site doit faire 1024px, c'est une forme de standard appliqué compte tenu du matériel le plus utilisé à l'heure actuelle^^. Avec ça, tu n'as plus besoin de vérifier sous toutes les résolutions, sauf pour l'alignement du conteneur -mais ça, c'est déjà réglé en principe ;).
Pour la conformité: commence par Opera ou FF, les vraies références côté respect des normes. Vérifie sous IE, qui bien qu'il ne respecte pas ces normes, représente à lui tout seul plus de la moitié de parts du marché^^. Et enfin, vérifie sous Safari^^. Une fois le design de ton site bien lancé, inutile de vérifier à chaque modif^^.
premier point, on est d'accord, l'utilisation des include est judicieuse. include_once te permet d'inclure un fichier que s'il ne l'a pas été avant, ça fait une vérification en fait^^
deuxième point, le validateur W3C se passe sur les pages de ton site, celles qui sont visitées, et en aucun cas sur tes fichiers séparément. Par exemple, menu.php ne contient que du php et rien d'autre, ça n'a pas de sens de le faire valider, il n'est qu'un fragment des pages visitées. Il faut donc valider par exemple index.php, qui prend l'en tête, le corps, le pieds, et les ajouts de différents fichiers fait en include, tout ça étant regroupé dans la même page internet, ça fonctionne.
Ton doctype, tu le mets uniquement dans ton fichier le 'plus haut', si la déclaration se fait dans le index, tu le mets dedans et pas ailleurs, si elle se fait dans un document type header.php, inclu dans l'index, c'est dans ce document que tu dois la faire. En d'autres termes, sur chaque page visitée, il ne doit y avoir qu'une fois le DTD et la balise html (avec head). Regarde tes codes sources via ton navigateur pour t'en aperçevoir, on se rend bien compte que tu as plusieurs fichiers inclus qui ont tous un DTD en haut^^, et c'est pas valide ;).
Session_start avant le DTD, c'est pas grave, il m'arrive de le faire aussi. C'est du php pure qui n'affiche rien, l'important est de ne rien avoir qui s'affiche avant le DTD^^. Tu peux mettre d'autres instructions, si elles n'affichent rien à ce moment là (avant la balise body). Des contrôles comme tu disais, ou des includes si tu bosses en POO.
Pour les css, petite recommandation: <select onclick='submit()'> et tu vires le bouton d'envoi de formulaire, du coup c'est plus rapide, plus simple pour le visiteur. Ton système de cookie pour le site sélectionné est bon. Par rapport aux feuilles css, tu peux faire ainsi:
<head>
<?php
switch($_COOKIE['style']){
case 'style 1':
echo "<link href='style1.css' rel='stylesheet' type='text/css'></link>";
break;
case 'style 2':
echo "<link href='style2.css' rel='stylesheet' type='text/css'></link>";
break;
default:
echo "<link href='styleOriginal.css' rel='stylesheet' type='text/css'></link>";
break;
}
?>
</head>
du coup, plus de problème^^, tu peux caler autant de case '' que de feuilles CSS.
Pour le problème de compatibilité, les détections de navigateurs pour charger des css adaptées à IE ou FF ne sont pas fondamentalement fiables, il est donc plus simple et plus sûr de faire des css conformes FF puis IE (je sais, quand on débute c'est carrément reloud, mais le jeu en vaut la chandelle^^).
J'espère que j'me suis mieux fait comprendre pour le doctype^^ sinon dis le moi^^
Pour les tutos sur le net, je n'en connais pas qui vaille un vrai bouquin ;). Si tu as vraiment le courage, rends toi sur les docs officielles W3C, en html et css ce sont les références. Celle de php est très bien faite et très abordable^^.
Ensuite, même si je ne suis pas l'interlocuteur visé ;) tu fais trop de tests^^. Oublis tes tests résolution, la taille du conteneur de ton site doit faire 1024px, c'est une forme de standard appliqué compte tenu du matériel le plus utilisé à l'heure actuelle^^. Avec ça, tu n'as plus besoin de vérifier sous toutes les résolutions, sauf pour l'alignement du conteneur -mais ça, c'est déjà réglé en principe ;).
Pour la conformité: commence par Opera ou FF, les vraies références côté respect des normes. Vérifie sous IE, qui bien qu'il ne respecte pas ces normes, représente à lui tout seul plus de la moitié de parts du marché^^. Et enfin, vérifie sous Safari^^. Une fois le design de ton site bien lancé, inutile de vérifier à chaque modif^^.
Bon Smoking bird salut, alors voilà si t'as vu mon dernier message, je dis que j'ai eu un problème avec ma lightbox et videobox mais ça y est c'est résolu je fais mon méaculpa c'est comme ça quand on veut aller trop cite et qu'on fait des changements de chaînes de caractères sur plusieurs fichiers à la fois !!!!!!!! Bon je peux donc revenir à mes moutons, je suis entrain de virer les balises DOCTYPE de tous les documents que j'appelle par include, mais tout à coup j'ai un doute: je suis entrain de virer ceci
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="fr">
je ne me rappelle plus si je dois tout virer ou si je dois garder la balise <html ?
Pourrais-tu me répondre là-dessus, avec mes excuses si je te fais répéter mais mon soucis de lightbox ça m'a fait flipper ... quand je modifie un truc j'aime bien que les fonctionalités qui marchaient avant modifs marchent encore après car sinon c'est 1 pas en avant et 3 en arrière mais bon c'est entièrement de ma faute.
D'autre part, je crois qu'à un endroit tu me parles de regrouper mes fichiers css dans un dossier, mais là ça c'est déjà comme ça. Si tu veux, sur ma racine j'ai mon index.php et tous les .php ett en dessous j'ai un dossier css contenant tous les .css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="fr">
je ne me rappelle plus si je dois tout virer ou si je dois garder la balise <html ?
Pourrais-tu me répondre là-dessus, avec mes excuses si je te fais répéter mais mon soucis de lightbox ça m'a fait flipper ... quand je modifie un truc j'aime bien que les fonctionalités qui marchaient avant modifs marchent encore après car sinon c'est 1 pas en avant et 3 en arrière mais bon c'est entièrement de ma faute.
D'autre part, je crois qu'à un endroit tu me parles de regrouper mes fichiers css dans un dossier, mais là ça c'est déjà comme ça. Si tu veux, sur ma racine j'ai mon index.php et tous les .php ett en dessous j'ai un dossier css contenant tous les .css
J'ai monté mes modifs concernant le DOCTYPE sur le site https://www.sfr.fr/fermeture-des-pages-perso.html à l'occasion si tu peux jeter un coup d'oeil
Smoking bird: ok je comprends mieux maintenant en fait c'est un peu ce que j'avais fait au début (je parle du DOCTYPE) et comme un c.. j'ai voulu valider tous mes fichiers .php sue W3C et c'est à cause de ça que j'ai rajouté la balise DOCTYPE partout. Bon je revoie ça en tout cas ça m'aide bien ce que tu me dis. Juste un détail, quand tu me dis "Regarde tes codes sources via ton navigateur" moi j'ai FF et j'avais téléchargé firebug mais avec ça je ne vois pas plusieurs fois mes DOCTYPE peux-tu me dire ce que tu utilises toi pour voir le code via ton navigateur stp ?
Et la 2ième chose c'est le pb de cadrage entre IE et FF tu me dis (je sais, quand on débute c'est carrément reloud, mais le jeu en vaut la chandelle^^). là je veux bien faire ce que tu me dis comme ça je ne m'emmerderais pas dans mon code à faire des tests dans tous les sens pour savoir si c'est IE ou FF mais le pb c'est que je n'ai pas trouvé de soluce. Dans mon corps je n'ai pas mis de margin-top et dans ce cas c'est ok sur FF et pas sur IE. Si je mets un margin-top: -18px; c'est ok pour IE et FF il viens se mettre sur le menu ce qui est parfaitement logique. Je ne sais pas si tu as une idée, comme ça c'est peut-être pas évident. Il faut peut-être passer par des positionnements autres. Voilà le css correspondant
#corps
{
margin-top: -18px; <------ ce margin-top il n'y est pas je viens de le mettre juste pour tester
margin-left: auto;
margin-right: auto;
height: 470px;
width: auto;
background-color: rgb(82,147,128);
overflow:auto;
border-right: solid white 3px;
border-bottom: solid white 3px;
text-align: center;
}
Bon bref toujours est-il que je te remercie pour ton aide ça me permet d'y voir plus clair.
Et la 2ième chose c'est le pb de cadrage entre IE et FF tu me dis (je sais, quand on débute c'est carrément reloud, mais le jeu en vaut la chandelle^^). là je veux bien faire ce que tu me dis comme ça je ne m'emmerderais pas dans mon code à faire des tests dans tous les sens pour savoir si c'est IE ou FF mais le pb c'est que je n'ai pas trouvé de soluce. Dans mon corps je n'ai pas mis de margin-top et dans ce cas c'est ok sur FF et pas sur IE. Si je mets un margin-top: -18px; c'est ok pour IE et FF il viens se mettre sur le menu ce qui est parfaitement logique. Je ne sais pas si tu as une idée, comme ça c'est peut-être pas évident. Il faut peut-être passer par des positionnements autres. Voilà le css correspondant
#corps
{
margin-top: -18px; <------ ce margin-top il n'y est pas je viens de le mettre juste pour tester
margin-left: auto;
margin-right: auto;
height: 470px;
width: auto;
background-color: rgb(82,147,128);
overflow:auto;
border-right: solid white 3px;
border-bottom: solid white 3px;
text-align: center;
}
Bon bref toujours est-il que je te remercie pour ton aide ça me permet d'y voir plus clair.
sur tes pages, n'importe quel navigateur, clic droit -> afficher la source ;)
En refaisant le test à l'instant, j'me rends compte que tu as aussi des css qui se répète un peu n'importe où dans ton doc. C'est pareil pour les css, faut tout regrouper soit dans la balise head, soit dans un fichier ;) sinon c'est le merdier et on s'en sort plus :D
Pour tes problèmes de compatibilité de navigateurs en css, et je le martèle, cleaner tes css et tes DTD est une première étape indispensable^^. Regroupe bien tous tes css dans un fichier, et vérifie la source de tes pages pour t'en assurer (pareil pour vérifier que t'as pas oublié un DTD dans un de tes includes ;) ). Là, tu éviteras tout conflit interne et ton action n'en sera que plus ajustée.
J'ai vu que tu commentais tes css et ton html, excellente habitude, ne la perd pas :p, en plus ça rend la relecture par des tiers plus agréable ;)
Tu as la webdevelopper toolbar sous firefox? n'hésite pas à la télécharger sinon, c'est l'outil qu'il te faut pour développer tes css^^. Une fois que tes docs seront clean côté DTD et CSS, préviens moi, que je jette un coup d'oeil à tes css pour voir comment on peut améliorer tout ça et rendre le truc compatible^^
Et sinon, de rien pour l'aide ;), c'est un plaisir^^
En refaisant le test à l'instant, j'me rends compte que tu as aussi des css qui se répète un peu n'importe où dans ton doc. C'est pareil pour les css, faut tout regrouper soit dans la balise head, soit dans un fichier ;) sinon c'est le merdier et on s'en sort plus :D
Pour tes problèmes de compatibilité de navigateurs en css, et je le martèle, cleaner tes css et tes DTD est une première étape indispensable^^. Regroupe bien tous tes css dans un fichier, et vérifie la source de tes pages pour t'en assurer (pareil pour vérifier que t'as pas oublié un DTD dans un de tes includes ;) ). Là, tu éviteras tout conflit interne et ton action n'en sera que plus ajustée.
J'ai vu que tu commentais tes css et ton html, excellente habitude, ne la perd pas :p, en plus ça rend la relecture par des tiers plus agréable ;)
Tu as la webdevelopper toolbar sous firefox? n'hésite pas à la télécharger sinon, c'est l'outil qu'il te faut pour développer tes css^^. Une fois que tes docs seront clean côté DTD et CSS, préviens moi, que je jette un coup d'oeil à tes css pour voir comment on peut améliorer tout ça et rendre le truc compatible^^
Et sinon, de rien pour l'aide ;), c'est un plaisir^^