3246 sujets

Critiques de vos sites: code et design

[PRO] www.bluebox-chartres.com

Pages :
Modérateur
(reprise du message précédent)

Hello,

pika28 a écrit :

J'ai pas de maquette, je travaille comme ça... [...]


Pas bien. Il faut un minimum. Prend pour habitude d'au moins crayonner sur papier (placer les éléments) que tu mettras sur la page. Surtout si tu n'as pas l'habitude Smiley cligne

pika28 a écrit :

[...]
- Pourrais tu m'expliquer comme refaire le même style photo en photoshop ou me filer ton style que l'import dans photoshop directement? Smiley langue
[...]


* Tu récupères la sélection de ta photo (ctrl+clic gauche sur calque)
* menu sélection/modifier/dilater
* choisir une valeur entre 5 et 10 px (suivant l'oeil)
-> Tu remarqueras que les coins « s'arrondissent » automatiquement.
* nouveau calque
* remplir le calque de blanc (maj+back-space)
* passer le calque en dessous
* effet de calque->ombre portée
* joindre les deux calques

pika28 a écrit :

[...]
- Pour le background, je pensais garder ton style mais avec la même chose en bas pour le footer inversé, c'est juste que du coup le menu fait quiche...
Exemple


Attention, une mise en page linéaire risque d'ennuyer ton lecteur. Ce n'est pas le but recherché, n'est ce pas ? Là, dans ton cas :
en-tete/menu,
puis « bienvenue »,
puis « vos conseillers »,
puis galerie photos
et pour finir le footer. Smiley tired

Si tu fais une belle mosaïque de tes éléments, la mise en page sera automatiquement plus attrayante. Par exemple, comme je t'ai mis les photos : Smiley murf
1 il y a un appel vers une galerie potentielle
2 mise en page non linéaire
3 créativité du footer beaucoup plus vaste
Modifié par Nolem (18 Nov 2009 - 22:27)
Nolem a écrit :

* choisir une valeur entre 5 et 10 px (suivant l'oeil)
-> Tu remarqueras que les coins « s'arrondissent » automatiquement.
* nouveau calque

Oui d'ailleurs je sais pas d'où leur vient cette idée saugrenue de chanfreiner les coins (c'est pas tout à fait arrondir) je trouve ça absurde. Je pense que c'est un bug (toujours pas résolu depuis le temps?!).
Pour ma part, j'évite ça en faisant Q (mode masque donc), le filtre maximum du nombre de pixel souhaité et de nouveau Q pour retrouver sa sélection, c'est ce que j'ai trouvé de plus efficace, la transformation de la sélection engendrant de léger contours progressifs (lorsqu'on augmente sa taille).
Modifié par Hermann (18 Nov 2009 - 23:19)
Modérateur
Hermann a écrit :

Oui d'ailleurs je sais pas d'où leur vient cette idée saugrenue de chanfreiner les coins (c'est pas tout à fait arrondir) je trouve ça absurde. Je pense que c'est un bug (toujours pas résolu depuis le temps?!).


C'est vrai que logiquement il devrait faire une coupe droite. Ça peut être gênant sur certains détourages.

Hermann a écrit :

[...] le filtre maximum du nombre de pixel souhaité et de nouveau Q pour retrouver sa sélection, [...]


Après être passé en Alpha, j'ai pas bien saisie ta technique.

Pour ma part, je reprends ma sélection que je transforme. Je t'avoue que c'est un peu du « pifomètre » Smiley langue . Par contre, si j'ai besoin d'être plus précis, illustrator oblige. Smiley murf

Bonne soirée à toi Hermann. Smiley smile
Nolem a écrit :

Après être passé en Alpha, j'ai pas bien saisie ta technique.

Le mode masque (souvent sous exploité) ouvre des possibilités énormes (combinaison de sélection progressive et non progressive à la volée...).
Dans ce cas le filtre Maximum (ou minimum) permet d'augmenter la taille de la forme correspondant à la sélection du nb de px souhaité et de revenir en mode normal pour retrouver la sélection, c'est très commode Smiley cligne

a écrit :
Pour ma part, je reprends ma sélection que je transforme. Je t'avoue que c'est un peu du « pifomètre » langue . Par contre, si j'ai besoin d'être plus précis, illustrator oblige. murf

Oui mais comme je te l'expliquais plus haut, un agrandissement de la sélection (au delà d'un certain % d'agrandissement) engendre des contours progressifs (léger certes) un peu comme le flou généré lors d'une interpolation d'image.
Modérateur
Hermann a écrit :

Le mode masque (souvent sous exploité) ouvre des possibilités énormes (combinaison de sélection progressive et non progressive à la volée...).
Dans ce cas le filtre Maximum (ou minimum) permet d'augmenter la taille de la forme correspondant à la sélection du nb de px souhaité et de revenir en mode normal pour retrouver la sélection, c'est très commode Smiley cligne


Exact, les couches sont souvent mal exploitées. Une fois qu'on a bien compris les couches, les masques de fusions, certaines textures, effet d'éclairages, etc. ça devient une évidence et facile à réaliser. Il y a même certains types de détourages où je me base sur une couche.

filtre divers/maximum ou minimum
+1 et merci Smiley smile

Hermann a écrit :

[...]
Oui mais comme je te l'expliquais plus haut, un agrandissement de la sélection (au delà d'un certain % d'agrandissement) engendre des contours progressifs (léger certes) un peu comme le flou généré lors d'une interpolation d'image.
[...]

Tu n'as pas tout à fait saisie mes propos :
* récupération de la sélection
* être sur un outil de détourage
* bouton droit/transformer la sélection sur l'objet
* après je joue avec alt ou maj ou les deux ensembles
Modifié par Nolem (19 Nov 2009 - 02:10)
Hermann a écrit :
Tout simplement parce que tous les enfants directs (div) du div conteneur sont positionnés de manière absolue et qu'ils n'ont par conséquent aucune incidence sur la calcul de la hauteur de leur bloc conteneur puisqu'ils sont sortis entièrement du flux normal.
Le bloc conteneur n'a donc pas de hauteur et le backgroun ne pourra donc pas s'afficher.
D'autre part la solution de facilité du positionnement absolue est à utiliser en dernier recours, tu dois privilégier le placement des bloc en les conservant dans le flux normal. Revoir les bases sur ce forum si c'est pas compris Smiley cligne


Je vais revoir aujourd'hui l'ensemble de mes positions en mettant tout en relative. Je ne pensais pas que cela avait une importance et effectivement, j'avais trouvé l'absolute plus simple...

Pourriez vous me dire en quelques mots pourquoi est ce préférable d'utiliser le relative systématiquement et l'absolute en dernier recourt...

Merci encore Smiley langue
Modérateur
Hello,

Pour répondre à ton problème, il te faut un bloc conteneur qui te permet de canaliser tes éléments et ton flux. Ce bloc conteneur doit être positionner en relatif (mode « défaut ») qui suit le flux.

Herman a écrit :

[...]
positionnement absolue est à utiliser en dernier recours, tu dois privilégier le placement des bloc en les conservant dans le flux normal.
[...]


Je ne suis pas aussi catégorique pour le dernier recours. Je dirai plutôt que le positionnement absolu est à utiliser avec parcimonie (avec qui ? Smiley lol ) et lorsqu'il y a nécessité. Rares sont les nécessités puisque dans un positionnement relatif tout peut être réalisable sauf :

Par exemple, nous avons un bloc conteneur centré en relatif qui permet de canaliser son flux (@pika28 Smiley cligne ), et un paragraphe à l'intérieur. Nous voulons que ce paragraphe soit en bas à droite de son père (un bloc conteneur). Par défaut, le body est le père, le grand père, arrière grand-père,... Or, nous voulons que le paragraphe soit positionné suivant un aïeul précis non pas le grand aïeule (le body). Le bloc conteneur aura l'instruction (position relatif) et le fils aura les instructions (position absolu + les propriétés de positionnement right, bottom).

Pour mieux comprendre mon propos je te propose de lire ce qui suit :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
		<title>un titre</title>
		<style type="text/css">
			body{
				text-align:center; /*centrer */
			}
			#pere{
				text-align:left;
				margin:0px auto; /*centrer */
				background-color:teal; /*optionnel */
				width:800px; /* définir sa largeur puisque 100 % de large = aucun centrage */
				height:300px; /*optionnel */
				
				/* pour éléments mis en absolu -> identifiant fils */
				position:relative;
			}
			#fils{
				height:30px; /*optionnel */
				background-color:green; /*optionnel */
				position:absolute;
				bottom:5px;
				right:5px;
			}
			#un_bloc{
				background-color:red; /*optionnel */
				width:100px; /*optionnel */
			}
			
		</style>
	</head>

	<body>
		<div id="pere">
			<div id="un_identifiant_qui_est_un_enfant_aussi">
				<p>je fais parti de bloc et je suis dans le flux</p>
				<p id="fils"> un texte en position absolue (donc, plus dans le flux)</p>
				<!-- des enfants, des frères, du contenu, etc.-->
			</div>
			<!-- des enfants, des frères, du contenu, etc.-->
		</div>
	</body>
</html>


Comme j'ai un peu de mal à expliquer mon propos et qu'il faudrait encore développer dessus, je t'invite à lire ou à relire ces deux cours :
* Initiation au positionnement en CSS
* Initiation au positionnement CSS (partie 2)

Bonne après midi à toi.
Modifié par Nolem (19 Nov 2009 - 16:27)
Nolem a écrit :

Comme j'ai un peu de mal a expliquer mon propos et qu'il faudrait encore développer dessus, je t'invite à lire ou à relire ces deux cours :
* Initiation au positionnement en CSS
* Initiation au positionnement CSS (partie 2)

Bonne après midi à toi.


Merci Nolem pour tes réponses, j'ai dejà lu plusieurs fois ces tutos, j'ai modifié mon css et la structure de mon html pour avancer un peu mais il reste quelque bugs :

- le premier la hauteur du div contenu ne s'ajuste pas à son contenu... Smiley langue
J'ai pourtant pris exemple sur le gabarit 03 de alsacreations

- le deuxième, rendu est ok sous Firefox mais super à l'ouest dans IE6
les navigateurs n'interprete pas le relatif de la meme facon?

PS : j'ai volontairement mis des couleurs de fond pour mieux comprendre...
Modifié par pika28 (31 Dec 2009 - 09:58)
Modérateur
a écrit :

les navigateurs n'interprete pas le relatif de la meme facon?


Parce que IE interprète pas les marges de la même manière.

Sur FF 3.5.5 pas de soucis. Cependant, ce n'est pas ce gabarit là qu'il te faudrait si tu veux reprendre la mise en page d'hier. En résumant, ça serait un truc comme ceci :


	<body>
		<div id="en_tete">
			<div id="contenu_entete">
				<!-- éléments d'entete : logo, menu, etc. -->
			</div>
		</div>
		<div id="global">
			<div id="contenu">
				<!-- éléments contenu : texte principale, sous-menu, etc. -->
			</div>
		</div>
		<div id="pied">
			<div id="contenu_pied">
				<!-- éléments pied : liens annexes, coordonnées, etc. -->
			</div>
		</div>
	</body>




#contenu_entete,#contenu,#contenu_pied{
	text-align:left;
	margin:0px auto;
	width:800px; /*à définir */
}

Modifié par Nolem (19 Nov 2009 - 16:56)
Nolem a écrit :
Ce bloc conteneur doit être positionner en relatif (mode « défaut ») qui suit le flux.
Je sais pas ce que tu entends par mode défaut mais ajouter position:relative n'équivaut pas à ne déclarer aucun positionnement.
Le positionnement relatif peut par exemple permettre à un bloc se situant sous un autre bloc dans le flux html de passer au premier plan.

Nolem a écrit :

Je ne suis pas aussi catégorique pour le dernier recours. Je dirai plutôt que le positionnement absolu est à utiliser avec parcimonie (avec qui ? Smiley lol ) et lorsqu'il y a nécessité. Rares sont les nécessités puisque dans un positionnement relatif tout peut être réalisable sauf :

Salut Nolem,
oui merci je connais ça et il n'y a effectivement à ma connaissance pas d'autres solutions envisageable pour obtenir la même configuration (sauf via un tableau peut-être). Quand je dis en dernier recours c'est juste qu'il faut privilégier le flux normal. Smiley cligne

Le positionnement absolue peut poser des problèmes pour les raisons suivantes:

> la non linéarisation des contenus et donc inaccessibilité visuelle en cas de diminution du viewport ou de visualisation sur petites écrans
> les risques de chevauchement de contenus et de non dégagement des blocs se trouvant en dessous des blocs positionnés de manière absolue en cas de zoom texte.
> Perturber l'ordre naturel de tabulation au cas ou l'ordre d'affichage des bloc est différents de l'ordre des blocs dans le code.
Nolem a écrit :

Parce que IE interprète pas les marges de la même manière.
Sur FF 3.5.5 pas de soucis.


J'ai testé avec * { margin:0 ; padding0; } et ça n'a rien changé... j'ai toujours ce foutu décalage
Modifié par pika28 (31 Dec 2009 - 09:59)
Modérateur
Hello Hermann,

Hermann a écrit :

oui merci je connais ça et il n'y a effectivement à ma connaissance pas d'autres solutions envisageable pour obtenir la même configuration (sauf via un tableau peut-être). Quand je dis en dernier recours c'est juste qu'il faut privilégier le flux normal. Smiley cligne
[...]

Je me doute que tu saches cela. Cependant, je voulais juste ajouter une précision.

pika28 a écrit :

J'ai testé avec * { margin:0 ; padding0; } et ça n'a rien changé... j'ai toujours ce foutu décalage


C'est normal, puisque index1, index2, etc. sont en position absolue alors que ce n'est pas la peine.

À vue de nez ou du moins dans ce goût là, et suivant ce que tu veux faire :

#index1,#index3{
	float:left;
}
#index2{
	margin-left:210px; /*définir */
	clear:right;
}
#index4{
	margin-left:210px; /*définir */
	clear:right;
}

Modifié par Nolem (19 Nov 2009 - 18:34)
Nolem a écrit :

C'est normal, puisque index1, index2, etc. sont en position absolue alors que ce n'est pas la peine.


On va traiter probleme par probleme... Je voudrais déjà résoudre le probleme de la hauteur du <div id="contenu"> qui a un fond bleu. Il ne s'adapte pas tout seul à la hauteur des quatre bloc contenu (index-1 à index-4).
Modifié par pika28 (31 Dec 2009 - 09:59)
@AspiGeek / @Nolem : Désolé pour le doublon... J'avais pas fait gaff...

J'ai reproduit le même principe avec le header, les deux logos en float left et right et le text au centre...

Si j'ai bien compris les bases de ce positionnement, on doit placer les blocs principaux header, menu, contenu, footer en relatif et l'ensemble des blocs intérieurs ne doit pas être placer avec un position:xxxxxxxxxxx....
==> Corriger moi si je me trompe. Je ne chercher pas la règle parfaite mais plutot la méthode basique pour un site basique comme le miens

- Voila ou j'en suis... J'ai utilisé pour finir le padding pour placer les blocs à l'intérieur du bloc contenu.
Est ce la bonne façon de faire?

- J'ai toujours une interprétation différente dans IE6/IE7, dans IE8 et autres.... Comment ça se fait? Je précise que j'ai testé avec * { margin:0 ; padding:0 } en début de css et ça n'a rien changé.
Une idée ?

J'apprends tous les jour un peu plus grâce à vous tous. MERCI et encore MERCI....

Pika28
Modifié par pika28 (31 Dec 2009 - 10:00)
pika28 a écrit :

Si j'ai bien compris les bases de ce positionnement, on doit placer les blocs principaux header, menu, contenu, footer en relatif et l'ensemble des blocs intérieurs ne doit pas être placer avec un position:xxxxxxxxxxx....
==> Corriger moi si je me trompe. Je ne chercher pas la règle parfaite mais plutot la méthode basique pour un site basique comme le miens

Pas bien compris non. Contente toi d'utiliser la propriété float pour placer plusieurs blocs l'un à côté de l'autre (Voir les tutos pour les détails)


pika28 a écrit :
- J'ai toujours une interprétation différente dans IE6/IE7, dans IE8 et autres.... Comment ça se fait? Je précise que j'ai testé avec * { margin:0 ; padding:0 } en début de css et ça n'a rien changé.
Une idée ?

Les raisons qui provoquent des différences d'affichage sont multiples: haslayout pour IE6/7 (voir FAQ), fusion des marges différentes (voir le tuto de Florent V), absence d'implémentation
ou implémentations erronée des specs CSS, bugs d'affichage...
Modifié par Hermann (20 Nov 2009 - 14:00)
Salut,

Je n'ai pas trop lu ce qui s'est dit plus haut mais au premier coup d'oeil je trouve ta charte un poil bourrine, ce bleu uni en fond bouche (trop) l'espace, un fond clair aurait été moins frontal et à mon avis plus corporate.

Sinon tes logos sont tout crénelés, Anti-aliasing please !

Pour le reste c'est très scolaire mais il y a de bons points, notamment le texte qui respire bien, la gestion des espaces, tout ça. Smiley cligne
Modifié par STPo (20 Nov 2009 - 17:40)
STPo a écrit :

Sinon tes logos sont tout crénelés, Anti-aliasing please !


Complétement d'accord mais je suis vraiment naze avec photoshop, tu le gère à quel moment ton anti-aliasing?
J'avance tout doucement, je suis en train de revoir page par page. Ca doit pas encore être parfait mais bon je dégrossi tout et retire les absolute tout doucement.

Je suis bloqué sur la page solariums.html, je ne comprends pas pourquoi IE6 me centre le tout et pas firefox... On dirait que IE6 récupère le margin-left:auto et margin-right:auto du div id="divprin"...

[EDIT] :
Je viens de tester avec IE Tester, les blocs sont centrés avec les version 5.5, 6 et 7. Ce qui exclu pour moi l'héritage du margin-left:auto et margin-right:auto du div id="divprin" puisque cette propriété de fonctionne pas avec IE5.5 et le texte est tout de même centré avec IE5.5....

Avec IE8 et FF3.5.5, les blocs se placent à droite...

Quelqu'un à une idée?
Modifié par pika28 (20 Nov 2009 - 21:29)
+1 pour les remarque de STOp
pika28 a écrit :

Complétement d'accord mais je suis vraiment naze avec photoshop, tu le gère à quel moment ton anti-aliasing?

Si les claques des noms des logos sont des calques texte, ça se gère dans la barre d'option (en haut) de l'outil Texte, tu ne dois pas avoir l'aliasing qui pointe sur "Sans".
Sinon l'anti-anliasing est géré naturellement par Photoshop.
Comment tu t'en est pris pour obteniur cette image (à partir du JPEG ou d'une source brute)?
Modifié par Hermann (21 Nov 2009 - 14:31)
Pages :
Sujet clos
Aller à