Inverser le flux html avec du css

**burnzedy** · 29/06/2009, 16h53

Bonjour,

Je cherche une méthode pour que le contenu en tête de mon fichier html soit affiché en dernier (ou presque) lors de l'affichage de la page.

ex (schématisation de mon pb):

Code xhtml :

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

1
2
3
4
5
6
 
<div class="page">
    <div class="header"></div>
    <div class="content"></div>
    <div class="menu-images"></div>
</div>

Je voudrais avoir l'affichage dans cet ordre:
header
menu-images
content

Je précise que chaque div occupe toute la largeur de la page et que la div "menu-images" n'a pas de hauteur fixe...

Une suggestion?
Merci!

**Bisûnûrs** · 29/06/2009, 17h17

Envoyé par burnzedy

Une suggestion?

Oui, ce n'est pas possible si tu gardes les éléments dans le flux. Solution : sortir les éléments du flux.

Il me semble ensuite que Candygirl avait donné une solution pour palier à la hauteur dynamique de l'élément du milieu, mais c'était il y a déjà plusieurs mois et je ne retrouve pas le sujet.
(http://www.developpez.net/forums/d72...ion-taille-px/ ?)

**burnzedy** · 29/06/2009, 17h49

Merci pour ta suggestion.
Effectivement j'ai essayé de mettre mon contenu (.content) en float avec le reste en position absolue pour le faire passer au dessus (en essayant de jouer avec les marges) mais pour l'instant cela reste un échec! ...

Je vais essayer de retrouver le message dont tu parles et refaire des tests...

**burnzedy** · 29/06/2009, 19h48

Finalement j'ai trouvé une solution qui a l'air de fonctionner.

Il faut d'abord regrouper le contenu à inverser dans deux divs. Ensuite il suffit de regrouper les deux divs dans un conteneur (et oui toujours plus de div...), de mettre le conteneur en position relative, et la div a placer en dessous du reste en position absolue avec un 'top: 100%'.

C'est tout simple, je n'y avais pas pensé plus tôt, mais bon il y a parfois tellement de méthodes différentes pour essayer de résoudre un problème que parfois on se perd en chemin. Merci pour le lien qui m'a permis de me changer les idées et de trouver la solution...

la solution à mon problème (à vérifier):

Code xhtml :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
* {margin:0;padding:0;}
body {
 background-color: #000;
}
#page>div {
  width: 100%;
}
 
#header {
  height: 100px;
  background-color: magenta;
} 
#container {
  position: relative;
}
#content {
  position: absolute;
  top: 100%;
  background-color: pink;
  width: 100%;
}
#menu {
        height:150px;
  background-color: red;
  line-height: 150px;
  text-align: center;
}
 
</style>
</head>
 
<body>
<div id="page">
  <div id="header"><h1>Header site</h1></div>
  <div id="container">
    <div id="content">
      <h2>Titre page</h2>
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
    <div id="menu"><p>Ici il y a un menu avec plein d'images.</p></div>
  </div>
</div>
 
</body>
</html>

merci!

EDIT:
Finalement ce n'est pas terrible, puisque le bloc positionné de manière absolue va recouvrir tout le contenu situé après les deux contenu inversé (Un footer par exemple)...
Donc si quelqu'un à une meilleure idée...

Merci!

**Riko63** · 29/06/2009, 22h20

Bonjour,
ma réponse va sembler peut être bête mais je ne comprends pas trop la demande :

Code html sans css :

Code :

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

1
2
3
4
5
<div class="page">
    <div class="header">header</div>
    <div class="content">content</div>
    <div class="menu-images">menu</div>
</div>

Affichera

Code :

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

1
2
3
header
content
menu

Par contre le code :

Code :

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

1
2
3
4
5
<div class="page">
    <div class="header">header</div>
    <div class="menu-images">menu</div>
    <div class="content">content</div>    
</div>

Affichera :

Code :

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

1
2
3
header
menu
content

Cela me semble trop évident pour que j'ai bien cerné le problème.

**burnzedy** · 30/06/2009, 00h37

Non effectivement tu n'as rien compris!

Je plaisante!

Mon problème c'est que j'ai un site dont le menu est composé de centaines de mots clefs (des listes) et que l'élément prédominant sur la page est un diaporama d'images et ensuite en dessous j'ai un court texte de présentation et d'explication (c'est l'exemple de la page d'accueil).
Visuellement c'est très bien (je veux dire par là que c'est ce que je voulais!) mais que ce soit pour le référencement ou pour l'accessibilité c'est pas terrible puisque la description de la page arrive tout à la fin du document.

Donc l'idée c'est de replacer le contenu (texte) en premier dans le doc HTML et de trouver une solution en css pour l'afficher après le menu et le diaporama (comme ce que j'ai pour l'instant)...

Ma "solution" (si on appelle solution le fait de remplacer un problème par un autre) fait bien ça mais par contre ça masque le contenu éventuel qui serait après le texte (comme un footer par exemple).. bref je cherche toujours une solution. A mon avis ça doit pas être très compliqué mais là tout de suite je trouve pas...

**Riko63** · 30/06/2009, 08h04

ah ok !
Mais est ce vraiment si primordial pour le référencement ?

**burnzedy** · 30/06/2009, 11h58

Normalement c'est une chose plus ou moins admise que les moteurs de recherche accordent une plus grande importance au contenu situé en début de page (en général c'est le nom du site, titre de page et début d'article par exemple). Après ça dépend de ce qu'il y a sur la page... Dans mon cas il n'y a pas grand chose à part un menu (de multiples listes de liens internes) et des images (ce qui n'est pas top).

Mais bon pour être honnête le référencement de mon site n'aura réellement pas vraiment d'importance (c'est juste un book perso que je montrerai plutôt a des gens que je contacterai), mais quitte à faire un site autant essayer de faire au mieux... et puis j'adore me prendre la tête avec les css (hahaha ... !)

**Riko63** · 30/06/2009, 12h05

OK, merci pour l'info. Le référencement est une partie qu'il faut que je creuse pour deux ou trois projets que j'ai.

Je te rejoins un peu pour la prise de tête et le css.

**burnzedy** · 01/07/2009, 10h54

Bon je n'ai toujours pas trouvé de solution.. Ce n'est peut être pas faisable en css. Il me reste la solution jquery....

La seule chose que j'ai trouvé sur le net c'est ça:
Inverser deux divs en css
Il doit bien y avoir autre chose mais je ne trouve pas...

Si quelqu'un à une idée je suis toujours preneur (je préférerai une solution en css).

Inverser le flux html avec du css

CSS

Discussions similaires

Partager

Partager