Mise en forme CSS, je débute...

Salut à tous,
Je débute en CSS. Je comprends à peu près le principe global de la mise en forme, mais bien sûr, comme à chaque fois que je veux me lancer dans un projet pour approfondire une technique, celui-ci sort un peu des sentiers battus et me voilà un peu perdu.
Voici le design général du site avec les différentes zones.


Comment dois-je m'y prendre pour monter ceci en CSS.
Je précise que le site sera centré et que par conséquent, du blanc viendra combler les côtés gauche et droite.
Le pied de page devra pouvoir éventuellement s'allonger en fonction de la longueur du contenu des déifférents espaces.
Je précise aussi qu'il y a les petits éléments gauche et droite qui viennent empiéter sur la zone centrale qui seront bien sûr gérés en PNG.

Par avance, merci de votre aide.
Gildas.

Salut et bienvenu,

Suivant ton screen, la mise en page est un peu fastidieuse et je pense que c'est faisable.

Dès à présent, ton logo sera en position absolu et le conteneur en position relative.

Pour le reste, regarde une mise en page avec coins arrondis. Je pense que ce sera bon.

++

PS : PNG ok ! Le gif c'est mieux pour le moment. Biloute n'aime pas la transparence du png
Modifié par Nolem (15 Sep 2007 - 12:02)

Bonjour,

Nolem a écrit :
PS : PNG ok ! Le gif c'est mieux pour le moment. Biloute n'aime pas la transparence du png

Le PNG-8 (équivalent du GIF, souvent plus performant lorsque créé avec un logiciel qui le gère correctement, donc pas Adobe Photoshop) est parfaitement supporté par IE6. Le PNG-24 avec transparence graduelle (couche Alpha) n'est par contre supporté qu'à partir de la version 7 (les autres navigateurs modernes se débrouillent très bien avec).

Si on veut utiliser du PNG-24, il faudra prévoir un mécanisme d'adaptation/dégradation gracieuse dans IE6 et inférieurs. Ça n'est effectivement pas évident, surtout pour un débutant. Voir tout de même les différentes techniques pour obtenir la transparence PNG graduelle sous IE6, et également se renseigner sur les commentaires conditionnels -- sur ce dernier point, voir la FAQ du forum.

Niveau positionnement, on aura effectivement un conteneur global de largeur fixe, centré via la technique des marges automatiques et positionné en relatif pour servir de référent à ses enfants et descendants positionnés en absolu. On pourra probablement positionner en absolu le lecteur de musique, le logo et le pied de page. Pour les deux colonnes de contenu, par contre, on se contentera de faire flotter à gauche la première en lui donnant une largeur fixe, et de donner une marge à gauche de la même largeur à la seconde (non flottante).

Florent V. a écrit :

...
Le PNG-8 (équivalent du GIF, souvent plus performant lorsque créé avec un logiciel qui le gère correctement, donc pas Adobe Photoshop) ...

Erf, je suis un utilisateur chevronné de toto. Peux tu m'en dire un peu plus ? Quel soft gère mieux le png ?

++

Nolem a écrit :
Erf, je suis un utilisateur chevronné de toto. Peux tu m'en dire un peu plus ? Quel soft gère mieux le png ?

The GIMP, sans conteste. Peut-être aussi Paint.NET. Ainsi que certains utilitaires type PNGcrush. Et plus largement tout logiciel pour lequel les développeurs ont fait l'effort d'offrir nativement un support correct de ce format.

Florent V. a écrit :

...utilitaires type PNGcrush. ...

Gimp, je m'en doutais un peu. Je vais voir de plus près pngcrush .

Merci du tuyau

++

petite précision pour les PNG, je me fous royalement des personnes qui seront sur IE6.
Internet Explorer n'est pas un navigateur dont je me préoccupe, il sera donc détecté au lancement du site et une invitation à utiliser Firefox sera mise en avant pour les malheureux qui utilisent encore le "logiciel" de microsoft.
La précision me paraissait utile

elmstreet a écrit :
il sera donc détecté au lancement du site

Pense aux commentaires conditionnels pour cette détection.

Un petit exemple de page d'information sur les navigateurs récents:
http://www.dogmazic.net/compil/navigateurs.html

Pour le PNG, Photoshop CS3 le gère très bien... aucun souci avec les PNG-24, ils ont bien un fond transparent, contrairement à CS2 ou je devais passer à chaque fois par Fireworks.
Sinon, je comprends bien l'histoire du centrage avec le margin 0 auto, ça c'est validé, mais après je ne vois plus comment segmenter mon histoire.
Le fait que le logo "sorte" de ma page à gauche, fait que je ne vois pas comment m'y prendre...
Pourriez-vous me détailler le principe de déclaration des différents éléments ?
Merci d'avance.

Salut,

regarde ceci :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
#bloc{width:400px;height : 200px;background-color: green;position: relative;/* !!! */} 
p { color:white; position: absolute /* !!!! */; bottom:0px;right:0px; /* left et top sont également dispo. Si l'objet en absolu et derrière un texte ou une image, rajout de la propriété z-index [cligne] */}
-->
</style>
</head>
<body>
<div id="bloc">
<p>mon texte se ballade !</p>
</div>
</body>
</html>

Si tu as des questions n'hésite pas.

++

oui, je comprends bien le principe de cet exemple.
Cela dit, le texte reste "enfermé" dans la boite verte.
Là, mon logo sort à gauche... Comment dois-je m'y prendre ?
L'idée c'est que le site dont les limites sont globalement représentées par le dégradé rouge fait environ 850px de large. Ce sera une largeur fixe et donc avec le ssystème Margin : 0 auto, ça le centre automatiquement dans la page. Bon ça c'est ce que je veux, que "visuellement" cette partie rouge soit au centre du navigateur.
Ensuite, je dois "poser" le logo en léger décalage à gauche, cad qu'il va "mordre" sur la partie blanche situé sur la gauche de ma zone centrale.
L'astuce simple consisterait à effectivement considérer une boite plus large contenant le logo, mais du coup, visuellement tout le site n'apparaitra pas centré puisqu'une partie de la zone blanche de gauche sera considérée comme faisant partie de ma zone qui va être en centrage auto...
Suis-je clair ?

elmstreet a écrit :
Ensuite, je dois "poser" le logo en léger décalage à gauche, cad qu'il va "mordre" sur la partie blanche situé sur la gauche de ma zone centrale.

Ça ne devrait pas être excessivement difficile:

#global {position: relative; width: 760px; margin: 0 auto;}
#logo {position: absolute; top: 50px; left: -30px;}

Les valeurs sont prises au pif.
Modifié par Florent V. (17 Sep 2007 - 16:27)

Florent V :

Attention, tu as fait une légère erreur. Tu as oublié :

#logo {position: absolute; }


elmstreet :

j'ai modifié la CSS pour mieux se rendre compte. Regarde les propriétés de <p> .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
#bloc{width:400px;height : 200px;background-color: green;position: relative;/* !!! */ margin : 0 auto;} 
p { color:blue; position: absolute; top :50px;left:-25px; /* left et top sont également dispo. Si l'objet en absolu et derrière un texte ou une image, rajout de la propriété z-index [cligne] */}
-->
</style>
</head>
<body>
<div id="bloc">
<p>mon texte se ballade !</p>
</div>
</body>
</html>

++

Nolem a écrit :
Florent V :

Attention, tu as fait une légère erreur. Tu as oublié :

#logo {position: absolute; }

Yep, faute d'inattention, autant pour moi.

Bon alors, j'ai pas mal galéré et tatonné et je suis parvenu à monter cette page...
Par contre j'ai vraiment l'impression que c'est du bidouillage, car j'y suis vraiment allé au pif.
Quelqu'un pourrait-il me valider mon code une fois que celui-ci sera mis au propre avec une css externe et en ligne ?

Salut elmstreet,

Peux tu mettre ton script sur le forum stp ?

++

elmstreet a écrit :
Quelqu'un pourrait-il me valider mon code une fois que celui-ci sera mis au propre avec une css externe et en ligne ?

S'il s'agit de valider la syntaxe, il y a le validateur automatique du W3C:
http://jigsaw.w3.org/css-validator/

Salut à tous, désolé pour cette longue absence, mais j'ai été pas mal pris...
Voilà, la page est en place et elle est visible ici :
http://www.1dlabel.com.

La prochaine étape est de faire un menu déroulant sur certaines entrées, notamment "artistes".
Pour ce menu, j'ai utilisé la technique du décalage vertical pour gérer les rollover.
Comment dois-je m'y prendre pour intégrer des menus déroulant maintenant ?
Merci d'avance pour votre aide.

Gildas.

elmstreet a écrit :
Comment dois-je m'y prendre pour intégrer des menus déroulant maintenant ?

Euh... aucune idée.
Les menus déroulants sont un sujet un peu ardu, surtout si on veut essayer de garantir un minimum de compatibilité et d'accessibilité.

Pour quelque chose de relativement simple il y a cet article par exemple:
http://www.alistapart.com/articles/dropdowns/ (ça date un peu, cependant)

Mais en dehors des questions spécifiques à l'accessibilité, c'est surtout l'ergonomie des sites utilisant des menus déroulant que je trouve très moyenne. On ne peut bien sûr pas généraliser à ce point, mais en général si on a besoin d'utiliser un menu déroulant c'est que l'on n'a pas assez réfléchi à l'organisation des contenus et à l'offre de navigation et plus généralement de communication du site.

là, le menu déroulant est fait pour répondre à une problématique précise qui est une liste d'artistes du label. Cette liste d'artiste est amenée à grandir et c'est selon moi la façon la plus logique d'organiser les choses.
Concernant le site, il se peut qu'il y ait des soucis pour y accéder aujourd'hui car nous sommes en pleine migration de serveur.
merci pour votre aide.