[Annonce] NewsletTux 2.0.8.

[djamel]

Rebonjour,
page[url]http://www.aidoi.com/cpl.htm[url]
j'espère ne pas être trop lourd avec mes questions :
1 - J'ai mis cette partie de code dans le head de ma page. Or sous IE7, cela ne fonctionne pas du tout.

Code:

<!--[if IE]-->
    <link href="special_ie.css" rel="stylesheet" type="text/css" media="all" />
<!--[endif]-->

2 - sous mozilla, le reste du site se met à la suite du menu 
3 - et, je n'arrive pas du tout à aligner le menu sur la page

Pas facile du tout !
merci pour votre aide.

djamel

[Andy]

Rebonjour,

j'espère ne pas être trop lourd avec mes questions :
1 - J'ai mis cette partie de code dans le head de ma page. Or sous IE7, cela ne fonctionne pas du tout.

Code:

<!--[if IE]-->
    <link href="special_ie.css" rel="stylesheet" type="text/css" media="all" />
<!--[endif]-->

2 - sous mozilla, le reste du site se met à la suite du menu 
3 - et, je n'arrive pas du tout à aligner le menu sur la page

Pas facile du tout !
merci pour votre aide.

djamel

Salut,
Petite erreur dans la fonction [if IE] tel que tu l'utilise dans ton site.

J'ai récupéré ta page que j'ai un peu modifié (rajout d'un header et content comme je te l'avais dit précédemment).

Tu peux voir sur ce lien un exemple de ton site   (bien sûr, il faudra l'adapter comme tu le veux) http://delfaco.online.fr/test/aidoi.php  (je laisserais le lien un certain temps)

Il faudra donc modifier tes pages CSS.
aidoi.css

Code:

div#global {
width: 950px;
margin: 0 auto;
position: relative;
}
div#header {
background-color: transparent; /* #fff ; */
height: 22px;
position: relative;
}
div#content {
padding-bottom: 50px;
overflow: auto;
height: 100%;
}

.texte {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #330066;
text-align: justify;
}
.titre1 {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
font-style: italic;
line-height: normal;
font-weight: bold;
font-variant: small-caps;
text-transform: none;
color: #993300;
text-align: left;
}
.titre2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: italic;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #339966;
}
.questions {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
font-style: normal;
color: #3300CC;
text-align: left;
overflow: auto;
width: 500px;
height: 120px;
font-weight: normal;
}

.focus {
COLOR: #000000; BACKGROUND-COLOR: #a4e7fd
}.reponse {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
font-style: normal;
color: #330066;
text-align: left;
overflow: auto;
width: 520px;
height: 350px;
font-weight: normal;
line-height: normal;
}
.aikido {
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
color: #333399;
text-align: center;
}

a.lien
{
color:#006699;
text-decoration:none;
font-weight:bold;
}
a.lien:hover
{
color:#996600;
text-decoration:none;
font-weight:bold; }

template.css

Code:

#menu dl, #menu dt, #menu dd, #menu ul, #menu li
{
margin: 0;
padding: 0;
list-style-type: none;
}

#menu
{
position: absolute;
top: 0px;
margin:0 auto 1em auto;
z-index:100;
width:950px; /* Opera */
}

#menu dl
{
float: left;
width: 135px;
}

#menu dt
{
cursor: pointer;
text-align: center;
font-weight: bold;
margin: 1px;
font-size:.8em;
height:20px;
background:url(http://www.aidoi.com/images/bg_menu.png);
background-repeat:no-repeat;
background-position:top left;
}

#menu dd
{
display: none;
border: 1px solid gray;
}


#menu li a, #menu dt a
{
display: block;
height: 100%;
color: #000;
text-decoration: none;
border: 0 none;
font-size:.6em;
}

#menu li
{
text-align: left;
background: #fff;
}

#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus
{
background: #eee;
}

special_ie.css

Code:

#menu dl
{
width: 135px;
}
/* To hide the submenu with IE7 */
* +html #menu dd
{
margin-top: -2px;
}
* +html #menu ul, #menu ul a
{
width: 100%;
}
/* To hide the submenu with IE6 */
* html #menu dd
{
margin-top: -2px;
}
* html #menu ul, #menu ul a
{
background : url('null') fixed;
width: 100%
}

Puis dans ta page, il faut rectifier le script du menu (puisque tu l'as inclut 2X) avec la correction pour IE
remplace ton javascript par:

Code:

<!-- début menu déroulant -->
<link href="template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
    window.onload=montre;
    function montre(id)
    {
        var d = document.getElementById(id);
        for (var i = 1; i<=10; i++)
        {
            if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
        }
        if (d) {d.style.display='block';}
    }

    window.onload=cache;
    function cache(id)
    {
        var d = document.getElementById(id);
        for (var i = 1; i<=10; i++)
        {
            if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
        }
        if (d) {d.style.display='hidden';}
    }
//-->
</script>
<!--[if IE]>
    <link href="special_ie.css" rel="stylesheet" type="text/css" media="all" />
<![endif]-->

<!-- fin menu déroulant -->

Puis dans ta page, il faut inclure les différents conteneurs
Juste au-dessus de ton id="menu" tu insère le code:

Code:

<div id="global">
   <div id="header">

Puis après la fermeture du div de ton menu, avant : <div align="center"> tu insère le code:

Code:

</div>
       <div id="content" onmouseover="javascript:cache();">

Et pour terminer, il faut encore fermer les div
A la fin de ta page, juste avant la fermeture du body (</body>) tu insère le code:

Code:

</div>
</div>

[djamel]

Bonjour,
Je n'avais pas vu ta réponse.
Merci beaucoup. J'essaie cela dés demain matin.
Cela me permet de me former sur le css car il me semble qu'aujourd'hui cela devient un élément plus que nécessaire et ensuite de pouvoir les autres.

A demain

Djamel

[djamel]

merci beaucoup.
Cela fonctionne très bien.

Djamel