Votre question

CSS crer un site extensible

Tags :
  • Moteur de recherche
  • Programmation
Dernière réponse : dans Programmation
19 Octobre 2009 18:54:15

bonjour, je suis entrain de creer un site et pour changer je me suis dit que j'allais creer un site qui s'adapterait à toute les résolutions en bref un site extensible comme celui ci !

Voici mon code CSS:

  1. [color=#ff8c00]
  2.  
  3. body
  4. {
  5. background-image: url(images/fondcss.jpg);
  6. width:auto;
  7. height:auto;
  8.  
  9.  
  10. }
  11. [/color]



Voici le résultat.... médiocre http://btpni.fr/easysearch/

Je comprend pas pourquoi la photo n'est pas résolutionné ...
auriez vous une idée car toute l'aprème j'ai essayé des code mais rien à faire l'image ne veut pas se dimensionné conformément à la résolution des utilisateur..

Autres pages sur : css crer site extensible

19 Octobre 2009 19:55:18

Si tu veux comme l'indique ton titre : "extensible", il faut faire des "images extensibles", la tu a créer une image avec une taille fixe donc tu peux mettre le paramètre :"auto" ça ne fonctionnera pas.

Solution :

Tu dois couper ton image, exemple de coupage : VOIR
Tu ajoutes dans ton css :

  1. body
  2. {
  3. background-image: url(images/fondcss.jpg);
  4. background-repeat: repeat-x ; // image ce répétant sur l'axe des X.
  5. width:auto;
  6. height:?; // hauteur de ton image
  7.  
  8.  
  9. }


Pour faire un site : entête, corps, bas de page ..., ton image tu dois la couper en 3.
Car ici elle se répétera sur la largeur mais pas la hauteur.

conseil : plus ton design est compliqué , plus le css sera allonger, si tu commence dans le css, créer un design plus simple.
m
0
l
19 Octobre 2009 21:02:39

Voila ce que sa donne mais du coup je perd mon effet flash :s http://worldtutoz.com/easysearch/

Il n'y a pas moyen de le gardé ?

même en créant une barre, on peut voir que la qualité de l'image ce détériore... Comment y remédié ?


En tout cas merci de la qualité de ta réponse !
m
0
l
Contenus similaires
20 Octobre 2009 15:05:52

Si tu veux garder ton effet flash, il faudra je pense passer par un tableau pour mettre ton image :

Tu met dans la colonne de droite et gauche une certaine largeur de ton image normal, et au milieu une colonne avec ton image avec l'effet flash celle-ci ne sera pas automatique mais aura une taille fixe, tandis que sur les coté la largeur sera auto.

  1. <table>
  2. <tr>
  3. <td>Image de gauche</td>
  4. <td>Image du milieu</td>
  5. <td>Image de droite</td>
  6. </tr>
  7.  
  8. </table>


Dans ton CSS bien sûr passe par ID ou CLASS.

Aperçu de ton image : VOIR
m
0
l
21 Octobre 2009 17:50:35

franchement rien à dire de rien à dire, tu est un bon ! je te félicite l'idée n'est pas conne du tout !

Bref, pour faire simple je compte créer un site qui s'orienterait sur un certain domaine j'en dit pas plus pour le moment :p 

Donc actuellement, je suis entrain de créer ce fameux site où j'utiliserai le fameux moteur de recherche personnalisé de google.

Voici un aperçus actuelle de mon site. (après ton aide bien sure )

http://worldtutoz.com/easysearch/

Maintenant ce que je voudrait, c'est adapter en terme design le moteur de recherche horrible de google.
Pour faire simple je voudrait rendre le fond du champ de texte invisible comme sa il ne se verra pas dans les champ de texte prévu dans le design. (C'est un peut dur à expliquer mais bon)
Et pour boucler le tout, remplacer le bouton rechercher par l'image que j'ai créer sur photoshop.
T'aurais pas une petite idée sur la question ?

m
0
l
21 Octobre 2009 17:51:16

Sinon concernant le CSS je passe pas ID
m
0
l
21 Octobre 2009 20:14:20

Je voix que tu à réussi à mettre ton image perso, concernant le champs, tu ajoutes le paramètre : <input style="background-color:couleur"> , et tu mets la couleur du fond de ton image comme ça on ne verra pas la différence avec le champs et ton fond.

ps: la couleur de ton fond c'est : #c0bebe
m
0
l
21 Octobre 2009 21:12:26

chose faite et refaite mais y-a pas de changement je vois d'où sa vient... Grhh je suis dessus, depuis pas mal de temps et j'ai l'impression que ca n'avance pas...
m
0
l
21 Octobre 2009 22:35:13

M@cduf a dit :
Je voix que tu à réussi à mettre ton image perso, concernant le champs, tu ajoutes le paramètre : <input style="background-color:couleur"> , et tu mets la couleur du fond de ton image comme ça on ne verra pas la différence avec le champs et ton fond.

ps: la couleur de ton fond c'est : #c0bebe

Il ne vaut mieux pas utiliser cette technique pour insérer du CSS. Le mieux ce serait dans un autre fichier ou entre les balises <head></head> de la page.
m
0
l
24 Octobre 2009 21:39:19

désolé pour l'inactivité mais j'ai eu quelque souci, dites moi, pourquoi quand je vais sur le site avec firefox sa marche bien ou du moins c'est centré mais je j'y vais avec IE sa marche pas bien ?
m
0
l
24 Octobre 2009 21:44:57

shuty a dit :
désolé pour l'inactivité mais j'ai eu quelque souci, dites moi, pourquoi quand je vais sur le site avec firefox sa marche bien ou du moins c'est centré mais je j'y vais avec IE sa marche pas bien ?

Parce que IE c'est nul... Enfin, sauf pour la dernière version ! :ange: 
Passe ton code CSS, pour voir.
m
0
l
26 Octobre 2009 19:53:16

C'est le problème de conflit avec firefox,IE et opéra.......
Quand tu fais un site pense à regarder ce que sa donne sous IE et firefox, si ça ne donne pas la même chose change de paramètre pour adapter ton site aux 2.

exemple:

Conseiller de mettre des : % que des : px.

ps: si tu veux centrer utilise : margin:auto
m
0
l
27 Octobre 2009 00:32:10

M@cduf a dit :
Conseiller de mettre des : % que des : px.

J'pense plutôt le contraire, comme les px et em. Parce que ça non plus, les navigateur ne le voient pas du même œil...
m
0
l
27 Octobre 2009 13:34:57

Justement les px , IE et mozilla ne le voient pas pareille.
Les % sont plus judicieux dans sont site puisque c'est un site extensible, si il est met par exemple un corps de 1024px, celui qui a une résolution de 1440*900 sont site ne prendra pas tous l'écran tandis que en mettant : 100%, sa règle le problème, Et croit moi 100% sur IE et mozilla c'est pareille!
m
0
l
27 Octobre 2009 14:11:28

M@cduf a dit :
Justement les px , IE et mozilla ne le voient pas pareille.
Les % sont plus judicieux dans sont site puisque c'est un site extensible, si il est met par exemple un corps de 1024px, celui qui a une résolution de 1440*900 sont site ne prendra pas tous l'écran tandis que en mettant : 100%, sa règle le problème, Et croit moi 100% sur IE et mozilla c'est pareille!

Ah, je comprend ça, mais je pensais que tu parlais des blocs.
m
0
l
30 Octobre 2009 17:22:31

  1. body
  2. {
  3. background-image: url(images/fondcss.jpg);
  4. background-repeat: repeat-x ; // image ce répétant sur l'axe des X.
  5. width:auto;
  6. }
  7.  
  8.  
  9. #logo
  10.  
  11. {
  12. background-image:url(images/logo.png);
  13. background-repeat: no-repeat;
  14. margin-bottom: 200px;
  15. background-position:center;
  16. height:80px;
  17. margin-top:200px;
  18.  
  19.  
  20.  
  21. }
  22.  
  23. #rechercher
  24.  
  25. {
  26. background-image:url(images/barreRecherche.png);
  27. background-repeat: no-repeat;
  28. height:90px;
  29. width:435px;
  30. margin-left:300px;
  31. margin-top:-125px;
  32.  
  33.  
  34. }
m
0
l
30 Octobre 2009 17:34:42

Je sais pas si c'est ça mais quand tu dis background-position, c'est par rapport au bloc ! Essaie avec un width: 100% et height: 100% avant pour #logo.

Si tu veux que ta barre #rechercher soit centrée fait ça :
  1. #rechercher
  2. {
  3. background-image:url(images/barreRecherche.png);
  4. background-repeat: no-repeat;
  5. height:90px;
  6. width:435px;
  7. position: absolute;
  8. top: 50%;
  9. left: 50%;
  10. margin-top: -45px;
  11. margin-left: -217.5px;
  12. }
m
0
l
30 Octobre 2009 17:48:59

non effet ce que je veux c'est faire comme ce site:

http://www.mozbot.fr/

C'est à dire que je voudrai pouvoir personnalisé ma barre de recherche...
Eux par exemple ont un effet sur le champ de recherche ...

m
0
l
30 Octobre 2009 17:57:30

Bah là il suffit de personnaliser l'id des éléments de ton formulaire.
Mon exemple sera très simple, mais ça marche avec n'importe quelle propriété, hein.
  1. #rechercher
  2. {
  3. background-color: yellow;
  4. }


J'ai regarde sur le code source de la page, ils ont fait comme ça pour modifier leur barre de recherche :
  1. #inp {background: url(sb-bg.gif) no-repeat!important;height: 36px;width: 380px;margin: 0px;padding: 0px;border-style: none!important;font-size: 26px;color: #303058;}
m
0
l
30 Octobre 2009 18:39:35

Ce que je voudrait plus exactement (désolé de te prendre à tête) c'est d'avoir un background juste pour le champ.
Car actuellement il y a un un back ground mais il prend en charge tout l'extérieure du champ ce que je ne veux absolument pas...

J'espère que tu m'a compris...


Merci de ton aide !
m
0
l
30 Octobre 2009 18:42:25

Ah lol... Alors faut que tu le mette en background du champ directement, pas derrière. Et t'enlève la bordure.
m
0
l
30 Octobre 2009 19:20:59

Oui mais c'est justement ce dont jarive pas à faire... :S
désolé je m'explique pas très bien...
m
0
l
30 Octobre 2009 20:53:50

personne n'a d'idée pour résoudre ce mystère ?
m
0
l
1 Novembre 2009 01:28:53

Ce n'est pas un problème ça. Suffit juste de faire comme je te l'ai expliqué :
  1. #rechercher
  2. {
  3. background-image: url('imagedefond');
  4. }
m
0
l
2 Novembre 2009 19:20:31

G31 a dit :
Ce n'est pas un problème ça. Suffit juste de faire comme je te l'ai expliqué :
  1. #rechercher
  2. {
  3. background-image: url('imagedefond');
  4. }


Je ne crois pas que l'on se soit compris mais j'ai une petite idée en tête je vais la tester et je vous tiendrai au courant !

Merci en tout cas pour l'aide !
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS