[CSS 3] Donner priorite a une bordure sur une autre (couleur) [Résolu]

[student_php]

Bonjour,

Je voudrais savoir comment je peux donner la priorité a une couleur de bordure sur une autre, j'ai deux div collées l'une sur l'autre mais qui ne font pas la même largeur (celle en haut moins large), je voudrais que sur leur bordure commune (horizontale), ce soit la couleur de la div la plus haute qui apparaissent (blanc sur le noir).

J'ai alors pense au z-index mais apparemment il s'utilise que dans des cas de position absolu.

J'ai ensuite pense a joue avec l'opacité de CSS3 mais la bordure devant céder la priorité est de couleur noir, et faire du noir avec une opacité de 0 je vois pas trop...

[ornitho13]

Salut

aurais tu un bout de code à nous montrer ?

merci

[student_php]

Salut, voici le code

Code :

1
2
3
4
5
6
7
8
<div id="flags">
			<a href="#"><img src="./images/flag_fr.png" alt="Drapeau francais" id="flag_fr" /></a>
			<a href="#"><img src="./images/flag_en.png" alt="Drapeau anglais" id="flag_en" /></a>
		</div>
 
		<a href="./index.php"><div id="tete_up">
			<h1>BIENVENUE</h1>
		</div></a>

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
38
#flags
{
	height : 18px;
	width : 800px;
	margin : auto;
	border : 0;
}
 
#flag_en
{
	float : right;
	background-color: rgba(255,255,255,0.6);
	border-left : 1px solid black;
	border-top : 1px solid black;
	border-right : 0;
	border-bottom :  1px solid rgba(235,235,235,1);
	padding : 2px;
}
 
#flag_fr
{
	float : right;
	background-color : rgba(235,235,235,1);
	border-left : 0;
	border-top : 1px solid black;
	border-right : 1px solid black;
	border-bottom :  1px solid rgba(235,235,235,1);
	padding : 2px;
}
 
#tete_up
{
	width: 798px;
	height: 98px;
	margin: auto;
	border: 1px	solid rgba(0,0,0,1);
	background-color: rgba(235,235,235,1);
}

Par ailleurs, ce n'est pas le sujet, mais si ma div "tete_up" fait bien 800px de largeur, le lien cliquable prend la bone hauteur mais est cliquable sur tout la largeur de la page .

Merci pour l'aide !

[ornitho13]

Tout d'abord concernant le lien qui prend toute la longueur, c'est normal car le H1 et le div sont en "display:block" par défaut donc prend toute la longueur de la page (width à 100%).

je regarde pour le reste

[ornitho13]

En fait je ne vois pas trop ce que tu veux faire avec les bordures, pourrais tu en dire un peu plus?

merci

[student_php]

Merci pour l'explication sur le display j'ai fait autrement, concernant les bordures, en fait j'ai ma div "tete_down" qui a un fond blanc (pour simplifier), je veux qu'au dessus de cette div apparaisse deux petits cadre avec 2 petits drapeaux (#flag_fr et #flag_en).

Pour le moment j'ai bien ce résultat mais ma div "tete_down" (ma bannière en fait) est encadre par une bordure noir, et mes div "#flag_fr" et "#flag_en", celles qui encadrent les drapeaux juste au dessus, encadrent également les drapeaux avec une bordure en noir, mais je veux que la bordure sur laquelle ils se chevauchent (border-bottom de #flag_fr et #flag_en) soit blanche, c'est pour donner un petit effet visuel.

Hors, vu que #tete_down est crée après #flag_fr et #flag_en, la dernière bordure crée est noir et mon "border-bottom : 1px solid rgba(235,235,235,1);" ne sert a rien.

En espérant avoir été clair

[ornitho13]

j'ai réussi je pense à faire ce que tu voulais. Voici le code css, peux tu me dire si c'est cela?

Code css :

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
 
#flags
{
	height : 25px;
	width : 800px;
	margin : auto;
	border : 0;
	z-index:1000;
}
#flag_en
{
	float : right;
	background-color: rgba(255,255,255,0.6);
	border-left : 1px solid black;
	border-top : 1px solid black;
	border-right : 0;
	border-bottom :  1px solid rgba(125,200,1,1);
	padding : 2px;
}
#flag_fr
{
	float : right;
	background-color : rgba(235,235,235,1);
	border-left : 0;
	border-top : 1px solid black;
	border-right : 1px solid black;
	border-bottom :  1px solid rgba(235,235,235,1);
	padding : 2px;
}
#tete_up
{
	width: 798px;
	height: 98px;
	margin: auto;
	border: 1px	solid rgba(0,0,0,1);
	background-color: rgba(235,235,235,1);
}
h1{
 
}

++

[student_php]

Le code ne donne pas ce que je tentais de décrire, voici des petits schémas qui seront bien plus clair:

Ce que j'ai actuellement:



Ce que je souhaites obtenir:



Merci !

[ornitho13]

regarde à cette adresse, j'ai mis en ligne un exemple:

http://debray.jerome.free.fr/demos/test.html

Dis moi si cela convient (testé sur ff, chrome et safari)

[student_php]

Merci pour ce lien, ca fonctionne effectivement comme il faut lorsqu'il y a des messages a la place des images, mais plus avec les images

Par exemple si tu mets les images:



et



En tout cas de mon cote ca ne fonctionne pas...

[ornitho13]

Salut,


regarde de nouveau à cette adresse :

http://debray.jerome.free.fr/demos/test.html

J'y ai inclut les drapeaux

[student_php]

Ok mon problème était que ma hauteur d'image était de 18px au lieu de 17...

Merci beaucoup d'avoir prit le temps de me fournir ces démonstrations, c'est vraiment sympa de ta part !