RGBA qui veut pas fonctionner ...

Résolu
diyar77 Messages postés 94 Date d'inscription   Statut Membre Dernière intervention   -  
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je suis encore perdu sur ce RGBA qui fonctionne qu'à moitié, en faite j'ai ce code:


.av-blue{
display: block;
padding: 5px;
background-color: rgba(0, 0, 255, 0.5);
border-radius: 20px;
min-height: 40px;
min-width: 400px;
border-color: red;
border-width: 1px;
border-style: solid;
color: #375D81;
text-align: center;
font-weight: bold;
}

Sa devrait afficher un encadré bleu un peu transparent avec bordure rouge mais ça m'affiche rien O_o

pourtant j'ai ien mis <div class='av-blue'></div>

Merci d'avance :)

3 réponses

Réponse 1 / 3
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
bonjour

déjà dans le html remplace les simple quote par des double quote

dans le css déclare border en une seule ligne
pas besoin de display block car un div est déjà un block

html

<div class="av-blue"></div>

css

.av-blue{
padding: 5px;
background-color: rgba(0, 0, 255, 0.5);
border-radius: 20px;
min-height: 40px;
min-width: 400px;
border:1px solid red;
color: #375D81;
text-align: center;
font-weight: bold;
}

si avec ce code la div ne s'affiche pas c'est que l'appel au fichier css a une erreur
normalement dans le <head> c'est

<link href="chemin/fichier.css" rel="stylesheet" type="text/css">

voila
0
diyar77 Messages postés 94 Date d'inscription   Statut Membre Dernière intervention   14
 
Bonjour,
Déjà, je vous remercie d'être venu en aide, mais ça ne fonctionne toujours pas, Pourtant le fichier css est bien inclu dans le <head> </head> , en + si ce n'était pas le cas, les autres div de la page ne serraient pas affichés.
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
j'ai testé chez moi ca marche (firefox 26 donc standard)

peux être c'est un problème de positionnement du a une autre div qui te fait remonter av-blue hors de la page ou exemple un margin négatif d'une div qui recouvre av-blue enfin un truc de ce genre

as tu tester une page avec seulement <div class="av-blue"></div> et rien d'autre dans la page ?
0
diyar77 Messages postés 94 Date d'inscription   Statut Membre Dernière intervention   14
 
Sa fonctionne dans une page simple sans les div header, content, et footer.

Mais alors, pourquoi sa ne veut pas s'afficher correctement ?
0
Réponse 2 / 3
diyar77 Messages postés 94 Date d'inscription   Statut Membre Dernière intervention   14
 
Si tu veux voir tout le CSS : 
@font-face {
	font-family: `OpenSans-Regular';
	src: url('font/OpenSans-Regular.ttf');
	}
ok, html {
	margin:0 auto;
	width:945px;
	font-family: `OpenSans-Regular';
	background: url('/image/background.jpg') no-repeat center fixed; 
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;
}
a {
	color: #56a1d5;
	text-decoration: none;
}
body {
	background: rgba(0,0,0,0.3);
	padding:13px 20px 10px 20px;
	font-family: `OpenSans-Regular';
	font-size:15px;
	
}

/*===> HEADER <===*/
#header {
	padding-bottom:40px;
	height:50px;
}

#header .header {
	float: left;
	width:600px;
	color: white;
	padding:5px 0 0 0px;
}
.header::-moz-selection {
background: cyan none repeat scroll 0 0;
color:white;
}
#header .informations {
	background-color:white;
	float:right;
	padding:5px;
	border-radius: 3px;
	color: #5c5c5c;
}

#featured {
	position:relative; 
	height:250px; 
	overflow:hidden;
}
/*===> NAVIGATION <===*/
#navigation {
	background: #FFF;
	height: 40px;
	line-height: 40px;
	margin-bottom: 10px;
	background: -webkit-gradient(linear, center top, center bottom, from(white), to(lightgray)) ;
}
#navigation .navi{
	font: bold large 24px;
	color: black;
	width: 140px;
	height: 40px;
	font-size: 20px;
	text-align: center;
	text-decoration: none;
	float: left;
	background-color: white;
	border: 1px;
	background: -webkit-gradient(linear, center top, center bottom, from(white), to(lightgray)) ;
}

#navigation .navi:hover{
	text-align: center;
	text-decoration: none;
	background: -webkit-gradient(linear, center top, center bottom, from(lightgray), to(white));
}

/*===> MENU DROITE<===*/


#menudroite {
	float: right;
	width: 280px;
	margin-left: 10px;
	text-align: left;
}

#espace_membre {
	text-shadow:1px 1px 2px gray;
	margin: 0px 10px 10px 10px;
	padding:5px;
}

.block {
	background-color:white;
	padding: 10px;
	margin-bottom: 10px;
}
.server{
	background-color: white;
	color: black;
	text-align: center;
	float: right;
	padding: 10px;
	width: 258px;
	margin-left: 10px;
	margin-bottom: 10px;
	font-family: `OpenSans-Regular';
}

#connexion {
	text-shadow: 1px 1px 2px gray;
	margin:0px 10px 10px 10px;
	padding:5px;
}
/*===> REGLES <===*/

#regle {
	background-color:white;
	padding:10px;
	margin-bottom:10px;
	width: 868px;
	border-radius: 1px;
	min-height: 500px;
}
.title-regle {
	display:block;
	border-radius: 3px;
	background-color: rgba(0,0,0, 0.1);
	padding:5px;
	text-align: center;
	font-weight: bold;
}
.margin-regle {
	margin-top: 25px;
}
.jaccepte {
	border-radius: 3px;
	color: white;
	padding: 10px;
	text-align: center;
	font-weight: bold;
	background: -webkit-gradient(linear, center top, center bottom, from(lightgreen), to(green));
	margin: 15px 15px 15px 15px;
	cursor: pointer;
}
.jaccepte:hover {
	opacity: 0.9;
}
.jerefuse {
	cursor: pointer;
	padding: 10px;
	border-radius: 3px;
	color: white;
	text-align: center;
	font-weight: bold;
	background: -webkit-gradient(linear, center top, center bottom, from(red), to(darkred));
	margin: 15px 15px 15px 15px;
}
.jerefuse:hover {
	opacity: 0.9;
}
/*===> INDEX <===*/
#content, #navigation, .block, #chat, #footer, .informations, .selectNews, .server {
	border:1px solid rgba(0,0,0,0.3);
	box-shadow: 0 1px 4px rgba(0,0,0,0.5);
	border-radius: 1px;
}

#content.index {
	border:none;
	box-shadow: none;
}

#content.index .selectNews {
	background-color:white;
	padding:10px;
	margin-bottom:10px;
	width: 575px;
}
#content.index .news {
	border:1px solid black;
	border-radius: 5px;
	background-color: rgba(0,0,0, 0.3);
}

.news-titre {
	display:block;
	border-radius: 3px;
	background-color: rgba(0,0,0, 0.1);
	padding:5px;
	color: #375D81;
	text-align: center;
	font-weight: bold;
}
#content.index .news .image {
	float: left; margin-right:5px;
}

/*===> FOOTER <===*/
.foot {
	padding: 2px;
	font-family: `OpenSans-Regular';
}

#footer {
	background-color:white;
	padding:5px;
	color:black;
	margin-top:10px;
	clear:both;
}
#footer a{
	font-weight:bold;
	text-decoration: none;
}

/*===> CHAT <===*/
#chat {
	padding:20px;
	background-color:white;
	margin-top:10px;
	margin-bottom: 10px;
}
.chat {
	margin-top: 190px;
}

.text-chat {
	width: 750px;
	height: 20px;
	border-color: lightgray;
	border-width: 1px;
	border-style: solid;
	font-family: `OpenSans-Regular';
	box-shadow: 1px 1px 10px white;
	border-radius: 3px;
}


.text-chat:hover {
	border-color: gray;
	border-width: 1px;
}
.text-chat:focus{
	border-color: gray;
	border-width: 1px;
	font-family: `OpenSans-Regular';
	outline: 1px dotted transparent;
	font: large;
	box-shadow: 1px 1px 16px lightgray;
}
/*===>  CANDIDATURES <===*/


#candidature-content {
	background-color: transparent;
	padding:10px;
	margin-bottom:10px;
	width: 868px;
	border-radius: 1px;
	min-height: 500px;
}

.candidature-title {
	display:block;
	border-radius: 3px;
	background-color: rgba(254,254,254, 0.9);
	padding:5px;
	text-align: center;
	font-weight: bold;
	font-family: `OpenSans-Regular';
}

.administration-candidature {
	border-radius: 20px;
	color: red;
	background-color: white;
	padding: 3px;
	font-family: `OpenSans-Regular';
	font-weight: bold;
	text-align: center;
	width: 668px;
	height: 130px;
	float: center;
	border: 1px solid rgba(0,0,0,0.9);
	box-shadow: 0 5px 5px rgba(0,0,0,1);
	margin: 15px;
}

.bloc-candidature {
	display: block;
	position: relative;
	background-color: white;
	border-radius: 5px;
	width: 260px;
	padding: 3px;
	margin: 5px 5px 5px 5px;
	min-height: 250px;
	font-weight: bold;
	text-align: center;
	border: 1px solid rgba(0,0,0,0.9);
	border-radius: 1px;
	vertical-align: baseline;
	border-collapse: separate;
	border-spacing: 10px;
}
.bloc-candidature:hover {
	border: 1px solid rgba(0,0,0,1);
	box-shadow: 0 3px 3px rgba(0,0,0,1);
}
.read-candidature {
	display: block;
	position: relative;
	background-color: white;
	border-radius: 15px;
	width: 850px;
	margin: 5px 5px 5px 5px;
	min-height: 251px;
	font-weight: normal;
	text-align: center;
	border: 1px solid rgba(0,0,0,0.9);
	border-radius: 1px;
	vertical-align: baseline;
	border-collapse: separate;
	border-spacing: 10px;
}
.info-candidature  {
	border: 1px solid rgba(0,0,0,0.9);
	text-align: center;
	float: left;
	min-height: 243px;
	background-color: #DCDCDC;
	width: 160px;
	padding: 3px;
}
.read-comments-candidature {
	display: block;
	position: relative;
	background-color: white;
	border-radius: 15px;
	width: 850px;
	margin: 5px 5px 5px 5px;
	min-height: 131px;
	font-weight: normal;
	text-align: center;
	border: 1px solid rgba(0,0,0,0.9);
	border-radius: 1px;
	vertical-align: baseline;
	border-collapse: separate;
	border-spacing: 10px;
}
.info-comments-candidature  {
	border: 1px solid rgba(0,0,0,0.9);
	text-align: center;
	float: left;
	min-height: 122px;
	background-color: #DCDCDC;
	width: 160px;
	padding: 3px;
}
.tete-candidature {
	border-radius: 25px;
	padding: 15px;
}
.tete-candidature:hover {
	opacity: 0.8;
}
.btn-candidature {
	color: white;
	background: -webkit-gradient(linear, center top, center bottom, from(red), to(darkred));
	width: 615px;
	border-color: darkred;
	border-width: 1px;
	border-style: solid;
	font-weight: bold;
	font-family: `OpenSans-Regular';
	border-radius: 3px;
	height: 44px;
	cursor:pointer;
}
.btn-candidature:hover {
	background: -webkit-gradient(linear, center top, center bottom, from(#B9121B), to(#5C0515));
	border-color: #5C0515;
	border-width: 1px;
}
.btn-candidature:focus {
	border-color: #5C0515;
	border-width: 1px;
	outline: 1px dotted transparent;
}

.btn-candidature-send {
	color: white;
	background: -webkit-gradient(linear, center top, center bottom, from(lightgreen), to(green));
	width: 615px;
	border-color: green;
	border-width: 1px;
	border-style: solid;
	font-weight: bold;
	font-family: `OpenSans-Regular';
	border-radius: 3px;
	height: 44px;
	cursor:pointer;
}
.btn-candidature-send:hover {
	background: -webkit-gradient(linear, center top, center bottom, from(#1D702D), to(green));
	border-color: green;
	border-width: 1px;
}
.btn-candidature-send:focus {
	border-color: green;
	border-width: 1px;
	outline: 1px dotted transparent;
}
/*===>  FIN  <===*/

/*===>  RESEAUX SOCIAUX <===*/

.rs {
	cursor: pointer;
}
.rs:hover {
	opacity: 0.8;
}

/*===> PAGE EXEMPLE <===*/
#exemple {
	background-color:white;
	padding:10px;
	margin-bottom:10px;
	width: 868px;
	border-radius: 1px;
	min-height: 500px;
}
.title-exemple {
	display:block;
	border-radius: 3px;
	background-color: rgba(0,0,0, 0.1);
	padding:5px;
	text-align: center;
	font-weight: bold;
	font-family: `OpenSans-Regular';
}

.content-exemple {
	padding: 15px;
}

/*===> INPUT ET BOUTONS <===*/


.title {
	outline: 1px dotted transparent;
	text-align:center;
	width:420px;
	height:75px;
	float: center;
	border-radius: 0px 0px 10px 10px;
	box-shadow: 1px 1px 20px #000;
}
.textarea {
	outline: 1px dotted transparent;
	border-color: lightgray;
	border-width: 1px;
	background-color: white;
	font-family: `OpenSans-Regular';
	box-shadow: 1px 1px 1px lightgray;
	border-radius: 1px;
}
.textarea:focus {
	outline: 1px dotted transparent;
	border-color: #9A9E9D;
	background-color: white;
	box-shadow: 1px 1px 1px #9A9E9D;
	border-width: 1px;
}
.textarea:hover {
	border-color: #9A9E9D;
	background-color: white;
	box-shadow: 1px 1px 1px #9A9E9D;
	border-width: 1px;
}
.text {
	outline: 1px dotted transparent;
	font-family: `OpenSans-Regular';
	width: 230px;
	height: 25px;
	border-color: lightgray;
	border-width: 1px;
	border-style: solid;
	box-shadow: 1px 1px 15px white;
	border-radius: 3px;
}
.p {
	box-shadow: 1px 1px 10px gray;
}
.text:focus {
	border-color: lightgray;
	border-width: 1px;
	border-style: solid;
	box-shadow: 1px 1px 15px lightgray;
}
.text:hover {
	border-color: gray;
	border-width: 1px;
	border-style: solid;
}


/*===> BTN <===*/


.btn {
	border-color: lightgray;
	border-width: 1px;
	border-style: solid;
	font-family: `OpenSans-Regular';
	box-shadow: 1px 1px 10px white;
	border-radius: 3px;
	height: 24px;
	cursor:pointer;
}
.btn:hover {
	border-color: gray;
	border-width: 1px;
}
.btn:focus {
	border-color: gray;
	border-width: 1px;
	outline: 1px dotted transparent;
	box-shadow: 1px 1px 16px lightgray;
}

.btn-blue-large {
	color: white;
	background: -webkit-gradient(linear, center top, center bottom, from(#77ABD6), to(#495CFF));
	width: 615px;
	border-color: #495CFF;
	border-width: 1px;
	border-style: solid;
	font-weight: bold;
	font-family: `OpenSans-Regular';
	border-radius: 3px;
	height: 44px;
	cursor:pointer;
}
.btn-blue-large:hover {
	background: -webkit-gradient(linear, center top, center bottom, from(#495CFF), to(#006D80));
	border-color: #006D80;
	border-width: 1px;
}
.btn-blue-large:focus {
	border-color: #006D80;
	border-width: 1px;
	outline: 1px dotted transparent;
}
.btn-red-large {
	color: white;
	background: -webkit-gradient(linear, center top, center bottom, from(red), to(darkred));
	width: 615px;
	border-color: darkred;
	border-width: 1px;
	border-style: solid;
	font-weight: bold;
	font-family: `OpenSans-Regular';
	border-radius: 3px;
	height: 44px;
	cursor:pointer;
}
.btn-red-large :hover {
	background: -webkit-gradient(linear, center top, center bottom, from(#B9121B), to(#5C0515));
	border-color: #5C0515;
	border-width: 1px;
}
.btn-red-large :focus {
	border-color: #5C0515;
	border-width: 1px;
	outline: 1px dotted transparent;
}
.btn-green-large  {
	color: white;
	background: -webkit-gradient(linear, center top, center bottom, from(lightgreen), to(green));
	width: 615px;
	border-color: green;
	border-width: 1px;
	border-style: solid;
	font-weight: bold;
	font-family: `OpenSans-Regular';
	border-radius: 3px;
	height: 44px;
	cursor:pointer;
}
.btn-green-large :hover {
	background: -webkit-gradient(linear, center top, center bottom, from(#1D702D), to(green));
	border-color: green;
	border-width: 1px;
}
.btn-green-large :focus {
	border-color: green;
	border-width: 1px;
	outline: 1px dotted transparent;
}
/*===> FIN BTN <===*/

/*===> DEBUT INPUT <===*/
.text2 {
	outline: 1px dotted transparent;
	width: 533px;
	border-color: lightgray;
	border-width: 1px;
	border-style: solid;
	font-family: `OpenSans-Regular';
	box-shadow: 1px 1px 15px white;
	border-radius: 3px;
}
.text2:focus {
	border-color: orange;
	border-width: 1px;
	border-style: solid;
	box-shadow: 1px 1px 15px yellow;
}
.text2:hover {
	border-color: green;
	border-width: 1px;
	border-style: solid;
	box-shadow: 1px 1px 15px lime;
}
.bouton {
	outline: 1px dotted transparent;
	background-color: transparent;
	border-color:#FE0019;
	border-width: 1px;
	border-style: solid;
	border-radius: 3px;
	color: red;
	font-family: `OpenSans-Regular';
	cursor:pointer;
}
.bouton:hover {
	background-color: #F0C3C8;
	border-color:#FE0019;
	border-width: 1px;
	border-style: solid;
	color: red;
}
/*===> FIN INPUT <===*/

/*===> Navigation 2 <===*/
.nav {
	text-align:center;
	width:1220px;
	height:45px;
	float: center;
	box-shadow: 1px 1px 5px #000;
}
.nav-text {
	text-shadow: -1px -1px white, 1px 1px gray;
}
.nav-text:hover {
	text-shadow: 1px 1px white, -1px -1px #000;
}
.tit {
	text-shadow: -1px -1px black, 1px 1px red;
}
.tit:hover {
	text-shadow: 1px 1px black, -1px -1px pink;
}

/*===> News <===*/



.date {
	text-align: right;
	line-height: 1px; 
}


/*===> ESPACE MEMBRE <===*/

.bvn {
	vertical-align: middle;
	text-align: left;
}
.img {
	border-radius: 5px;
	padding: 2px;
	vertical-align: middle;
}
.img:hover {
	opacity: 0.8;
}

/*===> TABLE SUPPORT <===*/

.lien {
	
}
.lien:hover {
	text-decoration: underline;
}

/*===> COMMENTAIRES <===*/

.message-com {
	background-color: #375D81;
	padding: 5px;
	font-family: `OpenSans-Regular';
	font-size:15px;
	border-radius: 3px;
	vertical-align: middle;
	min-height: 25px;
	box-shadow: 0 1px 0px rgba(0,0,0,1);
}
.pseudo-com {
	background-color: lightgray;
	padding: 5px;
	font-family: Helvetica;
	font-size:15px;
	border-radius: 1px;
	min-height: 30px;
	vertical-align: middle;
	margin: 20px;
	box-shadow: 0px 0px 0px 1px lightgray;
}
.date-com {
	vertical-align: middle;
	float: right;
}
.img-coms {
	border-radius: 5px;
	padding: 2px;
	vertical-align: middle;
}
.img-coms:hover {
	opacity: 0.8;
}

/*===> Avertos <===*/

.av-blue{ 
padding: 5px; 
background-color: rgba(0, 0, 255, 0.5); 
border-radius: 20px; 
min-height: 40px; 
min-width: 400px; 
border:1px solid red; 
color: #375D81; 
text-align: center; 
font-weight: bold; 
}
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
le html aussi
0
Réponse 3 / 3
diyar77 Messages postés 94 Date d'inscription   Statut Membre Dernière intervention   14
 
... Mais qu'est-ce que je suis con des fois moi... au lieu de mettre class='blue' j'ai mis class='bleu'

Bon, résolu.

Merci :)
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
bas ca arrive meme aux meilleurs ;o)
0

Discussions similaires

discord a cessé de fonctionner de manière inattendue
nostidius -
amoureuxdejuliana -

8 réponses
comment utiliser un appareil 110v sur du 220?
flopinus -
phillibert57 -

7 réponses
IPV6 et IPV4
Fréddoo -
Nico le Vosgien -

11 réponses
La fonction FILTRE n'est plus reconnue
Auri328 -
Auri328 -

3 réponses
CEC_main.exe a cessé de fonctionner...
Jeff59 -
Piero -

37 réponses