Largeur des cadres

par **Akei** » 24 août 2005, 21:29

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.
++

par **Akei** » 20 août 2005, 01:38

Merci.
Dès que j ai la solution je la mets.
+

par **Cyrano** » 19 août 2005, 23:33

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

par **Akei** » 19 août 2005, 21:52

Personne n'a une petite idée?

par **Akei** » 18 août 2005, 01:41

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
+

par **Akei** » 17 août 2005, 00:16

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.

par **Akei** » 16 août 2005, 22:34

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.

par **Cyrano** » 13 août 2005, 08:19

Pourquoi n'utilises-tu pas des dimensions en pourcentage ?

par **Akei** » 12 août 2005, 23:47

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.
+

par **Akei** » 12 août 2005, 21:43

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.
+

Largeur des cadres

Répondre

Étendre la vue Revue du sujet : Largeur des cadres

Largeur des cadres