Les solutions: CSS + tableaux ?

[LEON05]

Bonjour,

Comme tous les sites, j'ai un menu.. un texte qui apparaît en haut de toutes les pages et seulement après le contenu.

Je veux que le contenu arrive AVANT dans le code.
Pour un menu horizontal... ==> CSS, ça c bon.
Mais pour un menu horizontal :

| G | centre | D |
| G | centre | D |
| G | centre | D |
-------------------------------

Comment faire apparaître dans le code la parie G apres la partie "centre" ?
Actuellement, mon tableau s'ajuste en % à la taille de l'écran.

Merci de vos réponses.

 

[slender]

Mais pour un menu horizontal :

| G | centre | D |
| G | centre | D |
| G | centre | D |
-------------------------------

j'imagine que tu voulais écrire vertical...

Dans ce cas il faut utiliser un layout en CSS avec la partie content en first. Tu le positionnes dans ton conteneur par rapport aux marges droite et gauche (margin-right: auto; margin-left:auto puis les deux menus G et D en float left et right. Ca devrait marcher.

 

[slender]

sinon, tu liras avec bénéfice l'article suivant:
http://pompage.net/pompe/margesnegatives/
qui explique la mise en place d'une mise en page avec content first. La méthode utilisée est élégante.

slender

 

[LEON05]

Merci pour cette sources très interessantes.
Mais leur exemple 5 http://pompage.net/IMG/html/margesnegat ... mple5.html

Affiche le contenu principale après, la parti de gauche. !!
Et je n'arrive pas à faire l'inverse.

 

[oberon]

Ce que tu demandes ressemble fortement au design de mozilla europe, tu peux regarder leur CSS :

http://www.mozilla-europe.org/fr/

 

[tonino]

La position absolue (position:absolute) est particulièrement utile pour placer (dans le code) des menus après le contenu.

Voici un article trouvé sur Open Web: http://openweb.eu.org/articles/initiation_absolue/

 

[slender]

puis les deux menus G et D en float left et right. Ca devrait marcher.

ouais, je me suis planté taleure, la seule solution c'est une position absolue pour side1 et side2. La seule remarque à faire c'est que ca a une sale gueule en cache google - les side 1 et 2 sont généralement rejetés vers le haut. M'enfin c'est toujours que le cache.

@snowalpes: regardes tes MP

 

[tonino]

La question que je me pose est: les gens utilisent souvent les caches google?

Edit: le plus important est que l'on peut éviter le problème en travaillant son code...

 

[slender]

La question que je me pose est: les gens utilisent souvent les caches google?

Je ne sais pas, à mon avis non. Je pense qu'il n'y a que les wbm qui vont parfois voir le cache des concurrents... 8)
Au début je me faisais du souci mais maintenant depuis 6 mois, j'y pense même plus.

Edit: le plus important est que l'on peut éviter le problème en travaillant son code...

Je n'ai pas bcp essayé mais ça me paraît difficile car le décalage est dû à la présence de la présentation de mise en cache de google. Je pense que la seule solution est de cloaker le CSS. C'est à dire de faire un CSS en mettant des margin-top différents pour les sides L et R - de manière à les remettre à niveau correct. Mais est-ce que ça vaut le coup :?:

 

[tonino]

Mais est-ce que ça vaut le coup :?:

C'est la question que je me pose. Franchement je pense que non, mais je le ferai pour la beauté du sport 8)

 

[jardinofil]

Bonjour,
je découvre grâce à ce message les solutions: CSS + tableaux, c'est très intéressant et je sens que je vais m'y mettre, un peu de pompage.net ne me fera pas de mal.
Désolée de ne pouvoir répondre de ce fait car je ne connaissais pas cette technique de mise en page, je ne regrette pas d'être passée par là cependant.

 

[medium69]

La question que je me pose est: les gens utilisent souvent les caches google?

Edit: le plus important est que l'on peut éviter le problème en travaillant son code...

Moi, je désactive la mise en cache par Google ; comme ça pas de problème

 

[slender]

mais je le ferai pour la beauté du sport 8)

Tu m'avertis si ca marche...

 

[tonino]

Tu m'avertis si ca marche...

Promis, je te ferai signe

Moi, je désactive la mise en cache par Google ; comme ça pas de problème

Comment tu fais stp?

 

[medium69]

tu ajoutes cette meta

<meta name="robots" content="noarchive">

 

[tonino]

Un grand merci medium69!

Par contre j'aimerais bien savoir quelles sont les implications du "refus" de mise en cache... surtout que ça m'a pris moins d'une minute pour modifier mon code (il me faut quand même attendre la nouvelle mise en cache Google pour vérifier que cela fonctionne, ce devrait être pour demain...)

 

[slender]

j'aimerais bien savoir quelles sont les implications du "refus" de mise en cache...

tout simplement suspicion de spamdexing de la part des confrères. De la part des moteurs je ne sais pas. Peut-être même aiment-ils bien car sur certains exemples: https://www.google.fr/search?hl=fr&c2cof ... cher&meta=
on se demande si à la fois l'interdiction de la mise en cache et le fait d'utiliser les frames ne sont pas les moyens d'être (très) bien indexé par notre ami de 8 ans...

 

[LEON05]

Bonjour,
Je vous remerci de vos reponses.
et vous communique la solution que j'ai appliqué à mon site. C'est Slender qui m'a aidé.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>
<title>Exemple 4 : Les marges négatives</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<style type="text/css" media="screen">
/*<![CDATA[*/

* {margin:0; padding:0}

body {
   margin: 0;
   text-align: center;
   font: 11px verdana, arial, helvetica, sans-serif;
   color: black;
}
#conteneur {
   position: relative; /* on positionne le conteneur */
   margin-left: auto;
   margin-right: auto;
   width: 100%;
   margin-top: 10px;
   text-align: left; /* on rétablit l'alignement normal du texte */
}

#content {
   background: #f1f2ea;   
   width: 50%;
   top: 10px;
   margin-right: auto;
   margin-left:auto;
   padding-bottom: 10px;
   border:1px solid black;
}

#side1{
   position:absolute;
   width:22%;
   top: 0px;
   left:2%;
   padding-bottom: 10px;
   border:1px solid black;
   background-color:#eee;   
}

#side2{
   position:absolute;
   width:22%;
   top: 0px;
   right:2%;
   padding-bottom: 10px;
   border:1px solid black;
   background-color:#eee;   
}

#side1 h2 {
   font: 13px verdana, arial, helvetica, sans-serif;
   color: blue;
   margin: 10px 10px 5px 10px;
}

#side2 h2 {
   font: 13px verdana, arial, helvetica, sans-serif;
   color: green;
   margin: 10px 10px 5px 10px;
}

#side1 li {
   margin-left: 10px;
   list-style: none;
}
#side2 li {
   margin-left: 10px;
   list-style: none;
}

#content h1 {
   font: 15px verdana, arial, helvetica, sans-serif;
   color: red;
   margin: 10px 10px 5px 10px;
}

#content p {
   margin: 0 10px 5px 10px;
}

/*]]>*/
</style>
</head>
<body>
<div id="conteneur">
   <div id="content">
         <h1>Contenu</h1>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
         <p class="dernier">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>
   </div>
   <div id="side1">
      <h2>Barre latérale</h2>
      <ul>
         <li>Lien N°1</li>
         <li>Lien N°2</li>
      </ul>
   </div>
   <div id="side2">
      <h2>Barre latérale</h2>
      <ul>
         <li>Lien N°1</li>
         <li>Lien N°2</li>
      </ul>
   </div>
</div>
</body>
</html>

:wink:

 

[medium69]

j'aimerais bien savoir quelles sont les implications du "refus" de mise en cache...

tout simplement suspicion de spamdexing de la part des confrères. De la part des moteurs je ne sais pas. Peut-être même aiment-ils bien car sur certains exemples: https://www.google.fr/search?hl=fr&c2cof ... cher&meta=
on se demande si à la fois l'interdiction de la mise en cache et le fait d'utiliser les frames ne sont pas les moyens d'être (très) bien indexé par notre ami de 8 ans...

Je ne sais pas trop ce que peuvent en penser mes confrères, mais les moteurs eux s'en foutent
Surtout que Google, donne lui-même l'astuce pour éviter la mise en cache.

Pour ma part, c'est motiver car si un visiteur veut voir le cache de Google, Le Javascript est lu et recharge la page de mon site à la taille de sa fenêtre.
Ce qui veut dire en d'autres termes, qu'il sort carrément de Google pour venir sur mon sit.
Et je pense que si Google s'apercevait de cela, il n'aimerait peut-être pas.

L'autre raison qui peut intéressé tout le monde, est que Google laisse parfois le cache daté de plusieurs mois... alors que le contenu, lui, à peut-être changé depuis.

 

[bossboss]

Une autre question en CSS ( ne connais que les rudiments )

Vous parlier tout à l'heure du site http://pompage.net/

Comment réalise t il ses arondis au niveau des zône de menu : est-ce des images ?

 

[tonino]

Tu m'avertis si ca marche...

Bon, ben ça marche (la modif a pris une minute mais j'ai dû attendre la nouvelle mise en cache de la part de Google). En fait Google ne fait que rajouter son texte avant le site, donc un div en position relative contenant toute la page (y compris les div en position absolue) suffit.

Concernant les arrondis en pur css, j'imagine qu'ils ont utilisé des images de fond. Quoique... je sais qu'il est possible de se passer d'images mais il existe peut-être (je dis bien peut-être) à l'heure actuelle des problèmes d'incompatibilité entre browsers (ou support css tout simplement incomplet)

 

[tonino]

Création d'arrondis:
CSS Design: Creating Custom Corners & Borders
CSS and Round Corners: Build Accessible Menu Tabs


Voici une façon de créer des arrondis sans utiliser d'image:
Nifty Corners: rounded corners without images


Après il appartient à chacun d'adapter les techniques pour rendre son site le plus accessible, rapide, maintenable (...) possible.

 

[slender]

donc un div en position relative contenant toute la page (y compris les div en position absolue) suffit.

ca baigne, je rajoute pas car je vais mettre en ligne une release dans bientôt, elle y figurera. Thanks.

 

[bossboss]

Création d'arrondis:
CSS Design: Creating Custom Corners & Borders
CSS and Round Corners: Build Accessible Menu Tabs


Voici une façon de créer des arrondis sans utiliser d'image:
Nifty Corners: rounded corners without images


Après il appartient à chacun d'adapter les techniques pour rendre son site le plus accessible, rapide, maintenable (...) possible.

Merci pour l'infos, impeccable :lol: :!:

 

[psykoko]

nickel chrome
je viens de l'installer sur mon site, et c nickel
mici css

 

[jardinofil]

tu ajoutes cette meta

<meta name="robots" content="noarchive">

Bonjour,
est-ce que le fait d'ajouter cette balise change quelque chose au niveau du référencement par les moteurs de google, ou bien cela permet seulement de ne pas mettre en cache les pages, et ainsi montrer uniquement la version actuelle de la page ?

Ma seconde question après avoir un peu testé les tableaux avec css2 :
doit-on définitivement oublier les tableaux html 4.0 ou bien est-il possible de combiner les 2 ?
En fait je pose cette question car on déclare :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

ce qui veut dire que la page est en XHTML 1.0 Strict et non en html 4.0 où les tableaux "table" ont été introduits si mes souvenirs sont bons.

Merci tonino pour le lien sur les coins arrondis, c'est excellent !

 

[jardinofil]

Bonjour,

J'ai trouvé un lien qui peut intéresser tous ceux qui souhaitent passer à css2, notamment une page donnant des modèles de mise en page à l'aide des css
http://css.alsacreations.com/Modeles-de ... age-en-CSS

Je vais acheter le bouquin css2

 

[jardinofil]

Bonjour,
je tiens à vous remercier pour les informations que j'ai pu glaner sur les css2 au cours de cet échange.

Grâce à vous, je m'y suis mise en rentrant de vacances, et en 2 semaines, à l'aide de spip, voici un nouveau site où j'ai utilisé les css2 et xhtml que je ne connaissais que de nom

http://www.netartistic.com

Très sincèrement, une fois qu'on en a compris les principes, les css2 sont géniales pour remplacer les tableaux !!

Merci encore !!

 

[slender]

Très sincèrement, une fois qu'on en a compris les principes, les css2 sont géniales pour remplacer les tableaux !!
Merci encore !!

Ben ça fait plaisir de voir que t'es tombé dans le bain... Les CSS c'est "très dur" au début car il faut surtout se défaire des ses habitudes antérieures en terme de notion de page html, pour cela les notions de flux, de boites bloc, de boites en ligne sont importantes. Ensuite une fois que tu as bien saisi les différents modèles de mise en pages ça devient plus facile. Au bout de six mois, ça baigne et ensuite tu peux plus t'en passer...
Te souhaite bien du plaisir
slender

 

[Vincent_prague]

Un autre lien sur le sujet : http://www.openweb.eu.org
C'est la référence à mon avis.

 

[jardinofil]

Bonjour,
c'est évident slender qu'une fois qu'on a compris la philosophie, on ne peut plus s'en passer, exit les table, les tr, td... et vive les css2 avec leur div !!

Merci Vincent_prague pour le lien, je l'ai déjà dans mes favoris, mais il est bon de le citer car c'est une mine d'or ce site.