18041 sujets

Questions générales et questions de débutants

Découpe Final

Bonjour,

Je débute dans l'univers du CSS et du xHTML, et je me retrouve confronté à des interrogations dont je n'arrive pas à trouver la réponse, c'est pour cela que je fais appel à vous Smiley smile .

Avant toute chose, je tiens à dire que c'est un site dit "vitrine" qui ne seras agrémenter d'aucune publicité ou autre choses de la sorte. De plus, je ne souhaite pas un désign 100% extensible, je veux seulement que comme le site Alsacréation, celui ci se centre automatiquement.

Pour commencer, j'ai créer le design de mon site sous Photoshop, puis je l'ai ensuite découpé de la sorte :

http://cder-immo.fr/images/banniere.png

http://cder-immo.fr/images/menu.png

http://cder-immo.fr/images/corps.png

http://cder-immo.fr/images/footer.png

Pour arriver à ce résultat, une fois le CSS organisé : www.cder-immo.fr

Comme vous pouvez le constater, on peu dire que j'ai "deux fonds" un en dégradé bleu (j'ai pris une image de 1px de largeur, et 1500 de hauteur que j'ai répété) et un deuxième transparent qui encadre les éléments du site (pour ce deuxième fond, je l'ai pris dans la découpe des éléments bannière, menu etc).

Pour le menu je tiens à dire qu'il comprend 5 onglets (Accueil, nous connaitre etc), mais on m'a dit que je pouvais réaliser ces 5 liens sans probleme sur une image du menu sans la découper en 5 morceau... Ce que j'ai fait. Est ce la bonne solution sachant qu'après sous photoshop j'ai réaliser 5 onglets différents lors du passage de la souris? Pour résumé, j'ai fait une grande barre des menus (non détaché) pour l'état initial, et 5 petits boutons de couleur différentes qui se mettront "sur les liens" au passage de la souris ?

J'aimerai avant tout, savoir si ce découpage et bon ?

Si non, où ai-je fais des erreurs ? Et comment les réparer?
Bonjour,

Premièrement, est-ce normal que ton lien ne fonctionne pas ? Ce serait plus simple à comprendre si on pouvait voir.

Pour ce qui est du menu, il me semblerait plus simple de les faire en plusieurs images séparées, si tu veux faire un effet de survol.
Pour le menu, 3 images suffisent, les trois boutons du milieu sont les mêmes, suffit de le récupérer à chaque fois sauf si le texte sur les images n'est pas en html.

Au niveau du contenu, là je m'inquiète pour l'étirement vertical...
Il vaudrait mieux un background de couleur unie ou alors un dégradé du clair vers le foncé seulement.
Le lien remarche, vous pouvoir voir ce que ca donne Smiley smile

Et j'ai trois question qui me trottine dans la tete :


Voici ma première question :

J'aimerais dissocier le fond transparent des autres éléments (pour raisons esthétique) donc ce qui fera que j'aurai une image d'un rectangle, quelle code CSS et xHTML dois je lui appliquer pour qu'elle s'ajuste correctement avec les différents élément ?

Deuxième question :

J'ai expliqué dans le forum, mon probleme pour la barre des menus, quelle est la meilleurs solution vu que je souhaite qu'elle soit "animer" au survol de la souris? La découper en 5 images différentes ?

Dernière question :

J'aimerai savoir si quand je vais écrire le texte sur les bloc image de mon site, je peu situer celui ci ou je veux au pixel prés ?

Merci de vos réponse Smiley smile
Voici le tutoriel sur la creation de menu qui te sera utile, pour le menu, mais aussi pour le fonctionnement du CSS.
Aussi, il faut définir des blocs : entête, menu, contenu, footer, etc...
Par exemple, pour y mettre tes fameuses images de fond, il faut faire un truc du genre :

#contenu
{
 ...
 background : url(images/corps.png) no-repeat... ;
 ...
}


Après, à toi de voir pour donner une taille fixe, etc... (Attention toutefois à ton image, je vois que corps.png est entourée de bleu, ça peut propovoquer une incohérence avec le fond)

Sinon, le positionnement en CSS est relativement délicat, mais il existe de très bon et très nombreux tutoriaux sur le sujet.
Merci de ton explication, mais j'aimerai deux réponses concret avant de me lancer, histoire de pas tout faire pour rien..

Dois je bien couper mon menu en 5 pour pouvoir ensuite faire un effet survol ?

Puis je placer mon rectangle transparent tout autour du site via le css ?
Bonjour,

Cocopop a écrit :
J'aimerais dissocier le fond transparent des autres éléments (pour raisons esthétique) donc ce qui fera que j'aurai une image d'un rectangle, quelle code CSS et xHTML dois je lui appliquer pour qu'elle s'ajuste correctement avec les différents élément ?

Pas compris la question. Que signifie «s'ajuster correctement»? Tu as une image rectangulaire de hauteur X, et tu veux qu'elle s'étire toute seule pour prendre une hauteur Y qui dépendra du contenu du bloc? Si c'est le cas, tu vas déchanter, car c'est impossible. Smiley ohwell

Cocopop a écrit :
J'ai expliqué dans le forum, mon probleme pour la barre des menus, quelle est la meilleurs solution vu que je souhaite qu'elle soit "animer" au survol de la souris? La découper en 5 images différentes ?

Ben ça dépend ce que «animer» recouvre. Il s'agit de faire des boutons avec deux états (normal, survol)? Ou bien carrément d'avoir une animation complète lors du survol?
Premier cas: on utilisera à priori des images et un peu de Javascript.
Deuxième cas: ça sera à priori un menu en Flash.

Cocopop a écrit :
J'aimerai savoir si quand je vais écrire le texte sur les bloc image de mon site, je peu situer celui ci ou je veux au pixel prés ?

Non, tu ne peux pas, parce que tu ne sais pas quelle place prendra ton texte. Tu peux placer les coins haut-gauche et haut-droit à l'endroit voulu (peut-être au pixel près), mais ça se limite à ça. Le reste dépendra de la quantité de texte, de la taille du texte définie par l'utilisateur, de la police utilisée par le navigateur, etc. Plein de paramètres que l'on ne peut pas contrôler.
a écrit :
Pas compris la question. Que signifie «s'ajuster correctement»? Tu as une image rectangulaire de hauteur X, et tu veux qu'elle s'étire toute seule pour prendre une hauteur Y qui dépendra du contenu du bloc? Si c'est le cas, tu vas déchanter, car c'est impossible.


Sur mon site cder-immo, comme tu peu le constater j'ai un fond en dégradé, et un "fond" transparent" qui fait le tour des éléments du site. Pour l'instant j'ai découpé ce fond transparent avec les élements, et j'aimerai le dissocier, c'est à dire avoir une image rectangulaire transparente que je placerai bien centré par rapport aux élément, est ce possible ?

a écrit :
Ben ça dépend ce que «animer» recouvre. Il s'agit de faire des boutons avec deux états (normal, survol)? Ou bien carrément d'avoir une animation complète lors du survol?
Premier cas: on utilisera à priori des images et un peu de Javascript.
Deuxième cas: ça sera à priori un menu en Flash.


Je veux simplement une animation lors du survol, donc je dois opter pour 5 images en non survol et 5 images en survol c'est ca ?

a écrit :
Non, tu ne peux pas, parce que tu ne sais pas quelle place prendra ton texte. Tu peux placer les coins haut-gauche et haut-droit à l'endroit voulu (peut-être au pixel près), mais ça se limite à ça. Le reste dépendra de la quantité de texte, de la taille du texte définie par l'utilisateur, de la police utilisée par le navigateur, etc. Plein de paramètres que l'on ne peut pas contrôler.


Donc, en gros, je pourrai que centrer mon texte dans l'image, ni plus ni moins ?

Et encore merci de ton aide
Modifié par Cocopop (07 Aug 2007 - 16:15)
Cocopop a écrit :
Sur mon site cder-immo, comme tu peu le constater j'ai un fond en dégradé, et un "fond" transparent" qui fait le tour des éléments du site. Pour l'instant j'ai découpé ce fond transparent avec les élements, et j'aimerai le dissocier, c'est à dire avoir une image rectangulaire transparente que je placerai bien centré par rapport aux élément, est ce possible ?

Tu peux utiliser une structure HTML de ce type:
<body>
<div id="global">
	<div id="en_tete"></div>
	<div id="menu"></div>
	<div id="corps"></div>
	<div id="pied_de_page"></div>
</div>
</body>

Au passage, tu as actuellement un body en 760px de largeur, qui contient des blocs de 814px de largeur. C'est assez incohérent. De plus, il n'est pas conseillé de donner une largeur fixe ou des marges automatiques à body, pour des raisons que je ne détaille pas ici. On aura donc plutôt intérêt à utiliser div#global pour dimensionner et centrer la «page»:
div#global {
	width: 814px;
	margin: 0 auto;
}
div#en_tete {
	width: auto; /* ou plutôt, ne pas donner de largeur */
	height: Npx;
}
/* etc. */

Une fois que cette base est en place, on peut utiliser div#global pour lui donner, par exemple, une image de fond bleue claire translucide (en PNG-24) de 100x100px.

Si besoin, on mettra ensuite des marges latérales (à vue de nez: 20px) aux enfants de div#global, pour réduire leur largeur (814 - 20 - 20 = 774px).

Cocopop a écrit :
Je veux simplement une animation lors du survol, donc je dois opter pour 5 images en non survol et 5 images en survol c'est ca ?

Par exemple, oui. Disons qu'on peut avoir quelque chose de ce genre:
<ul>
	<li><a href="..."><img src="..." alt="Accueil" /></a></li>
	<li><a href="..."><img src="..." alt="Nos services" /></a></li>
	<li><a href="..."><img src="..." alt="Nos produits" /></a></li>
	<li><a href="..."><img src="..." alt="Mary Poppins" /></a></li>
	<li><a href="..."><img src="..." alt="Contact" /></a></li>
</ul>

Avec ce genre de code, et un petit peu de CSS qui va bien, tu obtiens cinq boutons cliquables et accessibles. Il suffit de rajouter une surcouche Javascript pour les effets de survol (c'est à dire qu'au survol d'une des images, on va changer la valeur de son attribut src... c'est un grand classique, il y en a des exemples un peu partout sur le Web).

Cocopop a écrit :
Donc, en gros, je pourrai que centrer mon texte dans l'image, ni plus ni moins ?

Non, tu peux faire un certain nombre de choses en exploitant les propriétés CSS de positionnement, et celles de mise en forme du texte. Mais le résultat ne sera pas garanti «au pixel près».
Sujet clos
Aller à