Design Fluide, adaptable aux resolutions

**silentshade** · 03/08/2007, 15h50

Bonjours à tous!

Je sais que le sujet est récurent, mais je ne trouve pas de réponse sufissament précise nul part pour bien m'éclairer. Donc j'ai mon design, auquel, suite au body, j'ai mis un div, et ensuite, dans ce div, j'ai une balise IMG spécifié à 100% 100%. Cela fonctionne pour l'image, mais le reste du contenue, qui n'a aucune spécification autre que la position ABSOLUTE dans la plupart des cas, lui reste inchangé. La plupart des mes éléments sont ''libres'' et ensuite positionnés sur l'image en background grâce à position:absolute. Donc non contenus dans un div. Comment puis-je donc m'assurer que l'ensemble du site va répondre à la résolution de l'utilisateur et s'afficher en conséquence?
Je sais que je dois donner une grosseur spécifique à mes éléments, pour le texte en em? Est-ce que cela implique que tous mes éléments soient dans un div? en tk... je suis pas très certain.

Et comment s'assurer que le positionnement:absolute soit le même dans IE et firefox? Parce qu'il y a un léger décalage.

Merci beaucoup de votre temps et de vos réponses!

**kaiser59** · 03/08/2007, 23h56

Salut,

Un peu de code ça nous aiderais vachement

et si besoin une image du problème.

Merci

**silentshade** · 05/08/2007, 23h50

Bonjours.

Alors d'accord le code est encore tout simple, mais l'effet d'élasticité n'est pas encore présente. Voici le code

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
 
<style type="text/css">
 
html, body
{
height:100%;
margin:0;
}
 
 
#bg
{
width:100%;
height:100%;
}
 
#bgi
{
z-index:1;
}
 
#design
{
	position:absolute;
	width:55%;
	height:50%;
	z-index:2;
	left: 287px;
	top: 2px;
}
 
 
</style>
 
<body>
 
<div id="bg">
<img id="bgi" src="images/bg.png" />
 
<div id="design">
<img src="images/bg4.png" />
 
</div>
 
</div>
 
</body>
</html>

En espérant que cela puisse vous aider.

merci beaucoup!

**kaiser59** · 06/08/2007, 01h09

Ce serait bien d'avoir les images qui va avec

Sinon ton code est mal écrit c'est plutot ceci :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<body>
 
<div id="bg">
  <img  src="images/bg.png" />
</div>
 
<div id="design">
  <img src="images/bg4.png" />
</div>
 
</body>

et ton style :
pour l'image 1

Code css :

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

1
2
3
4
5
#bg img
  {
   width:100%;
   height:100%;
  }

par contre je mets pas le reste parce que j'ai pas très bien compris tu souhaites que tes div prennes toutes la largeur de la page ??

**silentshade** · 06/08/2007, 01h38

Ok alors voici une image http://img237.imageshack.us/my.php?image=latestqy5.jpg

et les explications... j'ai besoin que cette page apparaise tjrs ainsi, peu importe la résolution de l'utilisateur. Mes deux sous menus blanc, ce sont des IFRAMES, car je débute tout juste en web et je ne connais pour l'instant que le html et le css (et qui plus est, je ne les connais pas très bien). je sais que c'est faisable avec du php, mais pour l'instant les iframes m'apporte le résultat souhaiter, alors je ne veux pas trop me compliquer les choses. Donc voila. J'ai besoin de ce design, avec deux iframes, mon menu qui est un menu déroulant en css, et j'ai tous les trucs de copyright et de termes dans le bas également à positionner....

J'avais déjà monté une page fonctionnelle, mais elle n'était pas ''liquide'', et on s'est vite rendu compte moi et mes amis que c'était indispensable...

Et maintenant, c'est vachement compliqué... enfin.... en espérant que tu puisses m'aider.... merci bcp!

P.S. Je m'étais fait conseiller de ne pas appliquer de % aux images directement, qui pixellisent trop facilement... qu'en penses-tu?

**kaiser59** · 06/08/2007, 11h19

Alors c'est simple, pour que ton design reste fixe il te suffit simplement de mettre ton width (et ton height) en px et non en %. Le % voudrait dire que tu étends ton design selon la taille de la fenêtre

Cependant, à l'intérieur de ton div tu peux mettre en % img, vue qu'il prendra la taille par rapport au div et non de la fenêtre.

Sa te donne ceci :

Code css :

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

1
2
3
4
5
6
#bg, #design
{
 width: 500px; /* taille fixe quelque soit la résolution de l'écran */
 margin-left: auto; /* Permet de centrer le design */
 margin-right: auto;
}

Par ailleurs, tu peux aussi faire en sorte que ton image fasse la taille de ton div et de l'adapter ainsi tu pourrais la même en fond du div

Code css :

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

1
2
3
4
5
6
#bg 
 {
   height: 100px;
   background: transparent url(../images/bg.png) no-repeat;
/* j'ai mis no-repeat dans le cas où ton images aurait la taille exacte de ton div */
 }

Même principe pour #design

Par contre je comprend pas tu me dis

Envoyé par silentshade

Mes deux sous menus blanc, ce sont des IFRAMES...

Si on se fie à l'image je vois pas de sous menu blanc, je vois un menu avec des onglets ok et en dessous un cadre "Nouvelles" et un autre avec des images sur la droite. Désolé de pas trop comprendre la

Design Fluide, adaptable aux resolutions

CSS

Vue hybride

Discussions similaires

Partager

Partager