28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
Voilà quelques heures que je m'arrache les cheveux sur un soucis d'opacité que je n'arrive pas à résoudre malgré les posts que j'ai vu par ci par là.

Alors c'est une page en html avec CSS.
Un gros div me sert de contenu centrale.
A l'intérieur 2 div un a gauche et un à droite qui forme ma banniere.
en dessous un autre div avec mon menu
puis ce div de contenu
puis un dernier div pour footer.

dans le div de contenu j'ai mis un fond uni blanc en opacité 50 pour mieux voir les écrits.
dans ce div j'ai mis un tableau avec a gauche une image et des écrits à droite sauf que forcement du coup la classe CSS s'applique dessus et donc mon image est à 50% d'opacité et là des heures que je n'arrive pas à bypasser cette classe sachant que je veux garder cette opacité sur le texte. Je voudrais juste avoir mon image à 100%.

Comment feriez vous ?

Merci bcp d'avance

PS : j'ai essayer les !important, mettre l'image dans une div,... trop de solutions pour toutes les lister.
PPS : il y a une photo en background, d'où le blanc sous le texte.
Modifié par maxriffs (03 Dec 2018 - 15:08)
en mettant background:rgba(255,255,255,0.5) sur le background de la div et en mettant des background:white sur l'image (pas testé!)
Meilleure solution
Impecc ! à tester si ça marche un peu de partout mais sur mon vieux IE ça fonctionne pour l'image ! juste à trouver pour mon texte mais ça c'est pas grave je trouverais. Merci bcp PapyJP Smiley cligne
Je remets le sujet sur le tapis car avec le passage en PHP ça ne marche plus. (je fais juste du include pour n'avoir qu'à un seul endroit, le menu, le footer etc... La structure de résultat de l'ensemble n'a pas bougé.
J'ai mis un wamp64 configuré normal et le CSS s'applique bien, en mettant background:white; ça marche, en mettant background:rgba(255,255,255,0.5); ça ne marche plus !!! ça me mets le fond du body c'est à dire noir.
Je suis dessus depuis ce matin et je n'arrive pas à trouver d'où ça vient car tous ceux avec un soucis de rgba sur les forums c'était souvent un problème d'espace avec la parenthèse mais moi ce n’est pas ça j'ai essayé avec et sans... J'ai repris mon ancien code en html et là sur la même machine ça marche !
Est ce que le fais d'avoir un serveur wamp peux changer la donne vu que la différence c'est juste un html qu'on glisse sur le navigateur dans le cas du html mais ça me parait pas du tout logique vu que du css, c'est comme un html normalement rien à voir avec le serveur et pourtant... J'ai pris la source du résultat PHP, enregistré en .htm et là ça marche,... du coup je suis complètement perdu Smiley bawling
Quelqu'un aurait une idée avant que je devienne chèvre Smiley biggol
Je précise également que le border-radius qui marchait avant ne marche plus et idem au résultat enregistré en htm il remarche sans rien toucher d'autre !
Encore plus fort ! je mets ce resultat sur le serveur en html puis un lien depuis mon php, ça ne marche pas ! je prends ce fichier depuis mon navigateur de fichier et je le pose sur le même navigateur et là ça marche !!!! Comme si le fait de lire le fichier depuis le serveur wamp empéchait de faire fonctionner les fonctions css plus récente car je précie bien que d'autres fonctions comme les marges et tout fonctionnent, background simple aussi. C'est à devenir fou ! please help !!
Modifié par maxriffs (10 Dec 2018 - 16:11)
Est-ce que le CSS se trouve à l'intérieur du fichier HTML dans une balise <style type="text/css"></style> ou bien est-ce dans un fichier .css inclus par <link href="xxx.css" rel="stylesheet" type="text/css">

Si c'est le premier cas, je ne comprends rien au problème.
Si c'est le deuxième cas, c'est sans doute un problème de cache du navigateur.
C’est bien un fichier exterieur, mais quand je change la valeur background en enlevant le rgba pour white ca fait bien un fond blanc, c’est pour ça que je doute pas du fait que ce soit ok niveau du lien et pas de cache.
Je viens d’essayer sur un windows 10 avec edge et là ça marche depuis un serveur webhost. Mais du coup ca m’explique pas pourquoi ce code marche en html et pas en php. Pour moi c’est pas logique Smiley ohwell
Demain j’essai de le mettre dedans Histore d'être sûr mais ca me rend dingue de ne pas comprendre.
Merci pour ta piste papyJp je te dirais ce qu’il en est et bien sur si je trouve je mettrais la solution car j’ai fini pas voir sur les forums des gens avec le mm soucis mais personne n’a trouvé quand ct pas un soucis de link ou d’espace du rgba avec la parenthese.
En mettant le code css dans l'index.php ça ne change rien. Je commence à vraiment plus savoir comment chercher Smiley ohwell

Dans la logique c'est l'interprétation du navigateur qui n'est pas bonne mais du coup pourquoi il le fait bien sur une extension html ou htm et pas quand il reçoit le résultat d'un php qui produit exactement la même chose... un truc de fou !

Autre essai, un lien sur le php vers le html et là ça ne marche pas non plus. En revanche je prend ce fichier depuis le répertoire du serveur web et je le pose sur le navigateur et là ça marche !! dommage que ce soit pas l'inverse ! Smiley ohwell
Modifié par maxriffs (11 Dec 2018 - 08:52)
Je mets la réponse pour ceux qui auront le même soucis.

En faite ça ne vient pas du serveur mais du mode de compatibilité de internet explorer 11. J'ai compris en voyant que les navigateurs plus récents n'avaient pas de soucis.

Donc si comme moi vous codez pour être le plus compatible possible en pensant à ceux encore sous windows 7 et utilisant internet explorer (à priori on peut mettre edge qu'à partir de win8 ) il faudra rajouter cette ligne dans votre entête de l'index.php et pour moi ça résout le soucis :

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Modérateur
Aïe le mode compatibilité d'IE, qui le rend… bien plus vieux qu'il ne l'est et s'enclenche par défaut en réseau local. Autrement dit quand tu travailles avec loclhost, ce mode s'active sauf si tu informe explicitement de ne pas le faire avec la meta qui va bien. (Il existe ou existait beaucoup d'Intranets dans les entreprises avec pleins de code particulier à IE et plus du tout compatibles avec les technos modernes, c'est pourquoi Microsoft a fait cette config particulière)