Propriété background qui ne fonctionne pas

Propriété background qui ne fonctionne pas - HTML/CSS - Programmation

Marsh Posté le 09-06-2010 à 16:48:53    

Bonjour,
Voila j'ai un petit soucis avec mon CSS. Je ne sais pas trop comment expliquer la situation alors je vais faire court:
L'image background d'un de mes div ( le principal ) ne s'affiche pas sur mon hébergeur, alors qu'en local ça marche, j'ai essayé de trifouiller un peu partout rien n'y fait !
Voici le code :

Code :
  1. #page {
  3.         position: relative;
  4.         height:100%;
  5. width: 100%;
  6. margin: auto;
  7.         margin-left: 13%;
  8. text-align: left;
  9. background-image: url(images/pagebg3.gif) repeat-y;
  11. }


Je ne sais pas comment faire vu qu'en local ça fonctionne. Pour vous donner une idée plus concrete:
http://www.arborescences.net < Le site en ligne
 
Et ici en local  v
http://img192.imageshack.us/img192/2658/erelp.jpg
 
Voila, si quelqu'un a une idée  :D , merci d'avance!

Reply

Marsh Posté le 09-06-2010 à 16:48:53   

Reply

Marsh Posté le 09-06-2010 à 18:24:52    

Avec une url en 127.0.0.1, tu ne risque pas d'aller loin.
Mets plutôt tes chemins en relatif

Reply

Marsh Posté le 09-06-2010 à 19:22:24    

Bon, j'ai mieux regardé.
Tes déclarations de background-images ne sont pas prise en compte.
Ceci fontionne

Code :
  1. #footer {
  2.     background-image: url(images/footerbg3.png);
  3.     background-repeat: no-repeat;
  4. }
 

Et ce cas là non car tu mélange du repeat dans image

Code :
  1. #page {
  2.     background-image: url(images/pagebg3.gif) repeat-y; 
  3. }
 

Le meilleur étant la notation raccourcie

Code :
  1. #page {
  2.     background: url(images/pagebg3.gif) repeat-y; 
  3. }
 



Message édité par David Boring le 09-06-2010 à 19:22:46
Reply

Marsh Posté le 10-06-2010 à 10:21:16    

Merci pour vos réponses j'ai pu regler le soucis.  
Il me reste tout de même un problème sous firefox tout est bien centré, mais ie me fait une marge à gauche énorme, je ne trouve pas comment la réduire.
Une idée  :ange:

Reply

Marsh Posté le 10-06-2010 à 10:57:40    

c'est un magnifique bricolage :o

Code :
  1. #page {
  2.         margin-left: 13%;
  3.         position: absolute;
  4. ....
  5. }
 

vire moi c'est deux propriétés pourries
tu m'ajoutes à la place

Code :
  1. margin:0 auto;
  2. width:820px;


et voila ton site centré.

 

ton site a un très très très gros problème, tu as monté tout le site qui est censé avoir une largeur fixe, sans poser de largeur fixe sur le conteneur principal o_O


Message édité par gatsu35 le 10-06-2010 à 11:00:48

---------------
Blablaté par Harko
Reply

Marsh Posté le 10-06-2010 à 11:04:48    

Merci gatsu, ça règle mon problème de marge à gauche sous ie. Cependant le site n'est pas centré, du coup il est collé à gauche.
J'ai pas trop envie de reprendre tout mon CSS, je sais qu'il y a pas mal de problème mais bon... faudrait qu'il soit plié aujourd'hui alors bon   :whistle: Ca restera comme ça tant pis  :)

Reply

Marsh Posté le 10-06-2010 à 11:06:47    

pas besoin de reprendre tout ton CSS, pour le centrage sous IE :
ton site n'a pas du tout de doctype, du coup IE est en quiskmode, tu rajoutes un text-align:center sur body
et sur #page un text-align:left;

 

rahhhh c'est quoi ce code
tu as 2 fois le <head> dans ta page
regarde le code source généré. tu as bien mis un doctype sur ton site, mais tu as ton header qui est appelé 2 fois, une fois avant le doctype, une fois dans le code HTML normalement.

 

valide ton code HTML !!!!!


Message édité par gatsu35 le 10-06-2010 à 11:07:54

---------------
Blablaté par Harko
Reply

Marsh Posté le 10-06-2010 à 11:23:04    

Je ne vois pas le deuxième head, jdois pas regarder au bon endroit.
J'obtiens 3 erreurs pendant la validation de mon code:
-Unable to Determine Parse Mode!
-No DOCTYPE found, and unknown root element. Aborting validation.
-No Character encoding declared at document level
L'histoire du doctype j'ai jamais su comment ça fonctionnait alors c'est pas étonnant...
 
Pour ce qui est des text-align:center; sur le body et le text-align:left; sur page, ils y sont bien pourtant

Reply

Marsh Posté le 10-06-2010 à 11:42:07    

tain ce bricolage [:pingouino]

 

Quand on arrive sur le .com on a une page comme ça

Code :
  1. <head>
  2. <meta name="description" content="entreprise de maintenance informatique ‡ Marmande">
  3. <meta name="keywords" content="Arborescences, Arborescences ‡ Marmande, assemblage ordinateur, assemblage pc marmande,maintenance informatique Marmande, sÈcuritÈ informatique Marmande, conseil informatique Marmande, vente materiel informatique Marmande, rÈparation ordinateur, informatique lot et garonne ">
  4. <meta name="Description" content="global">
  5. <meta name="robots" content="index, follow">
  6. <meta name="revisit-after" content="5 days">
  7. <meta name="identifier-url" content="http://www.arborescences.net">
  8. <meta name="author" content="arborescences">
  9. <meta name="copyright" content="arborescences.net">
  11. </head>
  12. <script type="text/javascript">
  13.  
  14. function myLoad() {
  15. document.getElementById('resolution').value = screen.width;
  16.   document.valeur.submit();
  17. }
  19. </script>
  21. <body onload="myLoad()">
  22. <form name="valeur" action="http://www.arborescences.net/?page_id=4" method="POST">
  23. <input type="HIDDEN" name="resolution" id="resolution" value=""></input>
  24. </form>
  25. </body>
 


et cette page nous redirige via une solution dégueulasse vers la page d'accueil principale :/
c'est crade :p

 

Je vois pas en quoi ça peut t'être utile, je me souviens que tu étais venue pour demander une solution pour la largeur de ton site. Et tout le monde t'avais proposé une solution de MERDE, je t'en avais donnée une super propre.

 

Ensuite dans le code HTML de ton site regarde bien et ouvre les yeux :

 
Code :
  1. <head>
  2. <meta name="description" content="entreprise de maintenance informatique � Marmande">
  3. <meta name="keywords" content="Arborescences, Arborescences � Marmande, assemblage ordinateur, assemblage pc marmande,maintenance informatique Marmande, s�curit� informatique Marmande, conseil informatique Marmande, vente materiel informatique Marmande, r�paration ordinateur, informatique lot et garonne ">
  4. <meta name="Description" content="global">
  5. <meta name="robots" content="index, follow">
  6. <meta name="revisit-after" content="5 days">
  7. <meta name="identifier-url" content="http://www.arborescences.net">
  8. <meta name="author" content="arborescences">
  9. <meta name="copyright" content="arborescences.net">
  11. </head>
  12. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  13. <html xmlns="http://www.w3.org/1999/xhtml">
  15. <head profile="http://gmpg.org/xfn/11">
  17. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  19. <title>Arborescences   &raquo; L&#8217;Entreprise</title>
  20. <meta name="generator" content="WordPress 2.9.2" /> <!-- leave this for stats -->
  21. <link rel="alternate" type="application/rss+xml" title="Arborescences RSS Feed" href="http://www.arborescences.net/?feed=rss2" />
  22. <link rel="pingback" href="http://www.arborescences.net/xmlrpc.php" />
  24.  <link rel='archives' title='juin 2010' href='http://www.arborescences.net/?m=201006' />
  28.         <link rel="stylesheet" href="http://www.arborescences.net/wp-content/themes/greenie-10/style.css" type="text/css" media="screen" />
  29.     <link rel="shortcut icon" href="http://www.arborescences.net/wp-content/themes/greenie-10/favicon.ico"/>
  32. <link rel="alternate" type="application/rss+xml" title="Arborescences &raquo; L&#8217;Entreprise Flux des commentaires" href="http://www.arborescences.net/?feed=rss2&amp;page_id=4" />
  33. <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.arborescences.net/xmlrpc.php?rsd" />
  34. <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.arborescences.net/wp-includes/wlwmanifest.xml" />
  35. <link rel='index' title='Arborescences' href='http://www.arborescences.net' />
  36. <meta name="generator" content="WordPress 2.9.2" />
  37. <link rel='canonical' href='http://www.arborescences.net/?page_id=4' />
  38. </head>
 

Tu ne vois pas quelque chose qui cloche là ?

 


ET même le flux RSS contient un <head> généré, mais c'est n'importe quoi

Code :
  1. <head>
  2. <meta name="description" content="entreprise de maintenance informatique ‡ Marmande">
  3. <meta name="keywords" content="Arborescences, Arborescences ‡ Marmande, assemblage ordinateur, assemblage pc marmande,maintenance informatique Marmande, sÈcuritÈ informatique Marmande, conseil informatique Marmande, vente materiel informatique Marmande, rÈparation ordinateur, informatique lot et garonne ">
  4. <meta name="Description" content="global">
  5. <meta name="robots" content="index, follow">
  6. <meta name="revisit-after" content="5 days">
  7. <meta name="identifier-url" content="http://www.arborescences.net">
  8. <meta name="author" content="arborescences">
  9. <meta name="copyright" content="arborescences.net">
  11. </head>
  12. <br />
  13. <b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /var/www/vhost/arborescences.net/home/html/index.php:4) in <b>/var/www/vhost/arborescences.net/home/html/wp-includes/feed-rss2.php</b> on line <b>8</b><br />
  14. <?xml version="1.0" encoding="UTF-8"?>
  15. <rss version="2.0"
  16. xmlns:content="http://purl.org/rss/1.0/modules/content/"
  17. xmlns:wfw="http://wellformedweb.org/CommentAPI/"
  18. xmlns:dc="http://purl.org/dc/elements/1.1/"
  19. xmlns:atom="http://www.w3.org/2005/Atom"
  20. xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
  21. xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
  22. >
  24. <channel>
  25. <title>Arborescences</title>
  26. <atom:link href="http://www.arborescences.net/?feed=rss2" rel="self" type="application/rss+xml" />
  27. <link>http://www.arborescences.net</link>
  28. <description>Informatique, Maintenance, Sécurité, Conseil, Vente,…</description>
  29. <lastBuildDate>Wed, 09 Jun 2010 13:23:55 +0000</lastBuildDate>
  30. <generator>http://wordpress.org/?v=2.9.2</generator>
  31. <language>en</language>
  32. <sy:updatePeriod>hourly</sy:updatePeriod>
  33. <sy:updateFrequency>1</sy:updateFrequency>
  34.   <item>
  35.  <title>Bonjour tout le monde !</title>
  36.  <link>http://www.arborescences.net/?p=1</link>
  37.  <comments>http://www.arborescences.net/?p=1#comments</comments>
  38.  <pubDate>Wed, 09 Jun 2010 13:23:55 +0000</pubDate>
  39.  <dc:creator>admin</dc:creator>
  40.    <category><![CDATA[Non class√©]]></category>
  42.  <guid isPermaLink="false">http://www.arborescences.net/?p=1</guid>
  43.  <description><![CDATA[Bienvenue dans WordPress. Ceci est votre premier article. Modifiez-le ou supprimez-le, puis lancez-vous !
  44. ]]></description>
  45.   <content:encoded><![CDATA[<p>Bienvenue dans WordPress. Ceci est votre premier article. Modifiez-le ou supprimez-le, puis lancez-vous !</p>
  46. ]]></content:encoded>
  47.   <wfw:commentRss>http://www.arborescences.net/?feed=rss2&amp;p=1</wfw:commentRss>
  48.  <slash:comments>1</slash:comments>
  49.  </item>
  50. </channel>
  51. </rss>
 

Et super l'image en page d'accueil qui fait 1Mo et qui est en 3570x2214 [:pingouino]


Message édité par gatsu35 le 10-06-2010 à 11:45:40

---------------
Blablaté par Harko
Reply

Marsh Posté le 10-06-2010 à 11:48:06    

Il faut venir nous voir avant de faire de faire un truc qui tient avec des bouts de ficelles :/


---------------
Blablaté par Harko
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed