Découper une interface pour l'implémenter en XHTML/CSS

[Paul]

Bonjour,

Je suis en train de travailler sur une nouvelle interface pour Valhon, le jeu de rôle auquel je participe en tant que développeur. Et si le PHP ne me fait pas peur, autant vous dire que le XHTML et le CSS, c'est une autre affaire...

L'image se trouve ici, en résolution basse (meilleure image dispo sur demande). Ma grande question : comment découper au mieux l'interface et quelle structure de DIV utiliser ?



Les grandes contraintes sont les suivantes :

• Si le design a une largeur fixe, il doit être extensible en hauteur en 2 endroits (au centre, et sur le côté gauche), les 2 endroits qui ne sont pas encadrés par de la végétation ;
  
• L'avatar en haut à gauche change ;
  
• Les boutons en haut à gauche changent aussi (au survol de la souris et au clic notamment)
  

Je sais que c'est beaucoup demander, mais toute aide sera réellement appréciée (et à charge de revanche bien entendu ) !

Merci d'avance,
Paul

[Sephi-Chan]

Salut,

Le problème de ce design, c'est qu'il utilise de nombreuses textures qui — dupliquée de manière variable — risque d'avoir un rendu bizarre, je pense notamment au menu de gauche.

Je suppose que c'est le bloc contenant les connectés qui va s'étendre. Heureusement, les graphistes ont été sympas et on laissé un fragment où il n'y a ni bordure à gauche, ni à droite. C'est donc cette portion qui va être étendue.

Code :

<div class="connectes">
    <h3><img src="connectes.png" alt="Connectés" /></h3>
    <ul>
        <li>Tartuffe</li>
        <li>Arpic</li>
    </ul>
</div>

Le fond de ce bloc va devoir être découpé en 3 parties : le haut, le bas et le milieu.

Tu peux également utilise 2 images en découpant le haut et le reste, en faisant une image très haute pour le reste : tu dupliques la texture de fond sur 700 pixels et tu y ajoutes le bas du bloc. Mieux vaut le faire en 3 parties à mon sens.

Tu donnes au <div /> l'image de fond qui représente le bas de ton bloc, en attachant le fond au bas du bloc (background-position : bottom left;).

Tu donnes au titre l'image de fond qui représente le haut de ton bloc.

Ensuite, tu positionnes simplement ton titre en lui donnant les marges que tu veux.

Tu positionnes ensuite ta liste <ul /> en lui donnant comme fond la partie centrale du bloc.

Et voilà, ça roule. Le même principe s'applique pour le conteneur central. Tu peux jouer sur les marges négatives pour améliorer un peu le rendu, mais je te laisse expérimenter ça.

Pour tes effets de survols sur les boutons, je te conseille d'utiliser le principe des sprites CSS décrit sur Alsacréations - Une image réactive en CSS avec une seule image et sans javascript.

Voilà, si tu as des questions n'hésite pas ! J'aurais été ravi de t'aider à intégrer ce design mais j'ai pas le temps de m'y pencher.


Sephi-Chan

[Paul]

Ouais, les textures ont de quoi rendre fou. Je me suis rendu compte trop tard que les graphistes et moi aurions du plus communiquer (j'aurais notamment dû prêter plus d'attention à leurs WIP).

Je vais travailler sur ton idée. Pour le moment je ne me penche que sur la partie centrale, je vais donc essayer ta stratégie.

Je suppose que pour l'image du bas, je mets un background-position: bottom left et un background-repeat : no-repeat ?

Je pense que je reviendrai poster avec des problèmes plus spécifiques

[Paul]

Alors, voilà ce que j'ai concocté, pour le cadre central, suivant tes indications :

Code :

    <div id="centre_bas">
        <div id="centre">
            <h1><?=$titrePage?></h1>

            <!-- En cas de sortie non geree par le template -->
            <?if($contents):?>
                <?=$contents?>
            <?endif?>
            
        </div>
    </div>

Explications :

• Le "centre_bas" contient en image de fond l'image du bas.
  
• "centre" met l'image du centre (à savoir du beige au milieu et des bordures grises, j'aurais pu aussi mettre un centre moins large avec une couleur de fond répétée, c'est la même chose)
  
• Le titre a dans le CSS comme image de fond l'image du haut.
  

Problème : le motif du centre (beige + gris sur les côtés) recouvre l'image du bas ! J'ai pas trop trouvé comment éviter ça...

Voici le CSS :

Code :

div#centre_bas {
        background-image: url('./img3/centre_bas.jpg');
        background-position: bottom left;
        background-repeat: no-repeat;
        
        width: 556px;
        
        margin: auto;
}

div#centre {
        background-image: url('./img3/centre_milieu.jpg');
        background-repeat: repeat-y;
        
        margin:auto;
        
}

div#centre h1 {
        background-image: url('./img3/centre_haut.jpg');
        background-repeat: no-repeat;
        
        height: 296px;
        padding-top: 30px;
}

Une idée ?

[Paul]

J'ai trouvé une solution, au lieu de mettre le bas dans le div de base je rajoute un div à la fin, je mets le bas en arrière-plan et je le remonte à coups de margin négatifs. Je progresse

[Enneas]

je profite du topic de mon ami Paul pour poser une toute petite question, vu qu'il s'agit de la même interface.

L'interface actuelle (visible sur www.valhon.fr) est beaucoup plus légère que celle que l'on prévoit de mettre (qui est plus graphique, possède des textures, dans les menus et le cadre central etc etc)

ma question est donc la suivante quel est le poid "acceptable" pour l'ensemble d'une interface de jeu ?

[combo]

Tout dépend. L'interface peut très bien être mise en cache afin de ne pas beaucoup consommer.

[Sephi-Chan]

L'utilisation massive d'image n'est pas du tout un problème si on fait ça intelligemment.

Je te propose de jeter un œil au site Mozilla.org - Modules Firefox qui est un excellent exemple d'utilisation intelligente de sprites CSS, très bien expliqués sur Pompage.net - Sprites CSS : Meurs, découpe d’images, meurs !.

Le site entier utilise (presque) une seule image de fond tous les éléments (qui ont une image de fond, évidemment), il suffit ensuite de jouer sur la propriété background-position afin d'obtenir le résultat escompté.

Le gain en terme de performance est énorme puisqu'il réduit énormément le nombre de transferts HTTP nécessaire au chargement des éléments de la page (or, un navigateur n'en effectue que deux simultanément), puis le mets en cache. De plus, une grosse image est moins lourde que plusieurs petites (16.6 Ko pour une image de 1000 * 2000 px), donc le gain se fait vraiment à tous les niveaux.

Le résultat est évident pour l'utilisateur : la page se charge très vite et en une seule fois, les effets au survols sont instantanés dès le premier passage de la souris (il n'y a pas de deuxième image de survol à charger) et cette unique image est mise en cache immédiatement.



Sephi-Chan

[Paul]

Bonjour,

Je relance ce topic parce qu'après avoir fait de gros progrès sur l'interface, je bloque lamentablement depuis plusieurs semaines, et pour tout vous dire ça commence à me démotiver et me ralentir considérablement.

Mon problème majeur : sous Firefox, ca rend comme je veux, mais sous IE 7 pas du tout, les boutons du haut à gauche sont décalés.

Voici le rendu actuel : http://dvp.cinemaetc.com (la connexion a été désactivée).

Je joins les fichiers de CSS et le template HTML de la page d'accueil. Le fichier theme3.css est le fichier principal, et il inclut menu_droite.css et menu_gauche.css

Toute aide sera grandement appréciée pour que ce design ait un rendu correct sous IE7 (j'ai laissé tomber IE6).
N'hésitez pas à demander des précisions.

Merci d'avance,
Paul

[Sephi-Chan]

N'ayant pas IE à disposition, je me permet quand même de soulever un problème de rendu des PNG sur Safari dans sa version Mac OS X (la version pour Windows n'est pas concernée).



C'est un problème typique de Safari/Mac OS X car il est le seul à supporter les information (en l'occurrence le profil ICC) contenus dans un fichier PNG.


Sephi-Chan