CSS crer un site extensible

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:

Code :

[#ff8c00]
body
{
background-image: url(images/fondcss.jpg);
width:auto;
height:auto;
}
[/#ff8c00]

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

Répondre

Inscrivez-vous ou connectez-vous pour masquer ceci.

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 :

Code :

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

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.

Message édité par M@cduf le 19-10-2009 à 20:02:54

------------------------------ Besoin d'aide?
Je suis là!

Répondre à M@cduf

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 !

Message édité par shuty le 19-10-2009 à 21:03:16

Répondre à shuty

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.

Code :

<table>
<tr>
<td>Image de gauche</td>
<td>Image du milieu</td>
<td>Image de droite</td>
</tr>
</table>

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

Aperçu de ton image : VOIR

Message édité par M@cduf le 20-10-2009 à 15:14:53

------------------------------ Besoin d'aide?
Je suis là!

Répondre à M@cduf

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

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 ?

Répondre à shuty

Sinon concernant le CSS je passe pas ID

Répondre à shuty

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

Message cité 1 fois

------------------------------ Besoin d'aide?
Je suis là!

Répondre à M@cduf

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

Répondre à shuty

M@cduf a écrit :

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.

------------------------------ DAS IST MEIN BLOG : ainablog.eu - Aide à la création de site web : webdevplus.uk.st
Répondre à G31

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 ?

Message cité 1 fois

Répondre à shuty

shuty a écrit :

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.

------------------------------ DAS IST MEIN BLOG : ainablog.eu - Aide à la création de site web : webdevplus.uk.st
Répondre à G31

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

Message cité 1 fois

------------------------------ Besoin d'aide?
Je suis là!

Répondre à M@cduf

M@cduf a écrit :

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

------------------------------ DAS IST MEIN BLOG : ainablog.eu - Aide à la création de site web : webdevplus.uk.st
Répondre à G31

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!

Message cité 2 fois

------------------------------ Besoin d'aide?
Je suis là!

Répondre à M@cduf

M@cduf a écrit :

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.

------------------------------ DAS IST MEIN BLOG : ainablog.eu - Aide à la création de site web : webdevplus.uk.st
Répondre à G31

Code :

body
{
background-image: url(images/fondcss.jpg);
background-repeat: repeat-x ; // image ce répétant sur l'axe des X.
width:auto;
}
#logo
{
background-image:url(images/logo.png);
background-repeat: no-repeat;
margin-bottom: 200px;
background-position:center;
height:80px;
margin-top:200px;
}
#rechercher
{
background-image:url(images/barreRecherche.png);
background-repeat: no-repeat;
height:90px;
width:435px;
margin-left:300px;
margin-top:-125px;
}

Répondre à shuty

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 :

Code :

#rechercher
{
background-image:url(images/barreRecherche.png);
background-repeat: no-repeat;
height:90px;
width:435px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -45px;
margin-left: -217.5px;
}

Message édité par G31 le 30-10-2009 à 17:34:56

------------------------------ DAS IST MEIN BLOG : ainablog.eu - Aide à la création de site web : webdevplus.uk.st
Répondre à G31

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

Répondre à shuty

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.

Code :

#rechercher
{
background-color: yellow;
}

J'ai regarde sur le code source de la page, ils ont fait comme ça pour modifier leur barre de recherche :

Code :

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

------------------------------ DAS IST MEIN BLOG : ainablog.eu - Aide à la création de site web : webdevplus.uk.st
Répondre à G31

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 !

Message édité par shuty le 30-10-2009 à 18:41:25

Répondre à shuty

Ah lol... Alors faut que tu le mette en background du champ directement, pas derrière. Et t'enlève la bordure.

------------------------------ DAS IST MEIN BLOG : ainablog.eu - Aide à la création de site web : webdevplus.uk.st
Répondre à G31

Oui mais c'est justement ce dont jarive pas à faire... :S
désolé je m'explique pas très bien...

Répondre à shuty

personne n'a d'idée pour résoudre ce mystère ?

Répondre à shuty

Ce n'est pas un problème ça. Suffit juste de faire comme je te l'ai expliqué :

Code :

#rechercher
{
background-image: url('imagedefond');
}

Message cité 1 fois

------------------------------ DAS IST MEIN BLOG : ainablog.eu - Aide à la création de site web : webdevplus.uk.st
Répondre à G31

M@cduf a écrit :

Justement les px , IE et mozilla ne le voient pas pareille.

si :spamafote:

et au fait, y'a une technique pour mettre une image de fond qui se redimensionne... faut que je retrouve le lien

Edit:
http://css-tricks.com/how-to-resiz [...] und-image/
http://css-tricks.com/examples/ImageToBackgroundImage/

Ou encore mieux: http://css-tricks.com/perfect-full [...] und-image/

Message édité par OmaR le 01-11-2009 à 19:34:14

------------------------------ Les dessins des seins ou les desseins des saints ?
Répondre à OmaR

G31 a écrit :

Ce n'est pas un problème ça. Suffit juste de faire comme je te l'ai expliqué :

Code :

#rechercher
{
background-image: url('imagedefond');
}

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 !

Répondre à shuty

CSS crer un site extensible

Forum Programmation : CSS crer un site extensible