Page 1 sur 1
Largeur des cadres
Posté : 12 août 2005, 21:43
par Akei
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.
+
Posté : 12 août 2005, 23:47
par Akei
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.
+
Posté : 13 août 2005, 08:19
par Cyrano
Pourquoi n'utilises-tu pas des dimensions en pourcentage ?
Posté : 16 août 2005, 22:34
par Akei
Ah oui je n'y avais pas pensé
Par contre comment je peux faire pour mon problème de min-height avec IE?
Le % fonctionne pour le height? Parce que je n'ai pas l'impression. Quand je passe mon unité en pixel c'est bon mais lorsque je le mets en % il ne me fait rien.
Posté : 17 août 2005, 00:16
par Akei
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.
Posté : 18 août 2005, 01:41
par Akei
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
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>
CSS
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;
}
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
+
Posté : 19 août 2005, 21:52
par Akei
Personne n'a une petite idée?
Posté : 19 août 2005, 23:33
par Cyrano
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
Posté : 20 août 2005, 01:38
par Akei
Merci.
Dès que j ai la solution je la mets.
+
Posté : 24 août 2005, 21:29
par Akei
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.
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;
}
Maintenant reste plus que le problème du hack. On m'a dit que l'on pouvait l'enlever.
++