Limiter la hauteur du texte

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !

Modérateur : Asumbaa

Répondre
Moonz

Limiter la hauteur du texte

Message par Moonz » 10 nov. 2003, 20:38

Bonjour tout le monde,
Décidé à abandonner les tableaux grâce à openweb.eu.org, je me suis mis au css. J'aimerais faire deux menus fixes à gauche et à droite, deux zones d'informations rapides en haut et en bas fixe, et un cadre fixe au milieu pour accueillir le texte. Le problème, c'est que ce texte peut dépasserla taille de l'écran, et on le perd. Du coups, dans le cadre du milieu j'ai mis :
overflow: auto;
Le problème, c'est que l'ascenseur est dans le cadre (je le voudrais à gauche de la fentetre, à la place de l'ascenseur principal), et la molette ne marche pas avec. Ce que j'aimerais, c'est que le texte du div mcentre soit dans le fenetre principal (du coup utilise l'ascenseur principal) masi soit limité en largeur (pour laisser de la place pour les menus à gauche et à droite, ça c'est facile j'ai réussi à le faire) et en hauteur pour laisser de la place aux deux zones d'informations. Et avec top: 2.5em et bottom: 2.5em. Et la ca marche pas, les ascenseurs ne viennent pas et le texte continue à descendre. Par contre, en haut, l'attribut top a bien remplit son rôle. Mon code actuel (avec la tentative de centrage vertical) :

Code : Tout sélectionner

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
    <title>CSS Test</title>
    <style type="text/css">
    <!--
      body{
        background-color:#336699;
        color:#ffffff;
        font-family:"Trebuchet MS",Verdana,Geneva,Arial,Helvetica,sans-serif;
        font-size:small;
      }

      #hcentre,#mcentre,#bcentre,#gauche,#droite {
        color: #000000;
        border: 2px inset #000000;
        -moz-border-radius: 1.5em 1.5em 1.5em 1.5em;
        padding: 0.5em;
      }

      #hcentre:hover,#mcentre:hover,#bcentre:hover,#gauche:hover,#droite:hover {
        background-color:#336699;
      }

      #hcentre,#mcentre,#bcentre {
        position:fixed;
        margin: 0.5% 20%;
        width: 57%;
      }

      #hcentre {
        background-color:#9aa3e4;
        top:0em;
        height:1em;
      }

      #mcentre {
        background-color:#c5ccff;
        top:2.5em;
        bottom:2.5em;
        //overflow: auto;
      }

      #bcentre {
        background-color:#9aa3e4;
        bottom:0em;
        height:1em;
      }

      #gauche {
        background-color:#8090fe;
        position: fixed;
        top: 0.5%;
        left: 0.5%;
        width: 18%;
        height:97%;
      }

      #droite {
        background-color:#8090fe;
        position: fixed;
        top: 0.5%;
        right: 0.5%;
        width: 18%;
        height:97%
      }
    //-->
    </style>
  </head>
  <body>

    <div id="gauche">Gauche</div>
    <div id="hcentre"><span style="float: left;">(Connexion|Bienvenue)</span><span style="float:right;">Quel est votre design pr&eacute;f&eacute;r&eacute;&nbsp;?&nbsp;<select name="skin" onChange="window.document.location.href= 'index2.html?css=' + this.options[this.selectedIndex].value">
        <option selected="selected" value="">Feuilles de style</option>
        <option value="light">Rondeurs</option>
        <option value="givre">Hiver</option>
      </select>&nbsp;&nbsp;</span></div>
    <div id="mcentre"><p>test 1</p><p>test 2</p><p>test 3</p><p>test 4</p><p>test 5</p><p>test 6</p><p>test 7</p><p>test 8</p><p>test 9</p><p>test 10</p><p>test 1</p><p>test 2</p><p>test 3</p><p>test 4</p><p>test 5</p><p>test 6</p><p>test 7</p><p>test 8</p><p>test 9</p><p>test 10</p><p>test 1</p><p>test 2</p><p>test 3</p><p>test 4</p><p>test 5</p><p>test 6</p><p>test 7</p><p>test 8</p><p>test 9</p><p>test 10</p><p>test 1</p><p>test 2</p><p>test 3</p><p>test 4</p><p>test 5</p><p>test 6</p><p>test 7</p><p>test 8</p><p>test 9</p><p>test 10</p><p>test 1</p><p>test 2</p><p>test 3</p><p>test 4</p><p>test 5</p><p>test 6</p><p>test 7</p><p>test 8</p><p>test 9</p><p>test 10</p><p>test 1</p><p>test 2</p><p>test 3</p><p>test 4</p><p>test 5</p><p>test 6</p><p>test 7</p><p>test 8</p><p>test 9</p><p>test 10</p><p>test 1</p><p>test 2</p><p>test 3</p><p>test 4</p><p>test 5</p><p>test 6</p><p>test 7</p><p>test 8</p><p>test 9</p><p>test 10</p><p>test 1</p><p>test 2</p><p>test 3</p><p>test 4</p><p>test 5</p><p>test 6</p><p>test 7</p><p>test 8</p><p>test 9</p><p>test 10</p><p>test 1</p><p>test 2</p><p>test 3</p><p>test 4</p><p>test 5</p><p>test 6</p><p>test 7</p><p>test 8</p><p>test 9</p><p>test 10</p><p>test 1</p><p>test 2</p><p>test 3</p><p>test 4</p><p>test 5</p><p>test 6</p><p>test 7</p><p>test 8</p><p>test 9</p><p>test 10</p><p>test 1</p><p>test 2</p><p>test 3</p><p>test 4</p><p>test 5</p><p>test 6</p><p>test 7</p><p>test 8</p><p>test 9</p><p>test 10</p><p>test 1</p><p>test 2</p><p>test 3</p><p>test 4</p><p>test 5</p><p>test 6</p><p>test 7</p><p>test 8</p><p>test 9</p><p>test 10</p><p>test 1</p><p>test 2</p><p>test 3</p><p>test 4</p><p>test 5</p><p>test 6</p><p>test 7</p><p>test 8</p><p>test 9</p><p>test 10</p><p>test 1</p><p>test 2</p><p>test 3</p><p>test 4</p><p>test 5</p><p>test 6</p><p>test 7</p><p>test 8</p><p>test 9</p><p>test 10</p><p>test 1</p><p>test 2</p><p>test 3</p><p>test 4</p><p>test 5</p><p>test 6</p><p>test 7</p><p>test 8</p><p>test 9</p><p>test 10</p><p>test 1</p><p>test 2</p><p>test 3</p><p>test 4</p><p>test 5</p><p>test 6</p><p>test 7</p><p>test 8</p><p>test 9</p><p>test 10</p><p>test 1</p><p>test 2</p><p>test 3</p><p>test 4</p><p>test 5</p><p>test 6</p><p>test 7</p><p>test 8</p><p>test 9</p><p>test 10</p><p>test 1</p><p>test 2</p><p>test 3</p><p>test 4</p><p>test 5</p><p>test 6</p><p>test 7</p><p>test 8</p><p>test 9</p><p>test 10</p><p>test 1</p><p>test 2</p><p>test 3</p><p>test 4</p><p>test 5</p><p>test 6</p><p>test 7</p><p>test 8</p><p>test 9</p><p>test 10</p><p>test 1</p><p>test 2</p><p>test 3</p><p>test 4</p><p>test 5</p><p>test 6</p><p>test 7</p><p>test 8</p><p>test 9</p><p>test 10</p><p>test 1</p><p>test 2</p><p>test 3</p><p>test 4</p><p>test 5</p><p>test 6</p><p>test 7</p><p>test 8</p><p>test 9</p><p>test 10</p><p>test 1</p><p>test 2</p><p>test 3</p><p>test 4</p><p>test 5</p><p>test 6</p><p>test 7</p><p>test 8</p><p>test 9</p><p>test 10</p><p>test 1</p><p>test 2</p><p>test 3</p><p>test 4</p><p>test 5</p><p>test 6</p><p>test 7</p><p>test 8</p><p>test 9</p><p>test 10</p><p>test 1</p><p>test 2</p><p>test 3</p><p>test 4</p><p>test 5</p><p>test 6</p><p>test 7</p><p>test 8</p><p>test 9</p><p>test 10</p></div>
    <div id="bcentre">Centre Bas</div>
    <div id="droite">Droite</div>
  </body>
</html>
Et allez, pour la route : comment monter un peu plus mon menu de séléction de thème, et surtout comment faire pour que les choix ne s'enfuient pas dès que j'essaie de cliquer dessus ?

PS: je suis débutant, si vous voyez des choses immondes dans mon code, n'hésitez surtout pas, je ne veux pas prendre de mauvaises habitudes.

Romuald
Gecko
Messages : 88
Enregistré le : 03 sept. 2003, 23:55

Message par Romuald » 10 nov. 2003, 23:13

Nul besoin d'être comme son voisin pour l'apprécier, c'est la différence qui fait que le monde est intéressant.
Voyons plus loin que le bout de notre nez.

Répondre

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité