Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1558 connectés 

 


 Mot :   Pseudo :  
 
 Page :   1  2
Page Suivante
Auteur Sujet :

[Genghis77]Preparation de mon site : Avis et commentaires welcome

n°1120526
Skopos
Titilleur de nombrils...
Posté le 29-12-2010 à 09:00:53  profilanswer
 

Reprise du message précédent :
oui sauf qu'on a pas parler d'élements vides ;).
Les boutons ici sont des éléments d'une liste, le 1er <li> va contenir "Services" et le bg de cet élément, le graphisme.


---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR
mood
Publicité
Posté le 29-12-2010 à 09:00:53  profilanswer
 

n°1120534
liverpowen
Profil : Friche Culturelle
Posté le 29-12-2010 à 10:22:29  profilanswer
 

liverpowen a écrit :

Bonne balade dans le monde du CSS mon petit gars  :D  
tiens, je ne sais pas si on te l'a déjà donné ou pas, mais c'est un très bon site traitant du CSS (et dont l'auteur était HFRien il me semble)  
http://www.alsacreations.com/
 
 :)


 

Skopos a écrit :

(et n'hésite pas à te plonger dans alsacreation !)


même pas il dirait merci le mec  
 
 [:c0rent1n]


---------------
OUAIB | FLICKR | HFR | 500 PX
n°1120537
genghis77
-_-'
Posté le 29-12-2010 à 10:31:13  profilanswer
 

Merci Liver et les zotres :jap:
 
:spamafote:


---------------
Genghis achat/vente
n°1120542
liverpowen
Profil : Friche Culturelle
Posté le 29-12-2010 à 11:00:15  profilanswer
 

de rien :spamafote:


---------------
OUAIB | FLICKR | HFR | 500 PX
n°1120545
wizopunker
FUCK ANARCHY!
Posté le 29-12-2010 à 11:09:42  profilanswer
 

perso je fais des li avec des span dedans, et derrière le span que je place le texte qui m'intéresse et qui est alors recouvert par le span. Comme ça pour google le texte existe, pour ceux qui désactivent le graphisme ou les aveugle, aussi, etc etc :D

 

PS: Salut Liverpopo :o

Message cité 1 fois
Message édité par wizopunker le 29-12-2010 à 11:10:01

---------------
| .:: www.wizopunk-art.com - Développement web ::. |
n°1120549
Skopos
Titilleur de nombrils...
Posté le 29-12-2010 à 11:14:05  profilanswer
 

wizopunker a écrit :

perso je fais des li avec des span dedans, et derrière le span que je place le texte qui m'intéresse et qui est alors recouvert par le span. Comme ça pour google le texte existe, pour ceux qui désactivent le graphisme ou les aveugle, aussi, etc etc :D


Me fais moins chier, je fous juste un text-indent à -9999px sur l'élément dans un cas comme ça. Bon pour ceux qui désactivent les graphismes c'est dommage :whistle:


---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR
n°1120550
wizopunker
FUCK ANARCHY!
Posté le 29-12-2010 à 11:15:24  profilanswer
 

Code :
  1. <ul id="menu">
  2.         <li><a href="http://www.guteschlechtenahrung.de/main" title="Home" id="home"><span></span>H</a></li>
  3.         <li><a href="http://www.guteschlechtenahrung.de/artikel-page1" title="Artikel" id="artikel"><span></span>Artikel</a></li>
  4.         <li><a href="http://www.guteschlechtenahrung.de/rezepte-page1" title="Rezepte" id="rezepte"><span></span>Rezepte</a></li>
  5.         <li><a href="http://www.guteschlechtenahrung.de/aufgespiesst-page1" title="aufgesiesst" id="aufgespiesst"><span></span>Aufgespiesst</a></li>
  6.         <li><a href="http://www.guteschlechtenahrung.de/kontakt" title="Kontakt" id="kontakt"><span></span>Kontakt</a></li>
  7. </ul>


 
Avec le css :  
 

Code :
  1. #menu a{
  2. display: block;
  3. position: absolute;
  4. top: 0px;
  5. }
  6. #menu a#home{
  7.  height: 33px;
  8.  left: 10px;
  9.  width: 25px;
  10. }
  11.  #menu a#home span{
  12.   position: absolute;
  13.   height: 100%;
  14.   width: 100%;
  15.   background:url(images/design.png) -115px -260px;
  16.  }
  17.  #menu a:hover#home span{
  18.   background:url(images/design.png) -115px -217px;
  19.  }


---------------
| .:: www.wizopunk-art.com - Développement web ::. |
n°1120551
wizopunker
FUCK ANARCHY!
Posté le 29-12-2010 à 11:15:50  profilanswer
 

Skopos a écrit :


Me fais moins chier, je fous juste un text-indent à -9999px sur l'élément dans un cas comme ça. Bon pour ceux qui désactivent les graphismes c'est dommage :whistle:


Ouais mais ça c'est très mal vu par google qui considère que tu caches du texte :)


---------------
| .:: www.wizopunk-art.com - Développement web ::. |
n°1120554
liverpowen
Profil : Friche Culturelle
Posté le 29-12-2010 à 11:30:22  profilanswer
 

y'a de l'astuce par ici  :D  
 
salut Wiwi  [:henri gaud-macias:2]


---------------
OUAIB | FLICKR | HFR | 500 PX
n°1120560
Skopos
Titilleur de nombrils...
Posté le 29-12-2010 à 11:43:54  profilanswer
 

wizopunker a écrit :


Ouais mais ça c'est très mal vu par google qui considère que tu caches du texte :)


Sources ?
Parce que j'avais cherché à un moment et j'ai jamais vu de trucs clairs à ce sujet :??:


---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR
mood
Publicité
Posté le 29-12-2010 à 11:43:54  profilanswer
 

n°1120574
abais
Posté le 29-12-2010 à 13:36:01  profilanswer
 

J'avais lu un article à propos de SEO qui traitait ce genre de question, je me souviens que du contenu caché par CSS (display:none, positionnement extremes...) ne pénalisait pas le référencement si c'était à profit du design.  
L'histoire ne nous a jamais dit comment techniquement, google interpretait le but de ces pratiques...
 
Faudrait que je retrouve un lien, à mes souvenir c'était sur le site communautaire de google sur le developpement ...
 
Au boulot, on m'a fait comprendre qu'il était plus sûre d'utiliser des typos standard dans le template afin d'avoir un vrai texte dans le HTML pour éviter ce genre de dilème... De toutes façon, ton contenu textuel est inévitablement en typo standard, le fait d'utiliser la même typo pour ton menu ne niquera donc pas forcément l'harmonie de ton design...
 
Sur un autre topic, qq1 a parlé d'une solution JS pour implémenter une typo en web. Si l'utilisateur désactive JS, il aura une typo standard, ce qui n'a rien de fatale à mon gout...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1120575
Skopos
Titilleur de nombrils...
Posté le 29-12-2010 à 13:48:04  profilanswer
 

abais a écrit :

J'avais lu un article à propos de SEO qui traitait ce genre de question, je me souviens que du contenu caché par CSS (display:none, positionnement extremes...) ne pénalisait pas le référencement si c'était à profit du design.  
L'histoire ne nous a jamais dit comment techniquement, google interpretait le but de ces pratiques...
 
Faudrait que je retrouve un lien, à mes souvenir c'était sur le site communautaire de google sur le developpement ...
 
Au boulot, on m'a fait comprendre qu'il était plus sûre d'utiliser des typos standard dans le template afin d'avoir un vrai texte dans le HTML pour éviter ce genre de dilème... De toutes façon, ton contenu textuel est inévitablement en typo standard, le fait d'utiliser la même typo pour ton menu ne niquera donc pas forcément l'harmonie de ton design...
 
Sur un autre topic, qq1 a parlé d'une solution JS pour implémenter une typo en web. Si l'utilisateur désactive JS, il aura une typo standard, ce qui n'a rien de fatale à mon gout...


Y'a Cufon, sIFR (JS+flash), FLIR, typeface.js, et surement d'autres (y'a des plug jQuery aussi), et certains traitement se font côté serveur (php je suppose)... et @font-face avec CSS3.
Ca mériterait un topic en soit.
 
(hs : comment on lit les données des candysticks ?)


---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR
n°1120578
genghis77
-_-'
Posté le 29-12-2010 à 14:03:30  profilanswer
 

ton HS là c'est a propos des cadystock que j'ai mis sur ma preview?


---------------
Genghis achat/vente
n°1120579
Skopos
Titilleur de nombrils...
Posté le 29-12-2010 à 14:10:08  profilanswer
 

non c'est pour ça :
http://flashflex.com/wp-content/uploads/2010/06/404.jpg


---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR
n°1120581
abais
Posté le 29-12-2010 à 14:27:29  profilanswer
 

Je n'étais pas en forme moi, ou je devais avoir faim ...  [:k-i]
Ce n'est pas CANDYSTICK mais CANDLESTICK...

Citation :

Les Bougies, Chandeliers ou Candlesticks: Cette technique nous vient du Japon. Elle est apparue au 18ème siècle où elle était utilisée pour noter les prix du riz. La méthode a été transposée aux marchés financiers et elle est fréquemment utilisée pour noter les historiques de cours sur un graphique, en lieu et place d'une courbe simple ou de bar charts. Comme pour les barres, les informations nécessaires à leur tracé sont au nombre de quatre: les cours d'ouverture, de clôture, le plus haut et le plus bas de la séance. A la différence des bar charts, cette technique fait apparaître une notion supplémentaire; si le cours a baissé pendant la période, le chandelier est noir, si le cours a monté, le chandelier est blanc.

Message cité 1 fois
Message édité par abais le 29-12-2010 à 17:18:14

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1120585
Skopos
Titilleur de nombrils...
Posté le 29-12-2010 à 14:41:50  profilanswer
 

abais a écrit :

Je n'était pas en forme moi, ou je devais avoir faim ...  [:k-i]  
Ce n'est pas CANDYSTICK mais CANDLESTICK...


Ok je comprend pourquoi je trouvais pas :D
:jap:


---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR
n°1120615
Progenik
Shark'N'Roll
Posté le 30-12-2010 à 01:39:02  profilanswer
 

Je cherchais des infos y'a pas longtemps sur les raisons du blacklisting de google dans son référencement... (parce que justement mon myspace s'était fait jeter du moteur)
Et un peu partout la même chose revenait sur le fait d'utiliser le CSS pour cacher des infos en vue de favoriser le référencement naturel...
J'avais effectivement des positionnement négatifs dans mon CSS (et ça apparement c'est pas bien, d'après ce que j'avais vu...) j'en ai profité pour passer à la nouvelle version du profil et un nouveau design.
Puis le référencement est revenu... Alors hasard ou pas ?...
 
Mais une chose est sur c'est que le positionnement négatif, tout le monde avait l'air de s'accorder sur le fait qu'il fallait éviter...

n°1120686
genghis77
-_-'
Posté le 30-12-2010 à 16:23:11  profilanswer
 

donc je viens de commencer mon fichier CSS
j'ai donc créer le squelette de telle maniere :
 
header
navigation
colonne gauche
colonne droite
footer
 
une question dans le CSS j'ai donc bien mes différents div marqués comme cela:
#body
#wrapper (pour contenir le tout)
#header
#nav
#colG
#colD
#footer
 
 
si je veux placer mes images d'ombres autour du header je peut les mettre en place dans le fichier CSS ou pas?
 
j'avais pensé au <span> mais je suis pas sur.
 
j'ai ca pour le moment

Spoiler :


* { padding: 0; margin: 0; }
 
body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background-color: #000000;
 background-image: url(images/BG.png);
 background-repeat: no-repeat;
 background-position: center;
}
#wrapper {  
 margin: 0 auto;
 width: 800px;
}
#header {
 color: #333;
 width: 800px;
 float: left;
 height: 270px;
 margin: 38px 0px 0px 0px;
 background-image: url(images/header.png)
}
#navigation {
 float: left;
 width: 800px;
 height: 34px;
 color: #333;
 margin: 0px 0px 0px 0px;
 background-color:#F3F2ED;
}
#colgauche {  
 color: #333;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 400px;
 width: 560px;
 float: left;
 background:#CCC8B3;
}
#coldroite {  
 float: right;
 color: #333;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 400px;
 width: 200px;
 background:#F6F0E0;
}
#footer {  
 width: auto;
 clear: both;
 color: #333;
 border: 1px solid #ccc;
 background-color:#F3F2ED;
 margin: 0px 0px 10px 0px;
 padding: 5px;
}


Message édité par genghis77 le 30-12-2010 à 16:24:21

---------------
Genghis achat/vente
n°1120697
genghis77
-_-'
Posté le 30-12-2010 à 19:16:10  profilanswer
 

je bloque sur mon menu... pour le moment je fonctionne avec un menu simple pour ensuite m'attaquer au menu avec image :o
 
la ou je bloque c'est que j'arrive pas a faire en sorte que ce soit la largeur/hauteur qui change de couleur, là y a que le texte qui change de couleur :o
 

Citation :

#navigation {
 margin: 0 ;
 padding: 0 ;
 list-style: none ;
}
 
#navigation li {  
    float: left ;  
    width: 200px ;
    color: #fff ;
    background-color: #262829 ;    
    }
 
#navigation li a {
 display: block ;
 font: 1em "Trebuchet MS",Arial,sans-serif ;
 line-height: 1em ;
 padding: 4px 0 ;
 text-align: center ;
 text-decoration: none ;
 
#navigation li a:hover {  
    background-color: #fead00 ;
    color: #fff ;  
    }


---------------
Genghis achat/vente
n°1120713
wizopunker
FUCK ANARCHY!
Posté le 30-12-2010 à 22:56:20  profilanswer
 

tu voudrais faire quoi? Si tu veux changer les dimensions durant le hover, il suffit d'indiquer dans le css a:hover les dimensions que tu veux.
A savoir:

  • que la largeur complète = width + padding left+right + margin left+right


  • que la hauteur complète = height + padding top+bottom + margin top+bottom


Ce qui veut dire que si tu veux jouer sur la marge, il faut compenser les un et les autres pour pas faire bouger tout le reste autours :)

 

EDIT : oui bon je t'avais mal lu. Qu'est-ce que tu entends pas la couleurs de la hauteur? Le fond? Les bords? Enfin je ne vois pas là difficulté, tu changes quand même les paramètres dans le a:hover


Message édité par wizopunker le 30-12-2010 à 22:57:31

---------------
| .:: www.wizopunk-art.com - Développement web ::. |
n°1120715
genghis77
-_-'
Posté le 30-12-2010 à 23:10:07  profilanswer
 

et c'est ce que j'ai fais, dans le a:hover le background passe en orange
et au preview, y a que le texte qui passe du blanc au orange alors que dans mon code le texte reste en blanc :spamafote:


---------------
Genghis achat/vente
n°1120716
wizopunker
FUCK ANARCHY!
Posté le 30-12-2010 à 23:19:21  profilanswer
 

il doit y avoir une histoire de priorité avec un autre css ou un truc du genre :)


---------------
| .:: www.wizopunk-art.com - Développement web ::. |
n°1120722
genghis77
-_-'
Posté le 31-12-2010 à 10:21:34  profilanswer
 

j'ai trouvé là ou ca bloquait :bounce:
 
sur mes deux derniers appels CSS #navigation li a et #navigation li a:hover  la fermeture du premier se trouvait apres la fermeture du second donc le premier englobait le a:hover
 
la ca fonctionne


---------------
Genghis achat/vente
n°1121038
mdmedias
Posté le 06-01-2011 à 10:23:31  profilanswer
 

Au risque de paraitre rabat joie, la taille general du site est un peu petite.  
800px de large. c'est depassé. En effet, moins de 1% des internaute en 2010 ont une resolution de cette taille. Les ecran etant de plus en plus grand, de grand espaces vides risque d'etre nuisible a la bonne lecture du site.
 
Un conseille, utilise un script pour determiner la taille d'ecran de l'utilisateur et adapte la taille de ton site en fonction.

Message cité 1 fois
Message édité par mdmedias le 06-01-2011 à 10:24:00

---------------
infographie toulouse
n°1121039
Skopos
Titilleur de nombrils...
Posté le 06-01-2011 à 11:03:02  profilanswer
 

mdmedias a écrit :

Au risque de paraitre rabat joie, la taille general du site est un peu petite.  
800px de large. c'est depassé. En effet, moins de 1% des internaute en 2010 ont une resolution de cette taille. Les ecran etant de plus en plus grand, de grand espaces vides risque d'etre nuisible a la bonne lecture du site.
 
Un conseille, utilise un script pour determiner la taille d'ecran de l'utilisateur et adapte la taille de ton site en fonction.


J'ai des stats entre 1 et 2% mais ça change pas fondamentalement, d'accord pour dire que c'est peu de toute façon.
 
Les grands espaces vides peuvent être nuisibles, oui, mais quand ils sont à l'intérieur du contenu.
Des lignes trop longues sont aussi nuisibles à la lecture qd on a bcp de texte...
Ici vu que son site est centré je ne vois pas en quoi ça pose un pb de lisibilité.
 


---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR
n°1121046
genghis77
-_-'
Posté le 06-01-2011 à 12:17:53  profilanswer
 

surtout que le contenu sera limité quand meme, c'est un site pour mettre en avant mes services et competences et mon book donc bon...
 
la clarté et la lisibilité priment.
je me vois mal avoir mon site sur une largeur de 1920 pix :spamafote:


---------------
Genghis achat/vente
n°1121048
Skopos
Titilleur de nombrils...
Posté le 06-01-2011 à 12:40:46  profilanswer
 

genghis77 a écrit :

surtout que le contenu sera limité quand meme, c'est un site pour mettre en avant mes services et competences et mon book donc bon...
 
la clarté et la lisibilité priment.
je me vois mal avoir mon site sur une largeur de 1920 pix :spamafote:


Ben ouais. Pour moi la taille du support doit être adapté au contenu.
Qu'un site avec bcp de contenu/rubriques différentes exploite du 1024+ je comprend l'interet, sinon c'est se compliquer inutilement la mise en page pour combler les grand espaces vides je trouve.


---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR
n°1121062
mdmedias
Posté le 06-01-2011 à 15:32:55  profilanswer
 

je suis d'accord avec le fait que le theme doit etre liquide(centré) et non fluide(plein ecran), mais rien que sur du 1280*1024, un site liquide de 800px de large semble perdu au milieu d'un ocean de vide, sans parler des résolutions supérieur.  
Ensuite je vois que tu va faire un theme vraisemblablement en 2 colonnes, pour une bonne lisibilité sur du 800 faudrait une colonne en 200px et l'autre en 600px. Cela ne laisse pas beaucoup de place pour une galerie (par exemple dans la rubrique réalisation).
De plus, un site en 960px de large améliore le confort visuel indéniablement et passe sur du 1024 et supérieur.
 
pour le texte, tu peux augmenter la taille, cela peux combler un peu le contenu, et de toute facon ne peux qu'améliorer la lisibilité. :)  


---------------
infographie toulouse
n°1121063
genghis77
-_-'
Posté le 06-01-2011 à 16:09:37  profilanswer
 

alors pour la gelerie ce qui est prevu c'est des petites vignettes avec fondu et agrandissement, apparement c'est faisable sans flash et c'est tant mieux.
 
à la rigueur je peut voir pour agrandir a 960px :spamafote:
 
pour l'heure, je suis dans le CSS, j'avance doucement, je commence deja a ecrire le code sans avoir besoin d'aller chercher comment ca se structure, je pense avoir compris les bases deja :bounce:
 
là je suis sur le CSS du formulaire de contact


---------------
Genghis achat/vente
mood
Publicité
Posté le   profilanswer
 

 Page :   1  2
Page Suivante

Aller à :
Ajouter une réponse
 

Sujets relatifs
creation d'un site web en flashTitre d'un site web
[Avis] Des conseils concernant le design et la structureProbleme de frames sur un site flash en AS2
Creation Site Web, ou m'orienterUn jeu en version beta sur le travail de jf Rauzier , vos avis :
Besoin d'un site internetRien
Avis Site web d'Architecte 
Plus de sujets relatifs à : [Genghis77]Preparation de mon site : Avis et commentaires welcome


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR