Layout 2 colonnes semi fluides non réalisable ?

**LEK** · 21/09/2010, 00h39

Bonsoir,
je viens ces deux derniers jours de tester plusieurs techniques css pour essayer de réaliser le layout suivant mais je tombe toujours sur un os ( a tel point que je compte rebasculer sur une présentation à base de tableau)

=> Je voulais réaliser un template de page à 2 colonnes avec header et footer qui occupe tout l'écran et s'étirant vers le bas suivant le contenu (cf pièce jointe)... Ce qui me pose problème c'est la barre de navigation et la le panneau contextuel.
=> Pensez-vous que ce layout est réalisable en full css ?

PS : j'ai déjà essayez ces sites
http://matthewjamestaylor.com/blog/u...enu-pixels.htm
http://www.ejeliot.com/blog/61
sans grand succès

Merci à quiconque pourra m'aider sur ce coup ;-)

Invité · 21/09/2010, 10h41

Bonjour LEK,

C'est tout à fait possible. As-tu regardé du côté des Framework CSS ?

Envoyé par LEK

Ce qui me pose problème c'est la barre de navigation et la le panneau contextuel.

Peux-tu en dire plus ?

**Macmillenium** · 21/09/2010, 11h11

Bonjour,

Pour positionner le footer en bas de page, je t'invite à consulter la FAQ CSS

http://css.developpez.com/faq/?page=...ooter_bas_page
Pour les colonnes qui occupent toute la hauteur du viewport, tu peux essayer la technique des colonnes factices.

Invité · 21/09/2010, 12h04

Voici ce que je propose.

Le code HTML sémantique :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Layout CSS HTML</title>
</head>
<body>
  <div id="conteneur">
    <div id="header">
      <h1>Header</h1>
    </div>
    <div id="wrapper">
      <div id="panneau_central">
        <p>Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.</p>
        <p>Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum.</p>
        <p>Haec igitur prima lex amicitiae sanciatur, ut ab amicis honesta petamus, amicorum causa honesta faciamus, ne exspectemus quidem, dum rogemur; studium semper adsit, cunctatio absit; consilium vero dare audeamus libere. Plurimum in amicitia amicorum bene suadentium valeat auctoritas, eaque et adhibeatur ad monendum non modo aperte sed etiam acriter, si res postulabit, et adhibitae pareatur.</p>
        <p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p>
        <p>Et olim licet otiosae sint tribus pacataeque centuriae et nulla suffragiorum certamina set Pompiliani redierit securitas temporis, per omnes tamen quotquot sunt partes terrarum, ut domina suscipitur et regina et ubique patrum reverenda cum auctoritate canities populique Romani nomen circumspectum et verecundum.</p>
        <p>Quam ob rem ut ii qui superiores sunt submittere se debent in amicitia, sic quodam modo inferiores extollere. Sunt enim quidam qui molestas amicitias faciunt, cum ipsi se contemni putant; quod non fere contingit nisi iis qui etiam contemnendos se arbitrantur; qui hac opinione non modo verbis sed etiam opere levandi sunt.</p>
        <p>Proinde concepta rabie saeviore, quam desperatio incendebat et fames, amplificatis viribus ardore incohibili in excidium urbium matris Seleuciae efferebantur, quam comes tuebatur Castricius tresque legiones bellicis sudoribus induratae.</p>
      </div>
      <div id="panneau_navigation">
      <p><span style="font-weight:bold">Panneau navigation.</span><br>Et olim licet otiosae sint tribus pacataeque centuriae et nulla suffragiorum certamina set Pompiliani redierit securitas temporis, per omnes tamen quotquot sunt partes terrarum, ut domina suscipitur et regina</p>
    </div>
    </div>
    <div id="panneau_lateral">
      <p><span style="font-weight:bold">Panneau lateral.</span><br>Et olim licet otiosae sint tribus pacataeque centuriae et nulla suffragiorum certamina set Pompiliani redierit securitas temporis, per omnes tamen quotquot sunt partes terrarum, ut domina suscipitur et regina</p>
    </div>
    <div id="panneau_contextuel">
      <p><span style="font-weight:bold">Panneau contextuel.</span><br>Tu autem, Fanni, quod mihi tantum tribui dicis quantum ego nec adgnosco nec postulo, facis amice; sed, ut mihi videris, non recte iudicas de Catone; aut enim nemo, quod quidem magis credo, aut si quisquam, ille sapiens fuit. Quo modo, ut alia omittam, mortem filii tulit! memineram Paulum, videram Galum, sed hi in pueris, Cato in perfecto et spectato viro.</p>
    </div>
    <div id="footer">
      <p><span style="font-weight:bold">Footer.</span><br>Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.</p>
    </div>
  </div>
</body>
</html>

La feuille de style CSS associée :

Code CSS :

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
html, body {
  margin:0;
  padding:0;
  background: grey;
}
 
body {
  font: 12px arial,sans-serif;
}
 
div#header h1 {
  height:80px;
  line-height:80px;
  margin:0;
  padding-left:10px;
  background: yellowgreen;
}
 
div#panneau_central p {
  line-height:1.4;
}
 
div#panneau_contextuel {
  background: lightblue;
}
 
div#footer {
  background: orange;
  color: white;
}
 
div#footer p {
  margin:0;
  padding:5px 10px;
}
 
div#wrapper {
  float:left;
  width:100%;
  margin-left:-200px;
}
 
div#panneau_central {
  min-height: 200px;
  margin: 10px 10px 10px 200px;
  background-color: beige;
}
 
div#panneau_navigation {
  height: 80px; /* Hauteur fixe */
  margin: 10px 10px 10px 200px;
  background-color: tomato;
}
 
div#panneau_lateral {
  background-color: palegreen ;
  float:right;
  width:200px;
}
 
div#panneau_contextuel {
  float:right;
  clear:right;
  width:200px;
}
 
div#footer {
  clear:both;
  width:100%;
}

L'aperçu en pièce jointe

.

Cordialement,

**LEK** · 21/09/2010, 12h36

Bonjour à vous,
et merci pour vos réponses :
Karzoff => j'ai déjà écris un layout comme celui que tu me propose : mais il possède deux problème :
1 ) le footer dois toujours être collé en bas de page (j'ai réussi à le faire avec la technique sticky footer)
2 ) le panneau de navigation et le panneau contextuel doivent être positionnés en bas de page juste au dessus du footer : c'est là que je commence à rencontrer des problèmes car je les ais positionné de manière absolu par rapport au footer en essayant de leur réserver de la place dans les colones latérales et de contenu mais sans grand succès...

J'ai ausis regardé du côté des framework (en fait juste blueprint) mais cela ne semblait pas réalisable avec celui-ci (même si je t'avouerais que je n'y ai passé qu'une heure d'essai)

Macmillenium => j'ai testé le positionnement du footer en bas de page : pour ça pas de problème mais comme je le disais plus haut je rencontre aussi des problèmes pour mes deux panneaux du bas (contextuel et de navigation) que la technique des colonnes factices ne m'aide pas à résoudre car leur hauteur semble déterminé par le contenu de la plus haute colonne...

Merci en tous cas d'avoir essayé.
Je ne désespère pas de trouver une technique satisfaisante mais plus j'y passe du temps plus j'ai l'impression que c'est le type de problème que seul un tableau peut résoudre...

Invité · 21/09/2010, 14h37

Envoyé par LEK

le footer dois toujours être collé en bas de page (j'ai réussi à le faire avec la technique sticky footer)

C'est une bonne méthode

.

Envoyé par LEK

2 ) le panneau de navigation et le panneau contextuel doivent être positionnés en bas de page juste au dessus du footer

Et comme ça ?
Code HTML

Code HTML :

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

1
2
3
4
5
6
7
8
    <div id="wrapper_lateral">
      <div id="panneau_lateral">
        <p><span style="font-weight:bold">Panneau lateral.</span><br>Et olim licet otiosae sint tribus pacataeque centuriae et nulla suffragiorum certamina set Pompiliani redierit securitas temporis, per omnes tamen quotquot sunt partes terrarum, ut domina suscipitur et regina</p>
      </div>
      <div id="panneau_contextuel">
        <p><span style="font-weight:bold">Panneau contextuel.</span><br>Tu autem, Fanni, quod mihi tantum tribui dicis quantum ego nec adgnosco nec postulo, facis amice; sed, ut mihi videris, non recte iudicas de Catone; aut enim nemo, quod quidem magis credo, aut si quisquam, ille sapiens fuit. Quo modo, ut alia omittam, mortem filii tulit! memineram Paulum, videram Galum, sed hi in pueris, Cato in perfecto et spectato viro.</p>
      </div>
    </div>

On crée un bloc wrapper_lateral qui contiendra #panneau_navigation et #panneau_central

Code CSS

Code CSS :

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

1
2
3
4
5
div#wrapper_lateral {
  position: absolute;   /* On donne une position absolue au bloc */
  bottom: 80px;         /* On place le wrapper_lateral en bas en décalant de la hauteur du footer */
  right: 0;             /* On place le wrapper_lateral à droite sans décalage */
}

Layout 2 colonnes semi fluides non réalisable ?

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager