Aller au contenu

avoir une taille égale pour deux cadres

Guest stone

Par Guest stone
dans (X)HTML et CSS

 Partager

Sujets conseillés

Guest stone

Guest stone

Posté
Posté

hi,

j'ai une petite question :

comment avoir une taille égale pour deux cadres ? je m'explique : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> 
<HTML xmlns="http://www.w3.org/1999/xhtml"> 
<HEAD> 
<TITLE>sans titre</TITLE> 
<META http-equiv=Content-Type content="text/html; charset=utf-8"> 
<META content="MSHTML 6.00.2600.0" name=GENERATOR> 
<STYLE type=text/css> 
BODY { 
   MARGIN: 15px 0px 15px; 
   BACKGROUND-COLOR: #333333; 
   TEXT-ALIGN: center; 
} 
#container { 
   BORDER-RIGHT: #ffffff 1px solid; 
   PADDING-RIGHT: 0px; 
   BORDER-TOP:#ffffff 1px solid; 
   PADDING-LEFT: 0px; 
   PADDING-BOTTOM: 0px; 
   MARGIN-LEFT: auto; 
   BORDER-LEFT: #ffffff 1px solid; 
   WIDTH: 750px; 
   LINE-HEIGHT: 140%; 
   MARGIN-RIGHT: auto; 
   PADDING-TOP: 0px; 
   BORDER-BOTTOM: #ffffff 1px solid; 
   BACKGROUND-COLOR: #333333; 
   TEXT-ALIGN: left 
} 
#banner { 
   PADDING-RIGHT: 15px; 
   PADDING-LEFT: 15px; 
   PADDING-BOTTOM: 15px; 
   COLOR: #ffffff; 
   PADDING-TOP: 15px; 
   BORDER-BOTTOM: #ffffff 1px solid; 
   FONT-FAMILY: Verdana, Arial, sans-serif; 
   HEIGHT: 100px; 
   BACKGROUND-COLOR: #999999; 
   TEXT-ALIGN: left 
} 
#center { 
   FLOAT: left; 
   OVERFLOW: hidden; 
   WIDTH: 500px; 
   background:#333333; 
} 
.content { 
   PADDING-RIGHT: 15px; 
   PADDING-LEFT: 15px; 
   FONT-SIZE: x-small; 
   PADDING-BOTTOM: 5px; 
   COLOR: #666666; 
   PADDING-TOP: 15px; 
   FONT-FAMILY: Verdana, Arial, sans-serif; 
   BACKGROUND-COLOR: #666666 
} 
#right { 
   FLOAT: left; 
   OVERFLOW: hidden; 
   WIDTH: 250px; 
   BACKGROUND: #ff3366; 
   height:auto; 
   height:100%; 
} 
.sidebar { 
   PADDING-RIGHT: 15px; 
   PADDING-LEFT: 15px; 
   PADDING-BOTTOM: 15px; 
   PADDING-TOP: 15px; 
} 
</style> 
</HEAD> 
<BODY> 
<DIV id=container> 
   <DIV id=banner></DIV> 
    

   <DIV id=center> 
      <DIV class=content> 
         <br /><br /><br /><br /><br /><br /><br /> 
         <br /><br /><br /><br /><br /><br /><br /> 
         <br /><br /><br /><br /><br /><br /><br /> 
      </DIV> 
   </DIV> 
       
   <DIV id=right> 
      <DIV class=sidebar> 
         <br /><br /><br /><br /><br /><br /><br /> 
         <br /><br /><br /><br /><br /><br /><br /> 
      </DIV> 
   </div> 

   <DIV style="CLEAR: both"></DIV> 
    
   <DIV id=banner></DIV> 
</DIV> 
    
</BODY> 
</HTML>

comment faire pour que les div center et right aient la même hauteur ?

si vous avez une idée qui résoudrait mon problème ....

P.S : j'ai utilisé l'attribut display:table;, display:table-row; et display:table-cell; mais peine perdue, ils sont pas reconnus par IE le maudit ....

LaurentDenis

LaurentDenis

Posté
Posté

Utilise un tableau.

La gestion de hauteur (height et min-height) en CSS n'est pas suffisamment bien supportée selon les navigateurs pour que les hacks nécessaires soient rentables.

Guest stone

Guest stone

Posté
Posté (modifié)

salut LaurentDenis, le but de ma démarche est d'éviter les tableaux justement ...

+ j'ai vu beaucoup de sites qui utilisent cette technique mais je n'arrive pas à dénicher l'astuce

Modifié par stone
LaurentDenis

LaurentDenis

Posté
Posté

Je serais curieux de voir un site réalisant ceci de manière fiable sans multiplier les hacks ;)

Que vaut-il mieux :

- un rendu hasardeux avec une CSS bidouillée, pour un effet visuel somme toute mineur ?

- un tableau d'une ligne, deux cellules... parfaitement accessible (linéarisation correcte), géré aisément et proprement en CSS, avec un minimum de code supplémentaire en HTML ?

- ou renoncer sagement à cet effet (ce que je fais personnellement en attendant des navigateurs supportant correctement les propriétés de hauteur) ?

Monique

Monique

Posté
Posté

Bonjour,

Je rejoins tout à fait la position de Laurent.

Il faut être réaliste... les virtuoses du CSS ont mis au point différentes solutions pour résoudre ce type de difficultés mais cela reste du bidouillage, source de problèmes d'affichage selon les navigateurs.

Un exemple expliqué par Russ Weakley : Two columns with color

Pour info :

- 3-col layout via CSS

- 3 columns of equal height using only one column

- CSS Layout with Columns of Equal Length

Guest stone

Guest stone

Posté
Posté

salut LaurentDenis,

1. sur les sites que j'ai visualisé, je ne dirais pas que c'est des CSS bidouillées (testé sous opera 7.53, IE6, Mozilla & FireFox) + c'est des sites de pro à ma connaissance :

exemple 1

exemple 2 sur celui-ci la seule trace de tableaux sur la page c'est le calendrier ...

2. la fonction initiale des tableaux n'est pas de structurer une page, ça fais deux ans que je travaille avec des tableaux et je tombe souvent dans le panneau des tableaux imbriqués dès qu'il y a quelque chose qui bloque au niveau de la mise en forme

3. "renoncer sagement" ... d'autres y sont arrivés ...

LaurentDenis

LaurentDenis

Posté
Posté
salut LaurentDenis,

1. sur les sites que j'ai visualisé, je ne dirais pas que c'est des CSS bidouillées (testé sous opera 7.53, IE6, Mozilla & FireFox) + c'est des sites de pro à ma connaissance :

exemple 1

exemple 2 sur celui-ci la seule trace de tableaux sur la page c'est le calendrier ...

:P

Pour ces deux exemples... les colonnes ne sont pas de même hauteur :whistling:

Il suffit de leur appliquer une bordure pour s'en rendre compte, par exemple #column_one,#column_two {border: 1px solid red;} pour http://hivelogic.com/

Elles donnent en revanche l'illusion de l'être, grâce au jeu des couleurs d'arrière-plan, et à quelques div imbriquées. C'est une ruse classique lorsque le design n'intègre pas de bordures..

2. la fonction initiale des tableaux n'est pas de structurer une page, ça fais deux ans que je travaille avec des tableaux et je tombe souvent dans le panneau des tableaux imbriqués dès qu'il y a quelque chose qui bloque au niveau de la mise en forme

ça fait... longtemps que je travaille avec les CSS sans tableaux, et j'ai commencé à en avoir une utilisation "mature" justement quand j'ai appris où ne pas m'en servir. Accessoirement, j'ai bien précisé que les colonnes de hauteurs identiques pouvaient être réalisées sans tableaux imbriqués, avec un simple tableau unique à deux cellules...

Les tableaux utilisés pour la présentation :

- ne sont pas une solution à utiliser si on peut faire autrement,

- ne sont pas une solution à utiliser si l'accessibilité de la page est compromise,

- ne sont pas une solution à utiliser si on peut se passer de la présentation qui les nécessite,

- mais ne sont pas une solution invalide,

- et sont à utiliser avec parcimonie, sans fausse pudeur cependant.

Guest stone

Guest stone

Posté
Posté
Il suffit de leur appliquer une bordure pour s'en rendre compte, par exemple #column_one,#column_two {border: 1px solid red;} pour http://hivelogic.com/

Elles donnent en revanche l'illusion de l'être, grâce au jeu des couleurs d'arrière-plan, et à quelques div imbriquées. C'est une ruse classique lorsque le design n'intègre pas de bordures..

au fait, comment peut-on avoir cette illusion ...

kozlika

kozlika

Posté
Posté
au fait, comment peut-on avoir cette illusion ...

Par exemple pour deux div (main et sidebar) contenues dans une div (page).

- on suppose que le sidebar est plus court que le main

- on veut un fond blanc pour le main et gris pour le sidebar

on applique à la div page le fond gris et au main le fond blanc. De cette façon, la "colonne" grise arrive jusqu'en bas.

Guest stone

Guest stone

Posté
Posté

oki merci pour vos réponses et à bientôt j'espère ...

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...