Bonjour,
je suis loin d'être une spécialiste en css.
Mon pb est de faire apparaitre le texte dans mes onglets.
Hors quand j'ouvre la page, et je regarde le code html, je vois bien mon texte dans le code source mais il n’apparaît pas dans page.
Quand j'utilise firebug, il me marque simplement une balise <div id="more_info_sheets" class="sheets align_justify"> </div>. je ne vois donc pas le même code que dans ma feuille html !!!
Voici mon css en relation avec les onglets
voici mon code en généré en html
Voici le code généré par filezilla
Merci de votre aide, cela serait très sympa.
bonne journée.
Modifié par oitsuki (10 Dec 2011 - 18:13)
je suis loin d'être une spécialiste en css.
Mon pb est de faire apparaitre le texte dans mes onglets.
Hors quand j'ouvre la page, et je regarde le code html, je vois bien mon texte dans le code source mais il n’apparaît pas dans page.
Quand j'utilise firebug, il me marque simplement une balise <div id="more_info_sheets" class="sheets align_justify"> </div>. je ne vois donc pas le même code que dans ma feuille html !!!
Voici mon css en relation avec les onglets
ul {
list-style-type:none;
}
li {
margin-left:1px;
float:left; /*pour IE*/
}
.clear {
clear: both;
}
/* Tabs */
ul.idTabs {
list-style-type:none;
}
ul.idTabs li {
float:left;
margin-right:2em;
margin-bottom:1em;
}
ul.idTabs li a {
font-family: Lucida Sans Unicode,Lucida Grande,Sans-Serif;
color: #0066CC;
display: block !important;
/* display:inline;*/
font-weight: normal;
height: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
float:left;
width:100%;
background-color:#dadada;
}
ul.idTabs li a:hover{
background-color:#a39993;
}
ul.idTabs li a.selected{
/* padding-left:0em; */
height: auto;
padding-left: 0;
}
/* IdTabs Short*/
ul.idTabsShort {
width:100%;
float:left;
margin: 1.5em 0 1.3em 0;
height:30px;
border:none;
border-top:1px solid #E6E6E6;
border-bottom:1px dotted #D4D4D4;
}
ul.idTabsShort li {
margin:0em 0em 0 0;
line-height:15px !important;
line-height:25px;
}
ul.idTabsShort li a {
/*padding:5px 15px 0px 0*/
border: medium none;
color: #999999;
font-weight: normal;
padding: 5px 15px 9px 0 !important;
width: auto;
}
ul.idTabsShort li a:hover{
border:none;
color:black;
padding:5px 15px 9px 0;
}
ul.idTabsShort li a.selected{
border: medium none;
color: black;
padding: 5px 15px 9px 0;
}
ul#more_info_tabs {
background-color: #BEB6B4;
border: medium none;
margin-bottom: 0;
width: 662px;
padding: 0 15px 0px 0;
}
ul#more_info_tabs li a.selected {
background-color: #B5A432;
color: #FFFFFF;
}
ul#more_info_tabs li A {
border-left: 1px solid #FFFFFF;
color: #FFFFFF;
height: auto;
padding: 7px 20px !important;
}
/* Contenu qui va s'afficher dans l'onglet */
div.sheets{
width:100%;
float:left;
height:500px;
border-bottom: solid 2px #b5a432;
border-left: solid 2px #b5a432;
border-right: solid 2px #b5a432;
}
div#more_info_sheets ul li {
background-position: 0px 1px;
margin-bottom: 0.4em
}
div.more_info_sheets {
border-bottom: solid 2px #b5a432;
border-left: solid 2px #b5a432;
border-right: solid 2px #b5a432;
margin-left: 1px;
padding: 5px 10px ;
width: 637px;
}
voici mon code en généré en html
<!-- Start products_description_tab -->
<script type="text/javascript">jQuery(document).ready(function () { jQuery('#idTab1').remove(); jQuery('#more_info_tab_more_info').parent().remove(); });</script>
<div class="contentText" style="float:none; clear:both;">
<div id="more_info_block">
<ul class="idTabs idTabsShort" id="more_info_tabs">
<li style="display: none;"></li>
<li><a href="#idTab1001"class="selected">
En savoir +</a></li>
<li><a href="#idTab1002">
Histoire</a></li>
<li><a href="#idTab1003">
Dimensions</a></li>
</ul>
<div id="more_info_sheets" class="sheets align_justify">
<div id="idTab1" class="main"><div id="idTab1001" class="rte">
<p style="margin-bottom: 0cm;">
<span style="font-size: 10pt; font-family: verdana,geneva;">La dentelle « oya », est travaillée à l'aiguille très fine par les femmes d'Anatolie avec un fil de soie ou de coton, réhaussé parfois de perles pour en souligner les motifs. Cet art traditionnel, très ancien et minutieux, est utilisé comme ornement des tissus fleuris si reconnaissable de la Turquie centrale.</span></p>
<p style="margin-bottom: 0cm;">
<span style="font-size: 10pt; font-family: verdana,geneva;">La collection Oya est réalisée à la main par Hanifa et ses soeurs avec qui Karawan invente une gamme de colliers précieux dans une démarche équitable et créative.</span></p>
</div>
<div id="idTab1002" class="rte">
<p style="margin-bottom: 0cm;">
<span style="color: #fd017f; font-family: verdana,geneva; font-size: 10pt;">OYA, UNE DENTELLE OTTOMANE HERITEE DES ROUTES DE LA SOIE</span><br />
<span style="font-family: verdana,geneva; font-size: 10pt;">Fabriquée à l’origine dans les palais ottomans, elle était utilisée pour orner les vêtements, les coussins, les tentures... Elle fut introduite dans les cours européennes au 16ème siècle et fit son entrée dans le dictionnaire de la langue française au 16° siècle sous le nom de dentelle turque. Vers la moitié du 18ème siècle, la dentelle connut un véritable engouement. Dans le harem, c’était à celle des concubines qui créerait la dentelle la plus riche. Le fil de soie était entrelacé d’un fil d’or ou d’argent, au point que le Sultan Mahmud 1er dut édicter des lois somptuaires limitant leur utilisation. Depuis, la dentelle oya s’est démocratisée. Elle s’est répandue dans la campagne où elle est indissociable du “yazma”, le foulard que portent les femmes anatoliennes. On dit que la femme anatolienne fait passer ses sentiments, et exprime ses appartenances, par les motifs et les couleurs qu’elle emploie.</span><br />
<br />
<span style="color: #fd017f; font-family: verdana,geneva; font-size: 10pt;">UNE CREATION CONTEMPORAINE METISSEE</span><br />
<span style="font-family: verdana,geneva; font-size: 10pt;">Les colliers Oya sont nés du métissage de la tradition dentelière turque et du regard voyageur de Christine Delpal, créatrice de la marque Karawan. La rencontre forte et prometteuse avec Hanifa et ses soeurs, villageoises d’Anatolie, fut une évidence. </span><br />
<span style="font-family: verdana,geneva; font-size: 10pt;">Karawan s’engage depuis sa fondation pour la valorisation de savoir faire artisanaux des Routes de la Soie, par la création de collections singulières que Christine revisite par le design, pour les maintenir vivants, dans une démarche d’économie solidaire. </span><br />
<span style="font-family: verdana,geneva; font-size: 10pt;">Un désir partagé de transmettre et d’accompagner vers une professionnalisation, source de revenus et d’innovation, des savoirs traditionnels féminins d’exception, souvent limités à la sphère domestique.</span><br />
<br />
<span style="font-family: verdana,geneva; font-size: 10pt;">Christine s’installe de longs jours dans les montagnes d’Anatolie, aux cotés d’Hanifa, et elles conçoivent ensemble dans une dynamique de co-création ces parures inspirées des couleurs telluriques de la région et du rythme changeant des saisons. Des ensembles à coordonner à souhait ou à décaler....avec l’ornement si féminin de la dentelle, comme seul fil directeur! </span><br />
<br />
<span style="font-family: verdana,geneva; font-size: 10pt;"><strong>Depuis 18 mois, 30 femmes des villages environnants se sont groupées en collectif afin d’assurer la formation des jeunes et organiser la production qui s’échelonne toute l’année, dans une dynamique de renouvellement régulier des collections.</strong> </span></p>
<p style="margin-bottom: 0cm;">
<img alt="artisane turque en train de crocheter" height="200" src="../boutique/images/Image/collier_oya.jpg" /> <img alt="artisane turque en train de crocheter" height="200" src="../boutique/images/Image/P1070891.jpg" /> <img alt="artisane turque en train de crocheter" height="200" src="../boutique/images/Image/P1070915.jpg" /></p>
</div>
<div id="idTab1003" class="rte">
<p style="margin-bottom: 0cm;">
<span style="font-size: 10pt; font-family: verdana,geneva;">Longueur totale: 1 m</span><br />
<span style="font-size: 10pt; font-family: tahoma,arial,helvetica,sans-serif;">Création C.Delpal</span></p></div>
</div>
</div>
</div>
</div>
<!-- end products_description_tab -->
Voici le code généré par filezilla
script type="text/javascript">
jQuery(document).ready(function () { jQuery('#idTab1').remove(); jQuery('#more_info_tab_more_info').parent().remove(); });
</script>
<div class="contentText" style="float:none; clear:both;">
<div id="more_info_block">
<ul id="more_info_tabs" class="idTabs idTabsShort">
<li style="display: none;"></li>
<li>
<a class="selected" href="#idTab1001"> En savoir +</a>
</li>
<li>
<a href="#idTab1002"> Histoire</a>
</li>
<li>
<a href="#idTab1003"> Dimensions</a>
</li>
</ul>
<div id="more_info_sheets" class="sheets align_justify"> </div>
</div>
</div>
Merci de votre aide, cela serait très sympa.
bonne journée.
Modifié par oitsuki (10 Dec 2011 - 18:13)