Discussion :

[Deallyra]

(re)Bonjour,

Voilà... Mon problème est que mon maître de stage à rejeté ma mise en page et je dois la recommencer et avec le sourire
Mais le truc c'est qu'elle m'a demandé de faire une disposition d'image particulière et je patauge allègrement dans le code du style CSS pour DIV...

en gros, je voudrais arriver à un résultat de ce genre


J'ai réussi en mettant des positions absolue et en déplaçant à l'aveugle mes images
(top : 210px; left : 400px par exemple)
Mais le problème est que mon site doit pouvoir être lisible sur n'importe quel type d'écran...
Je précise que les valeurs de déplacement en pixel que je donnais se faisait à partir du bord supérieur gauche de mon conteneur et non contenu...

Je suis consciente d'en demander beaucoup...
Désolée et merci à ceux qui se pencheront sur mon problème.

(remarque c'est ça ou je tue mon maître de stage )

[Bisûnûrs]

La taille de ton div conteneur est en quelle unité ? Si il a une taille fixe, il faut tout simplement lui mettre un position:relative et mettre tes images dans ce div en position:absolute et régler ça au pixel près, ça ne devrait pas bouger quel que soit l'écran qui le visualise.

[Deallyra]

Si par conteneur, on entend bien la même chose à savoir le div qui englobe tout les autres, je peux te répondre qu'il n'est pas en taille fixe.

voici son CSS

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
 
.DeuxCol #conteneur 
{
	background-color : #FFFFFF;
	position : absolute;
	width : 86%;
	top : 1% ;
	bottom : 1%;
	left : 7%;
	right : 7%;
	text-align : justify;
}
 
Il s'adapte à chaque PC

[Bisûnûrs]

Non, j'entendais le div bleu sur ton croquis qui comprend l'image en background.

[Deallyra]

Donc ça correspond à mon DIV #contenu.
Voici son code.

Code :

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

1
2
3
4
5
6
7
8
9
10
 
.DeuxCol #contenu 
{
	padding-right : 10px;
	margin-left : 3%;
	margin-right : 3%;
	height : 60%;
	width : 78%;
	overflow-y : scroll;
}

Celui ci évolue également en fonction de l'écran de l'internaute...

[Candygirl]

est-ce que tu pourrais montrer une image du rendu final (une maquette) que tu es censé avoir pour se faire une idée (si tu as le droit bien sûr) ?

[Deallyra]

ben là ça coince en fait...

(je vais vraiment étriper mon maître de stage ^^)

le rendu final... je vais le modeliser...mais ça va être quasiment la même chose que précédemment...

Je ne pourrais pas vous fournir mieux et j'en suis désolée...
Je n'ai même pas la possibilité d'expliquer clairement mon problème pour que l'on m'aide...
L'année prochaine, je rajouterais une clause dans la convention
Tenez

[Bisûnûrs]

Dans ton cas, je ne vois pas pourquoi tout mettre en position absolue alors.

Tu as un div avec une image en background et dans ce div viennent se mettre tout simplement des éléments dans le flux.

Je vois ça comme ça, mais si tu as un élément qui fait que ce n'est pas possible, dis-le nous. ^^

[Candygirl]

ok et quels sont donc les comportements imposés par tonaître de stage:

- le site est-il fixe extensible ou élastique ? Occupe-t-il toute la largeur? est-il centré?

- le footer doit-il être collé au bas de la page ou non ?

- le comportement/positionnement de ton conteneur principal est-il imposé par ton maître de stage ?

Autrement je rejoins l'avis de Bisûnûrs ci-dessus

[Deallyra]

ok et quels sont donc les comportements imposés par tonaître de stage:

- le site est-il fixe extensible ou élastique ? Occupe-t-il toute la largeur? est-il centré?

- le footer doit-il être collé au bas de la page ou non ?

- le comportement/positionnement de ton conteneur principal est-il imposé par ton maître de stage ?

Autrement je rejoins l'avis de Bisûnûrs ci-dessus

Extensible ou élastique? Je ne vois pas la différence...
Il est centré. En fait, se trouvent des marges tout autour de conteneur.
C'est moi qui est cependant choisi la taille des marges... En fond se trouvera une couleur.
Le footer doit effectivement être collé en bas du conteneur.
En ce qui concerne le comportement du conteneur principal, le positionement est imposé (tout doit être sur une page. Autrement dit, la scrollbar habituelle ne doit pas servir)

Tu as un div avec une image en background et dans ce div viennent se mettre tout simplement des éléments dans le flux.

Euh... le flux c'est bien le conteneur secondaire? celui que j'appelle #contenu?

[Bisûnûrs]

Euh... le flux c'est bien le conteneur secondaire? celui que j'appelle #contenu?

Hum, nan. ^^

Le flux c'est l'ordre des éléments interagissant entre eux qui permettent de construire ta page HTML.

En gros, positionner un élément en absolu le fait sortir du flux, c'est-à-dire qu'il n'interagit plus avec aucun élément de la page pour se positionner et les éléments suivants ne tiendront pas compte de lui pour se positionner non plus.

[Deallyra]

Donc le flux en fait, c'est la propriété position : relative par défaut...
Si j'ai un objet, je place le suivant en fonction du précédent...

Si c'ets ça, j'aurais compris quelque chose

Mais pour mon problème? Je fais comment car je dois placer des éléments dans un autre élément...
mon contenu a une image <img> qui lui sert de fond... image car il faut qu'elle prenne 100% de la taille du contenu.
Il faut des valeurs négatives aux margins pour placer mes images qui se trouvent à l'intérieur?

[Bisûnûrs]

Donc le flux en fait, c'est la propriété position : relative par défaut...
Si j'ai un objet, je place le suivant en fonction du précédent...

Si c'ets ça, j'aurais compris quelque chose

Mais pour mon problème? Je fais comment car je dois placer des éléments dans un autre élément...
mon contenu a une image <img> qui lui sert de fond... image car il faut qu'elle prenne 100% de la taille du contenu.
Il faut des valeurs négatives aux margins pour placer mes images qui se trouvent à l'intérieur?

Non, avec la méthode de Candygirl sur ton autre topic, tu as juste à inclure tes images dans un div par exemple, en position relative et après tu les positionnes normalement, comme du code qui est dans le flux.

[Deallyra]

J'ai comprit comment placer un DIV sur un autre... Enfin une image sur une autre...
Mais je n'arrive pas à la positionner au centre...

Code html :

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

1
2
3
4
5
 
<div>
	<img id = "fond" src="Image/bg_half_circle.gif" />
	<img id = "logo" src="Image/Borg_Center2.gif" />
</div>

avec pour CSS

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
 
.DeuxCol #contenu #fond
{
	height : 100%;
	width : 100%; 
}
 
.DeuxCol #contenu #logo
{
	margin-top : -100%;
	margin-left : 45%;
	width : 100px;
	height: 100px;
}

Je n'arrive pas à placer l'image au centre...
que le centre de gravité de mon image corresponde à celui du "fond"

[Bisûnûrs]

CSS2 ne permet pas de centrer verticalement un élément dans un autre de type block.

Tu peux "malheureusement" contourner le problème avec un tableau ...

Code html :

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

1
2
3
4
5
6
7
<table id="paragraphe">
   <tr>
      <td>
         <img src="Image/Borg_Center2.gif" />
      </td>
   </tr>
</table>

Code :

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

1
2
3
4
5
6
7
#paragraphe{
   text-align:center;
   position:relative;
   height:100%;
   width:100%;
   vertical-align:middle;
}

[Deallyra]

avec un tableau???

j'ai testé ça :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div>
	<img id = "fond" src="Image/bg_half_circle.gif" />
	<table id="paragraphe">
		<tr>
			<td>  
				<img src="Image/Borg_Center2.gif" />  
			</td>  
		</tr> 
	</table>
</div>

avec ton css:

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
 
.DeuxCol #contenu #fond
{
	height : 100%;
	width : 100%; 
}
 
#paragraphe
{
   text-align:center;
   position:relative;
   vertical-align:middle;
}
 
#paragraphe img
{
	width : 100px;
	height: 100px;
}

Mais j'ai mon image de fond puis, en bas, mon image dans un tableau invisible...
Dans ce tableau, mon image doit être centrée mais pas par rapport à mon fond....
Et je ne crois pas pouvoir affecter mon dégradé (fond) comme propriété de table... si je le fais, je ne pourrais pas le redimensionner à la taille du DIV #contenu...

[Bisûnûrs]

Heu, n'oublie pas de mettre ton image de fond en position:absolute.