Bonjour,
Je me suis lancé dans le développement d'un site en essayant de respecter au mieux la séparation contenu/mise en forme avec les CSS.
J'essaye donc déjà de faire une mise en page sans tableaux mais je m'y perd encore dans le positionnement des blocs et la gestion des propriétés de positionnement, notament "position: fixed".
Voici ma page de conception en cours. Comme vous pouvez le voir, je n'en suis qu'au début. Ca promet...
La mise en page est la suivante :
- une bannière sur toute la largeur en haut et sur une hauteur de 81px.
- une image en haut à gauche, sous la bannière, complétant celle-ci
- un menu à gauche
- Le contenu de la page dans ce qui reste
Pour vous donner une idée, imaginez que la bannière représente un club de golf avec le manche à droite et la tête à gauche, que l'image complétant est une balle qui touche la tête du club et que le menu est... un menu !
il existe également un lien sur la tête du club qui ramène à la page d'accueil.
et la feuille de style :
Tel quel, la présentation fonctionne sous Firefox et IE6.
Mon pb est le suivant : je voudrais que cet ensemble (bannière, image + menu) ne défile pas avec la page (en utilisant "position: fixed") sachant que cela n'aura aucun effet sous IE, évidemment.
J'ai déjà commencé mes essai avec uniquement la bannière mais lorsque j'ajoute la propriété "position: fixed" dans "#banniere {", autant cela défile sous IE (comme prévu cela n'a rien changé), autant cela me fait un bloc transparent sous Firefox.
De plus, ce bloc prend toute la largeur et n'a plus la forme d'un "L" couché (le bloc de la balle fait maintenant toute la largeur) mais sont contenu est en fait un extrait de l'écran que je regardais juste avant. Si je travaillais sous Excel avant de basculer sous Firefox, j'aurais un bout de ma feuille de calcul à la place de la bannière.
Modifié par Ricou13 (13 May 2005 - 18:43)
Je me suis lancé dans le développement d'un site en essayant de respecter au mieux la séparation contenu/mise en forme avec les CSS.
J'essaye donc déjà de faire une mise en page sans tableaux mais je m'y perd encore dans le positionnement des blocs et la gestion des propriétés de positionnement, notament "position: fixed".
Voici ma page de conception en cours. Comme vous pouvez le voir, je n'en suis qu'au début. Ca promet...
La mise en page est la suivante :
- une bannière sur toute la largeur en haut et sur une hauteur de 81px.
- une image en haut à gauche, sous la bannière, complétant celle-ci
- un menu à gauche
- Le contenu de la page dans ce qui reste
Pour vous donner une idée, imaginez que la bannière représente un club de golf avec le manche à droite et la tête à gauche, que l'image complétant est une balle qui touche la tête du club et que le menu est... un menu !
il existe également un lien sur la tête du club qui ramène à la page d'accueil.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr">
<head>
<link href="librairie/Efi.css" rel="stylesheet" media="screen">
</head>
<body>
<div id="banniere">
<h1>BANNIERE</h1>
<a href="index.php" title="Retour à la page d'accueil">Page d'accueil</a>
</div>
<div id="menu">Pas encore créé</div>
<div id="contenu">
<strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.
Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.
</strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.
Donec euismod. Praesent mauris mi, adipiscing non, mollis eget,
...
etc. de façon à faire apparaitre la barre de défilement verticale
...
</div>
</body>
</html>et la feuille de style :
/**************************************************************************** Généralités *****************************************************************************/
body {
background: url("../images/fond-page.gif") white no-repeat fixed top left;
margin: 0; padding: 0;
border: 0;
top: 0; left: 0;
scrollbar-arrow-color: #FFCC00; scrollbar-face-color: #7189AB; scrollbar-track-color: #94A9CA;
font: 0.8em/1.5em arial, helvetica, serif;
}
/**************************************************************************** Bannière *****************************************************************************/
#banniere {
background: url("../images/en-tete.jpg") transparent no-repeat top left;
width: 100%;
height: 81px;
border: solid 1px red;
}
#banniere h1 {
margin: 0;
text-indent: -999em;
width: 130px; height: 81px;
background: url("../images/e-bas.gif") transparent no-repeat top left;
position: relative;
top: 81px;
border: solid 1px blue;
}
#banniere a {
position: absolute;
left: 13px; top: 7px;
display: block;
text-indent: -999em;
width: 130px; height: 61px;
border: solid 1px white;
}
Tel quel, la présentation fonctionne sous Firefox et IE6.
Mon pb est le suivant : je voudrais que cet ensemble (bannière, image + menu) ne défile pas avec la page (en utilisant "position: fixed") sachant que cela n'aura aucun effet sous IE, évidemment.
J'ai déjà commencé mes essai avec uniquement la bannière mais lorsque j'ajoute la propriété "position: fixed" dans "#banniere {", autant cela défile sous IE (comme prévu cela n'a rien changé), autant cela me fait un bloc transparent sous Firefox.
De plus, ce bloc prend toute la largeur et n'a plus la forme d'un "L" couché (le bloc de la balle fait maintenant toute la largeur) mais sont contenu est en fait un extrait de l'écran que je regardais juste avant. Si je travaillais sous Excel avant de basculer sous Firefox, j'aurais un bout de ma feuille de calcul à la place de la bannière.
Modifié par Ricou13 (13 May 2005 - 18:43)
)
