28172 sujets

CSS et mise en forme, CSS3

Div height 100% et redimensionnement ! Au secours !!!

Bonjour à tous,
depuis plusieurs jours, j'essaie de faire fonctionner la valeur height 100% sur une div qui contient une image photoshop découpée en tranche et recomposée via l'export web de celui-ci.
l'image fait 1280x1056.
Si j'enregistre mon image classiquement en png ou jpg, pas de pb, je lui donne l'attribut height 100% et elle se redimensionne sur la hauteur de l'écran.
Par contre, dés que je l'exporte (que je la recompose en table ou en div...), j'ai beau donner l'attribut height 100% à la table ou à la div, en html ou en css, rien ne fait, pas de redimensionnement, ni sous IE ni sous FF !
Je sèche, j'ai épluché les forums, les tutos, j'ai essayé bcp de solutions données sur les forums... Il y a certainement qque chose que je ne fais pas bien... si qq'un peut m'éclairer !! Merci d'avance !
Voici le code de ma page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>Menu</title>
<style type="text/css">
html, body {
width:100%;
height:100%;
background-color:#19140D;
margin:0 auto;
text-align:center;
padding:0;
}
#apDiv1 {
position:absolute;
width:90%;
height:97%;
top:0%;
margin-left:-45%;
left:50%;
}

#tableau {
height:100%;
border:0;
}
</style>
</head>

<body>
<div id="apDiv1">
<table id="tableau" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="181" height="1">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
<td width="69" height="1">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
<td width="21" height="1">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
<td width="113" height="1">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
<td width="2" height="1">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
<td width="101" height="1">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
<td width="48" height="1">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
<td width="157" height="1">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
<td width="140" height="1">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
<td width="58" height="1">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
<td width="72" height="1">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
<td width="124" height="1">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
<td width="194" height="1">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
<td></td>
</tr>
<tr>
<td colspan="13">
<img src="images/arbremenu/arbremenu_01.png" width="1280" height="157" alt=""/></td>
<td width="1" height="157">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
</tr>
<tr>
<td colspan="3" rowspan="6">
<img src="images/arbremenu/arbremenu_02.png" width="271" height="416" alt=""/></td>
<td colspan="3">
<img src="images/arbremenu/arbremenu_03.png" width="216" height="68" alt=""/></td>
<td colspan="7" rowspan="2">
<img src="images/arbremenu/arbremenu_04.png" width="793" height="144" alt=""/></td>
<td width="1" height="68">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
</tr>
<tr>
<td colspan="3" rowspan="5">
<img src="images/arbremenu/arbremenu_05.png" width="216" height="348" alt=""/></td>
<td width="1" height="76">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
</tr>
<tr>
<td rowspan="10">
<img src="images/arbremenu/arbremenu_06.png" width="48" height="755" alt=""/></td>
<td rowspan="2">
<img src="images/arbremenu/arbremenu_07.png" width="157" height="55" alt=""/></td>
<td colspan="5">
<img src="images/arbremenu/arbremenu_08.png" width="588" height="21" alt=""/></td>
<td width="1" height="21">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
</tr>
<tr>
<td colspan="2" rowspan="4">
<img src="images/arbremenu/arbremenu_09.png" width="198" height="264" alt=""/></td>
<td colspan="2" rowspan="2">
<img src="images/arbremenu/arbremenu_10.png" width="196" height="77" alt=""/></td>
<td rowspan="9">
<img src="images/arbremenu/arbremenu_11.png" width="194" height="734" alt=""/></td>
<td width="1" height="34">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
</tr>
<tr>
<td rowspan="8">
<img src="images/arbremenu/arbremenu_12.png" width="157" height="700" alt=""/></td>
<td width="1" height="43">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/arbremenu/arbremenu_13.png" width="196" height="187" alt=""/></td>
<td width="1" height="174">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
</tr>
<tr>
<td rowspan="6">
<img src="images/arbremenu/arbremenu_14.png" width="181" height="483" alt=""/></td>
<td colspan="4" rowspan="2">
<img src="images/arbremenu/arbremenu_15.png" width="205" height="73" alt=""/></td>
<td rowspan="6">
<img src="images/arbremenu/arbremenu_16.png" width="101" height="483" alt=""/></td>
<td width="1" height="13">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/arbremenu/arbremenu_17.png" width="140" height="470" alt=""/></td>
<td colspan="2" rowspan="2">
<img src="images/arbremenu/arbremenu_18.png" width="130" height="71" alt=""/></td>
<td rowspan="5">
<img src="images/arbremenu/arbremenu_19.png" width="124" height="470" alt=""/></td>
<td width="1" height="60">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
</tr>
<tr>
<td colspan="4" rowspan="2">
<img src="images/arbremenu/arbremenu_20.png" width="205" height="36" alt=""/></td>
<td width="1" height="11">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
</tr>
<tr>
<td colspan="2" rowspan="3">
<img src="images/arbremenu/arbremenu_21.png" width="130" height="399" alt=""/></td>
<td width="1" height="25">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/arbremenu/arbremenu_22.png" width="69" height="374" alt=""/></td>
<td colspan="2">
<img src="images/arbremenu/arbremenu_23.png" width="134" height="97" alt=""/></td>
<td rowspan="2">
<img src="images/arbremenu/arbremenu_24.png" width="2" height="374" alt=""/></td>
<td width="1" height="97">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
</tr>
<tr>
<td colspan="2">
<img src="images/arbremenu/arbremenu_25.png" width="134" height="277" alt=""/></td>
<td width="1" height="277">
<img src="images/arbremenu/spacer.gif" alt=""/></td>
</tr>
</table>
</div>

</body>
</html>

Exple: http://www.janmar.fr l'image de la page d'accueil se redimensionne bien sur la hauteur...(image jpg classique)
Alors que là: http://www.janmar.fr/menu.html l'image ne se redimensionne pas (image en tranche reconstituée) !!
Dites moi si je ne suis pas clair !!
Modifié par lebenj85 (06 Dec 2010 - 21:02)
Personne n'a une petite idée, un axe de recherche que je pourrais explorer ??!! Smiley decu
Ou une solution alternative...
Bonjour et bonne année!

Évite à tout prix les tableaux. Tu l'a bien vu, ils ont un affichage tout particulier qu'il est plus simple d'abandonner.

Dans le cas de ton menu, il serait mieux de faire un map sur ton image. Des infos par là si tu sais pas par où commencer.

Bon courage!
Sujet clos
Aller à