Quel positionnement adopter ?

**Er3van** · 23/06/2008, 15h00

Bonjour,

Je développe actuellement un nouveau site et en ai fait la maquette.
A priori, rien de bien compliqué, sauf que, maintenant que j'ai commencé à mettre en place le site, je me retrouve confronté à un petit soucis de positionnement...

La-dite maquette est en pièce jointe.

Voici le code (minimaliste) à l'heure actuelle :

Code html :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test</title>
  <style type="text/css">
  * {
        margin : 0px ;
        padding : 0px ;
  }
  body {
        background-color : #11444A ;
  }
  #content {
        position : relative ;
        top : 100px ;
        height : 600px ;
        width : 100% ;
        background-color : #000000 ;
        color : #FFFFFF ;
        border-top : 4px solid #FFFFFF ;
        border-bottom : 4px solid #FFFFFF ;
  }
  #left {
        float : left ;
        width : 20% ;
        height : 100% ;
        padding-left : 2% ;
        padding-right : 2% ;
        background-color : #224455 ;
  }
  #right {
        float : right ;
        width : 70% ;
        height : 100% ;
        padding-left : 2% ;
        padding-right : 2% ;
        background-color : #006677 ;
  }
  </style>
</head>
 
<body>	
	<div id="content">
		<div id="left">Panneau de gauche</div>
		<div id="right">Contenu de droite</div>
	</div>
</body>
</html>

Seulement voilà, si je mets les deux blocs en float, le bloc s'adapte en hauteur au bloc parent, mais à condition que celui-ci ait une taille fixe, ce qui a pour effet de restreindre la hauteur des blocs à la-dite taille, du coup, ma page n'est pas extensible en hauteur.

Si en revanche je passe en positionnement absolute, la hauteur de mes pages peut être flexible, mais par contre les deux colonnes n'auront pas la même taille et le bloc parent ne les englobera plus visuellement.

Et je ne vois pas comment parvenir au bon résultat avec du positionnement relatif...

Recourir à un tableau serait une solution, mais pas des plus académique ^^'

Bref, un point de vue extérieur serait le bienvenue !

**Er3van** · 23/06/2008, 15h12

Bon ben, résolu... ^^'

Un café bien noir plus tard, c'était plus clair

Code :

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

1
2
  #content {
	position : absolute ;

**Erwan31** · 23/06/2008, 18h00

Salut,
le conseil que je peux te donner est de ne faire le choix du positionnement absolue qu'en dernier recours car ce type de positionnement peut poser des problèmes de chevauchements lors du redimensionnement des polices ou du viewport (et donc d'inaccessibilité potentielle) qui sont plus difficilement anticipables que si tu conserves les blocs en flux normal
(j'y inclue les flottant qui ne sont que partiellement retirés du flux normal).

Pour résoudre ton problème tu devrais revenir aux flottants et utiliser une des techniques exposée ici

**Er3van** · 24/06/2008, 10h27

Merci pour le lien

lors du redimensionnement des polices ou du viewport (et donc d'inaccessibilité potentielle)

Ca concerne plutôt la navigation type portable ou le web standard ?

J'vais surement repasser sur du float, mais disons que le positionnement absolu à l'avantage de pouvoir gérer le z-index dont j'aurais vraisemblablement besoin par la suite pour incorporer mes modules...

**Erwan31** · 24/06/2008, 12h43

Envoyé par Er3van

Ca concerne plutôt la navigation type portable ou le web standard ?

Pas seulement et pas forcément, certains utilisateurs, une minorité certes,
consulteront peut-être ton site avec du 800X600 alors que tu n'avais pas
testé cette résolution ou alors certains affichent une barre d'outil latéral ou
tout simplement l'historique, ce qui a pour effet de diminuer la surface d'affichage.
Il y a aussi bien sûr les navigateurs d'appareils portatifs même si si certains
d'entre eux linéarisent le contenu en ne lisant pas ou partiellement la CSS screen.

Envoyé par Er3van

J'vais surement repasser sur du float, mais disons que le positionnement absolu à l'avantage de pouvoir gérer le z-index dont j'aurais vraisemblablement besoin par la suite pour incorporer mes modules...

Rien de t'empêche de combiner le comportement flottant avec un positionnement relatif
et un z-index même si cela nécessite parfois l'utilisation des marges négatives pour arriver à ses fins.

Quel positionnement adopter ?

Positionnement en CSS

Discussions similaires

Partager

Partager