[Résolu] Safari qui explose mon site

Question

richo

27 Jul 2007 à 19:48

Bonjour,
j'ai un très gros problème d'affichage de site sur safari, il marche très bien sur firefox et IE, mais sur safari j'ai quelque chose de complètement déstructuré (photos en pièce jointe).
Pour la construction ça été fait avec dreamweaver, donc c'est pas très propre au niveau programmation, la majorité des photos ont été intégrés directement sur le index.php
il y a également une feuille css, mais je ne sais pas quoi mettre comme ligne pour une bonne interprétation du navigateur safari.
Avez-vous une idée ou pouvez-vous me mettre sur une piste...
Avez-vous également besoin du fichier index ou css ?

Modifié par richo (09 Aug 2007 - 18:39)

hitzerod

28 Jul 2007 à 20:56

La première chose à faire est de vérifier que le html et les css sont ok :

1. valider le code html
http://validator.w3.org

2. valider la feuille de style
http://jigsaw.w3.org/css-validator/

Si tout est OK, alors oui on peut regarder la css

richo

1 Aug 2007 à 04:19

Merci de ta réponse et de tes liens,
alors j'ai fait une vérification et effectivement il y a pas mal d'erreurs...

1. valider le code html : 270 erreurs

2. valider la feuille de style : autant d erreurs

si je me refaire a ces résultats j'en conclu que je dois tout recommencer et cette fois-ci à base de xhtml et de css, aurevoir les tableaux Smiley langue

c'est quand même bizarre qu'avec IE et FF je n'ai pas ce problème...
y'a t il quelqu'un pour m'aider ... Smiley biggol

richo

5 Aug 2007 à 04:43

bonjour
Apres une semaine de lecture de tuto sur le site, je me suis lancé a la semi réécriture en css.
"semi" car c'est un peu trop complexe pour faire tout en css.
J'ai commencé a faire mon gabarie a base de div avec mise en forme en css, mais a la mise en ligne de la page, le css n'est pas pris en compte laissant just les mots ecrit dans les div apparaitre ... Smiley decu

alors avant d'allé plus loin j'aimerai bien régler et surtout comprendre pourquoi ca ne marche pas ...
le lien html
http://www.rgdesign.fr/ok.html
le lien css
http://www.rgdesign.fr/template_css2.css

Merci Smiley smile

Gihef

5 Aug 2007 à 07:15

Bonjour,

Ça ne marche pas parce que tu as laissé traîner quelques défauts.

#header {
	background: 
#bloc_gauche {

devrait être

[#orange]/*[/#]#header {
	background: [#orange]*/[/#]
#bloc_gauche {

ou

#header {
	background: [#orange]quelque chose;[/#]
      [#orange]}[/#]
#bloc_gauche {

Et parce que tu as 14 <div> et 16 </div>.

<body>
 <[#red]/[/#]div>

semble devoir être

<body>
 <div>

Et puis, quelques précisions :
— il est préférable d'encadrer de " " les noms de polices comportant des espaces —> "Trebuchet MS"
— évite les pt comme unité “font-size:8pt”
— préfère terminer chaque ligne, même la dernière d'un “;”. Ça évite d'avoir à chercher ensuite le petit défaut qui…
— tu peux remplacer toutes les couleurs comme “#000000 - #333333 - #FF6600” par leur forme raccourcie (et en minuscules) “#000 - #333 - #f60”.
— n'oublie pas de préciser l'unité de mesure “border-left-width:1px;” (je suppose)
— il me semble que

  border-left-width:1;
  border-right-width:1;
  border-top-style:dotted;
  border-top-width:1;
  border-bottom-style:dotted;
  border-bottom-width:1

te sert à encadrer en pointillés.
Ceci

border : 1px dotted [#orange]#une_couleur;[/#]

fait la même chose
— “margin: 0px 0px 0px 0px;” peut s'écrire “margin: 0;”
—

	border-left: solid 0px #000000;
	border-right: solid 0px #000000;
	border-top: solid 0px #000000;
	border-bottom: solid 0px #000000;

ne sert à rien et peut s'écrire

	border: solid 0px #000;

— Tu utilises de nombreux “font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;”
Il serait préférable que tu l'indiques une seule fois (dans le “body {” par exemple) pour n'avoir plus ensuite qu'à préciser autre chose là où c'est différent.
etc.

+ http://cjoint.com/data/ifhFhwhFKZ.htm

Modifié par Gihef (05 Aug 2007 - 18:24)

richo

5 Aug 2007 à 17:03

Un très grand MERCI a toi Gihef
grace a tes bons conseils, j'ai réussi quelque chose que je pensai impossible pour moi.
1/ J'ai corrigé mes erreurs de construction html et de mise en forme css.
2/ j'ai importé mon contenu (en table) dans mes div
3/ j'ai envoyé tout ca sur le serveur, et là bon résulta même s’il reste bcp de modifs a faire.

Alors, je t'avoue que j'ai très envie de convertir mes tables en div, mais la manip n'est pas si simple que ça.
Prenons l'exemple du "gros onglet"
voici sa construction en table :
html:

<table class="gros_onglet">
                <tr>
                  <td valign="top"><img src="templates/silver/images/1.jpg" border="0" width="16" height="47" alt="pack marketing" /></td>
                  <td valign="top"><img src="templates/silver/images/2.jpg" border="0" width="131" height="47" alt="pack marketing" /></td>
                  <td valign="top"><img src="templates/silver/images/3.jpg" border="0" width="13" height="47" alt="pack marketing" /></td>
                </tr>
                <tr>
                  <td valign="top" background="templates/silver/images/4.jpg" width="16"></td>
                  <td width="131" valign="top" bgcolor="#FFFFFF" class="list" >
<a href="http://site/pack-marketing.html"><img src="templates/silver/images/5.jpg" width="127" height="122" border="0" /></a> 
<a href="http://site/pack-marketing.html"><img src="templates/silver/images/6.gif" border="0" width="115" height="15" alt="" /></a><br />
                  </td>
                  <td valign="top" background="templates/silver/images/7.jpg" width="13"></td>
                </tr>
                <tr>
                  <td colspan="3" background="templates/silver/images/8.jpg" height="56">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </td>
                </tr>
              </table>

le css :


	.gros_onglet {
	border: 0px;
	padding: 0px;
	border-spacing: 0px;
	background-color:#99FFCC;
	border: 0px;
}

j'ai du mal a voir par quoi commencer et quels éléments doit-on séparer du css et ceux qui doivent rester dans le html ... Smiley confus

Modifié par richo (05 Aug 2007 - 17:07)

Gihef

5 Aug 2007 à 18:34

a écrit :
Avez-vous également besoin du fichier index ou css ?

Certainement. Puisque c'est en ligne.
Ça permettrait de juger sur pièce plutôt que de se baser sur des images.
Par exemple, comment te sers-tu de “.gros_onglet” ?
Quelle est l'utilité de toutes ces sous-images ?
Impossible à voir sur l'image de récapitulation.
Parce que http://www.rgdesign.fr/ok.html ne montre rien de convaincant (-;

Et puis,

	.gros_onglet {
	border: 0px;
	padding: 0px;
	border-spacing: 0px;
	background-color:#99FFCC;
	border: 0px;
      }

serait certainement aussi efficace sous cette forme

	.gros_onglet {
	border: 0px;
	padding: 0px;
	background-color:#9fc;
      }

Modifié par Gihef (05 Aug 2007 - 18:40)

richo

5 Aug 2007 à 19:16

lol.
Oui tu as raison, pour le test j'ai mis le fichier dans un dossier "css" ce qui donne css/ok.html Smiley cligne

.
Cependant on peu voir le squelette de la dernière mise a jour sur ce lien
malheureusement tu ne peux pas voir les images, car le site original est en php et que je préfère m'exercer sur une page indépendante Smiley smile

et là il y a le css

a écrit :
quelle est l'utilité de toutes ces sous-images ?

Avec cette interrogation, tu viens d'éclaircir mon esprit. Pourquoi ne pas remplacer ce bloc un peu complexe par une ou deux images ...
je vais simplifier tout ça et je donnerai des new's Smiley lol

Modifié par richo (05 Aug 2007 - 19:19)

richo

6 Aug 2007 à 03:30

il est 3h18 du mat, et je viens de finir la réécriture de mon site en css, 100% css, je ne pensais pas qu'un jour je pourrai faire ça, mais c'est vraie qu’après on se sent mieux, plus propre, plus légé Smiley langue

et tout ça grâce a un fameux " Gihef " qui est passé par là et qui a bien voulu me consacrer un peu de son temps, MERCI Smiley smile

RESULTAT: mon site passe-partout et le méchant safari ne l'explose plus lol.

Il me reste cependant une dernière question, j'aimerai mettre un fond à tout ça (une bande horizontale qui se répète verticalement)

Le fond ne s'affiche pas malgré mon code, peut-être une erreur...

j'ai mis un <div id="global"> au début de ma page qui se ferme et qui se ferme en fin </div> </body> </html>

mon css:

#global {
	width: 1021px;
	height: 100%;
	margin-left: auto;
    margin-right: auto;
	background-image : url(../../silver/images/fond.gif) repeat-y;
}

Que dois ja ajouter ou enlever ? Smiley confus

PS: où dois je allé pour mettre que le probleme est réglé ?
Modifié par richo (06 Aug 2007 - 03:32)

Gihef

6 Aug 2007 à 09:43

Si l'image est bien dans ce dossier, essaye

    #global {
	width: 1021px;
	height: 100%;
	margin: 0 auto;
	background: url(../../silver/images/fond.gif) left top repeat-y;
      }

+ background.

“Résolu”, c'est dans la faq.

+ Attention, une “width:1021px” risque d'afficher l'ascenseur du bas dans une résolution en 1024.
Ce qui n'est pas forcément agréable.
Tu devrais peut-être réserver de la place pour les éléments de la fenêtre des navigateurs ? Une quarantaine de px.

C'est Safari sur PC-IBM ? Ou sur Mac ?

Modifié par Gihef (06 Aug 2007 - 09:51)

richo

6 Aug 2007 à 12:51

c'est safari mac Smiley smile

En fait ce que j'aimerai c'est reproduire la meme chose que ce que j'avais (voir le photo), c'est a dire une bande grise a droite et a gauche de mon site qui reste collé, et tout ca centré.

alors j'ai centré tout le site avec :

#global {
	width: 950px;
	height: 100%;
	margin-left: auto;
    margin-right: auto;
}

et j'ai rajouté
<div id="fond_gauche"></div> en debut de site

#fond_gauche  {
	background-image : url(../../silver/images/fond_gauche.gif) repeat-y;
	vertical-align: top;
}

et un <div id="fond_droit"></div> en fin du site

#fond_droit  {
	background-image : url(../../silver/images/fond_droit.gif) repeat-y;
	vertical-align: top;
}

mais sans succes ..

PS : tu pourras trouver le html et le cs sur les liens que j'avais mis précédemment Smiley cligne

Modifié par richo (06 Aug 2007 - 13:37)

Gihef

6 Aug 2007 à 13:46

N'oublie pas de corriger les erreurs : jigsaw.w3.org/css-validator
Modifié par Gihef (06 Aug 2007 - 13:46)

richo

6 Aug 2007 à 14:55

ho la la, merci j'allé oublier l'essennciel Smiley confus

ca y'é j'ai corrigé les erreurs (meme si il reste encore 65 avertissements) on verra ca plus tard Smiley ravi

mais je ne sais vraiment pas comment rajouter ces 2 bandes de part et d'autre de monn site ...
meme avec un :


<div id="fond_gauche"><img src="templates/silver/images/fond_gauche.jpg" style="background-repeat:repeat-y" alt="fond" /></div>

ca ne marche pas ... Smiley sweatdrop

Modifié par richo (06 Aug 2007 - 14:56)

richo

6 Aug 2007 à 22:25

je penses avoir compris le probeme mais ..
en fait l'image s'affiche, mais ne se repete pas d'une maniere vertical (logique n'ayant pas de contenu), la solution est d'attribuer une tail a mon div :


#fond_gauche { 
vertical-align : top;
height: 800px;
float : left;
background-image:url(../../silver/images/fond_gauche.gif) ;
background-repeat:repeat-y;
}

mais bien evidemment la repetition d'image s'arrete a 800 px et ne continu pas jusqu'a la fin ...
Comment dois je proceder pour avoir une image qui se repette verticalement avec une valeur de % ? Smiley sweatdrop

Modifié par richo (07 Aug 2007 - 01:11)

Gihef

7 Aug 2007 à 23:35

Ton image semble être un petit motif unique qui se répète (?).
Alors, la solution la plus simple serait que tu places l'ensemble de la structure de ta page dans une <div> qui l'englobera.
Et c'est cette <div> globale qui recevra l'image de fond. Elle se répètera sur la hauteur du plus haut bloc de contenu.
Attention à la gestion des margin et padding.

+ http://cjoint.com/data/ihxEYcekrQ_fdbloc.html

Le [Résolu (par Gihef)] est de trop.
Peux-tu l'enlever ? Merci

Modifié par Gihef (08 Aug 2007 - 00:05)

richo

8 Aug 2007 à 00:09

ouééééééé de la bombe !!!
j'ai eu la meme idée il y a 15 min, j'ai fait exactement ce que tu a dis et ca marche Smiley lol

le css c'est magiiique
merci infiniement de ton aide, la prochaine fois je sais a qui m'adresser directement Smiley langue

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Safari qui explose mon site