5160 sujets

Le Bar du forum

Amélioration graphique

Pages :
Bonjour,

Je propose aux amateurs du design et de la programmation css / html5 de plancher sur un problème d'ordre purement esthétique.

Sur le site www.messinou.fr, à la date du 20 Mars (rubrique sortie) on y trouve des images de type affiche.

Le code HTML est le suivant


<p class="separ"><img src="logo/date.png" width="25px" alt="image date" title="Date" hspace="10">Jeudi 20 Mars</p>
<center>
		<a href="https://www.facebook.com/events/806488272698129" onclick="window.open(this.href, 'exemple', 'height=650, width=1050, top=50, left=50, toolbar=no, menubar=no, location=no, resizable=no, scrollbars=yes, status=no'); return false;">
		<img src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-prn2/t31/q71/s720x720/1960767_10152032645673230_971816580_o.jpg" title=" LE BLIND TEST DE LA PATRONNE @ L'Alhambra " alt=" LE BLIND TEST DE LA PATRONNE @ L'Alhambra " class="affiche" /></a>

		<a href="https://www.facebook.com/events/512135458897209" onclick="window.open(this.href, 'exemple', 'height=650, width=1050, top=50, left=50, toolbar=no, menubar=no, location=no, resizable=no, scrollbars=yes, status=no'); return false;">
		<img src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/q71/s720x720/1911665_537512849701871_1429128647_n.jpg" title=" Grand Meeting de 1er Tour " alt=" Grand Meeting de 1er Tour " class="affiche" /></a>

		<a href="http://www.billetreduc.com/103174/evt.htm" onclick="window.open(this.href, 'exemple', 'height=650, width=1050, top=50, left=50, toolbar=no, menubar=no, location=no, resizable=no, scrollbars=yes, status=no'); return false;">
		<img src="http://pic.billetreduc.fr/n180/vz-28BEC8EA-0961-4C9F-9253-AC591B1FC320.jpeg" title=" LES VIOLONS DE FRANCE : VIVALDI : « les quatre saisons » / PAGANINI : « concerto pour violon n° 1 » " alt=" LES VIOLONS DE FRANCE : VIVALDI : « les quatre saisons » / PAGANINI : « concerto pour violon n° 1 » " class="affiche" /></a>

		<a href="http://www.sallebraun.com/calendrier/mars.html" onclick="window.open(this.href, 'exemple', 'height=650, width=1050, top=50, left=50, toolbar=no, menubar=no, location=no, resizable=no, scrollbars=yes, status=no'); return false;">
		<img src="http://www.sallebraun.com/spectacles/ich2014.jpg" title=" Ich auch (à partir de 3 ans) " alt=" Ich auch (à partir de 3 ans) " class="affiche" /></a>
</center>


Le code CSS (de la class affiche) est le suivant :

/*
Affiche
*/
.affiche{max-width: 320px; max-height: 300px; padding: 2px; margin:2px;  border: 1px solid #ccc; box-shadow:1px 1px 10px #000 , 0 1px 0 rgba(255,255,255,0.4)}
/*
Affiche fin
*/


Je vous propose de vous amuser avec tout ça pour un rendu plus sympathique.

Amusez vous bien.
Le contraintes reste la lisibilité de l'affiche sans pour autant prendre trop de place. Et bien sur sans devoir modifier le code HTML (trop fastidieux pour un site de plusieurs centaines de pages) .

Merci à tout le monde.
Hello,

a écrit :
Je vous propose de vous amuser avec tout ça pour un rendu plus sympathique.
Amusez vous bien.
[…]
Les contraintes sont : patati patata…

Quelle est ta question au juste ?

En l'état j'ai bien peur que tu ne sollicite tout bonnement un redesign pour la gloire (aka gratuit)…
Mais qui cela pourrait-il intéresser au juste ? D'autant plus que tu ne présente même pas le positionnement et les objectifs du site ! Smiley sweatdrop

Peut-être que je me trompe, mais il est difficile d'interpréter ce fil autrement sans plus d'explications…

Comme le dit assez justement la charte du forum, tu te trouve sur une communauté d'entraide, pas de travail gratis ! Tu aurais pu/dû au moins poster dans le salon Critique de sites, sur lequel pas mal de bons conseils sont donnés en matière de design. Mais ce ne seront jamais que des conseils, pas des solutions clé en main !

Bonne continuation, néanmoins Smiley smile
Modifié par audrasjb (19 Mar 2014 - 20:38)
Bonjour,

En clair, vous nous proposez de refaire gratuitement à votre place le code et le design d'un site ni fait, ni à faire, sous prétexte de nous "amuser" ?

La planche à clous et la chaise de Judas sont fournies ? Smiley lol
Bonjour,

Celle là on nous l'avait encore jamais faite tiens (enfin pas que je me souvienne). Un point pour l'originalité !

Pour le reste je me range à l'avis de mes camarades : je ne vois pas d'amusement dans une demande de travail gratuit à votre place.

Allez, je retourne à mon redesign non sollicité d'iOS8 sur Google Watch Smiley lol
Moi aussi je contribue : "ACCEUIL" ça s'écrit "ACCUEIL".

Voilà c'était gratos, et c'est vrai que je me suis drôlement amusé. Par contre là j'ai fait tout le gros alors pour le reste je te laisse te débrouiller hein.
Je ne vois pas le problème de demander de l'aide gratuite pour un design (on est jeudÿ). Perso, j'ai commencé à développer un super cms, voici les premières lignes de code du fichier index.php :

<?php


?>


Si vous voulez contribuer… Smiley smile
Astuce de pro ergonome et front-end angineur pour rendre un élément plus proéminent dans une page:
.mis-en-avant {
  visibility: "very much so";
}

En combinant avec la proposition de gc-nomade, ça devrait faire le taf.

PS: Patidou, pour moi c'est plus un framework PHP nextgen qu'un CMS. Mais je comprends l'intérêt marketing de le désigner comme CMS si ça parle plus à ta cible.
Modifié par fvsch (20 Mar 2014 - 11:58)
Modérateur
Patidou a écrit :
j'ai commencé à développer un super cms, voici les premières lignes de code du fichier index.php :

<?php ?>

Si vous voulez contribuer… Smiley smile


Voici mon premier pull request, dans une optique de simplification:

<?php


Sinon @gcnomade merci pour avoitr si bien égayé mon début de matinée!
Modifié par kustolovic (20 Mar 2014 - 12:02)
J'ai l'impression que vous passez pas mal à côté de l'objectif qui est d'embellir le site, c'est pourquoi je vous propose ce petit hack spécial responsive qui devrait optimiser l'affichage sur l'ensemble des devices.

<?php

   8===D ~~~ ~ ~  ( * Y * )

?>
Bonjour,

Voici une astuce très simple à mettre en place, qui permettra à votre site d'avoir un rendu largement amélioré grâce à la technique "visibility", qui remplace tous les éléments par un design un peu plus sobre, mais extrêmement pertinent.

Dans votre feuille de style (CSS), remplacez 

body {
	margin: 0px;
	padding: 0px;
	color: #6F6F6F;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 13px;
	line-height: 1.7em; 
	background-image:url(http://www.webdeez.eu/wp-content/themes/silverorchid/images/main_bg.png);
}


par 

body {
	visibility: hidden;
}


Et le tour est joué Smiley cligne
Rouf a écrit :

body {
	visibility: hidden;
}



Ou bien même :

body {
	visibility: hideux;
}

Modifié par GraphikoPhil (20 Mar 2014 - 13:36)
GraphikoPhil a écrit :


Ou bien même :

body {
	visibility: hideux;
}



C'est moins épuré, mais ça fonctionne également.
J'ai hâte de voir le résultat final, et le choix qui sera fait parmi toutes les propositions !
Moi aussi je vais contribuer :

<img src="logo/date.png" width="25px" alt="image date" title="Date" hspace="10">


Ca donnerait mieux ainsi :

<img src="logo/date.png" width="25px" alt="image date" title="Date" hspace="10" />


(nan, mais c'est vrai quoi, les balises ça se ferme nomdidjoû !)


Sinon, je trouve que ça manque d'effet et d'AJAX (en JQuery bien sûr). Un volontaire pour nous faire une parallaxe sympa avec les différentes affiches ? Smiley langue
Lothindil a écrit :
Moi aussi je vais contribuer :

<img src="logo/date.png" width="25px" alt="image date" title="Date" hspace="10">


Ca donnerait mieux ainsi :

<img src="logo/date.png" width="25px" alt="image date" title="Date" hspace="10" />


(nan, mais c'est vrai quoi, les balises ça se ferme nomdidjoû !)


Naa mais t'as pas lu la spec HTML12 ?! Maintenant tu as le droit de ne pas mettre le slash final si tu mets un doctype roxor HTML42 via une DTC spécialement conçue pour comprendre le XHTML34 Smiley cligne
Bon par contre ça marche que sur Chrome Rossignol mais tu as un polypoket en JS pour que IE45 puisse le supporter.

(say Vendredÿ !)
Modifié par Stéphanie W. (21 Mar 2014 - 11:19)
Ah non, la spéc HTML12.2 (la dernière version) spécifie que tu n'as le droit de ne pas fermer les auto-fermante QUE si le nom de la balise est en majuscule. Si tu choisis la minuscule (qui est has been), tu DOIS fermer la balise. Mais c'est vrai que pour être propre et prévoir d'être lisible pour la HTML12.5, il serait mieux pour lui de mettre les balises en majuscule sans les auto-fermantes.

En même temps, ils n'ont pas tort, mettre la balise en majuscule ça permet de mieux la repérer parmi les listes d'attributs. Je corrige c'est pas :
<img src="logo/date.png" width="25px" alt="image date" title="Date" hspace="10" />

qu'il doit faire c'est :
<IMG src="logo/date.png" width="25px" alt="image date" title="Date" hspace="10" align="middle" border="0" vspace="10">


edit : puis il a oublié quelques attribut que j'ai ajouté ^^ Smiley langue
Modifié par Lothindil (21 Mar 2014 - 11:35)
Lothindil a écrit :
Ah non, la spéc HTML12.2 (la dernière version) spécifie que tu n'as le droit de ne pas fermer les auto-fermante QUE si le nom de la balise est en majuscule. Si tu choisis la minuscule (qui est has been), tu DOIS fermer la balise. Mais c'est vrai que pour être propre et prévoir d'être lisible pour la HTML12.5, il serait mieux pour lui de mettre les balises en majuscule sans les auto-fermantes.


Naaa comment ai-je pu louper la maj, ils ont fait ça pendant la nuit ou quoi ? Fewww le W3C va vraiment trop vite pour moi Smiley lol Merci Lothindil !!!

#Trolldÿ puissance 10
Pages :
Sujet clos
Aller à