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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [HTML] Adapter la hauteur de ce qu'on veut afficher

hop le fou

Tu m'en diras tant

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

Publicité

Pentiore

hop le fou 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

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

hop le fou

Tu m'en diras tant

pentiore a écrit :

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

RiderCrazy

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]

hop le fou

Tu m'en diras tant

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

gizmo

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

hop le fou

Tu m'en diras tant

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 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>SADA Assurances</TITLE>
<META name="description" content="">
<META name="keywords" content="">
<META name="author" content="SADA Assurances">
<META name="generator" content="WebExpert 5">
<LINK href="style.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<DIV class="PageHaut">
<TABLE class="haut" cellspacing="0" cellpadding="0">
<tr>
<td class="Z2"> </td>
<td class="Z1"> </td>
<td class="ImageBordure"><IMG src="logo_petit.gif" class="ImageBordure" alt="Presentation"></td>
<td class="Z1"> </td>
<td class="ImageLien"><A href="../../www.sada.fr/vehicules_avec_index.htm"><IMG src="logo_petit.gif" alt="Automobile" class="ImageLien"></A></td>
<td class="Z1"> </td>
<td class="ImageLien"><A href="../../www.sada.fr/personnes_avec_index.htm"><IMG src="logo_petit.gif" alt="Personne" class="ImageLien"></A></td>
<td class="Z1"> </td>
<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>
<td class="Z1"> </td>
<td class="ImageLien"><A href="../../www.sada.fr/multirisque_habitation_avec_index.htm"><IMG src="logo_petit.gif" alt="Habitation" class="ImageLien"></A></td>
<td class="Z1"> </td>
<td class="ImageLien"><A href="../../www.sada.fr/multirisque_immeuble_avec_index.htm"><IMG src="logo_petit.gif" alt="Immeubles" class="ImageLien"></A></td>
<td class="Z2"> </td>
</tr>
</TABLE>
</DIV>
<table class="bas" cellspacing="0" cellpadding="0">
<tr>
<td class="Z2"> </td>
<td class="Z1"> </td>
<td class="Texte">Découvrez<br/>les avantages<br/>de la proximité</td>
<td class="Z1"> </td>
<td class="TexteAuto">Automobile</td>
<td class="Z1"> </td>
<td class="TextePers">Personne</td>
<td class="Z1"> </td>
<td class="TextePro">Profesionnels</td>
<td class="Z1"> </td>
<td class="TexteHab">Habitation</td>
<td class="Z1"> </td>
<td class="TexteImm">Immeubles</td>
<td class="Z2"> </td>
</tr>
</table>
<DIV class="TexteAdresse">
<P><SPAN class="Gras">Nîmes</SPAN><BR/>
4, rue Scatisse <br/> 30934 NÎMES Cedex 9
<P> Tél. : 04 66 62 70 00<br/>Fax : 04 66 38 26 60 <br/>www.sada.fr
</DIV>
</BODY>
</HTML>

et voila le css:

Code :

@charset "iso-8859-1";
BODY {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
DIV.PageHaut {
background : #b9d989;
border : green;
}
TABLE.haut {
width : 100%;
height : 280px;
border-width : 1px;
border : solid green;
}
TABLE.bas {
width : 100%;
}
TD.Z1 {
width : 2.2%;
}
TD.Z2 {
width : 4.4%;
}
IMG.ImageLien {
width : 100%;
border : 0px;
}
TD.ImageLien {
vertical-align : bottom;
width : 10.8%;
}
IMG.ImageBordure {
width : 99%;
border-width : 1px;
border-right : solid green;
border-top : solid green;
border-left : solid green;
}
TD.ImageBordure {
vertical-align : bottom;
width : 24%;
}
TD.Texte {
font-weight : bold;
font-size : 20pt;
border-right : solid green;
border-bottom : solid green;
border-left : solid green;
border-width : 1px;
padding-left : 1em;
width : 24%;
}
TD.TexteAuto {
font-weight : bold;
font-size : 12pt;
color : #ffffff;
background : red;
text-align : center;
vertical-align : top;
width : 10.8%;
}
TD.TextePers {
font-weight : bold;
font-size : 12pt;
color : #ffffff;
background : green;
text-align : center;
vertical-align : top;
width : 10.8%;
}
TD.TextePro {
font-weight : bold;
font-size : 12pt;
color : #ffffff;
background : blue;
text-align : center;
vertical-align : top;
width : 10.8%;
}
TD.TexteHab {
font-weight : bold;
font-size : 12pt;
color : #ffffff;
background : yellow;
text-align : center;
vertical-align : top;
width : 10.8%;
}
TD.TexteImm {
font-weight : bold;
font-size : 12pt;
color : #ffffff;
background : orange;
text-align : center;
vertical-align : top;
width : 10.8%;
}
DIV.TexteAdresse {
font-size : 10pt;
padding-left : 7em;
vertical-align : bottom;
}
SPAN.Gras {
font-weight : bold;
}

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:

hop le fou

Tu m'en diras tant

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

hop le fou

Tu m'en diras tant

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?

fastclemmy

(re-)Dictateur en plastique

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

Publicité

hop le fou

Tu m'en diras tant

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...
ben comme ca ca serait facile (ca serait plu du html non plu... )

fastclemmy

(re-)Dictateur en plastique

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...
ben comme ca ca serait facile (ca serait plu du html non plu... )

Mauvaise langue

hop le fou

Tu m'en diras tant

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

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:

hop le fou

Tu m'en diras tant

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)?

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
Tableau trop grand en html?	[HTML/JS] Ouvrir un lien dans une nouvelle fenêtre ?
Appeler une URL, mais sans l'afficher	[HTML] Enregistrer un .htm au lieu de l'ouvrir ?
[HTML] Comment éviter de copier-coller du code sur chaque page ?	[HTML/CSS] Modif automatique de la status bar lors d'un hover sur link
[C Windows] Afficher l'IP ou l'hostname de la machine	[PHP WML XHTML] Reconaitre un navigateur HTML ou WAP ?
[PHP]Comment envoyer un mail HTML pour qu il soit lisible sur Free	[EXCEL] afficher le nom de la personne la plus agé
Plus de sujets relatifs à : [HTML] Adapter la hauteur de ce qu'on veut afficher

Page générée en 0.088 secondes