Découpez et intégrer une maquette

Anonyme

15 février 2019 à 17:52:10

Bonjour,

Le précédent message dans lequel j'expliquais mes déboires avec les exercices du cours "Découpez et intégrez une maquette" a été "détecté comme spam" et effacé (j'essayais de trouver comment insérer du code en HTML sur ce forum, car je vois tous les autres langages sauf le HTML, mais j'ai dû modifier trop de fois de suite... ) et j'avoue ne pas avoir le courage de tout réécrire...

Nouveau mystère depuis : j'ai TOUT effacé de mon fichier .html et de mon fichier .css, et l'image bandeau que je j'ai passé l'après-midi à essayer de dimensionner en pleine page responsive, avec Bootstrap, apparaît encore quand j'ouvre mon index.html dans Firefox !! :waw:

Mon code, vide :

<!-- HTML -->
<!DOCTYPE html>
<html>

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

		<!-- Twitter Card data -->
		<meta name="twitter:card" content="summary">
		<meta name="twitter:site" content="@publisher_handle">
		<meta name="twitter:title" content="Page Title">
		<meta name="twitter:description" content="Page description less than 200 characters">
		<meta name="twitter:creator" content="@author_handle">
		<!-- Twitter Summary card images must be at least 200x200px -->
		<meta name="twitter:image" content="http://www.example.com/image.jpg">

		<!-- Open Graph data -->
		<meta property="og:title" content="Title Here" />
		<meta property="og:type" content="website" />
		<meta property="og:url" content="http://www.example.com/" />
		<meta property="og:image" content="http://example.com/image.jpg" />
		<meta property="og:description" content="Description Here" />
		<meta property="og:site_name" content="Site Name" />
		<meta property="fb:admins" content="Facebook numeric ID" />
	</head>

	<body>
		<!-- Header -->
		<header>

		</header>

	  <!-- Section 1 -->
	  <section id="section_one">

	  </section>



/* et CSS */

L'image apparaît ainsi dans la fenêtre (et oui, j'ai pensé à sauvegarder avant de recharger la page...) :

Et précédemment en essayant de dimensionner mon bandeau avec Bootstrap j'avais ça (ci-dessous). Je pense avoir un background parasite mais absolument aucune idée de ce qui l'appelle !!

Mes dossiers quant à eux sont rangés ainsi : index.html ; bootstrp.css et style.css ensemble, un sous-dossier "images" (et pas encore de sous-dossier "fonts" vu que je n'ai pas trop avancé aujourd'hui...

D'avance merci pour votre aide !

Zoki_Marciano

15 février 2019 à 19:47:29

Sans un minimum de code c'est compliqué. Et pour tes fichiers tu devrais faire apparaitre les extensions ca sera beaucoup plus pratique.

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

Anonyme

16 février 2019 à 6:25:41

Bonjour,

Merci, je vais faire ainsi pour les extensions.

Ma question concerne bien le fait qu'il n'y a pas de code et l'image d'arrière-plan est là ! Si je trouve ce qui se passe je reviendrai ici donner l'explication...

Mewen_bzh

16 février 2019 à 10:45:59

Le cache du navigateur peut être ? Vide le et actualise ta page. 😉

Je ne réponds pas aux messages privés.

Anonyme

16 février 2019 à 12:01:20

Non, ce n'était pas ça, mais merci, je n'y avais pas pensé . J'ai recommencé à zéro du coup, plus simple (pas comme si j'étais très avancée dans mes fichiers...

Une chose que je n'ai pas comprise avec Bootstrap, c'est si l'on peut superposer deux lignes ? Pour avoir un bandeau sur 12 colonnes (donc une ligne complète j'imagine ?) et un logo sur la même ligne, sur 2 colonnes mettons ?

Ou bien alors, est-il possible d'utiliser les propriétés Flexbox dans Bootstrap ?

Cela fonctionne déjà mieux qu'hier, avec mon image presque dimensionnée à la taille écran... Mais malgré margin et padding à 0, il reste de l'espace sur les bords externes. Et j'ai bien choisi container-fluid dans Bootstrap...

Mon logo quant à lui ne veut pas apparaître...

<!-- HTML -->

<!DOCTYPE html>
<html>

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

		<!-- Twitter Card data -->
		<meta name="twitter:card" content="summary">
		<meta name="twitter:site" content="@publisher_handle">
		<meta name="twitter:title" content="Page Title">
		<meta name="twitter:description" content="Page description less than 200 characters">
		<meta name="twitter:creator" content="@author_handle">
		<!-- Twitter Summary card images must be at least 200x200px -->
		<meta name="twitter:image" content="http://www.example.com/image.jpg">

		<!-- Open Graph data -->
		<meta property="og:title" content="Title Here" />
		<meta property="og:type" content="website" />
		<meta property="og:url" content="http://www.example.com/" />
		<meta property="og:image" content="http://example.com/image.jpg" />
		<meta property="og:description" content="Description Here" />
		<meta property="og:site_name" content="Site Name" />
		<meta property="fb:admins" content="Facebook numeric ID" />
	</head>

	<body>
		<!-- Header -->
		<header>
			<div class="container-fluid">
				<div class="row">
					<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
						<img src="images/header_picture.jpg" alt="Header Picture" />
					</div>
				</div>
				<div class="row">
					<div class="col-xs-1 col-sm-1 col-md-2 col-lg-2">
						<img src="images/img_logo.svg" />
					</div>
				</div>
			</div>
		</header>

/* et le CSS */
header img
{
  width: 100%;
  background-size: cover;
  margin: 0;
  padding: 0;
}

-
Edité par Anonyme 16 février 2019 à 12:24:53

Mewen_bzh

16 février 2019 à 16:12:30

Le body a des marges par défaut. Regarde si ça ne serait pas la cause de tes espaces sur les bords externes comme tu dis. 😉

Je ne réponds pas aux messages privés.

Anonyme

17 février 2019 à 7:00:43

Yep, c'était ça ! Merci

En revanche, je ne comprends toujours pas comment superposer 2 lignes avec Bootstrap, pour avoir un logo sur un bandeau...

<!DOCTYPE html>
<html>

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

		<!-- Twitter Card data -->
		<meta name="twitter:card" content="summary">
		<meta name="twitter:site" content="@publisher_handle">
		<meta name="twitter:title" content="Page Title">
		<meta name="twitter:description" content="Page description less than 200 characters">
		<meta name="twitter:creator" content="@author_handle">
		<!-- Twitter Summary card images must be at least 200x200px -->
		<meta name="twitter:image" content="http://www.example.com/image.jpg">

		<!-- Open Graph data -->
		<meta property="og:title" content="Title Here" />
		<meta property="og:type" content="website" />
		<meta property="og:url" content="http://www.example.com/" />
		<meta property="og:image" content="http://example.com/image.jpg" />
		<meta property="og:description" content="Description Here" />
		<meta property="og:site_name" content="Site Name" />
		<meta property="fb:admins" content="Facebook numeric ID" />
	</head>

	<body>
		<!-- Header -->
		<header>
			<div class="container-fluid">
				<div class="row">
					<div class="col-xs-1 col-sm-1 col-md-2 col-lg-2">
						<img src="images/img_logo.svg" alt="Logo" />
					</div>
						<div class="row">
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
								<img src="images/header_picture.jpg" alt="Header Picture" />
							</div>
						</div>
				</div>
			</div>
		</header>

Et ça donne ceci :

(Le rectangle blanc correspond au logo qui est blanc, donc invisible, mais ce n'est pas juste une marge...)

Du coup, mêmes interrogations : comment avoir sur une même ligne un bandeau qui prend les 12 colonnes de la grille, et demander que sur une sorte de calque supérieur de cette mêne lligne, avoir un logo sur 2 colonnes mettons ?

Ou bien alors, est-il possible d'utiliser les propriétés Flexbox dans Bootstrap ?

Merci pour les conseils !

-
Edité par Anonyme 17 février 2019 à 7:02:44

Zoki_Marciano

18 février 2019 à 7:46:50

Tu trouveras la reponse ici il y a plusieurs façon de proceder :

https://getbootstrap.com/docs/4.3/components/navbar/

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

Anonyme

19 février 2019 à 15:42:05

ça a l'air exactement ce dont j'avais besoin ! Merci