Question sur la mise en page CSS

suite a l'exercice de mise en page du CV

13 novembre 2017 à 17:16:25

bonjour,

lors de la réalisation de l'exercice sur la mise en page CSS je me suis heurté a 3 difficultés.

je ne trouve pas comment les solutionnés et j'aimerai votre aide ...

voici mon fichier CSS

@font-face {
    font-family: 'cac_champagneregular';
    src: url('webfonts/cac_champagne-webfont.eot');
    src: url('webfonts/cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfonts/cac_champagne-webfont.woff') format('woff'),
         url('webfonts/cac_champagne-webfont.ttf') format('truetype'),
         url('webfonts/cac_champagne-webfont.svg#cac_champagneregular') format('svg');
}

body
{
	background-image: url("img/bg.jpg");
}

.imgflot
{
	float: right;
	/* comment faire pour que l'image se trouve en haut a droite a hauteur du titre h1 et de .jobtitle? merci */
	/* une image flotante etait elle necessaire? */
}

.dessous
{
	clear: both;
}

h1
{
	text-align: center;
	color: brown;

}

h2
{
	font-family: 'cac_champagneregular', Arial;
	color: red;
	font-size: xx-large;
	border: 3px black dashed;
	text-shadow: 2px 2px 4px black;
	/*comment faire pour que la bordure s'arette à la fin de mon texte et non pas a la fin de la page? merci de me l'indiquer dans la correction */
}

.jobtitle
{
	text-align: center;
	color: brown;
	/* je ne comprend pas pourquoi .jobtitle ne se centre pas, pouvez-vous m'indiquer dans la correction si c'est possible et si oui comment? merci */
	/* j'ai du le centrer dans le fichier HTML pour y parvenir mais je pense que ce doit être faisable directement dans le CSS*/
	/* cela fonctionne pour h1 alors je ne comprend pas pourquoi ca ne va pas avec .jobtitle */

et mon fichier html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
		<link rel="stylesheet" href="css/style.css" />
        <title>CV Pistone Frederic</title>
    </head>

    <body>
        <h1>Frederic PISTONE</h1>
		<p><center><span class="jobtitle">IT System Engineer</center></span></p>
		<p> <a href="img/moi.png"><img src="img/moimini.png" class="imgflot" alt="une photo de moi" title="ma plus belle photo!"/></a> </p>
		
		<h2 class="dessous">Experience récente</h2>
		<p>	<ol>
			<li>"Octobre 2014 - Octobre 2016: IT Servicedesk Engineer chez Euopean Council</li>
			<li>"Octobre 2016 - Octobre 2017: IT Service Desk Engineer chez GSK</li>
			<li>"Octobre 2017 - Maintenant: IT System Engineer chez Lhoist Belgium</li>
			</ol></p>
		
		<h2>Mes passions</h2>
		<p>	<ul>
			<li>Informatique</li>
			<li>Jeux Vidéo</li>
			<li>Lecture</li>
			</ul></p>
		
		<h2>Mon objectif</h2>
		<p> Mon objectif est de pouvoir réaliser rapidement un site en PHP et MYSQL!</p>
	</body>
</html>

et les questions:

1A. comment faire pour que l'image se trouve en haut a droite a hauteur du titre h1 et de .jobtitle?
1B. une image flotante etait elle necessaire? ou je pouvais faire autrement (avec les connaissances actuelle)

2. comment faire pour que la bordure s'arette à la fin de mon texte et non pas a la fin de la page?

3. je ne comprend pas pourquoi .jobtitle ne se centre pas alors que ca fonctionne pour le h1

je vous remercie d'avance pour votre assistance

bonne soirée

Anonyme

13 novembre 2017 à 18:01:54

Hello

Alors je vais te répondre dans l'ordre:

tu peux utiliser flexbox pour agencer tout ça, ça sera plus propre qu'avec des float partout.
tu peux utiliser une image flottante mais flexbox est beaucoup plus intéressant dans ton cas.
normalement un bloc n'a pas de hauteur définie, donc c'est son contenu qui lui donne sa hauteur
h1 est un élément de type "bloc" qui prendra donc toute la largeur de son conteneur parent (ici body), à l'inverse span est un élément de type "inline" sa largeur dépendra donc du contenu de la balise. La propriété "text-align:center" agit sur le contenu de la balise et non sur la balise elle même. h1 faisant toute la largeur du document, appliquer "text-align:center" agira sur le texte à l'intérieur et le centrera. Par contre pour span comme son type est "inline" il n'aura aucun effet. Il faut alors changer son "display" en "bloc", "display:block".
De plus la balise "center" est à proscrire !!!

Frederic Pistone

14 novembre 2017 à 9:54:15

merci pour les réponses, je n'ai pas encore appris les flexbox.je pense que ca vient dans le 3eme module et ici je ne termine que le deuxième.

Le <center> est la seul alternative que j'ai trouvé pour avoir le jobtitle de centré sous mon prénom/nom car via le CSS je n'y suis pas parvenu.

Merci

Anonyme

14 novembre 2017 à 15:36:49

Comme dit plus haut (voir le liens) la balise "center" est à bannir de tout projet. On en veut plus !

Ceci dit, et malgré le fait qu'elle soit encore supportée par certains navigateurs, si tu veux quand même l'utiliser il faudrait la fermer au bon endroit, c'est-à-dire après la fermeture de la balise "span" et non avant.

Je te conseil de lire le lien sur flexbox ou la partie du cours qui en traite et sinon ce lien sur float.