Transformation de html/fireworks à css

Bonjour!

J'ai fait un site pour une amie avec Fireworks il y a 3 ans. Elle a de la difficulté à le mettre à jour (les éléments se déplacent, etc.) et j'essaie maintenant de le transformer avec les CSS pour qu'il soit plus stable, mais je désire garder quelques éléments faits avec tableau et images (Fireworks) pour ne pas avoir à la refaire entièrement. J'ai isolé chaque section de ma feuille de style, mais je n'arrive pas à trouver l'erreur...

J'ai cependant un problème avec le menu de gauche (je voudrais que le background soit gris jusqu'au menu principal situé en bas) et l'espace contenu (le fond devrait être blanc et ne pas afficher un espace gris dans la boîte texte)... J'essaie seulement de faire tout entrer serré... Pour plus de clarté voir à l'adresse suivante:

http://www.organicdesign.ca/kk/bio/b_cv.html - avec scroll
http://www.organicdesign.ca/kk/bio/b_cv2.html - sans croll
http://www.organicdesign.ca/kk/kk.css

J'aimerais aussi savoir comment enlever l'habillage de la barre de défilement.

Merci d'avance pour les conseils!

Pour tes div #contenuNormal et #contenuScroll, il me semble que le positionnement en relatif n'est pas ce qu'il y a de plus adapté. Un positionnement flotté à droite peut être pas mal, par exemple, en faisant attention à ne pas percuter le menu (sinon la zone de texte passera à la ligne).

Mais si on reste en positionnement relatif (pourquoi pas, après tout ?), je ne suis pas sûr que l'on puisse cumuler les propriétés top et bottom.

#contenuScroll {
	
	background: #FFF;
	width: 595px;
	height: 450px;
	overflow: scroll;
	position: relative;
	top: -201px;
	left: 135px;
	bottom: 50px;
	}
	
#contenuNormal {
	
	background: #FFF;
	width: 595px;
	position: relative;
	top: -201px;
	left: 135px;
	bottom: 50px;
	}

Arg, je viens de comprendre le problème !
J'aurais dû voir ça bien plus tôt (presque un quart d'heure que j'épluche la feuille de style, j'ai vraiment la boulet attitude !)

Bon, voilà d'où vient le problème :
Le positionnement en relatif permet seulement de décaler un élément par rapport à sa position normale. Mais les autres éléments interagissent avec cet élément décalé comme s'il était à sa position normale, non décalée. Du coup, ta zone de texte vient prendre toute la place nécessaire, et repousse le bas de la page (avec le menu en pied de page) autant que nécessaire pour afficher tout le contenu (ou pour afficher un bloc de hauteur 450px, si tu fixes ton bloc à 450px de hauteur). Ensuite, et ensuite seulement le décalage est appliqué, sans modifier quoi que ce soit à la position des autres éléments. Du coup, le pied de page reste à sa position normale. Et si tu remontes ton bloc de texte de 201px, cela te laisse un vide de 201px en dessous de ce bloc.

Je vois deux solutions :
- travailler avec des blocs flottés plutôt que des blocs en positionnement relatif ;
- utiliser un correctif à l'aide d'une marge négative.
Je détaille cette deuxième solution :

#contenuScroll {	
	background: white;
	width: 595px;
	height: 450px;
	overflow: auto;
	position: relative;
	top: -201px;
	left: 135px;
	margin-bottom: -201px;
	}

Note : j'ai modifié une chose ou deux, en particulier le overflow que j'ai passé en afin de supprimer la scrollbar en bas, et pour n'avoir de scrollbar que lorsque le contenu dépasse la hauteur alouée.

Le margin-bottom négatif n'aura pas d'effet dans IE Mac par contre (me semble-t-il), et on retrouvera cet espace vide. Mais c'est une dégradation acceptable, je pense.

On peut aussi avoir une marge négative de 150px si on veut ménager un espace vide de taille raisonnable pour la respiration du texte et de la page.
Modifié par mpop (11 Feb 2006 - 15:57)

Maintenant, des remarques générales :

Sur la hauteur de page fixe :
Les blocs avec scrollbar interne ne sont pas forcément une bonne idée. Dans ton cas, il s'agit d'une technique pour toujours garder à l'écran la zone de navigation (placée en pied de page), quelle que soit la longueur du contenu de page. Très bien. Sur un écran en 1024*768 et supérieur, ça passera sans problème. Même si sur un écran en 1280*1024 et supérieur, ça donnera quelque chose d'un peu petit. C'est le problème avec les designs non extensibles...

Mais sur un écran en 800*600 (20% des utilisateurs ?), la page, qui a une hauteur fixe de 450px + hauteur de l'en-tête + hauteur du pied de page (navigation) ne tiendra pas en hauteur dans la fenêtre du navigateur. On aura donc une scrollbar à droite pour l'ensemble de la page, et une autre pour la zone de contenu. Deux barres de défilement = une barre en trop !
De plus, le menu principal est caché, et il faut faire défiler la page (sans se tromper de barre de défilement) pour le voir apparaître.

Ce n'est pas absolument affreux et rhédibitoire, mais ça peut être gênant.

Sur le code de la zone de contenu :
Voici un extrait du code de la zone de contenu :

<p><b><font color="#336699">ACADEMIC BACKGROUND</font></b> <br>
      <b>Master's of Music in Performance (voice)</b>, 1986-90<br>
      University of Western Ontario, specialization in early and contemporary 
      music thesis: R. Murray Schafer's Theatre of Confluence in part published 
      in winter issue of Musicworks, Canadian Journal of Sound Exploration <br>
      <br>
      <b>Bachelor of Music</b>, 1984-86 <br>

      Concordia Univ./McGill Univ., specialization in performance, (theory and 
      ear-training at McGill) <br>
      <br>
      <b>Bachelor of Fine Arts in Studio Art, minor in literature</b>, 1979-82 
      <br>
      Concordia University, lithography, intaglio, serigraphy, painting and drawing  
    </p>
    <p><b><font color="#336699">PROFESSIONAL EXPERIENCE</font></b> <br>
      <b>Studio XX</b>, general director, spring 2002<br>

      <b>Rocketnetwork.com</b>, manager of online support, supervising an international 
      team of 9 professional musicians providing technical support 2000-02<br>
      <b>Multimedia Instructor</b> City College of San Francisco, 1999 <br>
      <b>Musical Directo</b>r First Congregational Church of Oakland, 1998 <br>

Il gagnerait à être non seulement simplifié, mais surtout rationalisé un peu !
Exemple (j'utilise la syntaxe XHTML, mais ça ne change pas grand chose) :

<h2>Academic background</h2>
	<p><strong>Master's of Music in Performance (voice)</strong>, 1986-90<br />
	University of Western Ontario, specialization in early and contemporary music thesis: R. Murray Schafer's Theatre of Confluence in part published in winter issue of Musicworks, Canadian Journal of Sound Exploration</p>
	<p><strong>Bachelor of Music</strong>, 1984-86<br />
	Concordia Univ./McGill Univ., specialization in performance, (theory and ear-training at McGill)</p>
	<p><strong>Bachelor of Fine Arts in Studio Art, minor in literature</strong>, 1979-82<br />
	Concordia University, lithography, intaglio, serigraphy, painting and drawing</p>

<h2>Professional experience</h2>
	<p><strong>Studio XX</strong>, general director, spring 2002</p>
	<p><strong>Rocketnetwork.com</strong>, manager of online support, supervising an international team of 9 professional musicians providing technical support 2000-02</p>
	<p><strong>Multimedia Instructor</strong>City College of San Francisco, 1999</p>
	<p><strong>Musical Director</strong>, First Congregational Church of Oakland, 1998</p>
	[etc.]

Les paragraphes (<p>) et les titres de sections (ici j'ai utilisé des <h2>) peuvent être stylisés via la feuille de style CSS. Les majuscules sont également disponibles par ce biais (pas besoin de les mettre dans le code... ce qui permet de changer d'avis pour la mise en page des titres sans aller changer tous les titres dans toutes les pages pour les mettre en minuscules).

Petit bug d'affichage :
Enfin, sur les pages données en exemple, le menu de navigation (pied de page) est décalé d'un ou deux pixels trop à droite, et du coup cela crée un décrochage par rapport au reste de la page. Pas très gênant, mais c'est un petit accroc esthétique.
Modifié par mpop (11 Feb 2006 - 16:21)