marge de droite ne fonctionne pas

peut quelques un s'il vous plaît m'aider à résoudre ce http://jsfiddle.net/q4rdL/2/
je suis en train de faire un menu avec des boutons suivant et précédent, un flotteur à droite et l'autre à gauche , j'ai ajouté un div avec une largeur de 100% à hauteur de 100% entre le pré et à côté de la vrd , la marge de gauche fonctionne très bien la marge de droite ne fonctionne pas à tous les

voici le code : 

 <div id="menu" style ="width : 100% ; height:50px ; border : 2px solid red ; position : absolute  ; top:0 ; display : none" >
            <div id="pre" style ="height:100% ; width: 50px ; border :1px solid green ; float :left ; left:0  "><</div>
            <div id="menuContent" style="width:100% ; height:100% ; border : 5px solid green ; position:absolute; margin-left :60px ;" > </div>
            <div id="next" style ="height:100% ; width: 50px ; border :1px solid green ; float :right ; right:0 ; position:absolute  ">></div>
            </div>
            <div id="show_hide" style ="width : 100% ; height:70px ; position : absolute  ; top:0" ></div>

Question est de savoir comment faire de la marge de droite fonctionne et pourquoi il fait cela ?

  • Où est la marge de droite censé être? Je ne le vois pas dans le po ou le violon.
  • Donnez-moi quelques minutes pour regarder votre code et je trouve votre question.
  • Vous devriez commencer par la suppression de toutes ces css règles. 🙂
  • Je n'arrive pas à reproduire votre problème. Je peux ajouter avec succès une marge de droite sur la menuContent élément. C'seulement augmente la largeur totale de la taille de la marge de droite.
  • Avez-vous voir ce post? Il semble être le même problème.
  • Pourriez-vous soit à commenter ou à upvote les réponses que vous vous sentez le plus proche de ce que vous cherchez. Vous n'avez pas donné plus de perspicacité à votre question, et vous avez reçu plusieurs bonnes réponses.

InformationsquelleAutor Mina Gabriel | 2012-06-05
  1. 3

    essayer cette http://jsfiddle.net/q4rdL/32/

    - je supprimer une largeur de 100% et le changement de la "position" sur certains div, la solution peut être étiré à la résolution

    • Cela fonctionne, mais vous ne pouvez pas utiliser height:100% à cause des frontières. Hauteur de seuls les comptes de l'espace à l'intérieur de la div, de sorte que l'intérieur de la div est réglé sur 100%, et il a encore un autre 10px des frontières qu'il changer de position. C'est la même chose avec l'attribut width. Autre que cela, je l'aime.
    InformationsquelleAutor alhimikst
  2. 0

    Aussi loin que je peux voir, vous devez supprimer position:absolute pour l'élément avec id = "next"

    • Veuillez jeter un oeil à la suite de Violon: jsfiddle.net/q4rdL/12 Ne regardez pas au contenu principal la section, mais le positionnement de la next et prev.
    InformationsquelleAutor S P
  3. 0

    J'ai essayé de nettoyer votre html certains et le déplacer vers la non-css.

    HTML:

    <div id="menu">
    <div id="pre"><</div>
    <div id="menuContent"></div>
    <div id="next">></div>
</div>
<div id="show_hide"></div>​

    CSS:

    #menu {
    width: 100%; 
    height: 50px; 
    border: 2px solid red; 
}

#pre {
    height: 100%; 
    width: 3%;
    border: 1px solid green;
    float: left;
    padding-left:7px;
}

#menuContent {
    float:left;
    width: 90%; 
    height: 100%; 
    border: 5px solid green; 
}

#next {
    height: 100%; 
    width: 3%; 
    border: 1px solid green; 
    float: right; 
    padding-left:7px;
}

#show_hide {
    width: 100%; 
    height: 70px; 
    position: absolute;
    top:0;
}​

    DÉMONSTRATION en direct

    InformationsquelleAutor Josh Mein
  4. 0

    si tu veux mettre une marge à droite pour faire de la plongée avec menuContent, vous devez changer width de à réduire, 100% signifie que la largeur de votre point de vue et les marges seront ajoutés, de sorte que vous aurez une barre de défilement horizontale pour votre navigateur.

    essayez ceci :

    <div style="height: 100%; border: 5px solid green; position: absolute; width: 90%; margin: 0pt 58px;" id="menuContent"> </div>

    Supplémentaires je n'ai pas vraiment savoir ce que vous essayez de le faire, mais j'espère que vous avez compris l'idée et ma réponse utile pour vous.

    Edit: oh j'ai changé menu en position relative, voir ce lien : http://css-tricks.com/absolute-positioning-inside-relative-positioning/

    InformationsquelleAutor Al-Mothafar
  5. 0

    J'ai essayé de mon propre version qui n'utilise pas de flotte. Il est tout positionné comme absolue. J'ai enlevé le width: 100% sur le menu div car il sera toujours par 2px en raison de la frontière, vous avez. Au lieu d'avoir un div que l'évolution de sa largeur, j'ai simplement centré en utilisant position: absolute; left: 50%; margin-left: -<half the size of #menuContent>. Donc, si #menuContent est 500px puis le margin-left: -250;. Laissez-moi savoir ce que vous en pensez: JS Fiddle

    InformationsquelleAutor Michael Garrison
  6. -1

    À mon avis, il est beaucoup mieux si vous modifiez la structure; Cochez cette Violon out.

    HTML:

    <div id="menu">
    <table width="100%" cellspacing="0" cellpadding="0">
        <tr>
            <td id="pre">            
                <
            </td>
            <td id="menuContent">            

            </td>
             <td id="next">            
                >
            </td>
       </tr>
    </table>
</div>

    CSS:

    #menu {
    width : 100% ; 
    height:50px ; 
    border : 1px solid red ; 
    top:0 ; 
}

#pre, #next {
    width: 50px;
}

#menu td {
    border : 1px solid red ; 
    height: 50px;
    vertical-align: middle;
    text-align: center;
}
    InformationsquelleAutor Tooraj Jam