Se connecter avec
S'enregistrer | Connectez-vous

CSS crer un site extensible

Dernière réponse : dans Programmation

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

Lassé par la pub ? Créez un compte
Expert Programmation

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.
Expert Programmation

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

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 ?

Expert Programmation

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@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.

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.
Expert Programmation

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
Expert Programmation

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@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. 

  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. }

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. }

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;}

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 !

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 !
Lassé par la pub ? Créez un compte

Répondre Créer un nouveau sujet

Tom's guide dans le monde