Configurer une page HTML avec à gauche et à droite du panneau

comment puis-je configurer une Page HTML avec deux côtés? Sans <frames> !

Dans l'exemple:

Sur le côté gauche doit être le menu pour la navigation.
Sur le côté droit doit être le contenu de la page.

Exemple de menu:

<div id="page">
    <div id="menuleftcontent">
        <ul id="menu">
            <li> <a href="showfirstcontent">first</a></li>
            <li><a href="showsecondcontent">second</a></li>
        </ul>
    </div>
    <div id="maincontent">
        <div id="firstcontent">first</div>
        <div id="secondcontent">second</div>
    </div>
</div>

Le menu sur le côté gauche doit être un correctif de contenu et le contenu doivent être modifiables.

J'ai fait un croquis:

Configurer une page HTML avec à gauche et à droite du panneau

Merci d'avance

+1 pour le handdrawn image si.
votre code html est correct, maintenant, vous avez juste à appliquer le style css
Vous avez, à tout le moins, lire la Une Liste, en dehors de l'article "À la Recherche du Saint Graal"? Il n'a pas de travail, comment se fait-il échouer, quels problèmes avez-vous eu de la mettre en œuvre?
avoir un contenu dynamique, j'ai déjà laisser un exlanation ici : stackoverflow.com/questions/20176546/...
Quelque chose comme ceci peut-être: jqueryui.com/tabs/#vertical
Oui quelque chose comme ça. Un ceci, combiné avec le ceci
voir la réponse révisée.

InformationsquelleAutor PMe | 2014-05-05

8

Ré-arranger le code de sorte que (i) contenu principal s'affiche avant de la barre latérale dans la source HTML de commande (ii) d'ajouter une compensation div (iii) modifier la href attribut des liens de menu:
```
<div id="page">
    <div id="maincontent">
        <div id="firstcontent">firstcontent</div>
        <div id="secondcontent">secondcontent</div>
    </div>
    <div id="menuleftcontent">
        <ul id="menu">
            <li><a href="#firstcontent">first</a></li>
            <li><a href="#secondcontent">second</a></li>
        </ul>
    </div>
    <div id="clearingdiv"></div>
</div>
```
Ensuite utiliser le code CSS suivant:
```
#page {
    margin-left: 200px;
}
#maincontent {
    float: right;
    width: 100%;
    background-color: #F0F0F0;
}
#menuleftcontent{
    float: left;
    width: 200px;
    margin-left: -200px;
    background-color: #CCCCCC;
}
#clearingdiv {
    clear: both;
}
```
De l'obscur partie de votre question, vous avez besoin d'utiliser JavaScript pour afficher/masquer les divs. Alors qu'il est possible d'utiliser de la vanille en JavaScript, le jQuery, la bibliothèque, il est beaucoup plus facile:
```
$(function () {
    $("#maincontent > div:gt(0)").hide();
    $("#menu a").on("click", function (e) {
        var href = $(this).attr("href");
        $("#maincontent > " + href).show();
        $("#maincontent > :not(" + href + ")").hide();
    });
});
```
Démo ici
- Ok, mais le problème est à la fois le contenu s'affiche en même temps. Comment puis-je configurer, dans l'exemple onpageload la firstcontent s'affiche et quand je clique sur le deuxième bouton de menu de la secondcontent apparaît et l'ancien contenu (firstcontent) disparaît.
- Parfait! Ce travail est génial. Si vous pouvez me dire maintenant comment votre exemple, le travail avec bootstrap dans l'exemple que je clique sur "rapports" et une nouvelle page vide s'affiche ensuite, vous faites ma journée!!!
- Bootstrap nécessite jQuery donc le code ci-dessus devrait fonctionner comme-est (je ne suis pas exactement sûr de ce que vous demandez).
- C'est difficile à expliquer... cet exemple, semble bon. Sur le côté gauche, c'est le menu de droite et le contenu. Quand je clique sur"rapports", puis sur la droite, il devrait être apparaît dans l'exemple "bonjour" et quand je clique sur "aperçu", il devrait être apparaît "byebye".... Comment puis-je réaliser cela?
InformationsquelleAutor Salman A

il suffit d'appliquer un peu de css dans votre code html comme ceci :

#page{
    width: 1280px;
    display: inline;
}

#menuleftcontent{
    float: left;
    width: 420px;
}

#maincontent{
    float: left;
    width: 960px;    
}

largeur sont quelques exemples 😉

vous pouvez utiliser % au lieu de px avoir un extensible style 🙂

InformationsquelleAutor ekans

0

Voici un exemple de comment vous pouvez mettre en œuvre la division de votre contenu. Bien que, il ya beaucoup de façons de le faire en fait 🙂

JS Fiddle
```
#page {
    width: 100%;
}

#menuleftcontent {
    float: left;
    width: 25%;
}

#maincontent {
    float: left;
    width: 75%;
}
```
InformationsquelleAutor khakiout

vous pouvez utiliser ci-dessous css html pour l'afficher dans la gauche et la droite du châssis de la structure

    #menuleftcontent
    {
        width: 30%;
        float: left;
    }

    #maincontent
   {
        width: 70%;
        float: left;    
    }

   #page
   {
        width : 100%;
        clear : both;
    }

InformationsquelleAutor Bhushan Kawadkar

0

Si vous leur demandez à propos de la façon de diviser la page verticalement sans cadres. Il y a une réponse pour vous https://stackoverflow.com/a/11662564/841037

Si vous êtes à la recherche d'une solution pour faire de chaque page le contenu fixe sur la gauche. Alors vous pouvez chercher quelque chose qui s'appelle le modèle de page ou une page maître dans votre backend web framework.

InformationsquelleAutor Kaoet
-1

Le meilleur que vous pouvez faire est de faire 2 divs. Un avec float: left, donner une largeur fixe, et ensuite créer un autre avec un margin-left avec la même largeur que votre menu.

CSS:
```
#leftie {
    width: 200px;
    background: red;
    float: left;
}

#rightie {
    margin-left: 200px;
    background: green;
}
```
HTML:
```
<div id="leftie">
    This is your menu
</div>

<div id="rightie">
    This is your main content
</div>
```
De travail exemple:
http://fiddle.jshell.net/xynw4/show/

Violon URL:
http://jsfiddle.net/xynw4/
- à la marge de gauche !!! c'est la mauvaise manière. si vous l'utilisez, vous ne pouvez pas avoir un extensible style.
- Veuillez expliquer pourquoi margin-left est un mauvais moyen.
- pour une bonne practics , vous auriez une mise en page flexible et avec une certaine longueur. cela vous aidera à avoir le meilleur aperçu dans :les smartphones et les tablettes.
- C'est un argueable façon de faire les choses. Mais à l'aide de pourcentages sur de très petits écrans peuvent être illisibles ou brisée (overflow n'est pas un générique), qui est la raison pour laquelle beaucoup de cadres ne pas utiliser des pourcentages, mais l'ensemble des pixels selon les dimensions de l'écran.
InformationsquelleAutor Thew

-1

voici un exemple de CSS pour le style de votre code HTML :

  <style>
       .page{width:100%; min-height:900px;}
       .menuleftcontent{min-width:20%;float:left;height:900px;border:dotted 1px red;}
       .maincontent{min-width:78%;float:left;height:900px;border:dotted 1px blue;}
    </style>



<div id="page" class="page">   
    <div id="menuleftcontent" class="menuleftcontent">
        <ul id="menu">
                       <li><a href="showfirstcontent" </a>first</li>
                        <li><a href="showsecondcontent" >second</a></li>

        </ul> 
    </div> 
    <div id="maincontent" class="maincontent">   
         <div id="firstcontent" >first</div>

         <div id="secondcontent">second</div>
    </div> 
</div>

InformationsquelleAutor Mimouni

Vous devez vous connecter pour publier un commentaire.