Alternative à & lt; table & gt; mise en page en HTML

Donc maintenant j'ai une page de configuration à être exactement la taille de la fenêtre du navigateur avec un couple overflow:scroll '. Fondamentalement, la page est organisée en deux colonnes et trois lignes d'une table. Je voudrais ne pas utiliser des tableaux pour le style/mise en forme donc ma question est comment pourrais-je faire cette migration.

Ma page (en bref):

<table>
<tr>
    <td>
        <div style="overflow:scroll;">
            <div>
                stuff1
            </div>
            <div>
                stuff1A
            </div>
        </div>
    </td>
    <td>
        <div style="overflow:scroll;">
            <div>
                stuff2
            </div>
            <div>
                stuff2A
            </div>
        </div>
    </td>
</tr>
<tr>
    <td>
           <input type="submit"><input type="submit"><input type=    "submit">
    </td>
    <td>
           <input type="submit"><input type="submit"><input type="submit">
    </td>
</tr>
<tr>
    <td>
    <textarea>stuff3</textarea></td>
    <td><select multiple>
        </select></td>
</tr>

Le problème essentiel est que je veux nid <div> sans en mettre un deuxième imbriquée <div> sur une nouvelle ligne:

<div style="overflow:scroll;"> <div>stuff4</div><div>stuff4A</div> </div>
<div style="overflow:scroll;"> <div>stuff5</div><div>stuff5A</div> </div>

Je veux ci-dessus pour afficher les deux zones de défilement sur la même ligne et je ne peux pas utiliser <textarea> parce que le texte doit être de plusieurs couleurs (voir lien). Pour ceux que cela intéresse, la page sera finalement le côté personnel de complètement intégré au navigateur de message Instantané tech système de soutien pour une université CS département.

source d'informationauteur Puddingfox | 2010-01-25

html html-table

Bien, la base de la façon dont vous le faire est de briser votre page en six <div>s:

<div class="left" id="l1">1</div>
<div class="right" id="r1">2</div>
<div class="left" id="l2">3</div>
<div class="right" id="r2">4</div>
<div class="left" id="l3">5</div>
<div class="right" id="r3">6</div>

Ensuite, vous écrivez un peu de CSS:

div.left {
    float: left;
    clear: both;
}

Et vous devriez obtenir quelque chose comme:

Pas imbriquée <div> nécessaire.

Vous devriez généralement la marque de votre contenu sémantique et puis le style.

Il semble que vous avez cinq domaines principaux:

messages
liste des utilisateurs
contrôles
entrée
chat

Faisons un peu de balisage:

<div class="left">
    <div id="messages">
        messages
    </div>
    <div id="user-list">
        user-list
    </div>
</div>
<div id="controls">
    controls
</div>
<div class="left">
    <div id="input">
        input
    </div>
    <div id="chatrooms">
        chatrooms
    </div>
</div>

Et un peu de style:

.left{
    clear:both;
}
    .left div{
        float: left;
    }
#controls{
    clear: both;
}

Et vous devriez être en mesure de le compléter à partir d'ici. La partie la plus importante de la plupart des mises en forme CSS est bon flottant.

1

Merci pour le lien, qui explique beaucoup de choses. Semble familier, je l'ai fait avant, mais il peut être assez délicat.

Avant d'expliquer le lot, j'ai besoin de savoir si vous voulez le support de IE6 avec cette. Si oui, vous aurez probablement revenir à IE en mode quirks, car vous aurez besoin de le border-box modèle de boîte (ce qui ne peut pas être sélectionné dans une autre voie, c'est à dire, et il n'est pas possible d'utiliser les deux top et bottom propriétés). Si oui, je vous recommandons de mettre tous les autres navigateurs dans ce modèle de boîte, trop, de sorte que vous n'avez pas à faire deux feuilles de style pour IE et le reste (oui, vous aurez toujours besoin de quelques solutions de contournement, bien sûr). En bref, après l'utilisation de cet autre modèle de boîte, vous pouvez avoir quasi en haut et en bas les propriétés de style à l'aide de la frontière en haut et en bas de la bordure, à la place. Ils agissent comme des haut et en bas, parce qu'ils sont maintenant à l'intérieur de la hauteur donnée (par exemple, 100% de la fenêtre d'affichage). J'espère que c'est au moins un peu compréhensible.

Si non, que c'est un peu plus simple et vous pouvez définir le style à l'aide de correction du positionnement et <div> arriver top et bottom propriétés. Autant que je me souvienne, cela devrait aussi fonctionner dans IE7+.

Mais d'abord, dites-moi si vous avez besoin d'aide pour le buggy ou pas...
1

Le problème avec Eli et Mike D. réponses, c'est que, si j'ai bien compris cette question correctement, puddingfox veut les trois divisions au-dessus de eachother être réparti sur toute la taille de la fenêtre d'affichage. Dans ce cas, vous aurez des problèmes de codage IE6, parce que vous ne pouvez pas utiliser à la fois en haut et en bas des propriétés sur le même élément (qui est nécessaire pour le moyen divs).

Nouvelle grille CSS option:

<style>
#grid {
    display: grid;
    grid-template-columns: 20% 20% 20%;
}
</style>

<div id="grid">
    <div>first</div>
    <div>second</div>
    <div>thrid</div>
    <div>fourth</div>
    <div>fifth</div>
    <div>sixth</div>
    <div>seventh</div>
    <div>eighth</div>
    <div>nineth</div>
</div>

Vous devez vous connecter pour publier un commentaire.