Discussion :

[elcoyotos]

Bonjour,

Quelqu'un pourrait il m'expliquer pourquoi sous chrome j'ai des ligne horizontales qui sortent de la page (sur la droite) et pas sous Firefox ni sous Safari ni sous IE ?

Merci d'avance ...

[ABCIWEB]

Précise un peu. Quelle type de lignes horizontale ?

Si cela n'a rien à voir avec le contenu, c'est peut-être un problème d'affichage dû à la carte graphique. Eventuellement cela peut se produire si tu as un flux vidéo en arrière plan de la fenêtre du navigateur...

[elcoyotos]

Merci de ta réponse
Malheureusement, cela le fait sur plusieurs PC différents ...

[ABCIWEB]

Oui mais on ne sait toujours pas de quoi tu parle. C'est sur tous les sites, dans un cas particulier ? C'est un problème sur une page que tu as créée, un problème de css ? Bah alors c'est quoi le css ?

Que veux-tu que l'on te réponde si tu ne donne aucune précision. Si tu me dis juste "ma voiture est en panne", je vais juste pouvoir te répondre "ben oui faut la réparer". Et même en étant le meilleur mécano du monde, je pourrais pas t'aider plus à distance si tu ne précise pas les circonstances de la panne.

[elcoyotos]

Oups
J'ai oublié de donner l'exemple de la page ou cela se produit -> http://www.arizona-dream.com/usa/parcs-villes-usa.php
Désolé

[ABCIWEB]

La ligne orange ?

C'est dû à la ligne de code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div><img src="photos/template/charte/ligne_separation.png" width="700" height="1" alt ="" /></div>

Eventuellement tu peux essayer de mettre height="0" pour une correction rapide.

[Invité]

Bonjour,

tu as une <section> qui englobe les éléments/articles (colonne de gauche).
Il faut lui mettre ce style :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

max-width:740px;

Cela dit, ça signifie surtout qu'il y a une problème plus profond d'imbrication/float des div(section...)


@ABCIWEB
Toi aussi, tu es perturbé par le changement d'heure, ou tu t'es endormi sur ton clavier ?

[ABCIWEB]

@ABCIWEB
Toi aussi, tu es perturbé par le changement d'heure, ou tu t'es endormi sur ton clavier ?

J'avais bien dit une correction rapide. Peut-être un peu trop en effet

Cela dit c'est vrai que le problème est assez inquiétant et ça laisse pas présager une bonne compatibilité avec un maximum de navigateurs.

Par ailleurs la page prend aussi pas mal de ressources ordinateur. Faudrait voir à faire un système de rubrique ou pagination. Et puis faudrait pouvoir faire aussi une recherche par parc en plus d'une recherche par ville, un petit auto complete irait sans doute pas mal. Allez elcoyotos, au boulot !

[elcoyotos]

@jreaux62 Excellente solution

Par ailleurs la page prend aussi pas mal de ressources ordinateur. Faudrait voir à faire un système de rubrique ou pagination. Et puis faudrait pouvoir faire aussi une recherche par parc en plus d'une recherche par ville, un petit auto complete irait sans doute pas mal. Allez elcoyotos, au boulot !

@ABCIWEB Yes ... un jour ...

En tout cas, je m'étonne quand même que cela soit correcte sur tous les navigateur sauf sur Chrome

Merci pour votre aide

[Invité]

1/ Pour revenir à l'objet du litige...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div><img src="photos/template/charte/ligne_separation.png" width="700" height="1" alt ="" /></div>

Ce n'est pas (sémantiquement) une image, mais une décoration.

Tu peux remplacer avantageusement par :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<hr class="ligne_separation" />

avec, dans le CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
hr.ligne_separation { 
  width:700px; height:1px; 
  border:0; margin:2px 0 5px 0; padding:0; outline:none; 
  background:url('./photos/template/charte/ligne_separation.png') no-repeat; background-size:100% 1px; 
}

(vérifier le chemin relatif correct)

2/ Le problème vient du fait que la colonne de droite <div class="right"> est en float:right, et donc "hors flux".

Comme elle contient surtout de la pub, je l'aurait placée (dans le code) après <section id="principale">.

et pour bien faire, leur attribuer des largeurs :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
#principale { width:740px; }
.right { width:180px; float:right; /* ..... */ }

3/ j'ai vu aussi des box vides :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="box_shadow_vide">...</div>

Inutiles.

4/ Enfin, si tu veux que tes pages soient compatibles tous navigateurs, il faut un code HTML / CSS irréprochable.
Généralement, si l'emboitement (imbrication des balises) et correct, le CSS est simple et concis.

Dès que tu est obligé d'ajouter des "rustines" CSS (du code en plus pour que ça marche sur l'un ou l'autre navigateur), c'est mauvais signe.

[elcoyotos]

Merci de tes conseils

J'ai fait les modifications que tu préconise :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
#principale { width:740px; }
.right { width:180px; float:right; /* ..... */ }

Pour le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="box_shadow_vide">...</div>

Tu as raison, cela ne sert à rien SAUF .... je l'avais mis pour palier à un bug sous firefox (oui, je sais c'est pas bien )
Si je l'enlève voici ce que ça donne (sous firefox) :



Par contre pour ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<hr class="ligne_separation" />

... C'est maintenant sous Firefox que cela déconne : http://www.arizona-dream.com/usa/activites-usa.php

Merci encore !

[Invité]

Comme je t'ai dit, ajouter des rustines est une mauvaise idée...
A cause des float: left (ou right), le flux est perturbé.

1/ On va utiliser une astuce CSS pour rétablir du flux : "clearfix"

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
/* -------------------------------------- */
/* rétablissement du flux */
.clearfix:before, .clearfix:after { display:table; content:""; }
.clearfix:after { clear:both; }
/* -------------------------------------- */

2/ Ta configuration actuelle :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div id="content">
	<div id="adsense_haut">...</div>
	<div id="sous_menu_droite_container">...</div>
	<section id="principale">...</div>
	<section id="shareButtonsContenair" class="no_print">...</div>
	<div class="adsense_bas">...</div>
	<section class="margin-top-soixante">...</div>
	<div class="adsense_bas margin-top-soixante">...</div>
	<div class="template_commun_haut_page margin-top-soixante">...</div>
</div>

=> On va ajouter des "boites" pour englober nos 2 colonnes :
Je te propose :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="content">
	<div class="clearfix">
	<div id="content_col_gauche">
		<div id="adsense_haut">...</div>
		<section id="principale">...</div>
	</div>
	<div id="content_col_droite">
		<div>...</div>
	</div>
	</div>
	<div class="clearfix">
		<section id="shareButtonsContenair" class="no_print">...</div>
		<div class="adsense_bas">...</div>
		<section class="margin-top-soixante">...</div>
		<div class="adsense_bas margin-top-soixante">...</div>
		<div class="template_commun_haut_page margin-top-soixante">...</div>
	</div>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
#content_col_gauche { width: 740px; float:left; }
#content_col_droite { width: 180px; float:right; margin-right:10px; /* ...........  */ }

A l'intérieur des div "content_col_gauche" et "content_col_droite", tu peux mettre les width à 100%; (sauf tes box en float: left, évidemment)

+ Renomme "sous_menu_droite_container" en "content_col_droite" !


3/ Comme les hr sont précédés de blocs "box_shadow_container" en float:left;, on rétablit le flux avec "clearfix" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="box_shadow_container clearfix">...</div>

4/ Quant à la structure du contenu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<article>
	<h2>Arizona</h2>
	<div class="box_shadow_container">...</div>
	<hr class="ligne_separation">
	<h2>Californie</h2>
	<div class="box_shadow_container">...</div>
	<hr class="ligne_separation">
	<h2>Nouveau Mexique</h2>
	<div class="box_shadow_container">...</div>
	<hr class="ligne_separation">
	<h2>Nevada</h2>
....
</article>

A modifier pour obtenir :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<article>
	<header><h1>Arizona</h1></header>
	<div class="box_shadow_container clearfix">...</div>
	<hr class="ligne_separation">
</article>
<article>
	<header><h1>Californie</h1></header>
	<div class="box_shadow_container clearfix">...</div>
	<hr class="ligne_separation">
</article>
<article>
	<header><h1>Nouveau Mexique</h1></header>
	<div class="box_shadow_container clearfix">...</div>
	<hr class="ligne_separation">
</article>
<article>
	<h1>Nevada</h1>
....
</article>

[elcoyotos]

Nom de dieu ! Quel taf !
Es tu sur de ton coup ?
Cela représente beaucoup de boulot pour moi !
Si tu es sur, je le ferai dès que j'aurai du temps devant moi ...

Et encore merci pour toutes ces infos

Pourquoi cela fonctionne sur tous les navigateur sauf sur un (question de novice) ? C'est Firefox qui est plus respectueux des standard ?

[Invité]

Ca ne représente pas tant de travail que ça, et ça facilite l'interprétation des navigateurs.

[ABCIWEB]

Attention aussi à passer ton code au validateur ça peut montrer des erreurs grossières. Par exemple ici je vois un duplicate id.

[NoSmoking]

Bonjour,
tes éléments .box_shadow_container n'ont aucune dimension du fait que les éléments contenus sont en float:left. Pour rétablir l'ensemble un simple overflow:hidden sur ces conteneurs leur redonneront de la "substance" et devrait suffire.

Il n'empêche que les remarques prodiguées restent valables.

[elcoyotos]

Merci à tous.
Allez hop au boulot !

[elcoyotos]

@jreaux62 Milles mercis !