Positionnement d'éléments

par **Sékiltoyai** » 26 mai 2007, 00:56

Merci beaucoup, c'était quasiment ce que je recherchais.
Il y avait juste quelques petits trucs à modifier comme l'image qui, quand elle était trop grande, passait au dessous de l'élément flottant, et quelques marges et positions à régler.
Voila le résultat :

<html> 
<head> 
   <title></title> 
<style type="text/css"> 
body { 
   margin: 0px; 
   padding: 0px; 
   overflow: hidden; 
   width: 100%; 
   height: 100%; 
   text-align: center; 
} 
#header { 
   border-color: black; 
   border-width: 1px; 
   border-style: solid; 
   width: 100%; 
    height: 10%; 
    text-align: center; 
    margin: 2% 0% 2% 0%; 
} 
#navigation 
   { 
      border-color: black; 
      border-style: solid; 
      border-width: 1px; 
      width: 100%; 
      height: 3%; 
    margin: 0% 0% 2% 0%;  
      padding: 0px; 
   } 
    
#navigation li 
   { 
      border-color: black; 
      border-width: 1px; 
      border-style: solid; 
      display:inline; 
      margin: 0px; 
   } 
#conteneur 
   { 
   width: 90%; 
    height: 100%; 
    text-align: left; 
    margin: 0px auto; 
   } 
#liste 
   { 
   border-color: black; 
      border-style: solid; 
      border-width: 1px; 
      float: right; 
      width: 20%; 
    margin: 0% 0% 2% 0%;
      height: 75%; 
   } 
#monimage { 
     position: relative; 
   width: 70%; 
   height: 75%; 
    margin: 0% 0% 2% 0%; 
     border-color: black; 
      border-style: solid; 
      border-width: 1px; 
} 
#image {
	position:absolute;
	max-width:100%;
	max-height:100%;
}
#clearer { 
   clear: both; 
} 
</style> 
</head> 
<body> 
   <div id="conteneur"> 
   <div id="header"> 
      Site 
   </div> 
   <ul id="navigation"> 
      <li>yo</li> 
      <li>coucou</li> 
      <li>c'est moi</li> 
   </ul> 
    
   <div id="liste"> 
    <table>
    <tr>
    <td>test</td><td>test</td>
    </tr>
    <tr>
    <td>test</td><td>test</td>
    </tr>
    <tr>
    <td>test</td><td>test</td>
    </tr>
    </table>
   </div> 
	<div id="monimage">
		<img id="image" src="http://localhost/php_docs/uds_img/img.php?text=test" />
	</div>
   <div id="clearer"></div> 
   </div> 
</body> 
</html>

Je n'ai pas encore adapté au script donc je passerais mettre le tag Résolu plus tard.

Par contre, j'ai une question plutôt importante : Est-ce que IE7 gère le max-height et le max-width, et pour des images, comment le gère-t-il ?

par **Shrell** » 25 mai 2007, 21:33

tiens, essaie ca pour voir si ca correspond à peu près à ce que tu souhaites :

Code : Tout sélectionner

<html>
<head>
	<title></title>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	width: 100%;
	height: 100%;
	text-align: center;
}
#header {
	border-color: black;
	border-width: 1px;
	border-style: solid;
	width: 90%; 
    height: 10%; 
    text-align: center; 
    margin: 1% auto;
}
#navigation
   { 
      border-color: black; 
      border-style: solid; 
      border-width: 1px; 
      width: 90%; 
      height: 3%; 
      margin: 1% auto;
      padding: 0px;
   } 
    
#navigation li 
   { 
      border-color: black; 
      border-width: 1px; 
      border-style: solid; 
      display:inline; 
      margin: 0px;
   }
#conteneur 
   {
	width: 90%; 
    height: 100%; 
    text-align: left; 
    margin: 0px auto;
   }
#liste 
   {
   border-color: black; 
      border-style: solid; 
      border-width: 1px; 
      float: right;
      width: 30%;
      margin: 1% 5%;
      height: 79%;
   } 
#monimage {
	  position: relative;
	  left: 5%;
	  border-color: black; 
      border-style: solid; 
      border-width: 1px; 
}
#clearer {
	clear: both;
}
</style>
</head>
<body>
	<div id="conteneur">
	<div id="header">
		&nbsp;
	</div>
	<ul id="navigation">
		<li>yo</li>
		<li>coucou</li>
		<li>c'est moi</li>
	</ul>
	
	<div id="liste">
	
	</div>
	<img id="monimage" src="images/help.gif" />
	<div id="clearer"></div>
	</div>
</body>
</html>

par **Sékiltoyai** » 25 mai 2007, 20:19

Si je comprend bien, ca ne semble pas possible de faire ce que je cherche à faire, je me trompe ?

par **Cyrano** » 25 mai 2007, 14:04

"Sous réserve" parce que je ne me suis jamais battu très longtemps avec cette propriété qui fonctionne plus ou moins. J'ai donc en général toujours trouvé une astuce pour contourner le problème, n'ayant pas trop de temps à passer sur un détail.

par **MainMa** » 25 mai 2007, 11:08

mais tu peux faire des tests avec la propriété min-height (sous-réserve).

Pourquoi sous réserve ? Quelque chose m'échappe ?

par **Cyrano** » 25 mai 2007, 06:52

...que j'ai mis en position relative, en lui spécifiant un top, un bottom, un right, et un left...

Ça ne sert à rien : on positionne un élément par rapport à un seul des deux cotés d'un axe, donc en vertical soit par rapport au bord haut soit par rapport au bord bas de l'élément de référence et droite ou gauche sur l'axe horizontal. Utiliser les quatre revient à essayer de l'étirer et ces propriétés ne sont pas conçues dans ce but.
Mais éventuellement, si tu travailles sur un élément de type bloc, tu peux lui donner des dimensions en pourcentage pour qu'il s'adapte selon la dimension de la fenêtre . Ça fonctionnera au plan horizontal. Pour la verticale, c'est plus compliqué, mais tu peux faire des tests avec la propriété min-height (sous-réserve).

Un truc, si tu as une maquette en ligne quelque part, ce sera beaucoup plus facile de t'aider, on pourra utiliser la barre web-developper de Firefox pour procéder à des tests et te donner des réponses plus appropriées.

par **Sékiltoyai** » 25 mai 2007, 01:56

Avec ce style :

Code : Tout sélectionner

<style type="text/css">

	p.header
	{
		width: 90%;
		height: 60px;
		margin: 10px;
		text-align: center;
	}
	
	ul.menu
	{
		width: 90%;
		height: 40px;
		margin: 5px;
	}
	
	ul.menu li
	{
		display:inline;
	}

	div.test
	{
		width: 90%;
		margin: 10px;
		background-color: #0000FF;
	}

	table
	{
		float: right;
		width: 150px;
		height: 80%;
		background-color: #00FF00;
	}

	img.main
	{
		margin: 5px;
		height: 90%;
	}

	table img
	{
		height: 40px;
		width: 40px;			
	}
	
</style>

Et ce balisage :

Code : Tout sélectionner

<p class="header">
...
</p>

<ul class="menu">
...
</ul>

<div class="test">
	
	<img class="main" id="main_img" src="..." />		
		
	<table>
	...
	</table>
		
</div>

J'ai mon image qui ne respecte aucune contrainte, de hauteur comme de largeur, et du coup mon élément flotant passe au dessous à droite de l'image au lieu de la forcer à se réduire. Et j'aimerais aussi que le div de mon élément flottant se continue jusqu'en bas de la page plutôt que de s'adapter à son contenu.

par **MainMa** » 25 mai 2007, 01:30

Pour ce genre de page, vous n'avez pas à toucher au paramètre "position", et vous n'avez rien à mettre ni en absolu, ni en relatif.

Les paramètres "top", "left", etc. sont à ne pas toucher non plus.

Pour les deux éléments en haut de page (le header et la liste), vous avez juste à les mettre directement, sans aucun paramètre "position", et jouer ensuite avec le paramètre "margin" ou "padding" en spécifiant les quatre valeurs de la marge : haut, droit, bas, gauche. (Ex : margin:10px 5px 20px 0px).
En ce qui concerne le tableau et l'image, vous avez la superposition des deux éléments du fait d'utiliser "position:...".

par **Sékiltoyai** » 25 mai 2007, 00:46

J'ai lu vos propositions et l'article proposé par Cyrano, et j'ai fait pas mal de tests.
J'ai mis tout d'abord le header et le menu en position relative. J'ai encapsulé les 2 autres éléments dans un div, que j'ai mis en position relative, en lui spécifiant un top, un bottom, un right, et un left, que, premier problème, il refuse de respecter...
Ensuite, j'ai mis le tableau (ou plutôt le div encapsulant le tableau) en float: right; et positionné selon top et bottom. Enfin j'ai mis positionné l'image selon right, top, bottom, et left.
Le(s) problème(s), c'est que que je mette les éléments en position relative ou absolute, je n'arrive pas à leur faire respecter mes contraintes de positionnement. Et sur le float, il place très bien le tableau à droite, mais il est toujours soit au dessus, soit au dessous, soit sur l'image même !
Je commence à me dire que CSS n'est vraiment pas carré...

Bref, je sollicite encore une fos votre aide, est ce que vous pourriez préciser vos propos, pour ce problème qui vous parait évident, mais qui me semble plus qu'obscur...

par **Cyrano** » 24 mai 2007, 07:37

Sur les positionnement, il y a trois excellents articles sur openweb. Il faut arriver dans un premier temps à comprendre qu'un élément positionné en absolute sort du flux, donc ses dimensions ne seront pas prises en compte par le navigateur pour le positionnement des éléments suivants. Donc ce qu'on va faire en général, c'est utiliser un positionnement en relative à l'intérieur duquel on positionnera notre élément en absolute. La position absolute se fait par rapport au premier élément parent positionné.

Attention avec les marges, Internet explorer ne les interprète pas correctement. Par défaut, un bloc div n'a ni marge intérieure (padding) ni marge extérieure (margin) mais IE en ajoute. Il faut donc éventuellement commencer par supprimer toutes les marges et par la suite en rajouter ponctuellement selon les besoins.

Donc pour répondre à ta question initiale : oui, il est tout à fait possible de réaliser le schéma que tu as montré par feuille de style CSS.

par **Sékiltoyai** » 24 mai 2007, 03:15

Le tout en position relative ?

par **MainMa** » 24 mai 2007, 00:55

Est ce que c'est à priori possible de faire ce que je cherche à faire ?

Bah oui.

Pour le titre et la liste, vous n'avez pas à changer leur position. Il suffit juste de modifier le paramètre "margin" pour les espacer l'un de l'autre.

En ce qui concerne l'image et le tableau, vous pouvez soit positionner l'image à gauche avec "float:left;" et ne pas toucher le tableau, soit, à l'inverse, de positionner le tableau à droite ("float:right") et laisser l'image.

par **Sékiltoyai** » 24 mai 2007, 00:08

Bonsoir à tous,

Je m'attèle en ce moment à la conception d'un petit outil qui doit permettre d'afficher les images situés dans plusieurs dossiers. Niveau XHTML, javascript et PHP, aucun problème, mais les problèmes arrivent quand je dois faire l'interface, en particulier le positionnement des éléments.
Je dois positionner 4 éléments :
-Le header, tout en haut : un paragraphe <p>, situé à une certaine distance du haut, des 2 côtés, et de hauteur définie.
-Le menu, juste au dessous : une liste <ul>, avec les mêmes conditions de positionnement que le header.
-La liste des images, à droite : un tableau, positionné à une distance définie du haut, du bas, et de la droite du document, et de largeur définie.
-L'image, située à une certaine distance du haut, du bas, de la gauche, et de la droite (de largeur et hauteur complètement dépendantes de la résolution du client.
(Un shéma ascii en Annexe 1).

Armé de la référence CSS2 et du navigateur Opera 9 (pas de pbs avec la référence, il passe parfaitement l'acid2), je me suis attelé au problème. J'ai essayé un peu toutes les combinaisons de position (relative, static, inherit, absolute, fixed...) mais CSS2 semble assez compliqué quand on veut faire des choses simples.

J'aimerais donc que l'on réponde à certains de mes questionnements :
Est ce que c'est à priori possible de faire ce que je cherche à faire ?
Quel positionnement dois-je utiliser pour chaque élément, quelles modifications à faire pour régler le problème ?
Et dans le cas où ce n'est pas possible d'avoir exactement ce que je cherche, mais seulement une solution approchée, comment dois je procéder ?

Merci d'avance pour vos réponses.

Annexe :
Shéma en ascii du document. Les flèches représentent les dimensions définies, le reste devant être déduit par le navigateur...

Code : Tout sélectionner

 ___________________________________________________________________________________________________
|                            ^                                                                      |
|    ________________________v__________________________________________________________________    |
|   |                        ^               titre  ( <p> )                                     |   |
|<->|                        |                                                                  |<->|
|   |________________________v__________________________________________________________________|   |
|                            ^                                                                      |
|    ________________________v__________________________________________________________________    |
|<->|                        ^                menu  ( <ul><li> )                                |<->|
|   |________________________v__________________________________________________________________|   |
|                            ^                                                    ^                 |
|    ________________________v____________________________________      __________v_____________    |
|   |                                                             |    |                        |   |
|   |                                                             |    |                        |   |
|   |                                                             |    |                        |   |
|   |                                                             |    |                        |   |
|   |                                                             |    |                        |   |
|   |                                                             |    |                        |   |
|   |                                                             |    |                        |   |
|   |                        Image  ( <img> )                     |    |   liste  ( <table> )   |   |
|   |                                                             |    |                        |   |
|   |                                                             |    |                        |   |
|   |                                                             |    |                        |   |
|<->|                                                             |<-->|<---------------------->|<->|
|   |                                                             |    |                        |   |
|   |                                                             |    |                        |   |
|   |                                                             |    |                        |   |
|   |                                                             |    |                        |   |
|   |                                                             |    |                        |   |
|   |                                                             |    |                        |   |
|   |                                                             |    |                        |   |
|   |                                                             |    |                        |   |
|   |                                                             |    |                        |   |
|   |                                                             |    |                        |   |
|   |                                                             |    |                        |   |
|   |                                                             |    |                        |   |
|   |_____________________________________________________________|    |________________________|   |
|                            ^                                                    ^                 |
|____________________________v____________________________________________________v_________________|

Positionnement d'éléments

Répondre

Étendre la vue Revue du sujet : Positionnement d'éléments

Positionnement d'éléments