HTML - Page dans une page?

Dimistik Messages postés 51 Date d'inscription   Statut Membre Dernière intervention   -  
Dimistik Messages postés 51 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Etant débutant en programmation, je cherche à inclure "une page dans une page". Je m'explique :

Ce que je cherche à faire, c'est de faire en sorte qu'une minipage se trouve sur ma page principale. De plus, je cherche à personnaliser le scrollbar de cette minipage. Pour me faire comprendre, je vous ai fait un schéma tout mignon =) :

http://nsa04.casimages.com/img/2009/01/19/090119063532371632.jpg

Merci d'avance pour ceux qui peuvent me guider !

P.S: Je suis sous Dreamweaver CS4.
A voir également:

4 réponses

Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
salut,

quand tu dis mini-page, tu parles d'un deuxième fichier HTML indépendant du premier ou d'un "genre de mini-page".

dans le premier cas, tu nous le dis !

dans le deuxième cas, tu peux ajouter un <div>, avec des dimensions fixes et un {overflow:scroll;}.

pour DW, tu peux changer, ce n'est pas lui qui va t'aider !
-;o)

PS: très bien le schéma !
0
Dimistik Messages postés 51 Date d'inscription   Statut Membre Dernière intervention  
 
Il s'agit bien d'avoir une page indépendante de la première.
0
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
ah !

les liens sont encore bloqués, regarde la réponse que j'ai donné ici.

c'est le tuto qu'il te faut !
0
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
SALUT

Pour evite les frames et en donner l effet sans php ,

je ferais ca en css avec un fausse frame

voila un exemple ! si tu veux + d expliquation demande !
<!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">           
  <head>                   
    <title>Frames en CSS                    
    </title>                
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <style type="text/css">              
body {
	margin: 0;
	padding: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	font-family: verdana, arial, sans-serif;
	background-color: #3c3c3c;
}
.haut {
	width: auto;
	height: 75px;
	background-color: #3c443c;
	color: #fff;
	font-size: 36px;
	padding: 10px;
}

.frame {
	width: 400px;
	height: 300px;
	margin: auto;
	overflow: auto;
	font-size: 14px;
	background-color: #1f2020;
	color: #d1daff;
	font-style: italic;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	text-indent: 6px;
	padding-left: 10px;
}
.bas {
	width: auto;
	height: 30px;
	background-color: #3c443c;
	color: #7a7c89;
	font-size: 10px;
	padding: 10px;
}
</style>
   </head>           
  <body>                   
    <div class="haut">RAD ZONE Webcreation                    
    </div>                                          
    <div class="frame"><h1>Une présentation sans Frames !</h1>                                 
      <p>Bonjour, voici un bloc scrollable: vous pouvez faire défiler son contenu... sans altérer le reste du site et sans utiliser d'iframes.                                  
      </p>                                 
      <p>Il est également possible de rendre ce bloc dynamique, c'est à dire de modifier son contenu pour simuler les jeux de cadres (frame): votre site restera fixe mais cette partie centrale variera en fonction des choix dans le menu.                                  
      </p>                                 
      <p>Voir pour cela la seconde partie du tuto: "simuler les frames en CSS" (des connaissances minimales en PHP sont nécessaires)                                  
      </p>                          
      <p>Lorem ipsum dolor sit amet consectetuer at mauris tortor libero ullamcorper. Vitae tortor elit massa Donec enim volutpat eu condimentum Morbi consequat. Ridiculus eros justo fermentum tincidunt Cras est tortor adipiscing Lorem leo. Tellus eget accumsan pretium malesuada ante parturient lorem nunc nec cursus. Nunc pretium condimentum venenatis Sed cursus penatibus porta sodales urna.
      </p>
      <p>Enim Suspendisse porttitor turpis commodo ante fringilla felis id auctor elit. Fermentum Curabitur at ante nibh orci dui wisi massa pharetra interdum. Vel ante ornare est tellus massa In eget nec condimentum eget. Id sem tincidunt iaculis massa Sed ante sit feugiat tristique enim. Rhoncus eros odio Nam quam magna velit semper pretium facilisi Curabitur. Lacinia.
      </p>
      <p>Et Aenean Nam dui id interdum dictumst vitae ac aliquet Curabitur. Et et dictum vel lacinia tellus Aliquam Maecenas massa Phasellus rutrum. In Pellentesque natoque Sed sed nibh Fusce lobortis Aenean sit convallis. Elit Morbi hendrerit platea Suspendisse et Nulla condimentum malesuada Praesent ligula. Libero ipsum ut et aliquet enim consectetuer elit sit justo orci. Sed urna justo vel turpis eleifend hendrerit cursus Sed commodo semper. Est Phasellus.
      </p>
      <p>Eu magna sapien habitasse a dolor ut convallis adipiscing urna libero. Eros vitae leo sit sollicitudin massa lobortis Sed lacus vel sed. Dictumst pretium id ullamcorper laoreet Curabitur vel dis mi nec vitae. Justo condimentum Ut Curabitur dui laoreet Vivamus sapien quis neque mattis. Hac metus Fusce Aliquam odio mauris amet Phasellus vitae congue id. Fermentum eget aliquam quis gravida non urna eu ullamcorper id.
      </p>
      <p>Lorem ipsum dolor sit amet consectetuer Vivamus dignissim Curabitur convallis eros. Condimentum tincidunt Lorem Aenean In fames consectetuer leo risus ultrices Vestibulum. Justo nisl ante nibh eget tincidunt pellentesque Donec Donec lacinia pulvinar. Curabitur Donec Sed Donec Aenean libero urna Curabitur id Ut Vestibulum. At nibh hac Duis orci dui sed est non tempus In. Laoreet Proin.
      </p>
      <p>Amet dui consectetuer urna tincidunt Vestibulum nisl Vestibulum adipiscing orci adipiscing. Nisl accumsan at Proin id tincidunt tempor Quisque lacinia platea id. Mattis eget dolor hendrerit purus volutpat sed euismod egestas metus Phasellus. Nunc mollis consequat Vestibulum leo orci id Curabitur pulvinar Sed a. Semper et convallis orci et nibh et.
      </p>
      <p>Ac ultrices sem Vestibulum sem cursus Donec nec mattis tellus lacus. Elit a risus vitae odio ac fringilla id vitae facilisi ornare. Pellentesque vitae leo urna pellentesque augue eu interdum Aenean Integer Sed. Pellentesque Pellentesque Suspendisse eu lacinia enim Pellentesque Nam a Vivamus lorem. Lobortis libero platea montes Vestibulum ligula Aliquam wisi Vestibulum In sodales. Nonummy sem orci Curabitur interdum lobortis quis justo Sed.
      </p>
      <p>Metus pharetra tempus Aenean non justo netus Fusce In risus lacus. Ut quis non hendrerit Sed adipiscing justo ac faucibus condimentum et. At dolor vel adipiscing mauris magnis molestie consequat sem quis consequat. Nibh Vivamus morbi sociis Duis non vel et Nam a quis. Ligula facilisis quis enim Sed quis Curabitur nunc felis magnis orci. Tellus Mauris.
      </p>
      <p>Lorem ipsum dolor sit amet consectetuer vitae quis justo consequat Sed. Nunc lobortis Vestibulum fringilla egestas tincidunt eros facilisi montes non congue. Ac ac Vestibulum elit nibh Vestibulum laoreet mattis eget lacinia libero. Elit Phasellus aliquam facilisi sed dolor molestie elit wisi lacinia lacinia. Fringilla pretium ridiculus Pellentesque mauris urna lobortis parturient quis sagittis nibh. Platea turpis justo sollicitudin In congue.
      </p>
      <p>Tristique non tristique nunc elit ipsum semper neque adipiscing Curabitur risus. Nunc wisi tortor lacus amet Phasellus ut wisi laoreet Sed neque. At tincidunt leo pretium tincidunt consequat et volutpat risus dictum Aliquam. Hac Lorem leo et Duis Morbi at congue tincidunt consequat purus. Consequat tristique metus vel sem sit odio id laoreet nec felis. Nascetur orci nibh sapien orci leo.
      </p>
      <p>Consectetuer magna condimentum Ut dictumst Vestibulum faucibus est Quisque nibh Curabitur. Elit ipsum Vestibulum Vestibulum leo tempus lorem Aenean tincidunt ullamcorper tortor. In id Phasellus Nullam nascetur ut odio nonummy sed cursus magna. Nam eu accumsan ante condimentum magnis Curabitur porttitor hendrerit ac pretium. Eget semper purus gravida Pellentesque scelerisque Sed est.
      </p>
      <p>Pretium Nulla vitae ac vitae tincidunt In et Aenean orci at. Convallis Nullam wisi enim Phasellus eget neque et risus consectetuer et. Nulla Suspendisse porttitor laoreet Vestibulum velit et risus Vestibulum quis turpis. Aenean interdum neque sit Curabitur semper sem Phasellus tellus Cras metus. Cursus justo Sed Vestibulum urna ut nascetur vitae elit ornare tincidunt. Facilisi venenatis laoreet adipiscing pede Integer.
      </p>                       
    </div>                           
    <div class="bas">Partie basse reste fixe                    
    </div>           
  </body>
</html>
0
Dimistik Messages postés 51 Date d'inscription   Statut Membre Dernière intervention  
 
La solution de Dalida fonctionne, mais je suis quand même curieux de ce que tu as fait ! :p

EDIT : j'ai finalement utilisé ta technique avec le CSS, ca me convient très bien :)

Dernière question : y a t'il un moyen de personnaliser le scrollbar?

Merci !
0