Style CSS - Adapter site au visiteur

Fermé
zevinny Messages postés 164 Date d'inscription mardi 28 décembre 2004 Statut Membre Dernière intervention 13 février 2010 - 19 oct. 2008 à 12:26
zevinny Messages postés 164 Date d'inscription mardi 28 décembre 2004 Statut Membre Dernière intervention 13 février 2010 - 3 nov. 2008 à 14:33
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)

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:

27 réponses

Utilisateur anonyme
19 oct. 2008 à 15:21
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
1
zevinny Messages postés 164 Date d'inscription mardi 28 décembre 2004 Statut Membre Dernière intervention 13 février 2010 56
19 oct. 2008 à 16:51
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!
1
Utilisateur anonyme
19 oct. 2008 à 17:22
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 ^^
1
zevinny Messages postés 164 Date d'inscription mardi 28 décembre 2004 Statut Membre Dernière intervention 13 février 2010 56
22 oct. 2008 à 22:21
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!
1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
zevinny Messages postés 164 Date d'inscription mardi 28 décembre 2004 Statut Membre Dernière intervention 13 février 2010 56
2 nov. 2008 à 13:56
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!

:-(
0
Utilisateur anonyme
2 nov. 2008 à 14:05
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)
0
zevinny Messages postés 164 Date d'inscription mardi 28 décembre 2004 Statut Membre Dernière intervention 13 février 2010 56
2 nov. 2008 à 14:12
Voici le lien... Mais je le supprime d'ici, je préfère le garder un peu discret :-)
0
Utilisateur anonyme
2 nov. 2008 à 14:20
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 ? ^^
0
zevinny Messages postés 164 Date d'inscription mardi 28 décembre 2004 Statut Membre Dernière intervention 13 février 2010 56
2 nov. 2008 à 14:30
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...
0
Utilisateur anonyme
2 nov. 2008 à 14:46
HTML:
<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à.
0
zevinny Messages postés 164 Date d'inscription mardi 28 décembre 2004 Statut Membre Dernière intervention 13 février 2010 56
2 nov. 2008 à 15:18
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
0
Utilisateur anonyme
2 nov. 2008 à 15:21
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 ...
0
zevinny Messages postés 164 Date d'inscription mardi 28 décembre 2004 Statut Membre Dernière intervention 13 février 2010 56
2 nov. 2008 à 15:27
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!
0
zevinny Messages postés 164 Date d'inscription mardi 28 décembre 2004 Statut Membre Dernière intervention 13 février 2010 56
2 nov. 2008 à 16:45
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é?
0
Utilisateur anonyme
3 nov. 2008 à 14:15
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.
0
zevinny Messages postés 164 Date d'inscription mardi 28 décembre 2004 Statut Membre Dernière intervention 13 février 2010 56
3 nov. 2008 à 14:33
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é"
0
Utilisateur anonyme
19 oct. 2008 à 12:35
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à
-1
zevinny Messages postés 164 Date d'inscription mardi 28 décembre 2004 Statut Membre Dernière intervention 13 février 2010 56
19 oct. 2008 à 12:46
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...
-1
Utilisateur anonyme
19 oct. 2008 à 12:55
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 :)
-1
zevinny Messages postés 164 Date d'inscription mardi 28 décembre 2004 Statut Membre Dernière intervention 13 février 2010 56
19 oct. 2008 à 13:07
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)
-1