Comment encrer mon image dans le bloc

17 mai 2018 à 18:15:44

Bonjour,

Je souhaite encrer mon image dans le bloc "header" de fait quelle reste toujours en haut à droite, seulement celle-ci se balade à sa guide selon la largeur de la page...

Il y a aurait-il quelqu'un qui puisse m'aider?

Merci

<!DOCTYPE html>

<html>

	<head>
		<meta charset="utf-8" />
		<title>Mathieu Alama</title>
		<link rel="stylesheet" href="style.css" />
	</head>

	<body>
		<aside>
			<div class= "content">	
				<div id= "liseret">
				</div>
			</div>	
		</aside>
		<section>
			<header>
				<h1>Mathieu Alama</h1>
				<p id="legende">Chasseur de chimère</p>
				<p>
					<a href="vladimir-nabokov.jpg">
					<img src="vladimir-nabokov-mini.jpg" alt="Chasseur" id= "image1"/>
					</a>
				</p>
			</header>

			<div id= "articles">
				<div class= "article">
					<h2>Mon expérience</h2>		
					<ul>
						<li>De 2008 à 2009 : Conseiller clientèle B to B - ARVAL Lease<br />Vente de produits de financement automobile pour les parcs automobiles de PME et PMI</li>
						<li>De 2011 à 2016 : Chef de secteur B to B - Vin<br />Promotion, mise en avant, vente de produit vinicole auprès d'un parc clientèle de grande distribution</li>
						<li>De 2016 à 2018 : Agent commercial B to B - Vin<br />Prospection, mise en avant, vente de produit vinicole haut de gamme auprès du circuit traditionnel "café, hotel, restaurant"</li>
					</ul>
				</div>	
				<div class= "article">
					<h2>Mes compétences</h2>
					<ul>
						<li>Vente, Négociation</li>
						<li>Marketing, Marketing digitale et Communication</li>
						<li>Comptabilité financière et analytique</li>
						<li>Peinture sur corps nus :<a href="lien.jpg">porfolio</a></li>
						<li>Anglais niveau C1</li>
					</ul>
				</div>	
				<div class= "article">
					<h2>Ma formation</h2>
					<ul>
						<li>Auto Formation (MOOC)</li>
						<li>Licence Pro Commercialisation des Vins</li>
						<li>DEES Communication</li>
						<li>BTS Action Commercialisation</li>
					</ul>
				</div>	
			</div>	
		</section>
	</body>
</html>

body
{
    display: flex;
    background-image: url("fond6.jpg");
    font-family: Sofia-Regular, Arial, Verdana, sans-serif;
}

@font-face 
{
    font-family: 'Sofia-Regular';
    src: url('Sofia-Regular.otf');
}

h1
{
  text-shadow: 2px 2px 4px black;
}

h1, #legende
{
	text-align: center;
}

h2
{
  color: rgb(134, 72, 11);
  text-align: center;
}

a
{
   text-decoration: none;
   color: rgb(13, 134, 255);
   font-style: italic;
}
   
a:hover
{
   color: rgb(204, 130, 253);
}

aside
{
  background-color: rgb(134, 72, 11, 0.5);
  height: 715px;
  width: 200px;
  border-radius: 5px
}

header, section, aside
{
border: 3px solid black;
}

#articles
{
  display: flex;
}

#image1
{
  position: relative;
  left: 830px;
  bottom: 100px;
}

header
{
  height: 230px;
}

-
Edité par Matmath05 17 mai 2018 à 18:20:49

philiga

17 mai 2018 à 20:54:38

Bonsoir,

Pour "encrer" ton image, tu peux essayer de secouer un stylo plume en direction de ton écran... (pas sûr que ce soit une très bonne idée...!)

Pour l'ancrer, par contre, une façon plus simple peut être de la coller en absolute ainsi:

header{
  position:relative;
}

#image1
{
  position: absolute;
  right:0;
  top:0;
  height:100%;
}

(en supprimant le <p> inutile dans lequel tu as enfermé le lien et l'image).

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

FloJDM

18 mai 2018 à 11:10:17

Salut,

Sinon tu peux utiliser la propriété CSS object-fit

https://www.w3schools.com/css/css3_object-fit.asp

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

Matmath05

18 mai 2018 à 17:08:22

philiga a écrit:

Bonsoir,

Pour "encrer" ton image, tu peux essayer de secouer un stylo plume en direction de ton écran... (pas sûr que ce soit une très bonne idée...!)

Pour l'ancrer, par contre, une façon plus simple peut être de la coller en absolute ainsi:
header{
  position:relative;
}

#image1
{
  position: absolute;
  right:0;
  top:0;
  height:100%;
}
(en supprimant le <p> inutile dans lequel tu as enfermé le lien et l'image).

OK MERCI,

Et si je veux le même résultat mais que je veux la déplacer un peu plus sur la droite?

philiga

18 mai 2018 à 17:25:07

Tu peux mettre une valeur négative au right, mais ça commence à devenir acrobatique ; peut-être est-ce l'ensemble de la construction qui est à repenser.

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Matmath05

25 mai 2018 à 9:58:05

Bonjour,

J'ai fait une modif et retour en arrière mais je n'arrive pas à retrouver mon rendu initial...? La photo n'est plus ancrée en haut à droite et sa taille beaucoup plus grande, je ne comprends pas mon erreur...

Concernant la construction, si quelqu'un à une idée d'amélioration afin de pouvoir placer la photo à ma guise (ancrée, en haut à droite et légèrement décalée vers la gauche) et d'avoir un bandeau vertical sur le côté gauche comme demandé dans l'exercice.

NB : Je rappelle que mon but est de réaliser l’exercice de la partie 3!

Je vous mets toutes les infos :

Merci d'avance!

<!DOCTYPE html>

<html>

	<head>
		<meta charset="utf-8" />
		<title>Mathieu Alama</title>
		<link rel="stylesheet" href="style.css" />
	</head>

	<body>
		<aside>
			<div id= "liseret">
			</div>	
		</aside>
		<section>
			<header>
				<h1>Mathieu Alama</h1>
				<p id="legende">Chasseur de chimère</p>
				<a href="vladimir-nabokov.jpg">
				<img src="vladimir-nabokov-mini.jpg" alt="Chasseur" id= "image1"/>
				</a>
			<div id= "articles">
				<div class= "article">
					<h2>Mon expérience</h2>		
					<ul>
						<li>De 2008 à 2009 : Conseiller clientèle B to B - ARVAL Lease<br />Vente de produits de financement automobile pour les parcs automobiles de PME et PMI</li>
						<li>De 2011 à 2016 : Chef de secteur B to B - Vin<br />Promotion, mise en avant, vente de produit vinicole auprès d'un parc clientèle de grande distribution</li>
						<li>De 2016 à 2018 : Agent commercial B to B - Vin<br />Prospection, mise en avant, vente de produit vinicole haut de gamme auprès du circuit traditionnel "café, hotel, restaurant"</li>
					</ul>
				</div>	
				<div class= "article">
					<h2>Mes compétences</h2>
					<ul>
						<li>Vente, Négociation</li>
						<li>Marketing, Marketing digitale et Communication</li>
						<li>Comptabilité financière et analytique</li>
						<li>Peinture sur corps nus :<a href="lien.jpg">porfolio</a></li>
						<li>Anglais niveau C1</li>
					</ul>
				</div>	
				<div class= "article">
					<h2>Ma formation</h2>
					<ul>
						<li>Auto Formation (MOOC)</li>
						<li>Licence Pro Commercialisation des Vins</li>
						<li>DEES Communication</li>
						<li>BTS Action Commercialisation</li>
					</ul>
				</div>	
			</div>	
		</section>
	</body>
</html>

body
{
    display: flex;
    background-image: url("fond6.jpg");
    font-family: Sofia-Regular, Arial, Verdana, sans-serif;
    height: 600px;
    max-width: 1300px;
}

@font-face 
{
    font-family: 'Sofia-Regular';
    src: url('Sofia-Regular.otf');
}

h1
{
  text-shadow: 2px 2px 4px black;
}

h1, #legende
{
	text-align: center;
}

h2
{
  color: rgb(134, 72, 11);
  text-align: center;
}

a
{
   text-decoration: none;
   color: rgb(13, 134, 255);
   font-style: italic;
}
   
a:hover
{
   color: rgb(204, 130, 253);
}

aside
{
  background-color: rgb(134, 72, 11, 0.5);
  height: 100%;
  width: 200px;
  border-radius: 5px
}

header, section, aside
{
border: 3px solid black;
}

#articles
{
  display: flex;
}

#image1
{
  position: absolute;
  right:0;
  top:0;
  height:100%;
}

header
{
  position: relative;
}

philiga

25 mai 2018 à 11:14:04

Bonjour,

Tu as oublié de fermer ta balise <header> ; je te recommande l'excellent outil qu'est jsbin.com sur lequel (après peut-être qq réglages dans les paramètres), tu verras s'afficher en rouge les balises suivant une erreur comme le </header> manquant ici:

Par ailleurs, tu ne donnes pas de hauteur à ce header, c'est pour ça que ton image est énorme.

Enfin, tu peux faire ton liseret plus simplement avec border-left:8vw solid brown; par exemple, sur body sans aucun besoin d'élément html supplémentaire.

(Si tu veux garder ton aside et s'il ne sert qu'à ça, tu peux au moins appliquer largeur et couleur sur lui directement sans besoin de div#liseret dedans)

PS: Pour décaler ta photo à gauche, il suffit de donner une valeur non nulle à right.

-
Edité par philiga 25 mai 2018 à 11:17:03

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Matmath05

29 mai 2018 à 10:35:17

Ok merci pour ces réponses!

Pour éviter l'écrasement des textes et la superposition des éléments (quand je réduit la largeur de la fenêtre du navigateur), je souhaitais appliquer une largeur minimum au body mais cela ne donne rien...

Un élément de réponse la-dessus?

Merci d'avance!