[Amateur] Rencontre le Monde : Blog de voyage et photos

Bonjour à tous, alors voilà je suis un peu une bille en informatique mais après avoir suivi pas mal de vidéos et tutos sur internet et une formation j'ai créé mon blog Rencontre le Monde qui a pour thème les voyages, la photo, la culture et comme le nom l'indique : les rencontres !

Alors vous allez me dire waouh un blog ... Avec une ironie non feinte, mais pour moi je vous assure c'est beaucoup ! Pourtant j'ai eu l'occasion de faire un peu de codage à la fac mais dès que je vois une ligne de code c'est panique à bord.

Bon assez papoter voici le détail, j'ai donc fait mon bloc à l'aide wordpress, j'ai acheté un thème qui me semblait assez bien conçu, j'ai essayer d'adapter le design (vraiment peu car j'aurais du mal à faire plus) et maintenant le blog tourne depuis un mois.

Je viens donc ici vous demander ce que vous en pensez niveau design mais également si le codage (acheté) semble assez bien fonctionner. Et je suis preneur de toute autre information à laquelle je n'aurais pas pensé.

Ah oui le lien, c'est par ici : http://rencontrelemonde.com/

Merci d'avance à vous pour tous vos conseils/remarques/applaudissements /sifflements ....

Bonjour 'RencontreLeMonde',

Je me suis permis de faire un petit peu le tour de ta création et je trouve que l'en-tête de ta page, qui apparaît à chaque page est bien trop grande. La ligne de flottaison arrive tout juste sous le menu sur une résolution moyenne. J'ose même pas essayer en réduisant ma fenêtre.
Du coup on est obligé de scroller pour voir ne serais-ce que le titre de l'article.

Je voulais connaître les 10 bonnes raisons pour voyager. Mais avant de lire une ligne j'ai du passer l'immense logo, la barre de menu puis une image bleu non significative. Après tout ça j'en suis qu'au titre.

Ne serait-il pas mieux d'insérer un modèle réduit du logo dans le menu (pour retourner à l'accueil par exemple), et rendre visible le logo taille nature à l'occasion d'un article à propos du site, non ?


Une question aussi, tu as vraiment réservé les droits ? Auprès de quel organisme ?
Je charrie

C'est mal de se moquer !!! Haha

Donc oui vraiment, chez OVH, pourquoi ? J'ai prévenu sur ma présentation (je sais pas si tu as vu) que je serai plus un handicap qu'autre chose ! Haha

Sinon pour l'en tête je vais modifier ça de suite pour qu'il soit déjà plus petit. Et dans un second temps voir en effet à le déplacer à coté du menu ca pourrait être pas mal en effet. Retourne lire l'article je t'assure que ca vaut le coup !

En tout cas merci pour ce premier retour.

Aller, tu m'as motivé alors cette fois je jette un oeil au code source.

L'iframe concernant Facebook pose problème au validateur W3C.

D'autre part je trouve étrange que soient utilisées des balises <I> avec un doctype HTML5. Il me semble qu'elle est dépréciée.
Autrement le code semble propre et bien hiérarchisé. C'est quand même bien fait Wordpress !

Par contre le lien/image "Donnez moi un coup de main" renvoi vers l'adresse principale du site, c'est normal ?

Qu'est-ce que c'est un "comment luv" ?

Et aller, encore une dernière pour la forme : Pourquoi, en page d'accueil, se sont les mêmes articles qui sont présentés dans les carrés que ceux présentés juste en dessous. Ne serais-ce pas un peu redondant ? Et ça retarde l'affichage des articles suivants.

Ha si j'oubliais, justement j'ai regardé ton article de plus près et je pense que les images méritent une correction, au niveau de la marge supérieure principalement. Ne trouves-tu pas ?

Bonne continuation
Modifié par Greg_Lumiere (27 Aug 2014 - 19:17)

J'avais prévenu ça aussi que pour compenser mon défaut de talent en info j'avais de la bonne humeur pour motiver les gens ! Haha

Bon et donc je préférais les moqueries que je pouvais comprendre au moins car je vais me répéter mais je suis une bille.

Alors :

Pour l'iframe j'ai utilisé ce que le thème proposé, qu'est ce qui devrait être modifié ?

Pour le lien image donner moi un coup de main, c'est que je travaille sur la page et celle ci n'est donc pas accessible.

"Comment luv" est un plugin qui permet aux autres blogeurs lorsqu'ils commentent d'avoir un lien vers leur dernier article (si ils passent par Gravatar) et ainsi encourager ces gens à partager sur mon blog. A supprimer par la suite donc.

Pour les artciles redondants oui je le sais, car en haut ce sont les 5 derniers articles et ensuite tous en commencant par ... les 5 derniers : fail ! Mais je ne sais pas comment les refuser et commencer au 6ème. Sinon changer pour un mode "par catégorie" et non plus chronologique.

Pour les images oui, le cadre est respecté que à droite et en bas et je n'ai aucune idée du pourquoi du comment.

Bref merci pour tous ces retours, je travaille dessus pour une semaine et je reviens en pleurant si j'ai pas réussi à corriger !

Désolé pour le double post, mais voilà je voulais signaler, que j'ai commencé à modifier le haut de la page, logo plus petit et à le mettre sur la gauche pour avoir la phrase d'accroche à coté.

J'ai "juste" un problème à ce niveau là c'est pour placer le texte. Car comme il est à un point précis, suivant la résolution de l'écran ce sera bien ou non. Est ce possible de "l'accrocher à l'aimage qui elle étant sur la gauche reste toujours bien placée.

Voilà le code de cette phrase :

#top H1{font-family: "Open Sans",sans-serif;
		position: absolute;
		left: 300px;
		top: 140px; 
		font-size:20px;
		line-height: 1.5;
		margin: 0px 0px 40px;}

Merci d'avance pour les coups de main.

Si tu inverse la position de ton logo et de ton h1, que tu les place tous les 2 en display:inline-bloc et que tu retire le position:absolute et les top et left de ta règle h1. Tout semble bien se placer.

EDIT: cela dit, je ne voit pas trop l’intérêt de mettre ton logo dans une div... surtout s'il est seul à l'intérieur...
Modifié par juliesunset (05 Sep 2014 - 17:05)

<header>
<h1>
  <a href="http://rencontrelemonde.com/" rel="home">
    <img src="http://rencontrelemonde.com/wp-content/uploads/2014/07/logo-couleur-fondtransparent.png" alt="Retour à l'accueil Rencontre Le Monde">
  </a>
</h1>
<p>Blog de voyage et photos à la rencontre des cultures du monde</p>
</header>

Pour la cosmétique (marge, positionnement éventuel, couleur, graisse du texte) :

header h1 {}
header a / header img {} /*si besoin */
header p{}

Éviter effectivement le positionnement absolu si possible, garder les éléments dans le flux, jouer avec les marges et regarder ce qui se passe...

ps: Le logo plus petit pour de vrai

juliesunset a écrit :
Si tu inverse la position de ton logo et de ton h1, que tu les place tous les 2 en display:inline-bloc et que tu retire le position:absolute et les top et left de ta règle h1. Tout semble bien se placer.

EDIT: cela dit, je ne voit pas trop l’intérêt de mettre ton logo dans une div... surtout s'il est seul à l'intérieur...

Je dois avouer que c'est un peu du chinois pour moi tout ça ... ^^

6l20 a écrit :

<header>
<h1>
  <a href="http://rencontrelemonde.com/" rel="home">
    <img src="http://rencontrelemonde.com/wp-content/uploads/2014/07/logo-couleur-fondtransparent.png" alt="Retour à l'accueil Rencontre Le Monde">
  </a>
</h1>
<p>Blog de voyage et photos à la rencontre des cultures du monde</p>
</header>

Pour la cosmétique (marge, positionnement éventuel, couleur, graisse du texte) :

header h1 {}
header a / header img {} /*si besoin */
header p{}

Éviter effectivement le positionnement absolu si possible, garder les éléments dans le flux, jouer avec les marges et regarder ce qui se passe...

ps: Le logo plus petit pour de vrai

Le truc c'est que par exemple le logo moi je l'avais mis viens l'interface de mon thème WordPress (je suis une bille hein). Du coup mon header est codé comme suit :

<header id="top">
				<?php if ( is_front_page() ) {
    ?><h1><? bloginfo('description');?></h1>
<?php } else {
   ?><p><? bloginfo('description');?></p>
<?php } ?>

				<?php echo g7_site_title(); ?>
				
			</header>

Du coup je dois remplacer ça par ce que tu dis ?

En tout cas merci à vous deux.