Bonjour,
J'ai un petit problème avec la largeur de mes cadres. En fait mes pages sont montées pour du 800*600 donc mon but serait d'instorer une largeur identique pour toutes mes pages pour que le cadre soit identique partout.
Mais avec ceci j'ai deux ptits soucis qui apparaissent. Le premier est avec IE je n'arrive pas à lui faire prendre mon height. Le second est que j'ai une partie pour les admins et pour eux les pages sont montées en 1024*768 minimum. Je pense qu'il n'est pas bon de faire ca mais je n'ai pas le choix pour le moment car coté admin il y a beaucoup trop d'informations.
Auriez vous des idées pour mon problème?
Vous pensez que je dois fixer le cadre à une largeur unique ou le cadre doit varier selon le contenu qu'il y a à l'interieur?
Merci.
+
la communauté d'entraide francophone dédiée au PHP
Largeur des cadres
J'ai regardé un peu ce lien http://www.zdnet.fr/builder/web_design/ ... 0-2,00.htm
Seulement je ne sais pas comment faire pour que si mon contenu s'agrandit, il faut agrandir mon cadre. Mon premier reflexe était de faire un min-height, ca fonctionne bien sous firefox mais ce cochon d'IE ne le reconnait pas. En fait je remarque que le height il le considère comme un min-height.
Comment je peux faire?
Parce que si je mets un height au lieu du min-height et que mon contenu s'agrandit firefox va pas l'afficher puisque le height c une valeur fixe.
J'attends vos commentaire avec impatience.
+
Seulement je ne sais pas comment faire pour que si mon contenu s'agrandit, il faut agrandir mon cadre. Mon premier reflexe était de faire un min-height, ca fonctionne bien sous firefox mais ce cochon d'IE ne le reconnait pas. En fait je remarque que le height il le considère comme un min-height.
Comment je peux faire?
Parce que si je mets un height au lieu du min-height et que mon contenu s'agrandit firefox va pas l'afficher puisque le height c une valeur fixe.
J'attends vos commentaire avec impatience.
+
Ok le problème du min-height et du height est résolu.
http://blog.alsacreations.com/2004/08/1 ... t-explorer
Reste le problème du % avec le height.
http://blog.alsacreations.com/2004/08/1 ... t-explorer
Reste le problème du % avec le height.
J'ai trouvé pourquoi mon % ne passait pas. En fait le parent doit être en % pour que l'enfant accepte la valeur.
Par contre j'ai un ptit soucis car j'ai un bloc (blocPrincipal) qui regroupe plusieurs blocs. Le problème c'est que je lui mets un background, et avec mes nouvelles dimensions, sous FF il me coupe mon fond.
Si quelqu'un peut m'aider svp.
Voici mon code simplifié.
Html
CSS
Donc le problème vient de mon blocPrincipal. Lorsque je passe ma résolution en 800*600 la bordure se trouve au niveau de mon blocContenu sous FF. Sous IE c'est bon.
Merci
+
Par contre j'ai un ptit soucis car j'ai un bloc (blocPrincipal) qui regroupe plusieurs blocs. Le problème c'est que je lui mets un background, et avec mes nouvelles dimensions, sous FF il me coupe mon fond.
Si quelqu'un peut m'aider svp.
Voici mon code simplifié.
Html
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Accueil</title>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>
<div id="blocEntete">
<h1><span class="nomSite">Titre</span></h1>
</div>
<div id="columns">
<div id="menuGauche">
<h3>Menu</h3>
</div>
<div id="blocPrincipal">
<div id="blocTitre" class="communPrincipal">
<h2> <span class="titrePage">Accueil</span> </h2>
</div>
<div id="blocErreur" class="communPrincipal">
<h3></h3>
</div>
<div id="blocContenu" class="communPrincipal">
Test.
</div>
<div id="blocBasPage" class="communPrincipal">
<span class="basPage">bas de page</span>
</div>
</div>
</div>
</body>
</html>
Code : Tout sélectionner
html, body
{
height: 100%;
}
body
{
font-family: Arial, sans-serif;
margin: 0em;
padding-bottom: 0em;
font-size: 62.5%;
}
h1, h2, h3, h4, h5, h6 {
font-family: Arial,sans-serif;
margin: 0px;
padding: 0px;
}
#blocEntete
{
margin: 0;
padding: 9px 0px 0px;
width: 100%;
height: 15%;
}
#menuGauche {
position:relative;
width:110px;
height: 80%;
border: 1px solid black;
}
#columns {
position: absolute;
width: 100%;
margin: 0px;
top: 50px;
height: 80%;
}
#blocPrincipal {
position: absolute;
width: 80%;
top: -2px;
left: 120px;
padding-top: 2px;
padding-bottom: 2xp;
height: 90%;
border: 1px solid red;
}
.communPrincipal{
text-align: justify;
padding-left: 7px;
margin-bottom: 7px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
padding-top: 3px;
padding-right: 7px;
padding-bottom: 3px;
border: 1px solid black;
}
#blocErreur h3
{
height: 1.3em;
}
#blocContenu{
text-align: justify;
letter-spacing: 1px;
vertical-align: text-top;
margin-top: 0px;
margin-bottom: 7px;
padding-bottom: 3px;
height: 83%;
}
html>body #blocContenu {
height: auto;
min-height: 83%;
}
#blocBasPage
{
font-size:0.9em;
text-align: right;
letter-spacing: 1px;
}
Merci
+
J'ai bien cherché, mais j'ai pas trouvé de solution. Je te fais une suggestion que je ne devrais pas faire, mais bon: tu devrais essayer de poser ta question avec ce code sur le forum d'Alsacreations, c'est là que tu auras le plus de chance de tomber sur un spécialiste, ce forum étant principalement dédié aux CSS
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse 
Salut,
Pour information mon problème est résolu.
En fait je n'avais pas bien compris les %.
Donc pour résoudre mon problème, j'ai créé un conteneur qui regroupe tout mes blocs, sa hauteur est en %. Tandis que les autres bocs sont en pixels.
Je vous mets le code.
Maintenant reste plus que le problème du hack. On m'a dit que l'on pouvait l'enlever.
++
Pour information mon problème est résolu.
En fait je n'avais pas bien compris les %.
Donc pour résoudre mon problème, j'ai créé un conteneur qui regroupe tout mes blocs, sa hauteur est en %. Tandis que les autres bocs sont en pixels.
Je vous mets le code.
Code : Tout sélectionner
html
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR">
<head>
<title>Accueil</title>
<link rel="stylesheet" type="text/css" href="essai3.css"/>
</head>
<body>
<div id="conteneur">
<div id="blocEntete">
<h1><span class="nomSite">Titre</span></h1>
</div>
<div id="menuGauche">
<h3>Menu</h3>
</div>
<div id="blocPrincipal">
<div id="blocTitre" class="communPrincipal">
<h2> <span class="titrePage">Accueil</span> </h2>
</div>
<div id="blocErreur" class="communPrincipal">
<h3></h3>
</div>
<div id="blocContenu" class="communPrincipal">
Test.
</div>
<div id="blocBasPage" class="communPrincipal">
<span class="basPage">bas de page</span>
</div>
</div>
</div>
</body>
</html>
Code : Tout sélectionner
CSS
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
margin: 0;
padding: 0;
height: 100%
}
h1, h2, h3, h4, h5, h6 {
font-family: Arial,sans-serif;
margin: 0px;
padding: 0px;
}
#conteneur {
position: absolute;
width: 100%;
height: 100%;
}
#menuGauche {
position: absolute;
left:0;
top: 50px;
width: 125px;
margin-left: 5px;
margin-right: 3px;
margin-top: 0px;
}
#blocEntete
{
margin: 0;
padding: 9px 0px 0px;
height: 45px;
text-indent: 70px;
}
.communPrincipal{
text-align: justify;
padding-left: 7px;
margin-bottom: 7px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
padding-top: 3px;
padding-right: 7px;
padding-bottom: 3px;
border: 1px solid black;
}
#blocPrincipal {
position: absolute;
left: 130px;
right: 133px;
top: 50px;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 2px;
padding-right: 2px;
height: 320px;
border: 1px solid red;
}
html>body #blocPrincipal {
height: auto;
min-height: 320px;
}
#blocErreur
{
padding-left: 15px;
margin-top: 0.5em;
margin-bottom: 0.5em;
height: 1.3em;
}
#blocContenu
{
padding-top: 0px;
padding-bottom: 0px;
font-size:100%;
height: 260px;
}
html>body #blocContenu {
height: auto;
min-height: 260px;
}
/** Design des boutons des formulaires **/
.bouton
{
width: 80px;
height: 20px;
text-align: center;
font-weight : bold;
cursor:pointer;
}
#blocBasPage
{
bottom: 10px;
font-size:70%;
text-align: right;
margin-bottom: 0px;
}
++