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éféré ? <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> </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>
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.