Tom's Guide > Forum > Programmation > aide pour débutant en CSS

aide pour débutant en CSS

Forum Programmation : aide pour débutant en CSS

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
ugotang   15-11-2008 à 23:36:52

bonjour j'aimerais savoir comment faire pour avec l'aide de ma feuille CSS pour mettre une image que j'ai divisé en trois?
Merci d'avance :hello:

Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
ideal23   16-11-2008 à 00:58:56
- 0 +

bonsoir
si je comprends bien, il faire des blocs

Répondre à ideal23
CustMax   16-11-2008 à 01:03:08
- 0 +

Salut,

L'image, c'est pour faire quoi ?

Répondre à CustMax
ugotang   16-11-2008 à 01:05:13
- 0 +

enfaite pour mon header ma sidebar et mon content, j'aimerais savoir comment grâce à la feuille de style CSS mettre une image en top et en bas et pour relier le tout une image qui vas se répéter. et j'aimerais donc savoir comment faire.


Message édité par ugotang le 16-11-2008 à 01:05:54
Répondre à ugotang
ideal23   16-11-2008 à 10:31:29
- 0 +

salut
mettre une image en top et en bas et pour relier le tout une image qui vas se répéter, j'avoue que je ne comprends pas bien.
su tu veux faire un design, tu peux le découper et mettre les images en background-image: url(../images/banniere.gif); dans tes boîtes.

Répondre à ideal23
CustMax   16-11-2008 à 11:27:59
- 0 +

Alors, tu dois créer des div qui sont des blocs et dans ceux-ci tu mettra le fond que tu veux.
Genre dans le HTML

Code :
  1. <div id="header"></div>
  2. <div id="content"></div>
  3. <div id="footer"></div>


Pour afficher un bloc pour le header, un bloc pour le contenu et un autre pour le footer.

Puis tu auras dans le CSS:

Code :
  1. #header {
  2. background-image: url(./images/header.jpg);
  3. background-repeat: no-repeat;
  4. min-height: 150px;
  5. }
  7. #content {
  8. background-image:url(./images/content.jpg);
  9. background-repeat: repeat-y;
  10. min-height: 300px;
  11. }
  13. #footer {
  14. background-image:url(./images/footer.jpg);
  15. background-repeat: no-repeat;
  16. min-height: 30px;
  17. }


Sachant que le fond (background) du contenu se répetera, mais aura une taille minimal de 300px.

Message cité 1 fois
Répondre à CustMax
ugotang   16-11-2008 à 11:58:54
- 0 +

CustMax a écrit :

Alors, tu dois créer des div qui sont des blocs et dans ceux-ci tu mettra le fond que tu veux.
Genre dans le HTML

Code :
  1. <div id="header"></div>
  2. <div id="content"></div>
  3. <div id="footer"></div>


Pour afficher un bloc pour le header, un bloc pour le contenu et un autre pour le footer.

Puis tu auras dans le CSS:

Code :
  1. #header {
  2. background-image: url(./images/header.jpg);
  3. background-repeat: no-repeat;
  4. min-height: 150px;
  5. }
  7. #content {
  8. background-image:url(./images/content.jpg);
  9. background-repeat: repeat-y;
  10. min-height: 300px;
  11. }
  13. #footer {
  14. background-image:url(./images/footer.jpg);
  15. background-repeat: no-repeat;
  16. min-height: 30px;
  17. }


Sachant que le fond (background) du contenu se répetera, mais aura une taille minimal de 300px.



Merci CustMax et pour mettre 3 images dans le header par exemple il faut créer un div par images?

Répondre à ugotang
CustMax   16-11-2008 à 12:07:23
- 0 +

Pour que les trois images soient alignées, la méthode la mieux, pour moi, serait de faire un <span> par image le tout englobé dans une div.

Code :
  1. <div id="header">
  2.   <span id="header_1"></span>
  3.   <span id="header_2"></span>
  4.   <span id="header_3"></span>
  5. </div>



Je ne suis pas sur que ça marche comme il faut, mais essaye.

et tu mettra dans ton CSS:

Code :
  1. #header {
  2. min-height: valeur_a_changer px;
  3. }
  5. #header_1 {
  6. background-image: url(./images/header1.jpg);
  7. background-repeat: no-repeat;
  8. margin: 0px;
  9. }
  11. #header_2 {
  12. background-image: url(./images/header2.jpg);
  13. background-repeat: no-repeat;
  14. margin: 0px;
  15. }
  17. #header_3 {
  18. background-image: url(./images/header3.jpg);
  19. background-repeat: no-repeat;
  20. margin: 0px;
  21. }



A toi de tenter ;)

Répondre à CustMax
ugotang   16-11-2008 à 12:30:19
- 0 +

Merci CustMax, mais ça ne fonctionne pas :s

Répondre à ugotang
ugotang   21-11-2008 à 22:05:55
- 0 +

Quelqu'un aurait d'autres solutions?
Merci D'avance

Répondre à ugotang
Glu-glu   23-11-2008 à 21:14:10
- 0 +

Tu pourrais nous montrer ce que tu as essayé ? (ton feuillet de style quoi)

Et qu'est-ce qui ne fonctionne pas exactement ? Les trois images dans le header ou les images sur l'ensemble du site ?

Répondre à Glu-glu
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > aide pour débutant en CSS
Aller à :

Il y a 308 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,326 secondes
Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens