[CSS] Supprimer propriété par surcharge

Forumactif

Sujet résolu

7 septembre 2017 à 9:53:20

Bonjour à tous !

Alors voilà, je suis en train d'aider au design d'un forum Forumactif, et pour ceux qui connaissent, bah c'est pas toujours évident de pouvoir faire ce qu'on veut quand on n'a pas accès au css de base de ces forums, ni à l'html... Bref.

En gros, mon souci, c'est que l'élément html du forum ne prend pas toute la page, mais s'arrête en plein milieu. Si je regarde le css de base de forumactif j'ai ça :

html, body {
	background-attachment: scroll;
	background-color: #e9ebed;
	background-image: url("https://illiweb.com/fa/empty.gif");
	color: #444444;
	font-family: 'Roboto', sans-serif;
	font-size: 10px;
	height: 100%;
	line-height: 1.526;
	text-rendering: optimizeLegibility;
}

Comme vous pouvez le voir, il y a un height: 100% qui m'embête fortement, car j'ai ajouté une sidebar verticale sur le forum, et avec cette taille, bah elle s'arrête en plein milieu de page au lieu d'aller jusqu'en bas quoi...

Du coup, j'ai voulu rajouter ceci dans ma feuille de style pour annuler ce 100% :

html {
   height: auto !important;
}

Et jusqu'ici ça fonctionnait très bien. Jusqu'à ce que je me rende compte d'un autre problème.

Sur le forum, il y a une chatbox qui est intégrée par iframe. Et l'élément html de cette iframe prend en compte le même code css en fait... Donc elle prend le height: auto en compte. Sauf que du coup, on ne voit plus la chatbox, comme si elle n'avait plus de height attribuée.

J'ai essayé plusieurs techniques, comme par exemple mettre un min-height au corps de la chatbox, sauf que du coup, quand j'ouvre l'iframe dans un onglet à part, la chatbox garde ce min-height au lieu de se mettre en plein écran. Quelqu'un m'a donné une solution éventuelle en javascript, mais Forumactif n'est pas très pratique de ce côté là, et je peux difficilement ajouter du JS à la page que je souhaite.

Bref, tout ça pour dire que je n'ai que ma feuille de style css pour essayer de surcharger celui de base et que ce n'est pas évident... Je sais ce qui me pose problème (le height: 100% de l'élément html), il faudrait juste pouvoir le supprimer, mais je ne sais pas comment faire...

Au cas où ça peut aider, voici une partie du code html de la page au niveau de l'iframe, simplifié évidemment, je n'allais pas tout mettre vu le bazar que c'est x) :

<div class="panel row3">
  <div id="chatbox_bottom" style="height: 300px;">
    <object data="/chatbox/index.forum?page=front&amp;" id="frame_chatbox" scrolling="yes" width="100%" height="100%" type="text/html"></object>
  </div>
  <!-- iframe -->
  <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr">
    <head>...</head>
  	<body class="chatbox">
      <div id="chatbox_header" class="forabg">...</div>
      <div id="chatbox_members" class="chatbox-members"></div>
      <div id="chatbox">...</div>
      <div id="chatbox_footer">...</div>
    </body>
  </html>
  <!-- fin iframe -->
</div>

Merci par avance pour votre aide !

cernkor

7 septembre 2017 à 11:19:57

Bonjour, la première idée qui me vient c'est de laisser ta surcharge actuel et de remettre la règle de base pour le html de l'iframe en rajoutant en parent du html la div de class pannel et row3. cette solution est pas très jolie mais c'est celle qui me semble la plus simple à mettre en place.

Anju44

7 septembre 2017 à 14:04:22

Alors tout d'abord, merci pour ta réponse

Ensuite, j'ai essayé ça du coup :

.panel.row3 html {
   height: 100%;
}

Mais je pense que j'ai dû me tromper dans le sélecteur, car il ne le prend pas en compte Il prend toujours la surcharge avec le auto!important

cernkor

7 septembre 2017 à 15:21:16

C'est normal, le !important ne prend pas en compte les surcharges ultérieures qui n'ont pas de !important. En fait, le !important rajoute un poids de 10 000 sur ton sélecteur qui le contient (cf. ce lien). Du coup l faut soit enlever le !important avant, soit mettre ton !important dans ce que tu viens de donner.

Anju44

7 septembre 2017 à 16:36:55

Ce que je veux dire c'est qu'il ne doit pas être bon, car quand je sélectionne l'élément dans la console de mon navigateur, le css ".panel.row3 html" n'apparait même pas :/

Voilà une capture de ma console : http://zupimages.net/up/17/36/5h2o.png

Donc comme tu peux le voir la balise html de la chatbox prend en compte le css de base "body, html" et le css de ma surcharge "html", mais à aucun moment ce que j'ai rajouté (dans mon post précédent) n'apparait. Donc je pense que le sélecteur n'est pas bon

MrChampy

7 septembre 2017 à 17:19:14

Hello,

Tente :

div.panel html {
   //
}

Ca pourrait marcher. Après les histoires de balises html dans les balises html, ça me parait sombre :lol:

-
Edité par MrChampy 7 septembre 2017 à 17:21:02

Anju44

7 septembre 2017 à 17:26:39

Ca ne fonctionne pas non plus

Et s'il y a de l'html dans de l'html, c'est parce que c'est une iframe :/

MrChampy

7 septembre 2017 à 17:32:05

Hmm, sans lien c'est difficile de t'aider ... Je vais rejeter un oeil un peu plus tard mais je garantis rien.

Anju44

8 septembre 2017 à 17:15:29

Je me permets de up :3

Je suis toujours bloquée sur ce sujet