Gandalflemaia
Membre récent
 Hors-Ligne
Sexe: 
Messages: 14
 
|
Bonjour tout le monde;
Je travail à la version 2.0 de mon site Internet. Et je compte créer une interface avec un équivalent de frame mais fait avec CSS et la commande :
position:fixed;
Donc voici mon code :
[color=Red]Le fichier html :[/color]
<!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>Version 2.0</title>
<link rel="StyleSheet" type="text/css" title="Défault" />
</head>
<body>
<!--Cadre principal-->
<div id="Cadre">
<!--Bannière du site-->
<div id="banniere">
<img />
</div>
<!--Note de la page (en haut de la page)-->
<div id="note">
Citation du jour : ...
</div>
<!--Le menu avec les liens et les compteurs-->
<div id="menu">
<div id="menu_liens"><br />
<a href="" class="menu" title="">Lien</a>
<!--...-->
</div>
</div>
<!--Corps de la page-->
<div id="corps">
<hr /><br />
<!--Coprs de la page-->
<br /><hr />
</div>
<!--Copyright et avertissement (bas de page)-->
<div id="avertissement">
© 2004 - 2005 <br />
</div>
</div>
</body>
</html>
[color=Red]Le fichier css :[/color]
body{
margin:0; padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;}
img{border:0; margin:0;}
div#avertissement{
position: fixed;
bottom:0;
left:175px;
right:0;
padding:0 2% 0 2%;
border:1px solid rgb(222,222,222);
background-color:rgb(252,252,252);
text-align:center;
font-size:0.7em;}
div#menu{
position: fixed;
bottom:0;
margin:0;
width:175px;
border:1px solid rgb(222,222,222);
background-color:rgb(252,252,252);
position: fixed;
top: 49px;}
a.menu{
display:block;
margin: 1px 10px 0 5px;
padding:0 0 0 1%;
border:1px groove rgb(100,100,100);
background-color:rgb(245,245,245);
font-size:0.75em;}
a.menu:hover{
padding:0 0 0 5%;
background-color:rgb(250,250,250);}
div#banniere{
position:fixed;
top:0;
width:175px;
height:50px;
border:1px solid rgb(222,222,222);
background-color:rgb(252,252,252);}
div#note{
position:fixed;
top:0;
left:175px;
right:0;
height:40px;
border:1px solid rgb(222,222,222);
background-color:rgb(245,245,245);}
div#corps{
position:absolute;
top:40px;
padding:1% 1% 7% 1%;
margin:0 0 0 177px;}
|
|
Bon j'ai simplifié mais je dois avoué que c'est toujours pas très claire, un petit schema simpose :
_______________________________________
|Banniere |Note
| |____________________________
|_________|Corps
|Menu |Corps
|Menu |Corps
|Menu |Corps
|Menu |Corps
|Menu |Corps
|Menu |Corps
|Menu |Corps
|Menu |___________________________
|Menu |Avertissement
|_________|___________________________
Pas le droit de se moquer de mon dessin 
Tout les éléments sont fixe (sauf le corps), et quand on fait défiler la page y'a que le corps qui défile. Un peut comme une frame mais sur toute la page... Mais ca marche pas avec IE et donc c'est pas coul... Quelqu'un a une solution? |
Auteur 
