Discussion :

[Huntress]

Bonjour,

J'ai du mal à trouver une info parce que le problème n'est pas simple à exposer... Donc... imaginons une banniere (c'est une div), et dedans il y'a 3 autres div les unes à coté des autres. La première est à gauche et les 2 autres complètement à droite donc les "position" sont respectivement du "relative", "absolute" et "absolute". Quoi que le 1er aurait pu être aussi "absolute"... passons.

Le problème : Quand je réduis la fenêtre en largeur, les div finissent par se mettre les unes en dessous des autres... et ça je veux pas... c'est possible que ça ne réagisse pas comme ça ? Et si oui comment ? Ah oui pis j'ai oublié de mentionner, je ne veux pas qu'elles se chevauchent quand je réduis la fenetre, j'aimerais qu'elles restent simplement les unes à coté des autres.

Merci d'avance

[Huntress]

Le problème me semble vraiment pas simple je poste mes 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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
div#header {
	position: relative;
	width: 100%;
	height: 80px;
	background-image: url('');
	background-repeat: no-repeat;
	/*overflow: hidden;*/
}
 
div#header div#partie_1 {
	position: relative;
	width: 450px;
	height: 80px;
	float: left;
	background-image: url('');
	background-repeat: no-repeat;
	border: 0px solid #000;
}
 
div#header div#partie_2 {
	position: relative;
	float: right;
	width: 150px;
	height: 80px;
	border: 0px solid #000;
 
}
 
div#header div#partie_3 {
	position: relative;
	float: right;
	width: 30px;
	height: 80px;
	background-image: url('');
	background-repeat: no-repeat;
	border: 0px solid #000;
}

> je les ais tous mis en relative pour éviter le chevauchement... personne peut m'aider ?

[franculo_caoulene]

Salut,

Pour éviter que les div ne se chevauchent il ne faut pas les sortir du flux donc pas de positionnement absolu.
Essaye d'utiliser les float et marges extérieures en t'inspirant de ce message

[Huntress]

Merci,

pour le flux oui ok d'ailleurs dans mon 2nd post j'avais mis mes corrections, et finalement j'ai réussi à obtenir ce que je voulais de mon commanditaire puisque visiblement ce que je cherchais à faire n'est pas possible en CSS, enfin pas que je sache. Pour réussir ce genre de chose faut revenir aux tableaux alors nan merci

[franculo_caoulene]

J'ai pas compris, résolu, pas résolu, solution alternative? Et je ne vois pas pourquoi ce n'est pas possible accessoirement.

[Huntress]

Désolée de ne pas avoir été plus claire.
Solution alternative (je déleste je fais quoi ?)

En fait je n'ai jamais vu ça sur un site, et en plus j'ai fait pas mal de tentatives, bon je sais que le positionnement est ce qu'il y a de plus difficile en CSS et que par conséquent y a des trucs que j'ai pas dû essayer... enfin si tu y arrives tu me le dis hein

[franculo_caoulene]

Personnellement ça m'intéresse. Donc si tu pouvais, par exemple, redéfinir ton problème "clairement" (même si je pense l'avoir compris), créer une image de ce que tu veux et me donner un lien vers une page que tu as déjà fait (ce que tu obtiens). Je suis prêt à me pencher là-dessus.

Enfin typiquement un énoncé d'exercice comme à l'école .

[Huntress]

Ok ok ok, j'essaye de faire ça ce week end, voir même vendredi soir.

Le problème :
- Une div prenant 100% de largeur de l'écran.
- Contenant 2 ou 3 éléments (je pense que ça revient au même)
- Un élément complètement à gauche.
- Un élément complètement à droite.

On veut :
Si l'on réduit la fenêtre, l'élément de droite se rapproche de l'élément de gauche jusqu'à ce qu'il l'atteigne.
Une fois atteint il se laisse "manger" par le bord de la fenêtre, donc on ne veut ni chevauchement ni de div qui "retourne à la ligne".

Voilà