Champ : meme code html/css, mais largeur differente

More
10 years 1 month ago - 10 years 1 month ago #49622 by sorgina
Slt

J'ai fait des fiches animaux pour lesquels j'ai fait un Template fiche-animaux et un Type. Chaque fiche est bien "attachee" au template et au type. Pour ces fiches j'ai cree des champs. C'est avec le champ Statuts UICN (textarea) que j'ai un probleme. Pour ce champ j'ai une base HTML et CSS qui est exactement la meme pour chaque fiche (bien sur pour chaque fiche certain texte change, mais la base html et css ne change pas) :

exemple d'une structure du code HTML :
Code:
<div id="statut-uicn"> <p id="titre">Statuts UICN <span id="fiche-uicn" class="no-indent">Voir sa fiche sur le site de l'<a class="jcepopup" href="http://www.iucnredlist.org/details/9461/0" target="_blank">UICN</span></p> <img class="no-border" src="images/especes-observees/statuts-iucn-lc.png" alt="" /> <p id="categorie-statut" class="no-indent">LC (Least Concern) : le moins concernée. Ne remplit pas les critères d'une catégorie en danger. Les animaux répandus et abondants sont inclus dans cette catégorie.</p> <p id="plus-info-uicn" class="no-indent">Plus d'info sur l'<a class="jcepopup" href="https://fr.wikipedia.org/wiki/Uicn" target="_blank">UICN et les <a class="jcepopup" href="https://fr.wikipedia.org/wiki/Statut_de_conservation" target="_blank">catégories.</p> </div>

le code CSS :
Code:
#statut-uicn { width:80%; height:auto; margin: 20px auto 30px auto ; border-style: solid; border-radius: 3px; border-width: 1px; border-color:#000; overflow:hidden; } #statut-uicn #titre { color:#fff; margin:0px !important; padding: 5px 0 5px 20px ; border-bottom: 1px solid #000 ; background-color:#0e557a; } #fiche-uicn { margin-left:200px; font-size:0.9em; } #fiche-uicn a { color:#fff; } #statut-uicn img { display:block; width:350px; margin-left:auto; margin-right:auto; text-align:center; } #categorie-statut { text-align:center; font-size:0.9em; font-weight:bold; } #plus-info-uicn { font-size:0.8em; text-align:center; }

Mon probleme c'est que la largeur que je lui ai donne (80%) n'est pas prise en compte sur certaine fiches :

Les fiches avec le probleme :
  • Baleine à bec de Blainville
  • Cachalot pygmée
  • Globicéphale noir
  • Grand cachalot
  • Mesoplodon de Sowerby
  • Orque
  • Rorqual commun
  • Requin peau bleue
  • Requin pélerin
  • Totue Luth

Les autres avec la bonne largeur :
  • Baleine à bec de Cuvier
  • Dauphin bleu et blanc
  • Dauphin commun à bec court
  • Dauphin de Risso
  • Grand dauphin commun
  • Marsouin commun
  • Phoque commun
  • Phoque gris
  • Rorqual museau pointu

Voici le lien vers la page contenant les liens vers les fiches animaux. C'est juste une installation pour montrer aux personnes de l'association, pour qui je fait le site, ce que ca donne. Sinon je bosse avec Serveur2Go.

Merci d'avance pour votre aide.

Joomla 2.5.25
Flexicontent 2.1.3 r1857
Last edit: 10 years 1 month ago by sorgina.

Please Log in or Create an account to join the conversation.

More
10 years 1 month ago #49625 by ggppdk
Hello

-- please note that this is a general CSS, and answering general CSS question, is not responsibility for FC developers, anyone can do it, if they can spare the time

but since it is easy to answer it ... you description is not bad


So don't forget that a:
Code:
width: 80%;
is 80% of whatever parent container has !!

-- so must look at the parent container or parent containers



-- if you look you will see that they are not taking up the maximum space !

because the are floating !!

they have:
float: left;


you may add this CSS rule:
Code:
#fc_subtitle_tab1 .flexi.element { float:none !important; } #fc_subtitle_tab1 .flexi.value { float:none !important; }

because your element id is inside the above containers


-- Flexicontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star...

Please Log in or Create an account to join the conversation.

More
10 years 1 month ago #49636 by sorgina
Mais bien sur ! si j'avais regarde avec firebug je m'en serais rendu compte. C'est vrais que c’etait simple. Desole pour le derangement :oops: :) et merci pour ton aide.

Please Log in or Create an account to join the conversation.

More
10 years 1 month ago #49640 by ggppdk
Hello

also if for any reason you need to keep the float attribute to the parent containers, then you can also do:
Code:
#fc_subtitle_tab1 .flexi.element { width:100% !important; } #fc_subtitle_tab1 .flexi.value { width:100% !important; }


-- Flexicontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star...

Please Log in or Create an account to join the conversation.

More
10 years 1 month ago #49641 by sorgina

Please Log in or Create an account to join the conversation.

More
10 years 1 month ago #49645 by micker
si tu nous aime lol
n'hesite pas a nous mettre 5 etoile sur la jed avec un bon commmentaire sur le support
Merci

FLEXIcontent is Free but involves a very big effort on our part.
Like the our support? (for a bug-free FC, despite being huge extension) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing reviews. Thanks![/size]

Please Log in or Create an account to join the conversation.

Moderators: vistamediajoomlacornerggppdk
Time to create page: 0.764 seconds
Save
Cookies user preferences
We use cookies to ensure you to get the best experience on our website. If you decline the use of cookies, this website may not function as expected.
Accept all
Decline all
Essential
These cookies are needed to make the website work correctly. You can not disable them.
Display
Accept
Analytics
Tools used to analyze the data to measure the effectiveness of a website and to understand how it works.
Google Analytics
Accept
Decline