Partage

Deux Div dans une Div

21 août 2019 à 19:06:53

Bonsoir à tous,

Je dois arriver à ce résultat là :

Et voilà où j'en suis actuellement :

Pour tout ce qui sera texte et compagnie, no soucis.

Par contre j'ai un soucis avec le menu et les deux <div> que je dois placer dans la <div> principale transparente (enfin à moitié). J'ai utilisé la fonction float:left; pour les deux div, ce qui les placent bien côté à côté, mais pour une raison que j'ignore, cela les a éjecté de la <div> principale (alors que quand j'enlève les float, elles y reviennent).

J'ai également un soucis avec le menu du haut, je n'arrive pas à le mettre à gauche et à bien el faire comme sur le modèle :/ Bref la galère :/

Voici mon html :

<!Doctype html>
   <html>
        <head>
	        <title> LA FOURCHETTE </title>
            <link rel="stylesheet" type="text/css" href="style.css">
		   
        </head>
		<body>
		
		<div class="bloc1"> <img id="logofourchette" src="logo-fourchette-2.png" width="278" height="96" alt="code-1" title="code-3"/>
		
		<nav class="main-menu">
		   <ul> 
		      <li><a href="#">Accueil</a></li>
			  <li><a href="#">Menus </a></li>
			  <li><a href="#">Informations pratiques </a></li>
			  <li><a href="#"> Contacts </a></li>
		   </ul>
	    </nav>
		
		 <div class="bloc2"> Restaurant		</div>
		
		<div class="bloc3"> Le totalorium du totalié plié	</div>

		</div>
		
        </body>
  </html>

Et mon CSS :

body {
background-image:url("back-cover.jpg");
}

.bloc1 {
	border: 0px solid #000;
	width:990px;
	min-height:150px;
	padding:0px;
	margin: auto;
	background-color :hsla(358,28%,95%,0.85);
	text-align:center;
	
}

.main-menu-float ul, .main-menu-float li {
	margin:0;
	padding:0;
}


.main-menu-float ul {
	border:1px solid #000000
}
	
.main-menu-float li {
	display:inline;
	list-style:none;
	float:left;
}

.main-menu a {
	color:#000000;
	text-decoration:none;
	padding:0px 10px;
	font-size:20px;
}

.main-menu a:hover 
{
	color:#d86c0c
}


.bloc2 {
	float:left;
	width:280px;
	height:630px;
	
}
	
	
	.bloc3 {
	float:left;
	width:640px;
	height:630px;
	
	}

lindadu01

22 août 2019 à 8:50:18

Bonjour,

Dans ton CSS tu parles de class "main-menu-float" mais tu ne l'utilises pas :/

Pour caler tes éléments côte à côte essaies d'appliquer la propriété float left à nav>ul>li

Parfois, arrêter 5 minutes son développement permet de mieux repartir face à un problème ;)

Jérémyr2

22 août 2019 à 16:43:25

Salut Linda ! Merci pour ta réponse !

Je ne comprends pas, que veux-tu dire par "appliquer à nav>ul>li" ?

lindadu01

22 août 2019 à 16:49:22

Bonjour,

Regarde du côté des selecteurs CSS. Ca permet de sélectionner les enfants d'un élément (ici on cible tous les éléments LI appartenant à un UL appartenant lui-même à un nav)

Parfois, arrêter 5 minutes son développement permet de mieux repartir face à un problème ;)

Jérémyr2

26 août 2019 à 18:35:07

Bon en fait je me suis trop embrouillé lol, du coup j'ai repris mon code à 0. C'est bien mieux (voir les images ci-dessous) mais de petits soucis restes.

Pour ma Div de droite, je ne comprends pas qu'elle ne se mette pas à droite justement. Enfin si, elle estmais à moitié. Le "titre" (le totalorium etc) est bien à droite mais le texte du dessous ne suit pas....

et j'ai toujours ce problème de menu que je n'arrive pas à faire ressembler au modèle :/

Image 1

Image 2 (suite)

Code :

<!Doctype html>
   <html>
        <head>
	        <title> LA FOURCHETTE </title>
            <link rel="stylesheet" type="text/css" href="style.css">
		   
        </head>
		<body>
		
		<div class="bloc1"> <img id="logofourchette" src="logo-fourchette-2.png" width="278" height="96" alt="code-1" title="code-3"/>
		
		     <nav class="main-menu">
		       <ul> 
		         <li><a href="#">Accueil</a></li>
			     <li><a href="#">Menus </a></li>
			     <li><a href="#">Informations pratiques </a></li>
			     <li><a href="#"> Contacts </a></li>
		       </ul>
	         </nav>
		
		  <div class="bloc2"> <h2>Restaurant </h2>
		  
		  <h3>Gastronomie</h3>
		  
		   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec nulla consectetur nunc venenatis mattis eu in tortor. 
		   Vivamus bibendum sit amet leo varius laoreet. Praesent tristique vel nibh quis bibendum. Sed volutpat mi sed molestie pharetra. 
		   Aenean quis lorem at magna ornare luctus. Morbi ut neque sed dui pulvinar euismod ultrices ac elit. 
		   Phasellus vestibulum sed mi vitae imperdiet.
		   
		   <h3>Produit</h3>

          Nam venenatis auctor felis quis tempor. Sed ullamcorper vehicula enim nec aliquam. Vivamus sodales justo a dui dictum maximus. 
		  Nam nec aliquet dolor. Proin ultricies lacus in neque mollis maximus at nec lacus. In vel sapien vitae sapien rhoncus ultricies. 
		  Donec non pretium quam, id mollis tortor. 
		  
		  </div>
		
		  <div class="bloc3"> Le totalorium du totalié plié	</div>
		  
		  le 21 septembre
		  
		  JLGGJ
		  
		  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec nulla consectetur nunc venenatis mattis eu in tortor. 
		   Vivamus bibendum sit amet leo varius laoreet. Praesent tristique vel nibh quis bibendum. Sed volutpat mi sed molestie pharetra. 
		   Aenean quis lorem at magna ornare luctus. Morbi ut neque sed dui pulvinar euismod ultrices ac elit. 
		   Phasellus vestibulum sed mi vitae imperdiet.
		   
		   IOGIYDF

          Nam venenatis auctor felis quis tempor. Sed ullamcorper vehicula enim nec aliquam. Vivamus sodales justo a dui dictum maximus. 
		  Nam nec aliquet dolor. Proin ultricies lacus in neque mollis maximus at nec lacus. In vel sapien vitae sapien rhoncus ultricies. 
		  Donec non pretium quam, id mollis tortor. 

		</div>
		
        </body>
  </html>

body {
background-image:url("back-cover.jpg");
}

.bloc1 {
	border: 0px solid #000;
	width:990px;
	min-height:150px;
	padding:0px;
	margin: auto;
	background-color :hsla(358,28%,95%,0.85);
	text-align:center;
	
}



.main-menu a {
	color:#000000;
	text-decoration:none;
	padding:0px 10px;
	font-size:20px;
}

.main-menu a:hover 
{
	color:#d86c0c
}


.bloc2 {
	
	width:280px;
	min-height:150px;
	padding: 15px;
	display: inline-block;
}
	
	
.bloc3 {
	
	width:640px;
	min-height:150px;
	padding: 15px;
	display: inline-block;
	}

Squirrel Jo

29 août 2019 à 18:40:39

Moi j'utiliserais Flexbox (si tu ne sais pas utiliser Bootstrap).

Toutes les explications sont dans ce cours : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/3298561-faites-votre-mise-en-page-avec-flexbox

cela te permettrais d'avoir deux blocs alignés et il ne reste plus qu'à les remplir Un conteneur et ses Ã©lÃ©ments

AnttonDev

30 août 2019 à 18:40:16

bonjour,

tu peux faire comme ça :

.main-menu ul li {
    display: inline;
}

ça te permettra de mettre tous les elements de la liste en ligne.

on cible les éléments li qui sont dans la liste ul qui est elle même dans la nav avec la class .main-menu

bonne chance pour la suite

article sur les cookies walls • validator html • validator css • Doc MDN • SweetAlert2• Lorem Ipsum • lorem Picsum • html color codes • Caractères spéciaux et entités HTML

Mon site : BLOG | anttondev (wixsite.com)

Jérémyr2

10 septembre 2019 à 18:00:25

Merci à vous deux pour les réponses !

Pour les bloc, c'est tout bon ! Par contre le menu, rien à faire jusqu'à maintenant, ça prend pas ! Je vous mets où j'en suis arrivé :

<!Doctype html>
   <html>
        <head>
	        <title> LA FOURCHETTE </title>
            <link rel="stylesheet" type="text/css" href="style.css">
		   
        </head>
		<body>
		
		<div class="bloc1"> <img id="logofourchette" src="logo-fourchette-2.png" width="278" height="96" alt="code-1" title="code-3"/>
		
		     <nav class="main-menu">
		       <ul> 
		         <li><a href="#">Accueil</a></li>
			     <li><a href="#">Menus </a></li>
			     <li><a href="#">Informations pratiques </a></li>
			     <li><a href="#"> Contacts </a></li>
		       </ul>
	         </nav>
		
		  <div class="bloc2"> <h2>Restaurant </h2>
		  
		  <h3>Gastronomie</h3>
		  
		   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec nulla consectetur nunc venenatis mattis eu in tortor. 
		   Vivamus bibendum sit amet leo varius laoreet. Praesent tristique vel nibh quis bibendum. Sed volutpat mi sed molestie pharetra. 
		   Aenean quis lorem at magna ornare luctus. Morbi ut neque sed dui pulvinar euismod ultrices ac elit. 
		   Phasellus vestibulum sed mi vitae imperdiet. Praesent tristique vel nibh quis bibendum. Sed volutpat mi sed molestie pharetra. 
		   Aenean quis lorem at magna 
		   
		   <h3>Produit</h3>

          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec nulla consectetur nunc venenatis mattis eu in tortor. 
		   Vivamus bibendum sit amet leo varius laoreet. Praesent tristique vel nibh quis bibendum. Sed volutpat mi sed molestie pharetra. 
		   Aenean quis lorem at magna ornare luctus. Morbi ut neque sed dui pulvinar euismod ultrices ac elit. 
		   Phasellus vestibulum sed mi vitae imperdiet. Praesent tristique vel nibh quis bibendum. Sed volutpat mi sed molestie . 
	
		  
		  </div>
		
		  <div class="bloc3"> <h1>Le totalorium du totalié plié	</h1>
		  
		  <p>le 21 septembre 2018 par Mickaël Cohen</p>
		  
		  <h2>Totalorium </h2>
		  
		  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec nulla consectetur nunc venenatis mattis eu in tortor. 
		   Vivamus bibendum sit amet leo varius laoreet. Praesent tristique vel nibh quis bibendum. Sed volutpat mi sed molestie pharetra. 
		   Aenean quis lorem at magna ornare luctus. Morbi ut neque sed dui pulvinar euismod ultrices ac elit. 
		   Phasellus vestibulum sed mi vitae imperdiet.
		   
		   <h2>Totalorium </h2>

          Nam venenatis auctor felis quis tempor. Sed ullamcorper vehicula enim nec aliquam. Vivamus sodales justo a dui dictum maximus. 
		  Nam nec aliquet dolor. Proin ultricies lacus in neque mollis maximus at nec lacus. In vel sapien vitae sapien rhoncus ultricies. 
		  Donec non pretium quam, id mollis tortor.

		  <hr width="100%" color="black">
		  
		  <h1>Sur le même sujet </h1>
		  
		   <img src="gougeres.jpg" width="200" height="150" alt="code-1" title="boulettes"/>&nbsp; &nbsp; 
                       <img src="table.jpg" width="200" height="150" alt="code-1" title="table"/>&nbsp; &nbsp;
                       <img src="biscuit.jpg" width="200" height="150" alt="code-1" title="pains"/>
		  
		  </div>
		  
		 <hr width="100%" color="black">
		 
		  © 2019 tous droits de reproduction réservés

		</div>
		
        </body>
  </html>

body {
background-image:url("back-cover.jpg");
}

.bloc1 {
	border: 0px solid #000;
	width:990px;
	min-height:150px;
	padding:0px;
	margin: auto;
	background-color :hsla(358,28%,95%,0.85);
	text-align:center;
	
}


.main-menu a ul li {
	color:#000000;
	text-decoration:none;
	padding:0px 10px;
	font-size:20px;
	display: inline;
}

.main-menu a:hover 
{
	color:#d86c0c
}


.bloc2 {
	
	width:280px;
	min-height:150px;
	padding: 15px;
	display: inline-block;
}
	
	
.bloc3 {
	
	width:640px;
	min-height:150px;
	padding: 15px;
	display: inline-block;
	}

Et la suite :

Squirrel Jo

10 septembre 2019 à 18:34:23

Moi, j'enlèverait les balises ul et li du menu car ce qui est important ici est le fait que ce soient des liens (balise a), non ?

Ça donnerait :

<nav class="main-menu">
    <a href="#">Accueil</a>
    <a href="#">Menus </a>
    <a href="#">Informations pratiques </a>
    <a href="#"> Contacts </a>
 </nav>

.main-menu a {
	color:#000000;
	text-decoration:none;
	padding:0px 10px;
	font-size:20px;
	display: inline;
}

AnttonDev

13 septembre 2019 à 18:36:23

Bonjour,

Vous avez mis display: inline; dans .main-menu a ul li. Or il ne faut pas mettre le "a".

ça donnerait ceci :

.main-menu ul li {
display: inline;
}

normalement ça devrait fonctionner

article sur les cookies walls • validator html • validator css • Doc MDN • SweetAlert2• Lorem Ipsum • lorem Picsum • html color codes • Caractères spéciaux et entités HTML

Mon site : BLOG | anttondev (wixsite.com)

Squirrel Jo

16 septembre 2019 à 11:25:55

Ah mais oui les balises a ne sont pas des blocs !! oups, pardon pour mon dernier post complètement à l'ouest !!

Deux Div dans une Div

Supprimer

Modérer

Signaler le message aux modérateurs