[CSS] Incompatibilité code (débutant)

15 janvier 2019 à 0:50:43

Bonjour à tous,

Je débute actuellement et suis avec attention le cours sur OpenClassRooms apprenant à coder en HTML/CSS. Je viens à peine de finir le premier chapitre sur le CSS mon code est donc encore assez léger et c'est normal (ne m'en voulez pas). Cependant je rencontre un petit souci sur mon code CSS je n'arrive pas à faire bouger mon image d'un pouce. (Je ne veux pas l'insérer en arrière plan mais je veux bien d'une image insérer dans la page qui soit à gauche, à droite ou centrée). L'image en question est "homme_miniature.jpg" et j'ai donc essayé aussi de lui donner une class "center"

Un autre et dernier point également. Je voudrais que lorsque l'on passe sa souris sur un lien celui-ci soit souligné et apparaisse en rouge. Cependant je veux également que lorsqu'un lien a déjà été ouvert il apparaisse en rose. Cela pose visiblement problème au code puisque les liens sont désormais affichés par défaut en rose (même en passant la souris sur l'un d'entre eux)D'où vient le soucis ?

Voici mes codes HTML et CSS (si vous y voyez des erreurs n'hésitez pas à me les mentionner également)

HTML :

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="style3.css" />
	<title>Mon cv révision</title>

</head>

<body>
	<p class="bienvenue">Bienvenue sur mon site web, je vais sur cette page vous présenter mon CV ! </p>

	<h1>Medy Dupont</h1>

<img src="homme_miniature.jpg" class="center" alt="photo de moi" title="photo de moi" />

<p>Je m'appelle Medy, j'ai 22 ans et j'apprends actuellement à coder. <br />
	C'est pour cela que j'essaye de créer un CV en ligne en le codant de A à Z... </p>
<p>Se rendre directement à <a href="#competences">Mes compétences</a> ?</p>
	<h2>Mon expérience</h2>

<p>Etant donné mon jeune âge, je n'ai encore que très peu d'expérience dans le domaine, <br />
mais je pense que cela ne devrait plus tarder. J'ai déjà bien évolué depuis le début !</p>


<h2 id="competences">Mes compétences</h2>

<p> Voici ici mes compétences :</p>

<ul>
	<li>Photoshop</li>
	<li>AfterEffects</li>
	<li>Codage HTML5 (en cours)</li>
	<li>Et pleins d'autres choses...</li>
</ul>

<h2>Ma formation</h2>

<p>J'ai pu apprendre le codage sur un site exceptionnel nommé <a href="http://www.google.fr">OpenClassRooms</a>. <br />
C'est vraiment un site formidable qui me permet d'évoluer en un temps record !</p>

<p class=remerciement>Un grand merci à eux !</p>

</body>
</html>

CSS :

body
{
background:url(background.jpg) no-repeat center scroll;
font-family:arial;
}


.bienvenue,.remerciement, h1
{
	text-align:center;
}

h2
{
	text-align:center;
	font-weight:bold;
	font-size: 2em
}

a:hover
{
text-decoration:underline;
color:red;
font-weight:bold;
}

.center
{
	background-position:center;
	text-align: center; 
	margin: 0 auto;/*J'ai essayé l'une de ces 3 fonctions et aucunes ne fonctionnent (j'ai vu ces 2 méhodes proposées sur des forum) */ 
}

a
{
	text-decoration: none;
}

h1
{
	font-size: 3em;
}

a:visited
{
	color:pink;
}

Un grand merci d'avance pour votre précieuse aide. C'est pas si facile de débuter dans le domaine même si je suis sûr que le plus dur m'attend :(

-
Edité par lesiteduzero59 15 janvier 2019 à 13:13:02

GuillaumeBo1

15 janvier 2019 à 1:45:27

Salut,

<p class=remerciement>Un grand merci à eux !</p>

Il te manque les guillemets

background-position:center;

je ne comprend pas pourquoi tu utilise ça c'est pourtant évidant c'est marqué dessus : Background.

text-align: center;

idem pour ça c'est marqué text non ?

margin: 0 auto;

celui ci est tres bien sauf que la balise img n'est pas un block mais un inline-block. En gros pour le centrer tu as besoin du margin: auto; et de display: block;

Un homme azerty en vaut deux.

Lamecarlate

15 janvier 2019 à 6:52:53

Bonjour,

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(titre originel : Problème codage débutant)

Pour la couleur des liens : il faut un ordre particulier dans le CSS pour ne pas écraser les déclarations. Le moyen mnémotechnique pour les liens, c'est LoVe HAte : link, visited, hover (et focus) et active

Pas d'aide concernant le code par MP, le forum est là pour ça :)

lesiteduzero59

15 janvier 2019 à 13:25:40

@Lamecarlate Navré pour le titre (c'est modifié )

Merci pour l'ordre en effet, je n'en avais pas connaissance et c'est désormais fonctionnel.

@GuillaumeBol Merci à toi pour la bonne "commande" j'avais vu que ces méthodes étaient également utilisable mais je ne comprenais pas ce qu'une "commande" text venait faire sur une image.

Une dernière petite question et je ne t'embête plus. Je n'ai pas encore vu cette fonction dans le cours "Apprenez à créer votre site web avec HTML5 et CSS3" est-ce la fonction principale que je dois utiliser pour centrer n'importe quelle image sur ma page web ? Et si je veux l'aligner autrement quel est le code ?

Une autre chose, je veux que la couleur des liens soit par défaut noir et après avoir été visitée en jaune. Cependant le lien est par défaut jaune. Qu'est-ce qui ne colle pas dans le code ?

body
{
	font-family:arial;
	background-color:green;
	font-size:1.2em;
}

h1,.remerciement
{
	text-align:center;
}
h1
{
	font-size:3em;
	font-weight:bold;
}
.moi
{
	margin:0 auto;
	display:block;
	box-shadow:4px 4px 1px black;
	border:1px black double;
}
strong
{
	text-decoration:underline;
	font-weight:bold;
	color:blue;
}
a
{
	text-decoration:none;
	color:black;
}
a:visited
{
	color:yellow;
	font-style:italic;
}
a:hover
{
	text-decoration:underline;
	color:red;
	font-weight:bold;
}


.contour
{
	border:3px black solid;
}

.remerciement
{
	text-decoration:underline;
	font-style:italic;
}
.centerr
{
	text-align:center;
}
h2
{
	color:pink;
}

Encore merci

-
Edité par lesiteduzero59 15 janvier 2019 à 15:28:09

AnttonDev

15 janvier 2019 à 16:55:24

lesiteduzero59 a écrit:

Une autre chose, je veux que la couleur des liens soit par défaut noir et après avoir été visitée en jaune. Cependant le lien est par défaut jaune. Qu'est-ce qui ne colle pas dans le code ?

bonjour

Etant donné que tu as deja cliqué sur ton lien, il est considéré comme "déja visité" par ton navigateur.

2 solution possible :

- actualise ta page (ctrl + R)

-essaye d'ouvrir ton fichier HTML dans un autre navigateur (ex. si tu travaille sur MICROSOFT EDGE, essaye sur GOOGLE CHROME )

j’espère que ton problème sera résolu

article sur les cookies walls • validator html • validator css • Doc MDN • SweetAlert2• Lorem Ipsum • lorem Picsum • html color codes • Caractères spéciaux et entités HTML

Mon site : BLOG | anttondev (wixsite.com)

GuillaumeBo1

15 janvier 2019 à 19:31:38

Pour centrer tu as plusieurs possibilité que tu verras dans le cours notamment lors du chapitre FLEX qui te permettra d'afficher les éléments là où tu voudras plus facilement dont le centrage vertical et horizontal.

pour ton lien suffit simplement de reload la page avec ctrl+F5 ou ctrl+R. en gros quand tu visite une page ton navigateur l'enregistre en cache. donc quoi que tu fasses c'est considéré lien visité par ton code.

Un homme azerty en vaut deux.