Menu/Css/Html/jQuery

Ce sujet est résolu
Default
,

Bonjour,

Je suis nouveau sur ce forum.

J'ai eut part de ce site grâce à une connaissance que je me suis faite en stage.

J'aurais aimer savoir si vous sauriez m'aider pour un problème :

J'ai fait des plaquettes, et je dois appliquer donc ma charte en l'intégrant au site.

Cependant, j'ai appris que les entreprise qui utilise leur logiciel passe sous IE6. Mon site n'est pas adopter à cette version mais adopter à Chrome/Opera/Mozilla/IE9.

J'ai donc procéder avec un petit script java pour dire que si c'est IE6, il passe par un autre CSS. Cependant j'ai un soucis.

Je dois avoir ceci :

Mais j'ai un soucis, vous le trouverez ci dessous-après mes bouts de code :

Voici mon code CSS :

body
{
    background-color : #888888;
}
/* ------------------------------ BANNIERE ---------------------------------- */
#banniere
{
    background-image : url("../../images/template/banniere.png");
    background-repeat: no-repeat ;
    width : 956px;
    height : 107px;
    margin : 0px auto;
}
/* ------------------------ MENU HORIZONTAL ----------------------------- */
#menu
{
    background-image : url("../../images/template/menu.png");
    background-repeat: no-repeat ;
    width : 960px;
    height : 38px;
    margin : auto;
    text-align : center;
}
.menu-text-center
{
    padding-top : 6px;
    width: 960px;
    color : white;
}
/* ------------------------ BALISES GENERALES ----------------------------- */
h3
{   
    margin-left : 30px;
    color : #99ccd4;
    font-family : Times New Roman;
}
hr
{
    color : #99ccd4;
    background-color : #99ccd4;
    height: 1px;
    border: 0px;
    width : 790px;
    margin-top: -15px;
    margin-left: 30px;
}
p
{
    margin-left: 30px;
    width : 790px;
    font-family : "Verdana", Times New Roman;
    font-size : 11px;
}
/* ------------------------ DIV DU CONTENU TOTAL ---------------------------- */
#contenu
{
    background-image : url("../../images/template/contenu.png");
    width : 954px;
    min-height : 850px;
    padding-top: 10px;
    margin : auto;
}
/* --------------------------------------- MENU ---------------------------------------- */


.sousmenu{
    display : block;
    width: 242px;
    position: absolute;
    left:0;
    clear: both;
    margin-top:19px;
    z-index:2;
}
.liens{
    float: left;
    width: 0px;
    height : 210px;
    border: 0;
    background-color : #F4F2F3;
    margin-top:7px;
    padding:5px;
    overflow:hidden;
    margin-left:1px;
}
.liens p{
    margin: 0;
    width: 190px;
    overflow:hidden;
}
.onglet{
    float:left;
    height:220px;
    width:40px;
    height:239px;
    margin-left: -12px;
}
.menu1 .onglet {
    top: 100px;
    background-image : url("../../images/template/mon-compte.png");
}
.menu2 .onglet {
    top: 200px;
    background-image : url("../../images/template/formation.png");
}
.menu3 .onglet {
    top: 300px;
    background-image: url("../../images/template/CarnetDeBord.png");
}
.menu1 .ouvert {
    top: 100px;
    background-image: url("../../images/template/mon-compte2.png");
}
.menu2 .ouvert {
    top: 200px;
    background-image: url("../../images/template/formation2.png");
}
.menu3 .ouvert {
    top: 300px;
    background-image: url("../../images/template/CarnetDeBord2.png");
}
/* ------------------------ DIV DU CONTENU MILIEU ---------------------------- */
.page-div-shadow
{
    width : 850px;
    border : 1px solid #bababb;
    margin-left : 55px;
    margin-top: 10px;
    clear: right;
    position : absolute;
}
/* ------------------------ DIV FOOTER ---------------------------- */
#div-footer
{
    background-image : url("../../images/template/footer.png");
    background-repeat: no-repeat ;
    width : 952px;
    height : 51px;
    margin : auto;
    text-align : center;
}
.footer
{
    padding-top : 13px;
    width: 960px;
}

Voici mon code jQuery :

function getGauche(){
                    var left = $("#contenu").offset().left; // Le classe wrapper c'est la classe ou tu veux l'alignement gauche!
                    $(".sousmenu").css('left', left+'px');
            }
            $(document).ready(function() {
                    getGauche();
                    $(window).resize(function() {
                        getGauche();
                    }
                    $(".onglet").click(function() { // Un onglet est cliqué
                        var lien = $(this).parents(".sousmenu"); // L'onglet fait partie de quel sousmenu?
                                lien = lien.children(".liens"); // Je récupere le composant .liens du sousmenu en question


                        if(!$(this).hasClass("ouvert")) { // On vérifie si l'onglet est fermé
                                        $(this).addClass("ouvert"); // On précise qu'on ouvre l'onglet, une classe permet de chercher l'image dans le CSS et donc du cache
                                        lien.css({'border':'1px solid black', 'border-left':'0'}).animate({'width':'190px'}); // On ouvre les liens en question
                            } else { // Si l'onglet est fermé
                                        $(this).removeClass("ouvert"); // On précise qu'on ferme l'onglet
                                         lien.animate({'width':'0px'},function () { // On ferme les liens
                                            $(this).css('border', 'none'); // On enleve les bordures pour l'esthétique
                                         });
                            }


                    });
            });






<div id="contenu"> 
                <div class="sousmenu menu1"> <!-- debut menu 1 -->
                    <div class="liens">
                        <p><img src="images/template/icone.png" alt="icone" /> LIEN 1 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 2 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 3 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 4 </p>
                     </div>
                    <div class="onglet"></div>
                </div> <!-- fin menu 1 -->


                <div class="sousmenu menu2"> <!-- debut menu 2 -->
                     <div class="liens">
                        <p><img src="images/template/icone.png" alt="icone" /> LIEN 1 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 2 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 3 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 4 </p>
                      </div>
                       <div class="onglet"></div>
                </div> <!-- debut menu 2 -->


                <div class="sousmenu menu3"> <!-- debut menu 3 -->
                       <div class="liens">
                        <p><img src="images/template/icone.png" alt="icone" /> LIEN 1 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 2 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 3 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 4 </p>
                        </div>
                        <div class="onglet"></div>
                </div> <!-- fin menu 3 -->


            <!-- rectangle du milieu de page -->
            <div class="page-div-shadow">


                        <h3>Mon tableau de bord</h3>


                        <hr />


                        <p>
                        Scripserit est temporibus nihil quia,<br /><br />
                        Metuentes igitur idem latrones Lycaoniam magna parte campestrem cum se inpares nostris fore congressione stataria documentis 
                        frequentibus scirent, tramitibus deviis petivere Pamphyliam diu quidem intactam sed timore populationum et caedium, milite per 
                        omnia diffuso propinqua, magnis undique praesidiis conmunitam.<br /><br />
                        Ob haec et huius modi multa, quae cernebantur in paucis, omnibus timeri sunt coepta. et ne tot malis dissimulatis paulatimque 
                        serpentibus acervi crescerent aerumnarum, nobilitatis decreto legati mittuntur: Praetextatus ex urbi praefecto et ex vicario 
                        Venustus et ex consulari Minervius oraturi, ne delictis supplicia sint grandiora, neve senator quisquam inusitato et inlicito 
                        more tormentis exponeretur.<br /><br />
                        Quapropter a natura mihi videtur potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam 
                        cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, etiam in bestiis quibusdam animadverti potest, quae ex 
                        se natos ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. Quod in homine multo est evidentius, primum
                        ex ea caritate quae est inter natos et parentes, quae dirimi nisi detestabili scelere non potest; deinde cum similis sensus exstitit amoris, 
                        si aliquem nacti sumus cuius cum moribus et natura congruamus, quod in eo quasi lumen aliquod probitatis et virtutis perspicere videamur.<br /><br />
                        Quid? qui se etiam nunc subsidiis patrimonii aut amicorum liberalitate sustentant, hos perire patiemur? An, si qui frui publico non potuit per hostem, 
                        hic tegitur ipsa lege censoria; quem is frui non sinit, qui est, etiamsi non appellatur, hostis, huic ferri auxilium non oportet? Retinete igitur in 
                        provincia diutius eum, qui de sociis cum hostibus, de civibus cum sociis faciat pactiones, qui hoc etiam se pluris esse quam collegam putet, 
                        quod ille vos tristia voltuque deceperit, ipse numquam se minus quam erat, nequam esse simularit. Piso autem alio quodam modo gloriatur se brevi 
                        tempore perfecisse, ne Gabinius unus omnium nequissimus existimaretur.<br /><br />
                        Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, ......            
                        </p>


                    </div>
        </div>

Voici ce que ça donne sous IE6 :

Probleme 3

Mon menu se retrouve donc à droite, l'un au dessus de l'autre. Cependant, le jQuery fonctionne.

Autre soucis, mon footer n'est pas en bas mais juste en dessous de la bannière... Étrange, pourquoi

Ensuite, comme le footer est en dessous de la bannière, la couleur du conteneur n'est donc pas étendu. On voit le fond gris du BODY.

Pouvez vous m'aider ?

Merci d'avance,

Tubasa

4 Réponse

Default
,

SUJET RESOLUE !

En fait, il suffisait de mettre le menu en relative et de mettre mon menu en absolute et ensuite de mettre une margin-left en négatif, ça donne ceci :

.sousmenu{
    display : block;
    width: 242px;
    position: relative;
    left:0;
    clear: both;
    margin-top:19px;
    z-index:2;
}
.liens{
    float: left;
    width: 0px;
    height : 210px;
    border: 0;
    background-color : #F4F2F3;
    margin-top:7px;
    padding:5px;
    overflow:hidden;
    margin-left:1px;
}
.liens p{
    margin: 0;
    width: 190px;
    overflow:hidden;
}
.onglet{
    float:left;
    height:220px;
    width:40px;
    height:239px;
    margin-left: -15px;
}
.menu1 .onglet {
    top: 100px;
    background-image : url("../../images/template/mon-compte.png");
}
.menu2 .onglet {
    top: 200px;
    background-image : url("../../images/template/formation.png");
}
.menu3 .onglet {
    top: 300px;
    background-image: url("../../images/template/CarnetDeBord.png");
}
.menu1 .ouvert {
    top: 100px;
    background-image: url("../../images/template/mon-compte2.png");
}
.menu2 .ouvert {
    top: 200px;
    background-image: url("../../images/template/formation2.png");
}
.menu3 .ouvert {
    top: 300px;
    background-image: url("../../images/template/CarnetDeBord2.png");
}
/* ------------------------ DIV DU CONTENU MILIEU ---------------------------- */
.page-div-shadow
{
    width : 850px;
    border : 1px solid #bababb;
    margin-left : -188px;
    margin-top: 10px;
    clear: right;
    position : absolute;
}

Merci de votre aide quand meme. ;)

867
,

au vue de l'imprim ecran je dirai qu'il manque des div clear (

pour la partie html et dans le css => .clear{clear:both;} ) à placer après des éléments qui sont en float left ou right pour que les elements suivant ne soient pas en float.
Default
,

Bonjour,

Vous n'êtes pas la première personne qui me dit de mettre des clear:both;

Voyez par vous même :

<div id="contenu"> 
                <div class="sousmenu menu1"> <!-- debut menu 1 -->
                    <div class="liens">
                        <p><img src="images/template/icone.png" alt="icone" /> LIEN 1 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 2 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 3 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 4 </p>
                     </div>
                    <div class="onglet"></div>
                </div> <!-- fin menu 1 -->
                <div class="clear"></div>
                <div class="sousmenu menu2"> <!-- debut menu 2 -->
                     <div class="liens">
                        <p><img src="images/template/icone.png" alt="icone" /> LIEN 1 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 2 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 3 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 4 </p>
                      </div>
                       <div class="onglet"></div>
                </div> <!-- debut menu 2 -->
        <div class="clear"></div>
                <div class="sousmenu menu3"> <!-- debut menu 3 -->
                       <div class="liens">
                        <p><img src="images/template/icone.png" alt="icone" /> LIEN 1 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 2 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 3 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 4 </p>
                        </div>
                        <div class="onglet"></div>
                </div> <!-- fin menu 3 -->


            <div class="clear"></div>
            <!-- rectangle du milieu de page -->
            <div class="page-div-shadow">


                        <h3>Mon tableau de bord</h3>


                        <hr />


                        <p>
                        Scripserit est temporibus nihil quia,<br /><br />
                        Metuentes igitur idem latrones Lycaoniam magna parte campestrem cum se inpares nostris fore congressione stataria documentis 
                        frequentibus scirent, tramitibus deviis petivere Pamphyliam diu quidem intactam sed timore populationum et caedium, milite per 
                        omnia diffuso propinqua, magnis undique praesidiis conmunitam.<br /><br />
                        Ob haec et huius modi multa, quae cernebantur in paucis, omnibus timeri sunt coepta. et ne tot malis dissimulatis paulatimque 
                        serpentibus acervi crescerent aerumnarum, nobilitatis decreto legati mittuntur: Praetextatus ex urbi praefecto et ex vicario 
                        Venustus et ex consulari Minervius oraturi, ne delictis supplicia sint grandiora, neve senator quisquam inusitato et inlicito 
                        more tormentis exponeretur.<br /><br />
                        Quapropter a natura mihi videtur potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam 
                        cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, etiam in bestiis quibusdam animadverti potest, quae ex 
                        se natos ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. Quod in homine multo est evidentius, primum
                        ex ea caritate quae est inter natos et parentes, quae dirimi nisi detestabili scelere non potest; deinde cum similis sensus exstitit amoris, 
                        si aliquem nacti sumus cuius cum moribus et natura congruamus, quod in eo quasi lumen aliquod probitatis et virtutis perspicere videamur.<br /><br />
                        Quid? qui se etiam nunc subsidiis patrimonii aut amicorum liberalitate sustentant, hos perire patiemur? An, si qui frui publico non potuit per hostem, 
                        hic tegitur ipsa lege censoria; quem is frui non sinit, qui est, etiamsi non appellatur, hostis, huic ferri auxilium non oportet? Retinete igitur in 
                        provincia diutius eum, qui de sociis cum hostibus, de civibus cum sociis faciat pactiones, qui hoc etiam se pluris esse quam collegam putet, 
                        quod ille vos tristia voltuque deceperit, ipse numquam se minus quam erat, nequam esse simularit. Piso autem alio quodam modo gloriatur se brevi 
                        tempore perfecisse, ne Gabinius unus omnium nequissimus existimaretur.<br /><br />
                        Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, ......            
                        </p>


                        <h3>Mon tableau de bord</h3>


                        <hr />


                        <p>
                        Scripserit est temporibus nihil quia,<br /><br />
                        Metuentes igitur idem latrones Lycaoniam magna parte campestrem cum se inpares nostris fore congressione stataria documentis 
                        frequentibus scirent, tramitibus deviis petivere Pamphyliam diu quidem intactam sed timore populationum et caedium, milite per 
                        omnia diffuso propinqua, magnis undique praesidiis conmunitam.<br /><br />
                        Ob haec et huius modi multa, quae cernebantur in paucis, omnibus timeri sunt coepta. et ne tot malis dissimulatis paulatimque 
                        serpentibus acervi crescerent aerumnarum, nobilitatis decreto legati mittuntur: Praetextatus ex urbi praefecto et ex vicario 
                        Venustus et ex consulari Minervius oraturi, ne delictis supplicia sint grandiora, neve senator quisquam inusitato et inlicito 
                        more tormentis exponeretur.<br /><br />
                        Quapropter a natura mihi videtur potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam 
                        cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, etiam in bestiis quibusdam animadverti potest, quae ex 
                        se natos ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. Quod in homine multo est evidentius, primum
                        ex ea caritate quae est inter natos et parentes, quae dirimi nisi detestabili scelere non potest; deinde cum similis sensus exstitit amoris, 
                        si aliquem nacti sumus cuius cum moribus et natura congruamus, quod in eo quasi lumen aliquod probitatis et virtutis perspicere videamur.<br /><br />
                        Quid? qui se etiam nunc subsidiis patrimonii aut amicorum liberalitate sustentant, hos perire patiemur? An, si qui frui publico non potuit per hostem, 
                        hic tegitur ipsa lege censoria; quem is frui non sinit, qui est, etiamsi non appellatur, hostis, huic ferri auxilium non oportet? Retinete igitur in 
                        provincia diutius eum, qui de sociis cum hostibus, de civibus cum sociis faciat pactiones, qui hoc etiam se pluris esse quam collegam putet, 
                        quod ille vos tristia voltuque deceperit, ipse numquam se minus quam erat, nequam esse simularit. Piso autem alio quodam modo gloriatur se brevi 
                        tempore perfecisse, ne Gabinius unus omnium nequissimus existimaretur.<br /><br />
                        Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, ......            
                        </p>


            </div>
        </div>


         <div class="clear"></div>

J'en ai mis partout, mais peu a peu et au final. Même avec ce code, je n'ai rien qui change. Tout reste comme sur l'image montré ! =/

Pensez vous que je pourrais faire autre chose ? =S

Petit EDIT :

Euh. Et pour les "clear:", j'en ai un entre le menu de droite et le contenu de gauche.

.page-div-shadow
{
    width : 850px;
    border : 1px solid #bababb;
    margin-left : 55px;
    margin-top: 10px;
    clear: right;
    position : relative;
}

Clear : right;

Normalement ca fonctionne. Du moins sur toutes les versions récentes...

Default
,

Du petit nouveau,

Voici après quelques expériences ce que j'ai :

Début du screen

Fin du screen

Voici ce que j'ai modifier :

function getGauche(){
                    var left = $("#contenu").offset().left; // Le classe wrapper c'est la classe ou tu veux l'alignement gauche!
                    $(".sousmenu").css('left', left+'px');
            }


            $(document).ready(function() {
                    $(".onglet").click(function() { // Un onglet est cliqué
                        var lien = $(this).parents(".sousmenu"); // L'onglet fait partie de quel sousmenu?
                                lien = lien.children(".liens"); // Je récupere le composant .liens du sousmenu en question


                        if(!$(this).hasClass("ouvert")) { // On vérifie si l'onglet est fermé
                                        $(this).addClass("ouvert"); // On précise qu'on ouvre l'onglet, une classe permet de chercher l'image dans le CSS et donc du cache
                                        lien.css({'border':'1px solid black', 'border-left':'0'}).animate({'width':'190px'}); // On ouvre les liens en question
                            } else { // Si l'onglet est fermé
                                        $(this).removeClass("ouvert"); // On précise qu'on ferme l'onglet
                                         lien.animate({'width':'0px'},function () { // On ferme les liens
                                            $(this).css('border', 'none'); // On enleve les bordures pour l'esthétique
                                         });
                            }


                    });
            });








.sousmenu{
    display : block;
    width: 242px;
    position: absolute;
    left:0;
    clear: both;
    margin-top:19px;
    z-index:2;
}
.liens{
    float: left;
    width: 0px;
    height : 210px;
    border: 0;
    background-color : #F4F2F3;
    margin-top:7px;
    padding:5px;
    overflow:hidden;
    margin-left:1px;
}
.liens p{
    margin: 0;
    width: 190px;
    overflow:hidden;
}
.onglet{
    float:left;
    height:220px;
    width:40px;
    height:239px;
    margin-left: -12px;
}
.menu1 .onglet {
    top: 100px;
    background-image : url("../../images/template/mon-compte.png");
}
.menu2 .onglet {
    top: 200px;
    background-image : url("../../images/template/formation.png");
}
.menu3 .onglet {
    top: 300px;
    background-image: url("../../images/template/CarnetDeBord.png");
}
.menu1 .ouvert {
    top: 100px;
    background-image: url("../../images/template/mon-compte2.png");
}
.menu2 .ouvert {
    top: 200px;
    background-image: url("../../images/template/formation2.png");
}
.menu3 .ouvert {
    top: 300px;
    background-image: url("../../images/template/CarnetDeBord2.png");
}
/* ------------------------ DIV DU CONTENU MILIEU ---------------------------- */
.page-div-shadow
{
    width : 850px;
    border : 1px solid #bababb;
    margin-left : 55px;
    margin-top: 10px;
    clear: right;
    position : relative;
}

Cependant, je n'arrive toujours pas à avoir chaque menu, l'un en dessous de l'autre... Une idée ?

A la limite, pour IE6, je ne demande même pas d'avoir mon menu dans le conteneur.

Merci d'avance et merci de l'attention que vous portez à mon soucis,

Tubasa