Discussion :

[Fredovsky]

Bonjour à tous !

Voici en gros le design du site : http://www.estaca.fr/cercleaero/css/
Ici se trouve le CSS : http://www.estaca.fr/cercleaero/css/test.css

Mon problème est le suivant :

Les colonnes rouge (div page) et verte (div sidebar) vont varier en hauteur selon le contenu.

Les ombres (div ombres) et le petit bout de gris qu'on voit autour (div wrapper) devront s'adapter à la taille de la plus grande des 2 colonnes.

La barre rose (div footer) devra se siter tout en dessous.

Une solution à proposer ?
J'essaye de faire un css propre et de pas trop bidouiller mais avec IE6 c'est pas toujours facile, d'ailleurs j'arrive pas non plus a faire ça pour firefox.

Merci d'avance !

[Macmillenium]

Bonsoir,

- les div #page et #sidebar sont positionnées en absoute et par conséquence elles n'héritent pas la hauteur de leur conteneur parents #wrapper. De plus tu as un height:100px sur ce dernier

- Pour le problème du footer, étant donné que #page et #sidebar sont retiré du flux, #footer se place automatiquement après l'élément qui le précède dans le flux naturel (#wrapper).

- #ombre (positionné en absolute) est inutile. Aucun héritage de largeur/hauteur n'est possible avec ce type positionnement.

Le plus simple c'est de floatter #page et #sidebar, mettre le background ombre directement sur #wrapper et lui attribuer un overflow:hidden pour qu'il englobe ces enfants floattants

Quelque chose de ce genre :
CSS : (j'ai mis margin-left: 12px; au lieu de margin-left: 13px; sur #page pour que sa passe sous IE6)

Code :

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
71
72
73
74
 
@charset "utf-8";
* {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	margin: 0px;
	padding: 0px;
}
#wrapper {
	margin: auto;
	width: 974px;
	overflow:hidden;
	background-color: #CCC;
	background-image: url(images/ombres.png);
	background-repeat: repeat-y;
	*background: none;
	*filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ombres.png',sizingMethod='scale');
}
 
#footer {
	background-color: #F6F;
	clear: both;
	height: 50px;
	width: 100%;
}
 
#page {
	width: 707px;
	float:left;
	background-color: #F00;
	margin-left: 12px;
}
 
#sidebar {
	background-color: #0F0;
	width: 242px;
	float:left;
}
 
body {
	background-repeat: repeat-x;
	background-position: 0px 141px;
	background-color: #060;
}
 
#header {
	background-color: #099;
	height: 141px;
	width: 100%;
	text-align: left;
	background-image: url(images/header.png);
	background-position: center;
}
#container {
	width: 100%;
	float: none;
	clear: both;
}
 
#headercentre {
	margin: auto;
	width: 990px;
	background-image: url(images/header.png);
	background-position: center;
	height: 141px;
}
 
#down {
	clear: both;
	height: 0px;
	overflow: hidden;
}

HTML :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<div id="container">
	<div id="header">
    	<div id="headercentre"></div>
    </div>
 
    <div id="wrapper">
 
      <div id="page">Dabo hoc mihi, et meipsum hac ex parte laudare nihil erubescam, me numquam alia de causa philosophatum nisi ut philosopharer, nec ex studiis meis, ex meis lucubrationibus, mercedem ullam aut fructum vel sperasse alium vel quaesiisse, quam animi cultum et a me semper plurimum desideratae veritatis cognitionem. Cuius ita cupidus semper et amantissimus fui ut, relicta omni privatarum et publicarum rerum cura, contemplandi ocio totum me tradiderim; a quo nullae invidorum obtrectationes, nulla hostium sapientiae maledicta, vel potuerunt antehac, vel in posterum me deterrere poterunt. Docuit me ipsa philosophia a propria potius conscientia quam ab externis pendere iudiciis, cogitareque semper, non tam ne male audiam, quam ne quid male dicam ipse vel agam. Equidem non eram nescius, Patres colendissimi, futuram hanc ipsam meam disputationem quam vobis omnibus, qui bonis artibus favetis et augustissima vestra praesentia illam honestare voluistis, gratam atque iucundam, tam multis aliis gravem atque molestam; et scio non deesse qui inceptum meum et damnarint antehac et in praesentia multis nominibus damnent. Ita consueverunt non pauciores, ne dicam plures, habere oblatratores quae bene sancteque aguntur ad virtutem, quam quae inique et perperam ad vitium. Sunt autem qui totum hoc disputandi genus et hanc de literis publice disceptandi institutionem non approbent, ad pompam potius ingenii et doctrinae, quam ad comparandam eruditionem esse illam asseverantes. Sunt qui hoc quidem exercitationis genus non improbent, sed in me nullo modo probent, quod ego hac aetate, quartum scilicet et vigesimum modo natus annum, de sublimibus Christianae theologiae mysteriis, de altissimis philosophiae locis, de incognitis disciplinis, in celebratissima urbe, in amplissimo doctissimorum hominum consessu, in Apostolico senatu62, disputationem proponere sim ausus. Alii, hoc mihi dantes quod disputem, id dare nolunt quod de nongeritis disputem quaestionibus63, tam superfluo et ambitiose quam supra vires id factum calumniantes. Horum ego obiectamentis et manus illico dedissem, si ita quam profiteor philosophia me edocuisset et nunc, illa ita me docente, non responderem, si rixandi iurgandique proposito constitutam hanc inter nos disceptationem crederem. Quare, obtrectandi omne lacessendique propositum, et quem scribit Plato a divino semper abesse choro, a nostris quoque mentibus facessat livor, et an disputandum a me, an de tot etiam quaestionibus, amice incognoscamus. Primum quidem ad eos; qui hunc publice disputandi morem calumniantur, multa non sum dicturus, quando haec culpa, si culpa censetur, non solum vobis omnibus, doctores excellentissimi, qui saepius hoc munere, non sine summa et laude et gloria, functi estis, sed Platoni, sed Aristoteli, sed probatissimis omnium aetatum philosophis mecum est communis. Quibus erat certissimum nihil ad consequendam quam quaerebant veritatis cognitionem sibi esse, potius quam ut essent in disputandi exercitatione frequentissimi. Sicut enim per gymnasticam corporis vires firmiores fiunt, ita dubio procul, in hac quasi literaria palaestra, animi vires et fortiores longe et vegetiores evadunt. Nec crediderim ego aut Poetas aliud per decantata Palladis arma, aut Hebraeos, cum barzel, ferrum, sapientum symbolum esse dicunt64, significasse nobis quam honestissima hoc genus certamina, adipiscendae sapientiae oppido quam necessaria. Quo forte fit ut et Chaldaei, in eius genesi qui philosophus sit futurus, illud desiderent, ut Mars Mercurium triquetro aspectu conspiciat65, quasi, si hos congressus, haec bella substuleris, somniculosa et dormitans futura sit omnis philosophia. At vero cum his qui me huic provinciae imparem dicunt, difficilior est mihi ratio defensionis: nam si parem me dixero, forsitan immodesti et de se nimia sentientis, si imparem fatebor, temerarii et inconsulti notam videor subiturus. Videte quas incidi angustias, quo loco sim constitutus, dum non possum sine culpa de me promittere, quod non possum mox sine culpa non praestare. Forte et illud Job afferre possem, spiritum esse in omnibus66, et cum Timotheo audire a nemo contemnat adolescentiam tuam)67.</div>
      <div id="sidebar">Dabo hoc mihi, et meipsum hac ex parte laudare nihil erubescam, me numquam alia de causa philosophatum nisi ut philosopharer, nec ex studiis meis, ex meis lucubrationibus, mercedem ullam aut fructum vel sperasse alium vel quaesiisse, quam animi cultum et a me semper plurimum desideratae veritatis cognitionem. Cuius ita cupidus semper et amantissimus fui ut, relicta omni privatarum et publicarum rerum cura, contemplandi ocio totum me tradiderim; a quo nullae invidorum obtrectationes, nulla hostium sapientiae maledicta, vel potuerunt antehac, vel in posterum me deterrere poterunt. Docuit me ipsa philosophia a propria potius conscientia quam ab externis pendere iudiciis, cogitareque semper, non tam ne male audiam, quam ne quid male dicam ipse vel agam. Equidem non eram nescius, Patres colendissimi, futuram hanc ipsam meam disputationem quam vobis omnibus, qui bonis artibus favetis et augustissima vestra praesentia illam honestare voluistis, gratam atque iucundam, tam multis aliis gravem atque molestam; et scio non deesse qui inceptum meum et damnarint antehac et in praesentia multis nominibus damnent. Ita consueverunt non pauciores, ne dicam plures, habere oblatratores quae bene sancteque aguntur ad virtutem, quam quae inique et perperam ad vitium. Sunt autem qui totum hoc disputandi genus et hanc de literis publice disceptandi institutionem non approbent, ad pompam potius ingenii et doctrinae, quam ad comparandam eruditionem esse illam asseverantes. Sunt qui hoc quidem exercitationis genus non improbent, sed in me nullo modo probent, quod ego hac aetate, quartum scilicet et vigesimum modo natus annum, de sublimibus Christianae theologiae mysteriis, de altissimis philosophiae locis, de incognitis disciplinis, in celebratissima urbe, in amplissimo doctissimorum hominum consessu, in Apostolico senatu62, disputationem proponere sim ausus. Alii, hoc mihi dantes quod disputem, id dare nolunt quod de nongeritis disputem quaestionibus63, tam superfluo et ambitiose quam supra vires id factum calumniantes.</div>
      <div id="down"></div>
  </div>
    <div id="footer">Sunt autem qui totum hoc disputandi genus et hanc de literis publice.</div>
 
</div>