Débutant en HTML, je cherche à faire ceci :
C'est à dire, avoir une page en 2 parties (frames ou non) avec un ascenseur horizontal seulement pour la partie de droite et un ascenseur vertical qui agit pour les 2 parties
Est-ce possible?
merci
Andy
. Ensuite, tu peux choisir ne n'afficher qu'un des deux ascenseurs avec overflow-x:hidden; ou overflow-y:hidden;.
)
andysapo81 (./3) :
en gros, la "iframe" qui est en orange a une largeur fixe de 380px. J'aimerais bien que la 2ème (vert/orange) s'adapte à la largeur qui reste de la page. Est-ce possible?
andysapo81 (./3) :
Ensuite, est-il possible d'avoir les iframes qui s'adaptent en hauteur au contenu? Comme ca je pourrais profiter de l'ascenseur vertical du browser.
Flanker (./5) :
Nil > pareil que toi pour les table. S'ils avaient voulu qu'on se serve des div et du css, ils n'avaient qu'à fournir un truc utilisable plutôt que d'obliger à se servir de hacks immondes.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css">
body
{
padding:0px;
margin:0px;
}
table
{
table-layout:fixed;
position:absolute;
height:100%;
}
.cadre_infosIndividus
{
padding:0px;
border-collapse:collapse;
height:100%;
}
.cadre_listes
{
border: 0px none;
width:380px;
height:100%;
border-collapse:collapse;
}
.cadre_listes_inside
{
border: 0px none;
width:380px;
border-collapse:collapse;
height:100%;
overflow:hidden;
}
.cadre_infosIndividu
{
width:100%;
height:100%;
border: 0px none;
border-collapse:collapse;
}
.cadre_infosIndividu_inside
{
width:100%;
height:100%;
border: 0px none;
border-collapse:collapse;
overflow-x:auto;
overflow-y:auto;
}
ul
{
padding-left:10px;
margin-left:10px;
}
</style>
</head>
<body>
<table id='cadre_infosIndividus' class='cadre_infosIndividus'>
<tr>
<td id='cadre_listes' class='cadre_listes'>
<iframe src="testnom.html" class='cadre_listes_inside' id='cadre_listes_inside'>
</iframe>
</td>
<td class='cadre_infosIndividu'>
<iframe src="array_view.php" id='cadre_infosIndividu_inside' class='cadre_infosIndividu_inside'>
</iframe>
</td>
</tr>
</table>
</body>
</html><!DOCTYPE html>
<html>
<head>
<style type="text/css">/* <![CDATA[ */
/* ]]> */</style>
</head>
<body>
<div class="left">
<div id="menu">
Gauche
</div>
</div>
<div class="right">
<div id="contents">Droite</div>
</div>
</body>
</html>round-color: #0f0; /* Pour visualiser */
}Avec des variantes sur le CSS, par exemple:body {
position: relative;
padding: 0 0 0 250px;
margin: 0;
}
.left {
position: absolute;
margin: 0 0 0 -250px;
padding: 0;
width: 250px;
overflow: hidden;
}
.right {
margin: 0;
padding: 0;
width: 100%;
overflow: hidden;
}
#menu {
margin: 0;
padding: 5px 10px;
overflow: hidden;
background-color: #f00; /* Pour visualiser */
}
#contents {
margin: 0;
padding: 5px 10px;
overflow: auto;
white-space: pre; /* Pour tester l'overflow */
backgbody {
position: relative;
margin: 0;
padding: 0;
}
.left {
position: absolute;
margin: 0;
padding: 0;
width: 250px;
overflow: hidden;
}
.right {
position: absolute;
margin: 0;
padding: 0;
left: 250px;
right: 0;
overflow: hidden;
}
#menu {
margin: 0;
padding: 5px 10px;
overflow: hidden;
background-color: #f00; /* Pour visualiser */
}
#contents {
margin: 0;
padding: 5px 10px;
overflow: auto;
white-space: pre; /* Pour tester l'overflow */
background-color: #0f0; /* Pour visualiser */
}body {
margin: 0;
padding: 0 0 0 250px;
}
.left {
float: left;
margin: 0 0 0 -250px;
padding: 0;
width: 250px;
overflow: hidden;
}
.right {
margin: 0;
padding: 0;
width: 100%;
overflow: hidden;
}
#menu {
margin: 0;
padding: 5px 10px;
overflow: hidden;
background-color: #f00; /* Pour visualiser */
}
#contents {
margin: 0;
padding: 5px 10px;
overflow: auto;
white-space: pre; /* Pour tester l'overflow */
background-color: #0f0; /* Pour visualiser */
}
En fait n est sur IE6 ici et ca ne semble pas tres bien compatible.