Formation ISN - HTML & CSS

Avec la propriété css float, la boîte est d'abord positionnée selon le flux normal puis retirée et positionnée le plus à droite ou le plus à gauche à l'intérieur de son conteneur. Le contenu du bloc conteneur va alors entourer la boîte flottante.

Avec ce code, les images flotteront à droite dans leur boîte conteneur.
C'est le cas de l'image ci-contre.

Des sites pour se former

Modifier le Css pour que les deux boîtes de type <article> :

flottent l'une à côté de l'autre,
soient, chacune, entourées d'une bordure rouge de 3px,
occupent chacune 50% de l'espace horizontal.

Affichage à obtenir ?
Une solution ?

Définir le style Css afin que l'image apparaisse disposée de la façon suivante :

Le cadre est une bordure de l'élément <div>.

L'image est disposée à l'aide de la propriété Css float.

Affichage à obtenir ?
Une solution ?

La situation suivante se produit assez souvent :
un bloc (premier bloc noir) contient des éléments flottants (bloc orange), mais le bloc flottant a une hauteur trop grande et dépasse donc sur le bloc suivant (second bloc noir).

Sans modifier les dimensions et marges des trois blocs, modifier le code pour que le flottant ne déborde pas sur le second bloc noir.

Affichage à obtenir ?
Une solution ?

Dans le fichier qui suit, sans toucher au code Html, définir le Css pour obtenir une page semblable à :

Lorsqu'on survole le cercle 2 :

Lorsqu'on survole le cercle 3.1 :

Le bandeau est centré horizontalement dans la page et a une largeur de 800px.

<div id="blocPage">
	<header>
		<h1> Titre </h1>
		<nav>
			<ul class="horizontal">
				<li><a href="#"> 1 </a>
					<ul class="vertical">
						<li> <a href="#"> 1.1</a> </li>
						<li> <a href="#"> 1.2</a> </li>
					</ul>
				</li>
				
				<li><a href="#"> 2 </a>
					<ul class="vertical">
						<li> <a href="#"> 2.1</a> </li>
						<li> <a href="#"> 2.2</a> </li>
					</ul>
				</li>

<li><a href="#"> 3 </a>
					<ul class="vertical">
						<li><a href="#"> 3.1</a>
							<ul class="vertical">
								<li><a href="#"> 3.1.1</a>
									<ul class="vertical">
										<li> <a href="#"> 3.1.1.1</a> </li>
										<li> <a href="#"> 3.1.1.2</a> </li>
									</ul>
								</li>
								<li> <a href="#"> 3.1.2</a> </li>
								<li> <a href="#"> 3.1.3</a> </li>
							</ul>
						</li>
						<li><a href="#"> 3.2</a>
							<ul class="vertical">
								<li> <a href="#"> 3.2.1</a> </li>
								<li> <a href="#"> 3.2.2</a> </li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</nav>
	</header>
	
	<h2> Texte </h2>
	<p>
		Pourquoi pas
	</p>
</div>

Affichage à obtenir ?
Une solution ?

<div id="blocPage">
	<header>
		<h1> Titre </h1>
		<nav>
			<ul class="horizontal">
				<li><a href="#"> 1 </a>
					<ul class="vertical">
						<li> <a href="#"> 1.1</a> </li>
						<li> <a href="#"> 1.2</a> </li>
					</ul>
				</li>
				
				<li><a href="#"> 2 </a>
					<ul class="vertical">
						<li> <a href="#"> 2.1</a> </li>
						<li> <a href="#"> 2.2</a> </li>
					</ul>
				</li>

/* Partie css */
ul {
	list-style-type: none;		/* on enlève les puces des listes : */
	margin: 0;
	padding: 0;
	height: 50px;
	}

.horizontal>li {
	/* les éléments li 1, 2, 3 flottent à gauche. 
	Ils apparaissent ainsi alignés : */
	float: left;
	margin: 5px;
	padding: 0;
	}

li {
	/* les éléments li sont déclarés en position relative de façon
	à déclarer en position absolute les sous-listes : */
	position: relative;
	width: 50px; 
	text-align: center;
	}

a {
	display: block;
	margin: 0;
	padding:0;
	border-radius: 50%;		/* pour avoir une forme de disque : */
	border: 1px solid lightgrey;
	background-color: yellow;
	width: 50px;
	height: 50px;
	line-height: 50px;		/* permet d'avoir un texte centré verticalement */
	text-decoration: none;
	color: lightblue;
	font-size: 18px;
	}

.vertical {
	/* les sous-listes ne sont pas affichées a priori : */ 
	display: none;
	}

.horizontal>li:hover>.vertical {
	display: block;		/* affichage sous-liste niveau 1 au survol de l'élément li la contenant : */
	/* enlever le positionnement qui suit et chercher à expliquer la conséquence : */
	position: absolute;
	}

.vertical>li:hover>.vertical {
	display: block;		/* affichage sous-liste  de niveau >1 au survolde l'élément li la contenant  : */
	position: absolute;
	top: 0;
	left: 100%;
	}

header {
	height: 200px;
	position: relative;		/* position relative pour y placer h1 en absolu : */
	background-color: lightgreen;
	margin:0;
	padding:0;
	}

header>h1 {
	position : absolute;
	left: 50%;
	top: 10px;
	color: orange;
	}

nav {
	/* on joue ici sur la marge interne supérieure pour placer nav en bas du bandeau : */
	padding-top: 130px;
	}

#blocPage {
	width: 800px; 
	margin: 0 auto;
	}