[CSS] Bannière fluide...

Version imprimable

15/02/2006, 12h26
Huntress

[CSS] Bannière fluide...

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

Le problème me semble vraiment pas simple je poste mes CSS.

Code:

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 ? :roll:

15/02/2006, 12h55
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
15/02/2006, 15h44
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 :D
15/02/2006, 16h04
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.
15/02/2006, 20h02
Huntress

Désolée de ne pas avoir été plus claire.
:arrow: 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 :D
16/02/2006, 10h05
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 :D.
16/02/2006, 13h32
Huntress

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

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.

:arrow: 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à