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

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

 

tu veux dire :

 

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>

 

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.

 

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.

 

utilise margin-top plutot que les br

 

ben oui

 

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.

 

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

 

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 ?

 

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>

 

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>

 

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...

 

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.

 

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.

 

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>

 

Furtif a écrit:

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..

 

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

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:

 

Rod la Kox a écrit :

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.

 

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:

 

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>

 

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

 

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;

 

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é.

 

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é).