Bonjour à tous,
Acctuellement, j'essaye de créer un page de type template qui pourra être utiliser de manière unique au travers de mon site. Le but du jeu est qu'un autre de mes collègues n'ai qu'a compléter une partie bien cibler de mon template avec de l'information utile (sans ce soucier de savoir comment il doit placer le header, footer, tools-bar, etc...).
Comme le recommande vos tutoriaux, j'ai essayé de faire un design sur base des tags <div>. Je suis limité par une charte graphique (par exemple mon header doit faire 90px,...).
J'ai purgé mon CSS et une page afin de ne vous présenter que la structure d'une page.
Mon problème : L'utilisateur ne devra compléter que la partie contenue entre les tags <div id="content">. Le problème c'est que la plupart des contenus (comme l'exemple que j'ai donné dans la page) sont des tableaux. Vous constaterez que si vous faites un resize de l'écran, le bloc contenu se décale vers le bas de manière significative sous IE6 et déborde sur la colonne de droite sous Firefox. Ces deux cas me posent problème. J'ai le même problème lorsque j'agrandis la taille du contenu de la fenêtre au moyen des options d'agrandisement de texte du browser (notion d'accessibilitée présenté dans un des tutoriaux).
Voici ma page HTML :
Voici mon fichier CSS :
D'avance merci de m'expliquer et me donner une solution (si possible) à ce problème.
Pourriez vous me dire également ce que vous pensez de cette construction et me donner des pistes pour optimiser le design du template. En effet je débute et j'ai surement du faire de grosses bétises.
Piepierre
Acctuellement, j'essaye de créer un page de type template qui pourra être utiliser de manière unique au travers de mon site. Le but du jeu est qu'un autre de mes collègues n'ai qu'a compléter une partie bien cibler de mon template avec de l'information utile (sans ce soucier de savoir comment il doit placer le header, footer, tools-bar, etc...).
Comme le recommande vos tutoriaux, j'ai essayé de faire un design sur base des tags <div>. Je suis limité par une charte graphique (par exemple mon header doit faire 90px,...).
J'ai purgé mon CSS et une page afin de ne vous présenter que la structure d'une page.
Mon problème : L'utilisateur ne devra compléter que la partie contenue entre les tags <div id="content">. Le problème c'est que la plupart des contenus (comme l'exemple que j'ai donné dans la page) sont des tableaux. Vous constaterez que si vous faites un resize de l'écran, le bloc contenu se décale vers le bas de manière significative sous IE6 et déborde sur la colonne de droite sous Firefox. Ces deux cas me posent problème. J'ai le même problème lorsque j'agrandis la taille du contenu de la fenêtre au moyen des options d'agrandisement de texte du browser (notion d'accessibilitée présenté dans un des tutoriaux).
Voici ma page HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr" />
<link rel="stylesheet" type="text/css" href="./test.css" media="screen,print"/>
</head>
<body >
<div id="conteneur">
<div id="header-right"></div>
<div id="header-left">
<div id="header-left-bottom"></div>
</div>
<div id="middle-zone-right"></div>
<div id="middle-zone-left" class="middle-zone-left">
<div id="navigation">
<ul>
<li>LIEN 1</li>
<li>LIEN 2</li>
<li>LIEN 3</li>
<li>LIEN 4</li>
</ul>
</div>
<div id="content-top"></div>
<div id="content">
<table width="100%">
<tr>
<td>CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT</td>
</tr>
<tr>
<td>CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT</td>
</tr>
<tr>
<td>CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT</td>
</tr>
</table>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Voici mon fichier CSS :
body
{
margin: 0 ;
padding: 0 ;
}
/* ============================================ */
/* Container d'une page principal */
/* On défini la police standard du site + taille standard */
/* ============================================ */
div#conteneur
{
font-family:Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
/* ======================================== */
/* HEADER des pages */
/* =========================================*/
/* Element gauche du header, utiliser comme point de réferences pour les */
/* les élements qu'il contient (position relative) */
div#header-left{
position:relative;
height:70px;
margin-right:130px;
border-bottom:1px solid red;
background-color:yellow;
}
div#header-left-bottom{
position:absolute;
bottom: 0px;
right:0px;
width : 100%;
height: 4px;
background-color: #E60028;
font-size: 1px;
}
/* Element droit du header, utiliser comme point de réferences pour les */
/* les élements qu'il contient (position relative) */
div#header-right{
position:relative;
float:right;
width:130px;
height:70px;
padding : 0;
border-bottom:1px solid red;
background-color:brown;
}
/* ============================================= */
/* Zone comprenant la navigation + le contenu */
/* ============================================= */
div#middle-zone-left{
padding : 0;
}
/* Utilisé pour faire apparaitre disparaitre la bare à outils */
.middle-zone-left{
margin:0;
margin-right: 130px;
}
/* Dégradé vert */
div#content-top{
height:4px;
line-height:4px;
background-color:green;
font-size: 1px;
}
/* Navigation */
div#navigation{
float:left;
width : 130px;
background-color:grey;
}
/* Contenu */
div#content{
margin-left:150px;
padding-top:20px;
height: 100%;
background-color:orange;
}
/* ================================================ */
/* Zone comprenant boîte à outils coté droit */
/* ================================================ */
div#middle-zone-right{
float:right;
border-left: 1px solid #000;
width:129px;
min-height:300px;
height : 300px;
background-color:pink;
}
/* ===================================== */
/* Footer */
/* ===================================== */
div#footer{
clear:both;
height:1.3em;
background-color:#000;
margin-top : 30px;
}
D'avance merci de m'expliquer et me donner une solution (si possible) à ce problème.
Pourriez vous me dire également ce que vous pensez de cette construction et me donner des pistes pour optimiser le design du template. En effet je débute et j'ai surement du faire de grosses bétises.
Piepierre
