Bannière HTML/CSS (site web)

Fermé
Zobi47 Messages postés 62 Date d'inscription samedi 28 mai 2016 Statut Membre Dernière intervention 15 août 2019 - 8 déc. 2018 à 13:21
MariisaT Messages postés 55 Date d'inscription mercredi 16 mai 2018 Statut Membre Dernière intervention 27 septembre 2019 - 14 déc. 2018 à 18:53
Bonjour,


Je commence depuis peu le HTML et le CSS en parallèle de mes cours d'ICN au lycée, et je dois créer un site.

Ce que je veux faire (qui est plutôt esthétique), c'est intégrer une simple bannière dans l'en-tête de la page principale, qui sera en fait une image, avec du texte dessus : à la façon de (openclassrooms.com), j'aurai un menu, sous celui-ci ma bannière (environ du 1920x470 je dirais pour un écran fullHD) et en dessous le contenu de la page avec le pied de page.

J'ai beaucoup cherché sur Internet mais comme je n'ai pas obtenu de résultat satisfaisant, je poste ici.

Je veux qu'il n'y ait aucun bord à l'image afin qu'elle soit "collée" aux côtés de la page. J'ai réussi à coller l'image en mettant un margin: 0; pour le body, mais seulement ça décale aussi le texte, alors que je veux uniquement coller l'image, pas le reste (margin, border et padding ne fonctionnent pas quand je les applique pour img ou .banniere).

J'essaye de comprendre un peu comment fonctionnent les balises en HTML et comment fonctionne le CSS, mais j'ai un peu de mal à vrai dire... avec l'ensemble de choses que j'ai lu, j'ai mis une balise <div class="...">. J'ai ensuite mis l'image, que j'ai tenté de configurer dans le CSS.. voici les codes correspondants ci-dessous :

HTML :
		<header>		
			<h1>TPE: Intelligence Artificielle dans la Médecine</h1>
			<div class="banniere">
				<img src='file:///C:/Users/Utilisateur/Desktop/ICN-site%20tpe%20IA/fichiers/img4.png' alt=image4>
			</div>
		</header>

CSS :
body {
	font-family: Arial;
	background-color: #ededed;
	margin: 0;
	}
  
img {
	width: 1920px;
	height: 470px;
	margin: 0;
	border: 0;
	padding: 0;
	}

.banniere {
	width: 1920px;
	height: 470px;
	margin: 0;
	border: 0;
	padding: 0;
	}


Pour le CSS, j'avais essayé de mettre un .banniere et #banniere, mais je me suis rendu compte que l'écriture n'y change rien à l'image ! par contre avec un img, qui fait référence à la balise <img src= ...>, là je peux mettre du 500x500 en dimensions par exemple, et ça va fonctionner. Donc il y a beaucoup de choses que je ne comprends pas encore forcément, mais c'est normal puisque je débute :)

Merci d'avance pour l'aide que vous pouvez apporter (à moi et à ceux qui sont dans la même situation ..) !
A voir également:

3 réponses

WAAA la coincidence de ouf, je fais un tpe aussi sur la téléchirurgie et je suis en train de faire un site pour ça. La tu tombes bien je n'ai pas trop compris ce que tu veux faire réellement mais j'ai les bases en html et css je pourrais t'aider plus en détail, ajoute moi sur discord : maclevine#3478
0
Code_Louis_TV Messages postés 4 Date d'inscription mercredi 12 décembre 2018 Statut Membre Dernière intervention 12 décembre 2018
Modifié le 12 déc. 2018 à 11:59
Salut,

As-tu essayé de positionner l'image en background?

Est-ce que tu as défini la largeur de ta page web ?

Code Louis
0
MariisaT Messages postés 55 Date d'inscription mercredi 16 mai 2018 Statut Membre Dernière intervention 27 septembre 2019 66
14 déc. 2018 à 18:53
Bonjour,
Pour évité d'avoir une image avec des bord ou des espaces sur les côté il suffit de mettre dans le code html, la balise responsive, De cette façon l'image va s'adapter à la longeur de l'écran de n'importe quel support.
0