Posts: 83
Threads: 19
Joined: Mar 2011
hello,
Excuse me for my bad English. I'm putting up a small site at this address
http://pep66.comeze.com/ but I have a display problem in IE and Chrome
http://pep66.comeze.com/index.php?id=als...Roussillon with tabs.
Is there a plugin for this kind of code?
Thank you for your ideas. cordially
Posts: 2,928
Threads: 195
Joined: Feb 2011
can you post a screenshot? I have no Chrome browser active
Posts: 83
Threads: 19
Joined: Mar 2011
2011-04-06, 17:35:37
(This post was last modified: 2011-04-06, 18:56:54 by nae0254.)
Here is the code I put in the page
Code:
<p>
<style type="text/css">
<!--{cke_protected}{C}%3C!%2D%2D%0A.style15%20%7Bfont-family%3A%20Arial%2C%20Helvetica%2C%20sans-serif%3B%20font-size%3A%20x-small%3B%20font-weight%3A%20bold%3B%20%7D%0A.style17%20%7B%0A%09font-size%3A%2014px%3B%0A%09font-family%3A%20Arial%2C%20Helvetica%2C%20sans-serif%3B%0A%7D%0A.style19%20%7Bfont-size%3A%2014px%3B%20font-family%3A%20Arial%2C%20Helvetica%2C%20sans-serif%3B%20font-weight%3A%20bold%3B%20%7D%0A%2D%2D%3E--> </style>
</p>
<p>
<style type="text/css">
* { font-size:14px; }
input { opacity:.0; margin-right:-.7em; margin-left:0em; overflow:visible; }
.alltabs { border:0px dotted #aaa; height:350px; position:relative; }
input + label
{
display: inline-block;
padding: 6px 8px 10px 24px;
border: 1px solid;
background-color: #fff;
height: 8px;
margin:0;
line-height: 12px;
position:relative;
}
input + label + div
{
margin:0;
margin-top:2px;
padding: 16px;
border: 1px solid;
width: 41em;
height: 320px;
position: absolute;
top: 23px;
display: none;
}
input:checked + label + div { display:block; }
input:checked + label { background-color:#1CA6D5; z-index:3; border-bottom-color:#fff; }
/* GUI styled: */
div.code {
text-align: left;
height: 110px;
overflow: auto;
overflow-x: hidden;
font-size:12px;
border:1px solid #666;
padding:1em;
}
code
{
white-space: pre;
font-size:12px;
}
h1 { font-size:18px; }
p { font-size:12px; } </style>
</p>
<h3>
ALSH Maternel & Primaire</h3>
<p align="justify" class="style17">
<span class="style17"><img alt="" src="http://pep66.comeze.com/data/uploads/enfant silouhette 13.jpg" style="width: 150px; height: 144px; margin: 10px; float: left;" />L'accueil de loisirs 3/12 ans fonctionne dans les locaux du groupe scolaire "Joseph Dauriach " - Avenue Pierre Camps à Latour Bas Elne. Deux salles polyvalentes, une salle de repos, un bloc sanitaire, 2 cours sont à la disposition du centre. <strong>L'ouverture se fait à 7h30 et la fermeture à 18h30</strong>. </span></p>
<p align="justify" class="style19">
Les activités débutent à 8h50 et se terminent à 17h30.</p>
<p align="justify" class="style17">
Un accueil parents/enfants est organisé le <strong>matin</strong> de <strong>7h30 à 8h50</strong> et le <strong>soir</strong> de <strong>17h30 à 18h30</strong>.</p>
<p align="justify" class="style17">
Les inscriptions se font sur le centre de loisirs, les paiements se font à l'inscription.</p>
<p align="justify" class="style17">
Directrice du centre: <span style="font-weight: bold;">Céline EQUISOAIN 06.22.49.73.09 (</span><span style="font-weight: bold;">c.equisoain[@]adpep66.org)</span></p>
<div class="alltabs">
<input checked="CHECKED" id="tab1" name="tab" type="radio" /> <label for="tab1">Périodes ouverture</label>
<div>
<p align="justify" class="style17">
L'ADPEP66 gère l'ALSH de Latour Bas Elne les <strong>mercredis de l'année scolaire, les petites vacances scolaires </strong>(automne, hiver et printemps)<strong> et toute la période d'été</strong>.</p>
<p class="style17">
<strong>Calendrier de fonctionnement pour le 1er semestre 2011 </strong></p>
<table border="1" width="580">
<tbody>
<tr>
<th class="style17" scope="row" width="70">
<div align="left">
JANVIER</div>
</th>
<td class="style17" width="47">
</td>
<td class="style17" width="302">
les mercredis 5 - 12 - 19 - 26</td>
</tr>
<tr>
<th class="style17" scope="row">
<div align="left">
FEVRIER</div>
</th>
<td class="style17">
</td>
<td class="style17">
les mercredis 2 - 9 - 16 - 23</td>
</tr>
<tr>
<th class="style17" scope="row">
<div align="left">
HIVER</div>
</th>
<td class="style17">
</td>
<td class="style17">
28 février - 1 - 2 - 3 - 4 - 7 - 8 - 9 - 10 - 11 mars</td>
</tr>
<tr>
<th class="style17" scope="row">
<div align="left">
MARS</div>
</th>
<td class="style17">
</td>
<td class="style17">
les mercredis 16 - 23 - 30</td>
</tr>
<tr>
<th class="style17" scope="row">
<div align="left">
AVRIL</div>
</th>
<td class="style17">
</td>
<td class="style17">
les mercredis 6 - 13 - 20</td>
</tr>
<tr>
<th class="style17" scope="row">
<div align="left">
PRINTEMPS</div>
</th>
<td class="style17">
</td>
<td class="style17">
26 - 27 - 28 - 29 avril - 2 - 3 - 4 - 5 - 6 mai</td>
</tr>
<tr>
<th class="style17" scope="row">
<div align="left">
MAI</div>
</th>
<td class="style17">
</td>
<td class="style17">
les mercredis 11 -18 - 26</td>
</tr>
<tr>
<th class="style17" scope="row">
<div align="left">
JUIN</div>
</th>
<td class="style17">
</td>
<td class="style17">
les mercredis 1 - 8 -15 - 22 - 29</td>
</tr>
<tr>
<th class="style17" scope="row">
<div align="left">
ETE</div>
</th>
<td class="style17">
</td>
<td class="style17">
du 04 juillet au 12 août (fermé le jeudi 14 juillet)</td>
</tr>
</tbody>
</table>
</div>
<input id="tab2" name="tab" type="radio" /> <label for="tab2">Tarifs</label>
<div>
<table border="0">
<tbody>
<tr>
<th bgcolor="#33CCFF" rowspan="8" scope="col" width="5">
</th>
<th bgcolor="#33CCFF" scope="col">
<div align="center" class="style15">
Familles de Latour</div>
</th>
<th bgcolor="#33CCFF" rowspan="8" scope="col" width="5">
</th>
<th bgcolor="#33CCFF" scope="col">
<div align="center" class="style15">
QF>690</div>
</th>
<th bgcolor="#33CCFF" rowspan="8" scope="col" width="5">
</th>
<th bgcolor="#33CCFF" scope="col">
<div align="center" class="style15">
473<QF<690</div>
</th>
<th bgcolor="#33CCFF" rowspan="8" scope="col" width="5">
</th>
<th bgcolor="#33CCFF" scope="col">
<div align="center" class="style15">
351<QF<472</div>
</th>
<th bgcolor="#33CCFF" rowspan="8" scope="col" width="5">
</th>
<th bgcolor="#33CCFF" scope="col">
<div align="center" class="style15">
QF<350</div>
</th>
<th bgcolor="#33CCFF" rowspan="8" scope="col" width="5">
</th>
</tr>
<tr>
<th scope="row">
<div align="center" class="style15">
Journée</div>
</th>
<td>
<div align="center" class="style15">
12.50</div>
</td>
<td>
<div align="center" class="style15">
10.50</div>
</td>
<td>
<div align="center" class="style15">
8.50</div>
</td>
<td>
<div align="center" class="style15">
5.50</div>
</td>
</tr>
<tr>
<th scope="row">
<div align="center" class="style15">
1/2 jour avec repas</div>
</th>
<td>
<div align="center" class="style15">
8.25</div>
</td>
<td>
<div align="center" class="style15">
7.25</div>
</td>
<td>
<div align="center" class="style15">
6.25</div>
</td>
<td>
<div align="center" class="style15">
4.75</div>
</td>
</tr>
<tr>
<th scope="row">
<div align="center" class="style15">
1/2 jour sans repas</div>
</th>
<td>
<div align="center" class="style15">
4.25</div>
</td>
<td>
<div align="center" class="style15">
3.25</div>
</td>
<td>
<div align="center" class="style15">
2.25</div>
</td>
<td>
<div align="center" class="style15">
0.75</div>
</td>
</tr>
<tr>
<th bgcolor="#33CCFF" scope="col">
<div align="center" class="style15">
Familles Extèrieures</div>
</th>
<th bgcolor="#33CCFF" scope="col">
<div align="center" class="style15">
QF>690</div>
</th>
<th bgcolor="#33CCFF" scope="col">
<div align="center" class="style15">
473<QF<690</div>
</th>
<th bgcolor="#33CCFF" scope="col">
<div align="center" class="style15">
351<QF<472</div>
</th>
<th bgcolor="#33CCFF" scope="col">
<div align="center" class="style15">
QF<275</div>
</th>
</tr>
<tr>
<th scope="row">
<div align="center" class="style15">
Journée</div>
</th>
<td>
<div align="center" class="style15">
22.50</div>
</td>
<td>
<div align="center" class="style15">
20.50</div>
</td>
<td>
<div align="center" class="style15">
18.50</div>
</td>
<td>
<div align="center" class="style15">
15.50</div>
</td>
</tr>
<tr>
<th scope="row">
<div align="center" class="style15">
1/2 jour avec repas</div>
</th>
<td>
<div align="center" class="style15">
13.25</div>
</td>
<td>
<div align="center" class="style15">
12.25</div>
</td>
<td>
<div align="center" class="style15">
11.25</div>
</td>
<td>
<div align="center" class="style15">
9.75</div>
</td>
</tr>
<tr>
<th scope="row">
<div align="center" class="style15">
1/2 jour sans repas</div>
</th>
<td>
<div align="center" class="style15">
9.25</div>
</td>
<td>
<div align="center" class="style15">
8.25</div>
</td>
<td>
<div align="center" class="style15">
7.25</div>
</td>
<td>
<div align="center" class="style15">
5.75</div>
</td>
</tr>
<tr bgcolor="#33CCFF">
<th colspan="11" scope="col">
*QF = quotient familial CAF</th>
</tr>
</tbody>
</table>
</div>
<input id="tab3" name="tab" type="radio" /> <label for="tab3">Informations</label>
<div>
<p align="justify" class="style17">
Les enfants peuvent être inscrits à la journée ou à la demi-journée (avec ou sans repas). La tarification est en fonction du quotient familial des parents.</p>
<p align="justify" class="style19">
Aides aux familles:</p>
<p align="justify" class="style17">
Le tarif de <strong>base journalier est de 22.50 €</strong>. Les familles de Latour Bas Elne bénéficient d'une aide journalière de la ville de <strong>10.00 €</strong>. D'autres aides peuvent être attribuées par la CAF, la MSA, les services sociaux, les comités d'entreprise, ...(se renseigner auprès de ces organismes).</p>
<p align="justify" class="style17">
Toute inscription doit se faire à l'avance. La Direction du centre est autorisée à refuser un enfant s'il n'était pas prévu et si la capacité d'accueil est déjà atteinte.</p>
</div>
<input id="tab4" name="tab" type="radio" /> <label for="tab4">Plan d'accès</label>
<div>
<iframe frameborder="0" height="300" hspace="0" marginheight="0" marginwidth="0" scrolling="no" src="http://www.ma-carte-geographique.com/my-google-maps.php?SID=1301902863-JnVt5" vspace="0" width="562"></iframe></div>
</div>
screen with IE
http://img850.imageshack.us/img850/1928/sansre1.jpg
two screen with chrome the tabs don't work
http://img810.imageshack.us/img810/2865/sansre2.jpg
http://img846.imageshack.us/img846/385/sansre3.jpg
thank you
Posts: 423
Threads: 15
Joined: Mar 2011
Salut,
Chrome Developer Tools shows several errors (orphaned </p>, </ul>, ...) and validator.w3.org complains about some of the markup in the table. It may not be significant, but ...
I would suggest placing very simple content in the tabs – just a line of text in <p> ... </p> tags, for example – to see if that changes anything.
Et ton anglais est bien compréhensible ... ;-)
--
Nick.
Posts: 83
Threads: 19
Joined: Mar 2011
I ask myself the following question:
can we insert this kind of miter box in a page getsimple
http://www.sohtanaka.com/web-design/simp...ss-jquery/
knowing that in a single page can have 2 or 3 boxes in different tabs.
what kind of box is a plugin for wordpress, joomla, ... Is there such a thing for getsimple?
Download
