Problème pour mettre une image et le titre centré

Cours HTML-CSS Activité : organiser son CV

Sujet résolu

23 juin 2017 à 14:54:17

Bonjour,

Je bloque avec la mise en page du CV. J'aimerais mettre dans l'en-tête l'image à gauche et le texte à droite, centré sur la page mais je n'arrive pas à trouver comment faire. Est-ce que quelqu'un a des suggestions ?

Je vous mets le code que j'ai écrit ici ainsi que le résultat (capture d'écran) (si vous voyez des erreurs, dites-le-moi, je veux apprendre ;-) )

merci d'avance !!

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<link rel="stylesheet" href="style.css"/>
		<title>CV Anouk Marterey</title>
	</head>
<body>
	<header>
		<div id=titre>
			<h1>Anouk Marterey</h1>
			<p id="sous-titre">Architecte diplômée</p>
		</div>

		<div>
		<p id=image><a href="images/bonhommeCV.jpg"><img src="images/bonhommeCVmini.jpg" alt="Anouk Marterey"/></a>
		</p>
		</div>
	</header>

	<div id=corps>
		<section>

			<h2>Mon expérience</h2>

			<ul>
			<li><strong>2011-2014</strong> serveuse au Café de Grancy</li>
			<li><strong>2015-2016</strong> assistante à l'Ecole 	Polytechnique Fédérale de Lausanne</li>
			<li><strong>2016-2017</strong> stage de 12 mois au bureau Brisson Architecte à Lausanne</li>
			</ul>
		</section>

		<section>

			<h2>Mes compétences</h2>
			<ul>
				<li>créative et perfectionniste</li>
				<li>gestion de projets immobiliers de A à Z.</li>
			</ul>
		</section>
		
		<section>
			<h2>Ma formation</h2>
			<ul>
				<li><strong>2009-2011</strong> Maturité fédérale, Gymnase de la Cité, Lausanne. Option Maths et Physique</li>
				<li><strong>2011-2016</strong> Etudes d'architecture à l'Ecole Polytechnique Fédérale de Lausanne</li>
			</ul>
		</section>
	</div>

	</body>
</html>

h2
{
	color: red;
}


body
{
	background-image: url(images/imagedefond.jpg);
}


@font-face {
    font-family: 'aleoregular';
    src: url('Aleo-Regular-webfont.eot');
    src: url('Aleo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Aleo-Regular-webfont.woff') format('woff'),
         url('Aleo-Regular-webfont.ttf') format('truetype'),
         url('Aleo-Regular-webfont.svg#aleoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

h1, p, h2, ul
{
	font-family: "aleoregular", Arial
}

h2
{
	border: 1px red dotted;
	box-shadow: 2px 2px red;
}

h2:hover
{color : blue;
border: 1px blue dotted;
box-shadow: 2px 2px blue;
}

header
{
	height : 200px;
	display: inline-flex;
	justify-content: center;
	margin: auto;
}

#titre{display:block; order: 2; width:70%;}
#image{display:block; order:1; width:10%;}


#corps
{
display: inline-flex;
justify-content: space-around;
}

section
{width: 30%}


h1, #sous-titre
{
	text-align: center;
}

Ce que ça donne actuellement :

FloJDM

23 juin 2017 à 15:07:40

Salut,

header
{
    height : 200px;
    display: flex;
    justify-content: space-between;
    margin: auto;
}

Enlève la width et le display block de #titre et le display block de #image

Ça devrait le faire.

PS fait attention ta oublier des guillemets "" dans ton html à tous les ID

Bon voilà en faite :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="style.css"/>
        <title>CV Anouk Marterey</title>
    </head>
<body>
    <header>
        <div id="titre">
            <h1>Anouk Marterey</h1>
            <p id="sous-titre">Architecte diplômée</p>
        </div>
 
        <div>
        <p id="image"><a href="images/bonhommeCV.jpg"><img src="images/bonhommeCVmini.jpg" alt="Anouk Marterey"/></a>
        </p>
        </div>
    </header>

        <section id="corps">
 
            <h2>Mon expérience</h2>
 
            <ul>
            <li><strong>2011-2014</strong> serveuse au Café de Grancy</li>
            <li><strong>2015-2016</strong> assistante à l'Ecole   Polytechnique Fédérale de Lausanne</li>
            <li><strong>2016-2017</strong> stage de 12 mois au bureau Brisson Architecte à Lausanne</li>
            </ul>
        </section>
 
        <section>
 
            <h2>Mes compétences</h2>
            <ul>
                <li>créative et perfectionniste</li>
                <li>gestion de projets immobiliers de A à Z.</li>
            </ul>
        </section>
         
        <section>
            <h2>Ma formation</h2>
            <ul>
                <li><strong>2009-2011</strong> Maturité fédérale, Gymnase de la Cité, Lausanne. Option Maths et Physique</li>
                <li><strong>2011-2016</strong> Etudes d'architecture à l'Ecole Polytechnique Fédérale de Lausanne</li>
            </ul>
        </section>
 
    </body>
</html>

@font-face {
    font-family: 'aleoregular';
    src: url('Aleo-Regular-webfont.eot');
    src: url('Aleo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Aleo-Regular-webfont.woff') format('woff'),
         url('Aleo-Regular-webfont.ttf') format('truetype'),
         url('Aleo-Regular-webfont.svg#aleoregular') format('svg');
    font-weight: normal;
    font-style: normal;
 
}

body
{
    background-image: url(images/imagedefond.jpg);
}
 

 h1, #sous-titre
{
    text-align: center;
}

h2
{
    color: red;
}
 
h1, p, h2, ul
{
    font-family: "aleoregular", Arial
}
 
h2
{
    border: 1px red dotted;
    box-shadow: 2px 2px red;
}
 
h2:hover
{color : blue;
border: 1px blue dotted;
box-shadow: 2px 2px blue;
}
 
header
{
    height : 200px;
    display: flex;
    justify-content: space-between;
    margin: auto;
}
 
#titre
{
order: 2;
}

#image
{
order:1;
width:10%;
}
 
 
#corps
{
display: inline-flex;
justify-content: space-around;
}
 
section
{width: 30%}

J'ai fait ça à la va-vite, si ça ne fonctionne pas n'hésite pas à le dire.

-
Edité par FloJDM 23 juin 2017 à 15:15:15

-> Hébergement GRATUIT <- Parfait pour débuter/dev/test/...

LaiaSoler

23 juin 2017 à 16:12:39

Merci beaucoup pour ton aide !

Rennor974

23 juin 2017 à 22:15:53

Pense a mettre en resolu