[HTML] Adapter la hauteur de ce qu'on veut afficher

Adapter la hauteur de ce qu'on veut afficher [HTML] - HTML/CSS - Programmation

Marsh Posté le 29-07-2003 à 15:53:28    

Bonjour
 
Je dois réaliser une page de présentation d'un site
Je commence le Html
G choisi de prendre la norme Html 4 stricte
j utilise ie6 sp1
 
Mon problème : comment régler la hauteur de mes tables en fonction de la résolution de l'écran.
Pour la largeur on peut utiliser les % mais ca n existe pas pour la hauteur apparement.
 
Autre problème: ma page est découpé en 2 tables, celles ci ayant les memes colonnes mais pas les memes styles
g gardé les memes largeurs (en %) et pourtant en regardant de près on s apercoit qu il y a des pixels de différences par endroit...
 
si vous avez d'autre idées pour organiser tout ca je suis preneur
 
merci

Reply

Marsh Posté le 29-07-2003 à 15:53:28   

Reply

Marsh Posté le 29-07-2003 à 16:00:17    

hop le fou a écrit :

Bonjour
 
Je dois réaliser une page de présentation d'un site
Je commence le Html
G choisi de prendre la norme Html 4 stricte
j utilise ie6 sp1
 
Mon problème : comment régler la hauteur de mes tables en fonction de la résolution de l'écran.
Pour la largeur on peut utiliser les % mais ca n existe pas pour la hauteur apparement.
 
Autre problème: ma page est découpé en 2 tables, celles ci ayant les memes colonnes mais pas les memes styles
g gardé les memes largeurs (en %) et pourtant en regardant de près on s apercoit qu il y a des pixels de différences par endroit...
 
si vous avez d'autre idées pour organiser tout ca je suis preneur
 
merci


 
Tu ne mets aucune hauteur pour tes tableaux, et ton navugateur va automatiquement ajuster la hauteur du tableau à la hauteur des données. Par contre utilise bien width="100%" pour la largueur de tes tableaux


---------------
Une Porsche sinon rien.
Reply

Marsh Posté le 29-07-2003 à 16:07:13    

pentiore a écrit :


 
Tu ne mets aucune hauteur pour tes tableaux, et ton navugateur va automatiquement ajuster la hauteur du tableau à la hauteur des données. Par contre utilise bien width="100%" pour la largueur de tes tableaux


 
C'est bien ca le problème.
J'ai un graphisme à respecter et la page doit bien prendre toute la page...

Reply

Marsh Posté le 29-07-2003 à 16:24:14    

hop le fou a écrit :

C'est bien ca le problème.
J'ai un graphisme à respecter et la page doit bien prendre toute la page...


 :heink:  
Si ton graphisme t'oblige à faire un tel truc, c'est qu'il est mal foutu [:spamafote]

Reply

Marsh Posté le 29-07-2003 à 16:35:42    

RiderCrazy a écrit :


 :heink:  
Si ton graphisme t'oblige à faire un tel truc, c'est qu'il est mal foutu [:spamafote]


 
a la base c t sensé etre une affiche publicitaire...
et maintenant il fodrait la passer en page d'accueil...
mais je dois conserver l'aspect graphique du coup (ben oui paske sinon ca sert a rien)
 
bon en gros c pas possible?
g retrouvé un topic d'une personne qui voulait faire pareil ==> il a abandonné il a fait une image (c pas une solution ca...)
 
peut etre que en créant une image d'une certaine hauteur et d'une certaine largeur (image invisible) et en l'insérant dans un tableau, je pourrai régler la hauteur en mettant la hauteur sur auto et en mettant la largeur correspondante (calculée bien sur)
mais bon...

Reply

Marsh Posté le 29-07-2003 à 17:12:26    

montre un peu la page que tu fais et ce à quoi tu voudrais arriver.


Message édité par gizmo le 29-07-2003 à 17:12:41
Reply

Marsh Posté le 30-07-2003 à 09:06:33    

gizmo a écrit :

montre un peu la page que tu fais et ce à quoi tu voudrais arriver.


 
voila ce que j'ai fait pour le moment:
 
la page html:

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.    "http://www.w3.org/TR/html4/strict.dtd">
  3. <HTML>
  4. <!-- Date de création: 25/07/2003 -->
  5. <HEAD>
  6. <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  7. <META http-equiv="Content-Style-Type" content="text/css">
  10. <TITLE>SADA Assurances</TITLE>
  11. <META name="description" content="">
  12. <META name="keywords" content="">
  13. <META name="author" content="SADA Assurances">
  14. <META name="generator" content="WebExpert 5">
  16. <LINK href="style.css" rel="stylesheet" type="text/css">
  17. </HEAD>
  19. <BODY>
  20. <DIV class="PageHaut">
  21. <TABLE class="haut" cellspacing="0" cellpadding="0">
  22. <tr>
  23.  <td class="Z2">&nbsp;</td>
  24.  <td class="Z1">&nbsp;</td>
  25.  <td class="ImageBordure"><IMG src="logo_petit.gif" class="ImageBordure" alt="Presentation"></td>
  26.  <td class="Z1">&nbsp;</td>
  27.  <td class="ImageLien"><A href="../../www.sada.fr/vehicules_avec_index.htm"><IMG src="logo_petit.gif" alt="Automobile" class="ImageLien"></A></td>
  28.  <td class="Z1">&nbsp;</td>
  29.  <td class="ImageLien"><A href="../../www.sada.fr/personnes_avec_index.htm"><IMG src="logo_petit.gif" alt="Personne" class="ImageLien"></A></td>
  30.  <td class="Z1">&nbsp;</td>
  31.  <td class="ImageLien"><A href="../../www.sada.fr/multirisque_artisans_commercants_avec_index.htm"><IMG src="logo_petit.gif" alt="Professionnels" class="ImageLien"></A></td>
  32.  <td class="Z1">&nbsp;</td>
  33.  <td class="ImageLien"><A href="../../www.sada.fr/multirisque_habitation_avec_index.htm"><IMG src="logo_petit.gif" alt="Habitation" class="ImageLien"></A></td>
  34.  <td class="Z1">&nbsp;</td>
  35.  <td class="ImageLien"><A href="../../www.sada.fr/multirisque_immeuble_avec_index.htm"><IMG src="logo_petit.gif" alt="Immeubles" class="ImageLien"></A></td>
  36.  <td class="Z2">&nbsp;</td>
  37. </tr>
  38. </TABLE>
  39. </DIV>
  41. <table class="bas" cellspacing="0" cellpadding="0">
  42. <tr>
  43.  <td class="Z2">&nbsp;</td>
  44.  <td class="Z1">&nbsp;</td>
  45.  <td class="Texte">Découvrez<br/>les avantages<br/>de la proximité</td>
  46.  <td class="Z1">&nbsp;</td>
  47.  <td class="TexteAuto">Automobile</td>
  48.  <td class="Z1">&nbsp;</td>
  49.  <td class="TextePers">Personne</td>
  50.  <td class="Z1">&nbsp;</td>
  51.  <td class="TextePro">Profesionnels</td>
  52.  <td class="Z1">&nbsp;</td>
  53.  <td class="TexteHab">Habitation</td>
  54.  <td class="Z1">&nbsp;</td>
  55.  <td class="TexteImm">Immeubles</td>
  56.  <td class="Z2">&nbsp;</td>
  57. </tr>
  58. </table>
  59. <DIV class="TexteAdresse">
  60. <P><SPAN class="Gras">Nîmes</SPAN><BR/>
  61. 4, rue Scatisse <br/> 30934 NÎMES Cedex 9
  62. <P> Tél. : 04 66 62 70 00<br/>Fax : 04 66 38 26 60 <br/>www.sada.fr
  63. </DIV>
  65. </BODY>
  66. </HTML>


 
et voila le css:

Code :
  1. @charset "iso-8859-1";
  2. BODY {
  3.   margin-top: 0px;
  4.   margin-right: 0px;
  5.   margin-bottom: 0px;
  6.   margin-left: 0px;
  7. }
  9. DIV.PageHaut {
  10. background : #b9d989;
  11. border : green;
  12. }
  14. TABLE.haut {
  15. width : 100%;
  16. height : 280px;
  17. border-width : 1px;
  18. border : solid green;
  19. }
  21. TABLE.bas {
  22. width : 100%;
  23. }
  25. TD.Z1 {
  26. width : 2.2%;
  27. }
  28. TD.Z2 {
  29. width : 4.4%;
  30. }
  32. IMG.ImageLien {
  33. width : 100%;
  34. border : 0px;
  35. }
  37. TD.ImageLien {
  38. vertical-align : bottom;
  39. width : 10.8%;
  40. }
  42. IMG.ImageBordure {
  43. width : 99%;
  44. border-width : 1px;
  45. border-right : solid green;
  46. border-top : solid green;
  47. border-left : solid green;
  48. }
  50. TD.ImageBordure {
  51. vertical-align : bottom;
  52. width : 24%;
  53. }
  55. TD.Texte {
  56. font-weight : bold;
  57. font-size : 20pt;
  58. border-right : solid green;
  59. border-bottom : solid green;
  60. border-left : solid green;
  61. border-width : 1px;
  62. padding-left : 1em;
  63. width : 24%;
  64. }
  66. TD.TexteAuto {
  67. font-weight : bold;
  68. font-size : 12pt;
  69. color : #ffffff;
  70. background : red;
  71. text-align : center;
  72. vertical-align : top;
  73. width : 10.8%;
  74. }
  76. TD.TextePers {
  77. font-weight : bold;
  78. font-size : 12pt;
  79. color : #ffffff;
  80. background : green;
  81. text-align : center;
  82. vertical-align : top;
  83. width : 10.8%;
  84. }
  86. TD.TextePro {
  87. font-weight : bold;
  88. font-size : 12pt;
  89. color : #ffffff;
  90. background : blue;
  91. text-align : center;
  92. vertical-align : top;
  93. width : 10.8%;
  94. }
  96. TD.TexteHab {
  97. font-weight : bold;
  98. font-size : 12pt;
  99. color : #ffffff;
  100. background : yellow;
  101. text-align : center;
  102. vertical-align : top;
  103. width : 10.8%;
  104. }
  106. TD.TexteImm {
  107. font-weight : bold;
  108. font-size : 12pt;
  109. color : #ffffff;
  110. background : orange;
  111. text-align : center;
  112. vertical-align : top;
  113. width : 10.8%;
  114. }
  116. DIV.TexteAdresse {
  117. font-size : 10pt;
  118. padding-left : 7em;
  119. vertical-align : bottom;
  120. }
  122. SPAN.Gras {
  123. font-weight : bold;
  124. }


 
comme je débute un peu html, il y a surement des répétitions ou des trucs pas optimisés (mais la page html est passé par le validateur w3c strict)
 
le but est de représenter le premier tableau du 50 % de l'écran, et le reste (qui n'est pas terminé) sur les 50 % restant
 
au fait, tant que j'y suis, je me sers d'un tablo et, dans le 2eme tableau je voudrais raccourcir la longueur des cases dont la couleur de fond est changée. pour faire ca je pourrai dégager le texte juste a gauche pour que la case prenne une taille plus petite mais alors ca m obligerait un faire des groupements et ca me parait un pe lourd comme solution
sinon on retrouve bien les petits décalages dont g parlé précédemment aussi...
 
merci de m'aider  :jap:

Reply

Marsh Posté le 30-07-2003 à 11:35:07    

bon bon bon...
 
la solution d'utiliser une image marche très bien
on crée une image (qui doit etre invisble sur la page html) on la met dans une cellule du tableau
 
en réglant sa largeur en % et en laissant la hauteur sur Auto, l'image conserve son ratio et on peut donc choisir la hauteur de sa page en fonction de la taille de la fenetre
magnifique
 
g compris pkoi on voit des décalages dans mes cadres
cela est du au fait que le cadre est fait sur l'image dans la partie haute (qui elle meme ne fait que 99% de la cellule) tandis que le cadre du bas est fait sur la cellule elle meme (donc 100%)
je vais essayer de régler ce probleme...

Reply

Marsh Posté le 30-07-2003 à 11:46:08    

probleme : encadrer une image contenue dans une cellule d'un tablo
 
si je fais l encadrement sur la cellule, ca va entourer une partie que je ne ve pas puisque l'image est plus petite que la cellule
si je fais l'encadrement sur l'image
--> avec l'image a 100% de la cellule : le cadre droit est bouffé par l'image
--> avec l'image a 99% de la cellule : il y a de tres petit décalages dans les cadres selon la taille de la fenetre de 1 a 2 pixels mais ca saute aux yeux...
 
quesque je pe faire?

Reply

Marsh Posté le 30-07-2003 à 11:58:41    

Encore une bonne raison d'abandonner la mise en page en tableaux ?   :whistle:

Reply

Marsh Posté le 30-07-2003 à 11:58:41   

Reply

Marsh Posté le 30-07-2003 à 12:07:16    

fastclemmy a écrit :

Encore une bonne raison d'abandonner la mise en page en tableaux ?   :whistle:  


 
ben pour faire une mise en page aussi précise je vois pas d'autre solution...
si? comment?
 
une grosse image avec un area pour mes liens...  :D  
ben comme ca ca serait facile (ca serait plu du html non plu...  :D )

Reply

Marsh Posté le 30-07-2003 à 12:14:45    

hop le fou a écrit :


ben pour faire une mise en page aussi précise je vois pas d'autre solution...
si? comment?


 
Au pire, tu as toujours le positionnement absolu [:spamafote]
 
Cf. la FAQ de gm_superstar + http://openweb.eu.org/mise_en_page/ (les articles initiation au positionnement par exemple)
 

hop le fou a écrit :


une grosse image avec un area pour mes liens...  :D  
ben comme ca ca serait facile (ca serait plu du html non plu...  :D )


 
Mauvaise langue  :D

Reply

Marsh Posté le 30-07-2003 à 13:34:33    

fastclemmy a écrit :


 
Au pire, tu as toujours le positionnement absolu [:spamafote]
 
Cf. la FAQ de gm_superstar + http://openweb.eu.org/mise_en_page/ (les articles initiation au positionnement par exemple)
 
 
 
Mauvaise langue  :D  


 
je sais pas ce que c'est le positionnement absolu...
je vais chercher et je verrai si ca s applique pas trop mal a mon cas...
 
merci :jap:

Reply

Marsh Posté le 30-07-2003 à 16:21:40    

du nouveau
 
voila je me suis amusé avec les différents types de position...
tres pratique ca
 
float est assez pratique
par contre relatif (qui me paraissait le plus adapté vu qu on place ce qu on ve ou on ve) me gonfle un pe...
d accord on peut placer chaque truc n importe ou mais rien ne prend la place de ce qu on a déplacé dans le flux...
c con
 
par contre la position absolue c tres pratique (ce que je voulais faire avec relatif en fait je crois)
mais je me demande si je vais pas découvrir une contre partie a ce truc...
comment ca marche le positionnement absolu?
g placé mes images et autres la ou je voulais mais on dirait que ca fonctionne avec les coordonées écran alors que c pas fixe
pas tout compri...
 
sinon pour le décalage qui partait en vrille, c'était a cause d'un border que j avais mis sur un div et sur une table (donc 2 div donc décalage) mais il reste quand meme le décalage sur le cadre de l'image paske je pe pas la mettre a 100%
 
comment se fait il qu on ne pe pas encadrer une image correctement quand sa taille est 100% (dans une cellule de tablo)?

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed