GG peut-il sanctionner trop de <br />? (+ soucis CSS)

patrickfrand · 10 Novembre 2008

Je viens de découvrir qu'avec CSS, il est tout simplement IMPOSSIBLE d'aligner verticalement un texte et une image!! Aussi ahurissant que ça puisse paraître, c'est le cas...

J'ai fait ça:

<style type="text/css">

.right {
float: right;
}
.left {
float: left;
}
#div1 {
height: 120px;

</style>

Dans le BODY, ça donne donc ça:

<div id="div2">
<span class="left">

Une des photos<br />
les plus belles du Lac de Roselend<br />
avec deux marmottes

</span>

<img src="9.jpg" width="125" height="120" class="right" />

</div>

Du coup, le seul moyen que je trouve, c'est de rajouter une dizaine de <br /> avant mon texte:

<br />
<br />
<br />
<br />
.........
Une des photos<br />
les plus belles du Lac de Roselend<br />
avec deux marmottes

Je peux mettre des tableaux, évidemment, mais avec la nouvelle mise à jour de WRI où il est dit qu'il vaut mieux mettre les images dans des DIV:
https://www.webrankinfo.com/actualites/2 ... images.htm
Et comme je voudrais bien placer mes images dans Google Images, et bien voilà

A moins de mettre un gigantesque tableau à l'intérieur d'une DIV (<div><table>.............</table></div>), mais je ne sais pas si ceci est valable pour l'optimisation telle qu'elle est dite dans la mise à jour de WRI donnée en lien juste au dessus???

C'est pour ça que je poste ici: est-ce que Google peut sanctionner le fait d'avoir une centaine de <br /> dans une page, vu que j'ai une bonne dizaine de photos à "arranger" dans ma page ???

Merci :wink:

YoyoS · 10 Novembre 2008

Ca fait froid dans le dos cette question. brrrrr... :mrgreen:

mike006 · 10 Novembre 2008

tu veux dire :

Ca fait froid dans le dos cette question. <brrrrr.../>

patrickfrand · 10 Novembre 2008

YoyoS a dit:
Ca fait froid dans le dos cette question. brrrrr... :mrgreen:

Et oui je sais :mrgreen:

Mais CSS est incapable de faire ce que je veux, et ça fait deux jours que je suis dessus
Sur Alsacreations, c'est pareil, des gens sont confrontés à ce problème

Du coup, je ne trouve pas d'autres solutions

rikew · 10 Novembre 2008

tu met ton texte dans un clear:both

Code:

<div style="clear:both">
Une des photos<br /> 
les plus belles du Lac de Roselend<br /> 
avec deux marmottes 
<div>

zeb · 10 Novembre 2008

t'a pas un exemple visuel de ce que tu veut faire car tes explications textuelles c'est pas évident.

sinon ne pas pouvoir réaliser un truc en CSS j'ai comme l'impression que ça sonne faut.

patrickfrand · 10 Novembre 2008

Et bien en fait je veux aligner mon texte (2/3 lignes) en face le centre de mon image, le texte étant à gauche et l'image à droite

Un peu comme ça:
http://gazette.hc.free.fr/aff.png

Sauf que mes images sont beaucoup plus grosses

Argonaute · 10 Novembre 2008

Tu veux donc dire "horizontalement" (ou alors j'ai pas compris) : dans ce cas tu rajoutes un align="absmiddle" dans ta balise img.

Sinon il manque une } et il y a un problème div1 vs div2 dans le code que tu as mis plus haut.

rikew · 10 Novembre 2008

utilise margin-top plutot que les br

Leonick · 10 Novembre 2008

rikew a dit:
utilise margin-top plutot que les br

ben oui

bproductiv · 10 Novembre 2008

Quasiment tout est possible en css..
Je préfère que tu dise que tu n'y arrive pas plutôt que de dire que css ne peut pas le faire..
Sinon pour en revenir à ta question, non ce n'est pas sanctionné par google, mais bon autant faire un code propre.

YoyoS · 10 Novembre 2008

merci pour la précision mike mais pas très nécessaire

patrickfrand · 10 Novembre 2008

Argonaute a dit:
Tu veux donc dire "horizontalement" (ou alors j'ai pas compris)

Je veux que mes 3 lignes de texte arrivent au niveau du milieu de l'image qui est à côté

bproductiv a dit:
Quasiment tout est possible en css..
Je préfère que tu dise que tu n'y arrive pas plutôt que de dire que css ne peut pas le faire..
Sinon pour en revenir à ta question, non ce n'est pas sanctionné par google, mais bon autant faire un code propre.

Disons que je n'y arrive pas, et que je suis allé sur des forums de créations et que personne n'y arrive
Mais vous avez l'air plus "pros" :lol:

Finalement oui tu as rasion: la vraie question est de savoir si Google peut ne pas optimiser correctement une page car il y'a beaucoup de <br>, sachant que je voudrais bien placer mes images???

Autrement dit, une page sans <br> a-t-elle plus de chances d'être optimisée que la mienne?

bproductiv · 10 Novembre 2008

Si tu as tjs 3 lignes de textes je vois pas où est le problème, par contre si un coup c'est 1 et après 10 alors là ok ca deviens compliqué à verticalement.
Ma réponse concernant google n'est pas claire ou je ne comprend pas ?

patrickfrand · 10 Novembre 2008

bproductiv a dit:
Si tu as tjs 3 lignes de textes je vois pas où est le problème, par contre si un coup c'est 1 et après 10 alors là ok ca deviens compliqué à verticalement.
Ma réponse concernant google n'est pas claire ou je ne comprend pas ?

Et bien, je peux construire ma page (avec 10 images des Alpes) de 2 manières différentes:

-soit en rééssayant avec CSS
-soit en la laissant avec ma centaine de <br />

Quelles images de laquelle des 2 pages ont-elles le plus de chances d'aboutir le plus haut possible sur Google (si possible en 1ère page) ???
Laquelle est la mieux optimisée pour Google Images?

Merci encore pour vos réponses

Leonick · 10 Novembre 2008

si google ne référençait pas correctement les sites codés avec les pieds, ça ferait un sacré chambardement dans les SERP :lol:

zeb · 10 Novembre 2008

Leonick a dit:
si google ne référençait pas correctement les sites codés avec les pieds, ça ferait un sacré chambardement dans les SERP :lol:

MDR très pertinent.

sinon pour le problème de base essaie un truc du genre :

Code:

  <div class="bloc">
   <img src="http://gazette.hc.free.fr/_le_forum/img/avatars/2.png" class="bimg" alt="">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam urna orci, feugiat ac, dictum ac, ornare vel, eros. Suspendisse sed risus.</p>
  </div>

  <div class="separateur"></div>

  <div class="bloc">
   <img src="http://gazette.hc.free.fr/_le_forum/img/avatars/2.png" class="bimg" alt="">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam urna orci, feugiat ac, dictum ac, ornare vel, eros. Suspendisse sed risus.</p>
  </div>

  <div class="separateur"></div>

  <div class="bloc">
   <img src="http://gazette.hc.free.fr/_le_forum/img/avatars/2.png" class="bimg" alt="">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam urna orci, feugiat ac, dictum ac, ornare vel, eros. Suspendisse sed risus.</p>
  </div>

  <div class="separateur"></div>

  <style>
   .bloc {height:300px;display:bloc;border:1px dotted #000000;}
   .bloc p{position:relative;top:40%;left:10%;width:40%;}
   .bimg{float:right;}
   .separateur{clear:both;}
  </style>

patrickfrand · 10 Novembre 2008

Leonick a dit:
si google ne référençait pas correctement les sites codés avec les pieds, ça ferait un sacré chambardement dans les SERP :lol:

Certes, mais ce n'est malheureusement pas une réponse
Je parle d'optimisation, et non de référencement
Je demandais laquelle des 2 solutions était la meilleure pour l'optimisation

zeb a dit:

Leonick a dit:
si google ne référençait pas correctement les sites codés avec les pieds, ça ferait un sacré chambardement dans les SERP :lol:

MDR très pertinent.

sinon pour le problème de base essaie un truc du genre :

Code:

  <div class="bloc">
   <img src="http://gazette.hc.free.fr/_le_forum/img/avatars/2.png" class="bimg" alt="">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam urna orci, feugiat ac, dictum ac, ornare vel, eros. Suspendisse sed risus.</p>
  </div>

  <div class="separateur"></div>

  <div class="bloc">
   <img src="http://gazette.hc.free.fr/_le_forum/img/avatars/2.png" class="bimg" alt="">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam urna orci, feugiat ac, dictum ac, ornare vel, eros. Suspendisse sed risus.</p>
  </div>

  <div class="separateur"></div>

  <div class="bloc">
   <img src="http://gazette.hc.free.fr/_le_forum/img/avatars/2.png" class="bimg" alt="">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam urna orci, feugiat ac, dictum ac, ornare vel, eros. Suspendisse sed risus.</p>
  </div>

  <div class="separateur"></div>

  <style>
   .bloc {height:300px;display:bloc;border:1px dotted #000000;}
   .bloc p{position:relative;top:40%;left:10%;width:40%;}
   .bimg{float:right;}
   .separateur{clear:both;}
  </style>

PARFAIT!
Niquel

Merci beaucoup

:wink:

patrickfrand · 10 Novembre 2008

Juste une chose:

Le style .bloc p

s'applique en fait à la balise <p> si j'ai bien compris??

Petard, moi qui me débrouillais plutôt pas mal en CSS, j'ai l'impression de ne rien connaître

Jamais je n'aurais trouvé un truc pareil

9aoud · 10 Novembre 2008

Ben oui le <p> te fais sauter une ligne et le <br> te ramene à la ligne.
Tu as failli finir sandboxé pour duplicate content de <br>

Rod la Kox · 10 Novembre 2008

Tu fais 10 div avec les images en background et tu colles les 10 texte dans les 10 div en centrage verticale.

colonies · 11 Novembre 2008

Tu fais 10 div avec les images en background et tu colles les 10 texte dans les 10 div en centrage verticale.

Comme ça t'as pas de alt sur tes images, c'est super pour le référencement, ça !
A part ça tu peux nous passer le code de centrage vertical dans un div (cross-browser bien sûr, donc pas de display:table-cell et flexible tel qu'énoncé donc sans savoir combien y'a de lignes de texte ni la hauteur du dit <div>) ?
Franchement, j'en connais un paquet à qui ça va faire plaisir... moi le premier ! ;-)

Bon... y'a toujours jQuery pour les cas désespérés (http://antcooper.com/2008/07/04/vertica ... th-jquery/) mais c'est triste d'en arriver là.
Entre nous, inutile de prendre des gants... un bon vieux tableau et une paire de tédettes...

Altenide · 11 Novembre 2008

Aucune incidence sur le classement google de ton image ( css ou br ). <br /> * 1000 est valide Xhtml. Le seul vrai pb c'est que ton code va être tout pourri dans le cas des br et propre avec des css.

patrickfrand · 11 Novembre 2008

zeb a dit:

sinon pour le problème de base essaie un truc du genre :

Code:

  <div class="bloc">
   <img src="http://gazette.hc.free.fr/_le_forum/img/avatars/2.png" class="bimg" alt="">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam urna orci, feugiat ac, dictum ac, ornare vel, eros. Suspendisse sed risus.</p>
  </div>

  <div class="separateur"></div>

  <div class="bloc">
   <img src="http://gazette.hc.free.fr/_le_forum/img/avatars/2.png" class="bimg" alt="">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam urna orci, feugiat ac, dictum ac, ornare vel, eros. Suspendisse sed risus.</p>
  </div>

  <div class="separateur"></div>

  <div class="bloc">
   <img src="http://gazette.hc.free.fr/_le_forum/img/avatars/2.png" class="bimg" alt="">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam urna orci, feugiat ac, dictum ac, ornare vel, eros. Suspendisse sed risus.</p>
  </div>

  <div class="separateur"></div>

  <style>
   .bloc {height:300px;display:bloc;border:1px dotted #000000;}
   .bloc p{position:relative;top:40%;left:10%;width:40%;}
   .bimg{float:right;}
   .separateur{clear:both;}
  </style>

J'ai sructuré ma page comme toi: ça marche super bien sur Firefox, mais sur IE 7, le texte N°1 se retrouve en face l'image N°2, le texte N°2 en face l'image N°3, etc, etc....Et en face l'image N°1, il n'y a pas mon texte N°1, évidemment, puisqu'il se trouve en face l'image N°2

Voici mon code:

<style type="text/css">

.bloc {
height: 500px;
display: block;
border: 1px dotted #000000;
}

.bloc p {
position: relative;
left: 10px;
width: 100%;
top: 40%;
}

.bloc2 {
height: 500px;
display: block;
border: 1px dotted #000000;
}

.bloc2 p {
position: relative;
left: 10px;
width: 100%;
top: 40%;
}

.ga {
float: left;
}

.dr {
float: right;
}

.separateur{clear:both;}

</style>

<div class="bloc">
<img src="1.jpg" class="ga" alt="">
<p>Texte 1</p>

</div>

<div class="separateur"></div>

<div class="bloc2">
<img src="2.jpg" class="dr" alt="">
<p>Texte 2</p>
</div>

<div class="separateur"></div>

<div class="bloc2">
<img src="3.jpg" class="ga" alt="">
<p>Texte 3</p>
</div>

Je suis PAUME :cry: :cry:

Altenide · 11 Novembre 2008

Code:

<style type="text/css">

.bloc {
height: 500px;
display: block;
border: 1px dotted #000000;
}

.bloc p {
position: relative;
left: 10px;
width: auto;
top: 10%;
}

.bloc2 {
height: 500px;
display: block;
border: 1px dotted #000000;
}

.bloc2 p {
position: relative;
left: 10px;
width: auto;
top: 40%;
}

.ga {
float: left;
}

.dr {
float: right;
}

.separateur{clear:both;}

</style>

çà devrait fonctionner.

Furtif · 11 Novembre 2008

Pourquoi faire compliqué ?

Tu cree un "div", dans ce div tu y met un tableau de 1 ligne et deux colonnes, le texte colonne de gauche, l'image colonne de droite ou l'inverse si tu veux, et tu peaufines le tout avec ton css. ton texte sera parfaitement aligné à l'horizontale par rapport a ton image sur tous les navigateurs...

<div id="exemple">
<table cellpadding="0" cellspacing="0">
<tr>
<td>ici ton texte</td>
<td><img src="ici_ton_image.gif">
</td>
</tr>
</table>
</div>

patrickfrand · 11 Novembre 2008

Altenide a dit:
çà devrait fonctionner.

C'est parfait

Depuis hier je suis là-dessus!!!

Merci ENORMEMENT :wink:

patrickfrand · 11 Novembre 2008

Furtif a dit:
Pourquoi faire compliqué ?

Tu cree un "div", dans ce div tu y met un tableau de 1 ligne et deux colonnes, le texte colonne de gauche, l'image colonne de droite ou l'inverse si tu veux, et tu peaufines le tout avec ton css. ton texte sera parfaitement aligné à l'horizontale par rapport a ton image sur tous les navigateurs...

<div id="exemple">
<table cellpadding="0" cellspacing="0">
<tr>
<td>ici ton texte</td>
<td><img src="ici_ton_image.gif">
</td>
</tr>
</table>
</div>

Merci mais je voulais que mon texte ne soit pas dans une cellule différente de mon image
Je préfère integrer le tout dans un DIV (cf l'article que j'ai cité en vue de l'optimisation)

Altenide · 11 Novembre 2008

Furtif a écrit:

<div id="exemple">
<table cellpadding="0" cellspacing="0">
<tr>
<td>ici ton texte</td>
<td><img src="ici_ton_image.gif">
</td>
</tr>
</table>
</div>

Eurk !!!! Les tableaux ne doivent servir qu'au données tabulaires ... et à rien d'autre.

Furtif · 11 Novembre 2008

Eurk !!!! Les tableaux ne doivent servir qu'au données tabulaires ... et à rien d'autre.

Oui et non, mon premier site je l'ai developpé sous wordpad en 1997, et les vieux reflexes ont la vie dure. L'affichage des tableaux est universel, alors que l'affichage des div va etre differente en fonction du moteur d'affichage utilisé. Tout depend egalement du type d'utilisation que tu vas en faire. Les tableaux sont en general plus stables.

L'utilisation des tableaux ou des div, ou la combinaison des deux reste un choix personnel, chacune des methodes ayant ses avantages et inconvenients.

Et moi j'aime bien les tableaux.... et a titre d'infos Google aussi....... tu devrais leur dire pour les donnees tabulaires..

Rod la Kox · 12 Novembre 2008

colonies a dit:
Comme ça t'as pas de alt sur tes images, c'est super pour le référencement, ça !

On s'en cogne, on parle CSS pas ref.
Faut juste savoir ce que l'on veut. :wink:

Altenide a dit:
Eurk !!!! Les tableaux ne doivent servir qu'au données tabulaires ... et à rien d'autre.

Sauf que...

Qu'est-ce qu'une donnée tabulaire.

Franchement, autant dire qu'on ne fait pas un design en table, autant, un tableau peut accepter toutn ou presque niveau données. :wink:

Altenide · 12 Novembre 2008

Rod la Kox a écrit :

Sauf que...
Qu'est-ce qu'une donnée tabulaire ?

Je suis absolument d'accord avec toi. D'ailleurs inutile de polémiquer sur ce sujet : les principaux points ont été soulevés ici : http://blog.alsacreations.com/2004/05/29/11-a-table et dans pas mal d'autres endroits. Il m'a semblé dans le cas présent que la gestion par tableau ne s'imposait pas puisqu'il était "relativement" facile de s'en passer. Ma devise en la matière étant : " Lorsqu'il est impossible de faire autrement, ou que cela suppose une charge de travail disproportionnée avec le résultat à atteindre, alors j'utilise les tableaux ".

Note : Pour ce qui est de Google, j'avoue ne jamais avoir étudié de près la structure de ses pages. Mais je rejette a priori l'argument. Ce n'est pas parce qu'un acteur leader du web à de mauvaises pratiques qu'on doit le copier.

Bellegarde-webb · 12 Novembre 2008

Furtif a dit:
Pourquoi faire compliqué ?

Tu cree un "div", dans ce div tu y met un tableau de 1 ligne et deux colonnes, le texte colonne de gauche, l'image colonne de droite ou l'inverse si tu veux, et tu peaufines le tout avec ton css. ton texte sera parfaitement aligné à l'horizontale par rapport a ton image sur tous les navigateurs...

<div id="exemple">
<table cellpadding="0" cellspacing="0">
<tr>
<td>ici ton texte</td>
<td><img src="ici_ton_image.gif">
</td>oit
</tr>
</table>
</div>

Mais oui pourquoi faire compliqué! Il n'a jamais été dit qu'il fallait banir l'usage des tableaux mais qu'il fallait les utiliser à bon escient, en principe pour faire des tableaux :lol: :lol:
Dans le cas précis, cela peut être considéré soit comme de la mise en page auquel cas on n'utilise pas de e tableau, soit comme un tableau de correspondance entre une image et du texte et en ce cas on utile un tableau.
Tout est une question de point de vue sur ce que représente la page.
J'insiste lourdement : pour bien écrire son code et qu'il soit bien optimum, il faut d'abord avoir un point de vue, une analyse de ce que l'on veut présenter et après il ne reste plus qu'à appliquer le code en adéquation avec son point de vue.

Je pourrais redire la même chose pour le br, s'il s'agit d'aller à la ligne au milieu d'un texte son emploi est le bon! :arrow:

code · 12 Novembre 2008

Bon j'ai pas tout tout suivi mais si j'ai bien compris tu veux aligner une image et un texte horizontalement et pas verticalement c'est a dire que le texte se trouve à côté de l'image, dans la ligne médiane.

Donc dans ton cas utilise ce code css :

p.axe-y {line-height: 1em;}

p.axe-y img {vertical-align: middle;}

Et ensuite pour centrer le tout :

<p class="axe-y"><img etc etc >le texte</p>

julk · 14 Novembre 2008

pas mal la solution, je me rapelle avoir étè confronté exactement au même problème.

blackhawker · 15 Novembre 2008

code a dit:
Bon j'ai pas tout tout suivi mais si j'ai bien compris tu veux aligner une image et un texte horizontalement et pas verticalement c'est a dire que le texte se trouve à côté de l'image, dans la ligne médiane.

Donc dans ton cas utilise ce code css :

p.axe-y {line-height: 1em;}

p.axe-y img {vertical-align: middle;}

Et ensuite pour centrer le tout :

<p class="axe-y"><img etc etc >le texte</p>

Code:

<p><img src="" align="right" />texte</p>

...

EDIT: et pour parer le coup du "c'est déprécié, ça pue", suffit de faire un float: right;

amkan · 15 Novembre 2008

Pour ce genre de problématique il faut s'appliquer a faire du code simple et propre.

Voilà ce qu'il faut comme feuille de style pour avoir un référencement optimum des images:

Code:

<style type="text/css">

#info {padding:0 0 2em 0; text-align:center;}
ul#gallery {
  padding:0; 
  margin:0 auto; 
  width:448px; 
  height:336px; 
  position:relative; 
  background:#888 url(graff/g26.jpg);
  }
#gallery li {
  list-style-type:none; 
  width:64px; 
  height:48px; 
  float:left; 
  z-index:100;
  }
#gallery li.lft {
  float:left; 
  clear:left;
  }
#gallery li.rgt {
  float:right; 
  clear:right;
  }
#gallery a {
  position:relative; 
  width:64px; 
  height:48px; 
  display:block; 
  float:left; 
  z-index:100; 
  cursor:default;
  }
#gallery a img {
  position:relative; 
  width:62px; 
  height:46px; 
  border:1px solid #888; 
  z-index:100;
  }
#gallery a:hover {
  width:160px; 
  height:120px; 
  padding:108px 144px; 
  position:absolute; 
  left:0; 
  top:0; 
  z-index:20;
  }
#gallery a:hover img {
  background:#eee; 
  position:relative; 
  width:160px; 
  height:120px; 
  border:0; 
  z-index:20;
  }
#gallery a:active, #gallery a:focus {
  background:transparent; 
  width:320px; 
  height:240px; 
  padding:48px 64px; 
  position:absolute; 
  left:0; 
  top:0; 
  z-index:10;
  }
#gallery a:active img, #gallery a:focus img {
  background:#eee; 
  position:relative; 
  width:320px; 
  height:239px; 
  border:0; 
  z-index:10;
  }
/* hack for Internet Explorer */
#gallery li.pad {
  height:0; 
  display:block; 
  margin-top:-2px; 
  width:448px; 
  font-size:0;
  }

/* hack for Opera 7+ */
@media all and (min-width:0px){
#gallery a:hover {
  background:#888; 
  width:320px; 
  height:240px; 
  padding:48px 64px; 
  position:absolute; 
  left:0; 
  top:0; 
  z-index:10;
  }
#gallery a:hover img {
  background:#aaa; 
  position:relative; 
  width:320px; 
  height:240px; 
  border:0; 
  z-index:10;
  }
}


</style>

Avec ça, c'est blindé.

Altenide · 16 Novembre 2008

Voilà ce qu'il faut comme feuille de style pour avoir un référencement optimum des images:

alors là je veux bien qu'on m'explique ... ce qu'a comme conséquence un code css bien structuré sur le référencement/positionnement d'une image...

:?: :?: jamais entendu parler de çà ...

ybet · 16 Novembre 2008

Altenide a dit:
Voilà ce qu'il faut comme feuille de style pour avoir un référencement optimum des images:

Cliquez pour agrandir...

alors là je veux bien qu'on m'explique ... ce qu'a comme conséquence un code css bien structuré sur le référencement/positionnement d'une image... :?: :?: jamais entendu parler de çà ...

Pour le reste également, le robot de GG ne lit que le contenu texte, pas la mise en page, CSS ou non.
J'ajouterai que j'ai rarement vu des problèmes d'affichages corrests sans CSS, avec ... on tombe sur toutes les différences des navigateurs (je sais principalment explorer mais c'est aussi le plus utilisé).