18041 sujets

Questions générales et questions de débutants

Modèle 11 : partie frame scrollable ne scrolle plus

Bonjour,

j'ai pris le modèle 11 pour créer une page centrée, avec footer fixe et une partie scrollable (contenu) dans laquelle j'ai inséré un tableau.
(j'ai donc supprimé header et menu gauche)

Au début, tout allait bien : mon footer restait en bas, sans scroll, tandis que mon contenu était scrollable et que je continuais à rajouter du contenu.

Mais maintenant que j'ai vraiment bcp de contenu, le scroll s'est détraqué : c'est l'ensemble de la page qui a un scroll.

Voici mon code : 

<!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" lang="fr"><head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
/* CSS issu des tutoriels css.alsacreations.com */
body {
margin: 0;
padding: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-color: #fff; /*couleur de fond blanche*/
}
.conteneur { 
position: relative;
width: 925px;
margin: 0 auto; 
}
.contenu {
width: 925px;
overflow: auto;
}
.footer {
height: 250px;
position: absolute;
bottom: 0;
}
-->
</style>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="conteneur">
  <div id="contenu">
        <p class="titre">PRESSE</p>
        <table align="center" height="5" border="0">
          <tr>
            <td width="30" valign="top"><img src="images/spacer.gif" alt="" width="30" height="1" /></td>
            <td width="300" valign="top"><p><span class="soustitre">Communiqu&eacute;s de presse<img src="images/puce_pdf.gif" alt=" " width="17" height="16" /><br />
            </span> <span class="contenu">Cliquez sur le communiqu&eacute; pour l'ouvrir</span></p></td>
            <td width="10" valign="top" class="pointille"><img src="images/spacer.gif" alt="" width="10" height="1" /></td>
            <td colspan="4" valign="top" bordercolor="0"><p><span class="soustitre">Photos </span><span class="contenu">- (2000x3008 - 300dpi - JPG</span>)<br />
              <span class="contenu">Cliquez sur la photo que vous souhaitez t&eacute;l&eacute;charger</span></p>
              <p>&nbsp;</p></td>
          </tr>
          <tr>
            <td width="30">&nbsp;</td>
            <td width="300" rowspan="19" valign="top">
			
		<!-- début communiqués presse -->
			&gt;&nbsp;<a href="pdf/cp_Balouga.pdf" target="_blank" class="contenu">Pr&eacute;sentation Balouga</a> <br />
            &gt;&nbsp;<a href="pdf/cp_Prouve.pdf" target="_blank" class="contenu">Jean Prouv&eacute;</a> <br />
            &gt;&nbsp;<a href="pdf/cp_nouveautes_fin2006.pdf" target="_blank" class="contenu">Nouveaut&eacute;s 2006</a> <br />
            &gt;&nbsp;<a href="pdf/pr_Balouga.pdf" target="_blank" class="contenu">English press release</a></td>
		<!--fin communiqué presse -->
		
		
	<!-- PHOTOS -->		  
		<!--rangée 1 -->
            <td width="10" class="pointille">&nbsp;</td>
			<!--photo G -->
            <td bordercolor="0"><a href="zip/BalougaMurChaises.zip"><img src="images/vignettes/v_BalougaMurChaises.jpg" alt="Mur de chaises galerie Balouga" width="80" height="80" border="0" /></a></td>
            <td width="200"><p><span class="legende">Mur de chaises galerie Balouga</span><br />
              <br /><span class="creditphot">Cr&eacute;dit photo : Vanessa  </span></p>            </td>
		  <!--photo D -->
            <td width="80" bordercolor="0"><a href="zip/BalougaPortrait.zip"><img src="images/vignettes/v_BalougaPortrait.jpg" alt="Balouga Portrait" width="80" height="80" border="0" /></a></td>
            <td width="200"><span class="legende">Balouga Portrait<br /></span>
			<br /><span class="creditphot">Cr&eacute;dit photo : Vanessa </span></td>
          </tr>
		<!--rangée 2 (vide) -->
		  <tr>
		    <td width="30">&nbsp;</td>
		    <td width="10" class="pointille">&nbsp;</td>
            <td bordercolor="0">&nbsp;</td>
            <td width="200">&nbsp;</td>
            <td width="80" bordercolor="0">&nbsp;</td>
            <td width="200">&nbsp;</td>
          </tr>
		  <!--rangée 3 -->
          <tr>
            <td width="30">&nbsp;</td>
            <td width="10" class="pointille">&nbsp;</td>
			<!--photo G -->
			<td bordercolor="0"><a href="zip/BalougaAlcove50.zip"><img src="images/vignettes/v_BalougaAlcove50.jpg" alt="Ambiance 1950 galerie Balouga" width="80" height="80" border="0" /></a></td>
			<td width="200"><span class="legende">Ambiance 1950 galerie Balouga</span><br />
                <span class="creditphot"><br />
                  Cr&eacute;dit photo : Vanessa Gilles</span></td>
			<!--photo D -->
			<td width="80" bordercolor="0"><a href="zip/BalougaBuroSALA.zip"><img src="images/vignettes/v_BalougaburoSALA.jpg" alt="Bureau Pierre Sala (1983)" width="80" height="80" border="0" /></a></td>
			<td width="200"><span class="legende">Bureau Pierre Sala (1983)</span><br />
                <span class="creditphot"><br />
                  Cr&eacute;dit photo : Vanessa Gilles</span></td>
          </tr>
		  <!--etc (poursuite du tableau) -->
       
		  <!--rangée 21 -->
          <tr>
            <td width="30">&nbsp;</td>
            <td width="300" valign="top">&nbsp;</td>
            <td width="10" class="pointille">&nbsp;</td>
		  <!--photo G -->
            <td bordercolor="0"><a href="zip/JeuFable_EnzoMari_gd.zip"><img src="images/vignettes/v_JeuFable_EnzoMari_gd.jpg" alt="Le Jeu des fables (Enzo Mari. R&eacute;edition Seuil jeunesse)" width="80" height="80" border="0" /></a></td>
            <td width="200"><span class="legende">Le man&egrave;ge enchant&eacute;. Collection vintage</span><br />
            <br />
            <span class="creditphot">Cr&eacute;dit photo : Vanessa Gilles</span></td>
			<!--photo D -->
            <td width="80" bordercolor="0"><a href="zip/JeuFable_EnzoMari_pt.zip"><img src="images/vignettes/v_JeuFable_EnzoMari_pt.jpg" alt="Le Jeu des fables (Enzo Mari. R&eacute;edition Seuil jeunesse)" width="80" height="80" border="0" /></a></td>
            <td width="200"><span class="legende">Le Jeu des fables (Enzo Mari. R&eacute;edition Seuil jeunesse)</span><br />
            <span class="creditphot">Cr&eacute;dit photo : Vanessa Gilles</span></td>
          </tr>		  
</table>  
  </div>
  <div id="footer">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="955" height="250" title="BALOUGA mobilier design_enfant">
      <param name="movie" value="images/0_menushort_02.swf" />
      <param name="quality" value="high" />
      <embed src="images/0_menushort_02.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="955" height="250"></embed>
    </object>
  </div>
</div>
</body></html>


J'ai donc supprimé les valeurs "height" des conteneur et contenu, mais ça n'a pas résolu le problème.

Je ne vois pas ce qui manque. Quelqu'un a-t-il une idée ?

Merci d'avance.
Modifié par paquita (03 Nov 2006 - 11:54)
Je ne passionne pas les foules avec mon sujet ...
Smiley decu
Ai-je mal posé ma question ?
Ou peut-être faut-il que j'attende lundi, la fin du Pont ...
Smiley smile
?
Salut,

Comme indiqué dans les règles du forum, ce forum est dédié aux Standards Web.

Or le code que tu donnes ici, qui est déclaré avec un doctype XHTML 1.0 strict, n'a visiblement jamais été validé au vu des nombreux attributs et éléments de présentation, ou dépréciés (par exemple embed).

Peut-être devrais-tu profiter des nombreuses ressources que tu peux trouver ici pour essayer de t'initier aux Standards en question ? La FAQ et les tutoriels te permettront sans doute de bien progresser.

Bon courage en tout cas.
Merci Coin Coin de ta réponse, mais je ne saisis pas bien ce que tu dis
Smiley confus
Mon code est issu du modèle 11 de Alsacréation que j'ai utilisé pour faire ma page.
J'ai posté sur ce forum car je croyais que c'était celui où l'on parlait des Tutoriels Alsacreation et donc de leurs modèles.
Aurais-je dû/devrais-je poster ma question sur le forum "HTML, XHTML, sémantique web" ?
Je suis débutante et j'ai cherché dans la FAQ et Recherche sans trouver de solution, c'est pour ça que j'ai posté ...
paquita a écrit :
Mon code est issu du modèle 11 de Alsacréation que j'ai utilisé pour faire ma page.
Peut-être. Mais je ne vois pas l'ombre d'un tableau, dans le gabarit n°11. Pas non plus d'éléments de présentation (width, height, align, etc.).

Manifestement, tu n'as pas assimilé le but principal de l'utilisation des CSS, qui est la séparation du fond & de la forme des pages web. Séparation qui amène de nombreux avantages. Par ailleurs, l'utilisation que tu fais des tableaux rend ta page inaccessible.

Je ne peux que t'inviter à lire les articles d'Openweb "Pourquoi les standards du W3C" & "Pourquoi l'accessibilité numérique", avant de te pencher sur "Cascade CSS et priorité des sélecteurs" et les tutoriels d'Alsacreations.

Ca a l'air barbant au possible, mais ça en vaut vraiment la peine Smiley cligne

Partir d'un gabarit, pourquoi pas, et tant qu'à faire autant en choisir un bien fait. Mais c'est inutile si tu ne comprends pas ce que tu fais lorsque tu le transformes.
Merci Sopo pour ta réponse.
Je vais effectivement aller voir les pages que tu m'as indiquées. Tu as raison, ce vaste sujet vaut la peine qu'on se penche dessus sérieusement et tranquillement.
C'est donc prévu ... Smiley smile
Mais dans l'immédiat, je suis pressée par un délai. Je ne suis pas assez "avancée" pour assimiler et appliquer aussi rapidement cette technique nouvelle pour moi et qui diffère pas mal des vieilles pages html
Smiley ohwell
Je crois donc que je vais être obligée de livrer ma page avec l'ancienne méthode, lourdeaude et archaïque ...
Tant pis
Smiley decu
Merci en tout cas pour tes encouragements.
Sujet clos
Aller à