Style CSS - Adapter site au visiteur
zevinny
Messages postés
164
Date d'inscription
Statut
Membre
Dernière intervention
-
zevinny Messages postés 164 Date d'inscription Statut Membre Dernière intervention -
zevinny Messages postés 164 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Il existe un post expliquant la manière de mettre un CSS en place afin chaque utilisateur puisse voir le site en son entièreté par rapport à sa résolution. J'ai suivi ces étapes mais je n'y parviens pas!
Je met mon écran à 1024 par 768 et je n'obtient pas le résultat désiré!
Vous savez, quand on maintient le bouton ctrl + le scroll de la souris on sait aisément diminuer ou augmenter la taille de la pge wege web, donc c'est possible mais je ne sais pas comment!
Voici mon code CSS (peut être pas au top mais assez basic)
je pense que je doit travailler avec body, mais si je suis les étapes ça ne fait pas grand chose... Mon div principal se nomme "maison" il ne faut pas oublier que j'ai 2 menus (pour ne pas compliquer la chose)...
L'un de vous saurait-il m'aider?
Il existe un post expliquant la manière de mettre un CSS en place afin chaque utilisateur puisse voir le site en son entièreté par rapport à sa résolution. J'ai suivi ces étapes mais je n'y parviens pas!
Je met mon écran à 1024 par 768 et je n'obtient pas le résultat désiré!
Vous savez, quand on maintient le bouton ctrl + le scroll de la souris on sait aisément diminuer ou augmenter la taille de la pge wege web, donc c'est possible mais je ne sais pas comment!
Voici mon code CSS (peut être pas au top mais assez basic)
body { background-color: #990033; background-attachment: fixed; background-image: url(images/terrainfond.jpg); background-repeat: no-repeat; background-position: center 10%; margin: 0; padding: 0; overflow: auto; } ul#menu { position : absolute; margin : auto; padding : 1px 1px 0; width : 200px; top : 350px; font-size : 1.2em; border : 1px solid #990033; font-family: "Times New Roman", Times, serif; } ul#menu li { list-style-type : none; /* Aucunes puces associées */ margin-bottom : 1px; /* Ajout d'une marge en bas */ } ul#menu li a { width : auto !important; /* Largeur interprétée par tous les navigateurs excepté IE6 et inférieur */ width : 100%; /* largeur interprétée par IE6 et inférieur */ padding : 4px; /* Définition des marges intérieures */ text-decoration : none; /* Suppression du soulignement */ display : block; /* Définition sous forme de block */ } ul#menu li a:link { color : #990033; /* Couleur de la police */ background-color : #F5FBFF; /* Définition de la couleur de fond */ border : 1px solid #3399CC; /* Ajout d'une bordure */ border-left : 4px solid #39C; /* Rajout de la bordure gauche */ } ul#menu li a:visited { color : #990033; /* Changement de la couleur de la police initiale */ background-color : #F5FBFF; /* Changement de la couleur de fond initiale */ border : 1px solid #3399CC; /* Ajout d'une bordure */ border-left : 4px solid #39C; /* Changement de la couleur de la bordure initiale */ } ul#menu li a:hover { color : #993; /* Changement de la couleur de la police initiale */ background-color : #f4fbdc; /* Changement de la couleur de fond initiale */ border : 1px solid #993; /* Ajout d'une bordure */ border-left : 4px solid #993; /* Changement de la couleur de la bordure initiale */ } ul#menu li a:active { color : #FFC300; /* Changement de la couleur de la police initiale */ background-color : #FDFFA5; /* Changement de la couleur de fond initiale */ border : 1px solid #FFC300; /* Ajout d'une bordure */ border-left : 4px solid #FFC300; /* Changement de la couleur de la bordure initiale */ } div#title{ position: relative; top: 12px; left: 260px; width:750px; height:24px; text-align: center; font-family: Papyrus; font-size: 24px; min-width: 16em; } div#maison{ position:relative; top: 58px; left: 280px; width: 90%; height:600px; min-width: 400px; max-width: 800px; overflow: auto; } div#maison h1 { font-size: 1.5em; margin: 0 0 1em; font-family: Papyrus; } div#maison a { color: blue; text-decoration: none; } div#maison a:hover { color:pink; text-decoration:none } div#security{ position: absolute; left: 70px; width:150px; top: 510px; font-family: "Courier New", Courier, mono; font-size: 14px; font-style: italic; color: #000000; text-align: center; } div#menumaison{ position:absolute; top: 25px; left: 20px; width: auto; height:350px; min-width: 16em; overflow: auto; } div#menumaison a.B { display: block; width: 168px; height: 87px; background-image: url('../maison/images/terrain.gif') } div#menumaison a.B:hover { background-image: url('../maison/images/plan.gif') }
je pense que je doit travailler avec body, mais si je suis les étapes ça ne fait pas grand chose... Mon div principal se nomme "maison" il ne faut pas oublier que j'ai 2 menus (pour ne pas compliquer la chose)...
L'un de vous saurait-il m'aider?
A voir également:
- Style CSS - Adapter site au visiteur
- Site comme coco - Accueil - Réseaux sociaux
- Site de telechargement - Accueil - Outils
- Style word - Guide
- Quel site remplace coco - Accueil - Réseaux sociaux
- Site x - Guide
27 réponses
DIV sans hésitation ! Enfin après ça dépend pourquoi ... Mais c'est clairement dit partout que les tableaux ne doivent pas servir de mise en page ... Un tableau doit être utilisé pour classer des donnés, pas pour décorer ... Je me disais "mais ouais zyva je fais ce que je veux" mais en fait utiliser table ou lieu de div c'est beaucoup plus ch*ant ^^ Div tu en fais ce que tu veux ... Tu le domines ! Muhahaha
C'est vrai, le tableau c'est foireux, mais bon ça ne m'aide pas!
pff j'attendrai d'autres réponses à ce sujet... car j'y arrive pas!
pff j'attendrai d'autres réponses à ce sujet... car j'y arrive pas!
Essaye de simplifier ton site .... Tu sais, pas besoin de faire compliqué pou que ce soit ergonomique et jolie !
Regarde moi: http://eiewn.e3b.org, et bha j'ai remarqué qu'en 800x600 il s'affichait pareil qu'en 1024x768 ou 1200x800.
Et vas-y je t'en prie te gêne pas pour jetez un coup d'oeil à la CSS ^^
Regarde moi: http://eiewn.e3b.org, et bha j'ai remarqué qu'en 800x600 il s'affichait pareil qu'en 1024x768 ou 1200x800.
Et vas-y je t'en prie te gêne pas pour jetez un coup d'oeil à la CSS ^^
Pas mal, merci!
les dessins et images sont complexe je pense quand on l'utilise en fond d'écran.
Je dois m'y mettre afin de trouve une petite solution, mais je tente de le faire plus simple. espérons que se sera mieux!
les dessins et images sont complexe je pense quand on l'utilise en fond d'écran.
Je dois m'y mettre afin de trouve une petite solution, mais je tente de le faire plus simple. espérons que se sera mieux!
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Re mouaaaa...
Bête question, est-il conseillé d'utiliser des images en fond d'écran avec une fonction "no-repeat"?
Est il préférable d'adapter quelque chose d'autre fond blanc en tableau ou en div? C'est un peu monotone d'utiliser ce genre d'option... Allé quand j'utilise le div en %et que je passe en un autre mode je passe audelà de mon image!
j'ai réussi à adapter comme je voulais en 1024 X 768 mais plus grande résoulution ché pas cha du tout!
:-(
Bête question, est-il conseillé d'utiliser des images en fond d'écran avec une fonction "no-repeat"?
Est il préférable d'adapter quelque chose d'autre fond blanc en tableau ou en div? C'est un peu monotone d'utiliser ce genre d'option... Allé quand j'utilise le div en %et que je passe en un autre mode je passe audelà de mon image!
j'ai réussi à adapter comme je voulais en 1024 X 768 mais plus grande résoulution ché pas cha du tout!
:-(
Oula je sais plus de quoi il s'agit, si tu pouvais me donner le lien de la page ( si ça te dérange pas)
Ah oui je me souviens de toi héhé ! vas y supprime le lien j'ai marqué la page, donc, peux-tu représenter ton problème ? ^^
oui oui!
Encore moi comme je disais... ça avance bien mais bon le côté fun pour moi est de poster justement les avancement enfin soit, dons ma famille il y a encore des utilisateurs principalement en 1024x768 et je me suis dis que j'allais bien adapter le site à leur résolution.
Je demande un peu de trop mais voilà ce qu'il se passe, dans la petite résolution (1024) je constate que ça se passe approximativement bien le titre entre dans le texte (DIV) et c'est alors illisible. Mais quand je repasse à la grande résolution, ben tout sort de l'image centrale! Alors voici à quoi j'avais pensé mais je ne sais pas si c'est possible:
J'ai une image centrale que j'aimerais garder (si c'est pas possible, ben tanpis pour moi) à cheval sur le fond bordeau et l'image, les deux menus, par la suite le div "texte" et div "titre" j'ai un copyrigt aussi mais on s'en soucie peu pour l'instant. et je sais que c'est minime ce que je désire mais je trouve que quand on fait quelque chose on le fait bien :-)!
Mais j'ai du mal! Je tiens à stipuler que j'ai mis des "%" partout si il y a encore des "Px" c'est un oubli mais je penses pas...
Encore moi comme je disais... ça avance bien mais bon le côté fun pour moi est de poster justement les avancement enfin soit, dons ma famille il y a encore des utilisateurs principalement en 1024x768 et je me suis dis que j'allais bien adapter le site à leur résolution.
Je demande un peu de trop mais voilà ce qu'il se passe, dans la petite résolution (1024) je constate que ça se passe approximativement bien le titre entre dans le texte (DIV) et c'est alors illisible. Mais quand je repasse à la grande résolution, ben tout sort de l'image centrale! Alors voici à quoi j'avais pensé mais je ne sais pas si c'est possible:
J'ai une image centrale que j'aimerais garder (si c'est pas possible, ben tanpis pour moi) à cheval sur le fond bordeau et l'image, les deux menus, par la suite le div "texte" et div "titre" j'ai un copyrigt aussi mais on s'en soucie peu pour l'instant. et je sais que c'est minime ce que je désire mais je trouve que quand on fait quelque chose on le fait bien :-)!
Mais j'ai du mal! Je tiens à stipuler que j'ai mis des "%" partout si il y a encore des "Px" c'est un oubli mais je penses pas...
HTML:
CSS:
ça c'est juste pour le titre qui rentre dans le texte (ça me le fait). Normalement ça devrait le résoudre ...
Pour ton image de fond ça dépend de sa résolution. Le mieux serait qu'elle soit à 800x600 (la plus basse résolution) et qu'avec background-repeat et background-position tu la centre. Après tu peux aussi utiliser background-attachment que tu utilise déjà.
<div id="title" class="element"> .... </div> <div id="maison" class="element"> ... </div>
CSS:
.element { margin-top: 3%; }
ça c'est juste pour le titre qui rentre dans le texte (ça me le fait). Normalement ça devrait le résoudre ...
Pour ton image de fond ça dépend de sa résolution. Le mieux serait qu'elle soit à 800x600 (la plus basse résolution) et qu'avec background-repeat et background-position tu la centre. Après tu peux aussi utiliser background-attachment que tu utilise déjà.
merci!
C'est déjà ça mais bon j'y connais trop peu j'arrête pour aujourd'hui!!
c'est lassant de ne pas y arriver :-(
je vais prendre un truc tout beau tout bien fait et le reste on verra! nah! il n'y a plus de plaisir à ça alors, mais je dois avouer que ça devient un calvert de faire ce genre de chose ne l'utilisat pas tout les jours...
Enfin, @ plus et merci pour ton aide
C'est déjà ça mais bon j'y connais trop peu j'arrête pour aujourd'hui!!
c'est lassant de ne pas y arriver :-(
je vais prendre un truc tout beau tout bien fait et le reste on verra! nah! il n'y a plus de plaisir à ça alors, mais je dois avouer que ça devient un calvert de faire ce genre de chose ne l'utilisat pas tout les jours...
Enfin, @ plus et merci pour ton aide
Huhu, je t'ai espionné au fur et à mesure que tu modifiais ton css :p Et je pense que ton javascript pose un peu problème ... Mais y doit y avoir plein de petites erreurs dans ton code etc ... Si j'avais du temps je voudrais bien te le faire. M'enfin bon, tous les trucs à effets feux d'artifices ça fait toujours tout foirer ...
hahaaa... Un espion!
J'ai une partie NL qui n'a pas de javascript... peut -être qui si je modifie mes lignes là, que ça devrait être bon!
Je vais tenter sur ces pages.
Voilà qui est fait! mais ça s'arrange pas, en fait quand je vois d'autre sites la page s'adapte, mais chez moi ça reste identique et une barre scroll apparait en dessous.
bah j'y arriverai hihi!
J'ai une partie NL qui n'a pas de javascript... peut -être qui si je modifie mes lignes là, que ça devrait être bon!
Je vais tenter sur ces pages.
Voilà qui est fait! mais ça s'arrange pas, en fait quand je vois d'autre sites la page s'adapte, mais chez moi ça reste identique et une barre scroll apparait en dessous.
bah j'y arriverai hihi!
J'ai une idée... Je recommence la page à zéro, laissant les DIV avec leur border!
Tout d'abord, est il mieux de travailler avec une image de fond ou plutôt déconseillé?
Tout d'abord, est il mieux de travailler avec une image de fond ou plutôt déconseillé?
C'est comme tu le veux ça l'ami ^^
Y à pas vraiment de conseillé ou de déconseillé ...
Juste que si y un problème avec ton image elle ne s'affiche pas (ou si la resolution est mal adapté c'est pas confortable), enfin des broutilles fais comme tu le veux.
Comme je l'ai dis plus haut, l'idéal pour ton image si elle doit recouvrir tout la fenêtre serait qu'elle soit en 800x600 ...
Et encore avec les petits iBook qui sortent faudra faire plus petit ! x)
Ce que je ferais: image en 800x600 et une couleur en contraste avec l'image qui apparaitra pour les résolutions supérieur.
Bref, pour ta question. Fais comme tu veux ça ne change rien, le plus simple est de mettre une couleur de fond, c'est tout.
Y à pas vraiment de conseillé ou de déconseillé ...
Juste que si y un problème avec ton image elle ne s'affiche pas (ou si la resolution est mal adapté c'est pas confortable), enfin des broutilles fais comme tu le veux.
Comme je l'ai dis plus haut, l'idéal pour ton image si elle doit recouvrir tout la fenêtre serait qu'elle soit en 800x600 ...
Et encore avec les petits iBook qui sortent faudra faire plus petit ! x)
Ce que je ferais: image en 800x600 et une couleur en contraste avec l'image qui apparaitra pour les résolutions supérieur.
Bref, pour ta question. Fais comme tu veux ça ne change rien, le plus simple est de mettre une couleur de fond, c'est tout.
C'est bien ce que je pensais justement... une couleur de fond et pas d'image!
C'est plus joli, mais faut choisir. Sais-tu comment centrer 2 divs?
http://www.commentcamarche.net/forum/affich 9226853 centrer 2 divs voici le sujet.
je clôturerai ce dernier une fois résolu, je ne voulais pas mélanger les deux.
le site reste le même mais si tu veux le lien "test" le voici:
"supprimé"
C'est plus joli, mais faut choisir. Sais-tu comment centrer 2 divs?
http://www.commentcamarche.net/forum/affich 9226853 centrer 2 divs voici le sujet.
je clôturerai ce dernier une fois résolu, je ne voulais pas mélanger les deux.
le site reste le même mais si tu veux le lien "test" le voici:
"supprimé"
body { background-color: #990033; background-attachment: fixed; background-image: url(images/terrainfond.jpg); background-repeat: no-repeat; background-position: center 10%; margin: 0; padding: 0; overflow: auto; }
margin et padding n se contente d'un simple 0 comme valeur, faudrait au moins rajouter une mesure.
Mais bref: http://www.commentcamarche.net/faq/sujet 4613 webmaster adapter un site a toutes les resolutions le centrer
Voilà
Oui c'est effectivement le lien que j'ai suivi!
J'ai essayé ceci hier mais j'ai mon texte qui par en dehors du DIV ou serait-ce le DIV qui s'agrandit?
Mais je peux refaire à nouveau...
J'ai essayé ceci hier mais j'ai mon texte qui par en dehors du DIV ou serait-ce le DIV qui s'agrandit?
Mais je peux refaire à nouveau...
En attendant rajoute des bordures à tes DIV pour mieux les discerner
div {border: 1px solid black;}Et voilà, tu regarde ensuite comment ils sont positionnés, tu fais tes modifs et tu supprime la propriété après :)
Est ce que je ne dois pas travailler avec des nombres négatifs?
comme expliqué ici?
https://www.webrankinfo.com/forum/t/adapter-un-site-suivant-la-resolution-de-lecran-en-css.51051/
Allé ma mise en page à l'air de bien se passer à 1200 mais quand je vais en 1024 la barre du dessous apparait! J'aimerais justement que mon site soit heu résolutionné (<= mot qui n'existe pas mais je n'en trouve pas d'autre)
comme expliqué ici?
https://www.webrankinfo.com/forum/t/adapter-un-site-suivant-la-resolution-de-lecran-en-css.51051/
Allé ma mise en page à l'air de bien se passer à 1200 mais quand je vais en 1024 la barre du dessous apparait! J'aimerais justement que mon site soit heu résolutionné (<= mot qui n'existe pas mais je n'en trouve pas d'autre)