Discussion :

[FMaz]

Bonjour,

Je cherche à faire un design liquide de type wide screen (avoir 2 barres horizontales en haut et en bas d'une hauteur fixe, et le contenu au centre, entre ces 2 barres.


Bon, actuellement, ca donne ceci:
www.lesfaramineux.com

Mais je ne suis pas totalement satisfait car:
- A) Les barres noires n'ont pas une hauteur fixe
- B) Le texte du haut n'est pas centré verticalement (middle)
- C) Le texte tout en bas n'est pas aligné avec le bas (bottom)

Des idées pour améliorer ce design ? (J'èspère que oui, car je trouve ca bordelique actuellement)

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
 
<div style="position:absolute;height:100%;width:100%;">
	<div style="position:absolute;text-align:center;vertical-align:middle;top:0;width:100%;height:10%;">
		<span>
			En attendant notre vrai site et le retour des st&eacute;gosauriens, voici notre MySpace :
		</span>
	</div>
 
	<div style="position:absolute;text-align:center;top:10%;vertical-align:top;width:100%;height:80%;">
 
		<iframe src="http://www.myspace.com/lesfaramineux" style="border:0px;width:100%;height:100%;"></iframe>
	</div>
 
	<div style="position:absolute;text-align:right;vertical-align:middle;top:90%;width:100%;height:5%;">
		<span style="margin-right:25px;font-style:italic;">
			(Et parceque les faramineux sont HD Ready: notre site est en wide-screen, &eacute;videmment)
		</span><br />
	</div>
	<div style="position:absolute;text-align:center;vertical-align:bottom;top:95%;width:100%;height:5%;">
 
		<span style="margin-right:25px;font-size:9px;">
			Copyright &copy; -65,000,000 av. J.C.&ndash;2007 Les Faramineux.
		</span><br />
	</div>
</div>

[FMaz]

Bon, pour ce qui est des tailles de bordures fixes, plutot que d'utiliser les height et des %, j'ai utilisé top et bottom.

Bottom est-il compatible avec à peu près tout ?

Mais ca ne règle pas mes troubles d'alignements verticaux du texte.