5568 sujets

Sémantique web et HTML

Layout CSS [Résolu]

Bonjour,

J'ai un petit soucis avec un layout CSS.

Voici ce que je voudrais faire :

1 Header fixe non scrollable
1 Menu fixe non scrollable
1 Frame scrollable

Tout se passe bien, sauf que le scroll ne permet pas de descendre tout à fait à la fin de ma frame ...

J'ai mis un exemple ici, cela sera plus explicite :

http://www.moreau-fr.net/layout/

Si quelqu'un a une idée, je suis preneur.

Cordialement,

Laurent
Modifié par At_typique (09 Mar 2009 - 16:03)
Hello,

Je dirais que le problème vient de là :
.frame {
height: 100%; }

100% = hauteur de la fenêtre du navigateur.

Or, ta <div> .frame doit faire 100% - 130px (hauteur du header). D'où le bug (qui au final n'en est pas un Smiley cligne ).

Je ne vois pas de solution, à moins de passer par du javascript qui calculera la hauteur de .frame en fonction de la hauteur de #header...

Et une scrollbar sur toute la hauteur ça t'irait (header et menu toujours fixes bien sûr) ?
Modifié par BeliG (05 Feb 2009 - 16:27)
Tout s'explique ... merci pour ta réponse.

Je m'étais en effet rendu compte qu'en changeant à taton le height de la <div> .frame à 90%, puis 85% ... cela remontait la fin du scroll mais quid de la valeur exacte de ce %. Je comprends maintenant que cela équivaut à soustraire des pixels à des % Smiley confused

a écrit :
Et une scrollbar sur toute la hauteur ça t'irait (header et menu toujours fixes bien sûr) ?

Avec plaisir même !
Un début de piste à creuser :

<body>

     <div id="header">
          <!-- Header de 200px de haut sur toute la largeur -->
     </div>

     <div id="menu">
          <!-- Menu de 150px de large sur toute la hauteur -->
     </div>

     <div id="contenu">
          <!-- Contenu -->
     </div>     

</body>
div#header {
position:fixed;
top:0;
left:0;
width:100%;
height:200px;
background-color:olive; }

div#menu {
position:fixed;
top:200px; /*=hauteur header*/
left:0;
width:150px;
height:100%;
background-color:lightblue; }

div#contenu {
padding-top:200px; /*=hauteur header*/
padding-left:150px; /*=largeur menu*/}

Ça fonctionne chez moi sur Firefox / IE7.

Par contre le positionnement fixe ne fonctionnera pas sous IE6... Tu devras adapter avec du positionnement absolu, en passant par les commentaires conditionnels ou par la propriété "!important" :
div#menu {
position:fixed !important;
position:absolute;
[...] }


Bon courage, tiens moi au courant Smiley smile
Modifié par BeliG (05 Feb 2009 - 17:59)
Hello,

At_typique a écrit :
1 Header fixe non scrollable
1 Menu fixe non scrollable
1 Frame scrollable

Je glisse rapidement que ce genre de mise en page est souvent une erreur. Mais pas toujours, hein. Smiley cligne
Bonjour,

J'arrive à mes fins :

http://www.moreau-fr.net/proto/turbine/turbine.html

Ceci étant, 2 aspects m'échappent encore Smiley cligne :

1 - Pour les "note" je place une petite image GIF avant le titre de la note. C'est pourquoi je décale mon titre de 40 px vers la droite pour que l'image ne chevauche pas le dit titre, mais niet, cela ne joue pas.
<div class="note"><h3 class="title">le tire de la note</h3></div>

.note.title {padding-left:40px;}

.note {
	background: #fff url(resources/note.gif) no-repeat top left;
  	border: 1px dashed #800000;
	padding: 8px;
    font-size: 10pt;
    width:600px;
    font-family : Verdana, sans-serif;
    text-align: justify;

En revanche, si je fais :
.title {padding-left:40px;}

là cela fonctionne, tous mes titres sont bien décalés de 40 px, donc j'en conclu que la déclaration CSS est bonne mais c'est au niveau de l'imbrication du code html quelque chose ne joue pas ...

2 - je voulais mettre une bordure à gauche et en haut du contenu principal pour scinder le contenu et la pub, mais encore niet:
.contenu {
padding-top:90px; /*=hauteur header*/
padding-left:200px; /*=largeur menu*/
border-top-style: solid;
border-left-style: solid;
}


Merci pour vos conseils,

Laurent

PS :

a écrit :
Je glisse rapidement que ce genre de mise en page est souvent une erreur. Mais pas toujours, hein.

Je me demandais en effet pourquoi un grand nombre de sites "pro" n'utilisaient pas ce type de mise en page (Header fixe non scrollable, Menu fixe non scrollable, Frame scrollable) alors que cela semble plus logique de ne pas perdre son menu et header lors d'un scroll ... Pour ma part, vous avez compris que les raisons qui m'amènent à me pencher sur la question ne sont pas de cet ordre la, mais comme pour excuser, je dirais que comprendre cette philosophie du "tout scroll" pourra me servir plus tard, plus loin ...
At_typique a écrit :
Je me demandais en effet pourquoi un grand nombre de sites "pro" n'utilisaient pas ce type de mise en page (Header fixe non scrollable, Menu fixe non scrollable, Frame scrollable) alors que cela semble plus logique de ne pas perdre son menu et header lors d'un scroll ...

Parce que monopoliser une partie de l'écran (qui peut être considérable si l'en-tête est haut, le menu haut ou large, et l'écran réduit...), c'est diminuer d'autant l'espace disponible pour les contenus.

Les contenus fixes sont surtout utiles dans le cas d'une application web qui a un intérêt très fort à garder certains éléments de contrôle à l'écran en permanence.
Hello Smiley smile

Donc...

a écrit :
1 - Pour les "note" je place une petite image GIF avant le titre de la note. C'est pourquoi je décale mon titre de 40 px vers la droite pour que l'image ne chevauche pas le dit titre, mais niet, cela ne joue pas.
Voici ce que moi je lis dans le code CSS :
note.title {padding-left:240px;}
Il y a en fait 2 problèmes :
- Écrire "note" sans le "." signifie que tu cibles la balise <note>. Ce que tu cherches à faire ici, c'est appliquer un style à une <div> ayant une classe "note". Il faudra donc l'écrire ".note".
- En écrivant ".note.title" (les deux classes attachées), tu ne vises pas un élément avec une classe "title" dans un élément avec un classe "note", mais un élément doté de deux classes "note" et "title". Ton code fonctionne si tu souhaites cibler la <div> suivante.
<div class="note title">
     <!-- Bla -->
</div>

Or ton code ressemble à ça :
<div class="note">
     <h3 class="title">Bla</h3>
</div>

On accèdera donc à "title" en rentrant dans "note" :
.note .title {
padding-left:40px; }

Que l'on peut également écrire comme ça :
div.note h3.title {
... }
C'est l'écriture que j'utilise et je la trouve beaucoup plus confortable (on voit plus facilement sur quel type de balise on travaille).

a écrit :
2 - je voulais mettre une bordure à gauche et en haut du contenu principal pour scinder le contenu et la pub, mais encore niet:
border-top-style: solid;

Là tu définis seulement le style de la bordure, tu dois également préciser une épaisseur avec "width".
border-top-width:1px;

Mais que cette écriture est louuuuuuuuurde... Smiley eek

On écrira plutôt :
border:1px solid #000;
Le style, l'épaisseur et la couleur en une seule ligne Smiley cligne

A plus tard Smiley smile
Modifié par BeliG (09 Feb 2009 - 10:08)
Sujet clos
Aller à