18041 sujets

Questions générales et questions de débutants

Problème de div

Bonjour, j'ai un problème de div ma liste d'ingrédient et ma photo.
En effet, je souhaite que ma photo soit séparer de l'autre div.

Je souhaite que ma liste d'ingrédient soit en deux partis (la partis actuelle et une autre a coté si j'ai plus d'ingrédients à mettre).
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Page recette</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    		<!-- Title -->
					<h1 class="title center">Recette</h1>
			<!-- Infos -->
<center>
	<table cellspacing="10" cellpadding="1">
		<tr>
				<th>Difficulté</th>
				<th>Nbr de personnes</th>
				<th>Temps préparation</th>
				<th>Temps repos</th>
				<th>T° de cuisson</th>
				<th>Temps de cuisson</th>
			</tr>
		<tr>
				<td><img src="images/rate1.png"/></td>
				<td>8</td>
				<td>10 minutes</td>
				<td>Aucun</td>
				<td>180°C</td>
				<td>50 minutes</td>
			</tr>
	</table>
</center>		
	<!-- Ingredients -->
					<div class="ingredients">													
<p>1 chou-fleur<br />
3 oignons<br />
2 gousses d’ail<br />
30 cl de bouillon de volaille<br />
2 cuillères à soupe de farine<br />
2 cuillère à soupe de crème fraiche<br />
Fromage râpé<br />
Sel, poivre<br />
Muscade (facultatif)</p>					
							</div>	
						</div>
	<!-- Images -->
<div class="image">											
		<img src="photos/cookies.jpg" width="250px"/>
</div>
<br>
<br
	<!-- Instructions -->
	<div class="instructions">						
							<div class="lined">
							
<p>Détachez les bouquets de chou-fleur et faites les cuire 10 minutes dans l’eau salée.<br />
Emincez les oignons et l’ail et faites les revenir.<br />
Saisissez rapidement les chou-fleur dans du beurre et disposez-les dans un plat à gratin.<br />
Une fois les oignons blanchis, ajoutez le bouillons et la farine. Assaisonnez.<br />
Laissez cuire 20 minutes à feux doux.<br />
Préchauffez votre four à 220°<br />
Nappez les chou-fleur de la préparation.<br />
Parsemez le tout de fromage râpé et.<br />
Vérifiez la cuisson à l’oeil, quand le fromage est fondu et croustillant</p>						
				</div>		
			</div>				
		</div>
	</body>
</html>


mon css

html {                               
	font-size:100%;
	background: url(images/kraf.png) repeat;
	background: grey;
	background-size: cover;
	margin:0;
	padding:0;
}  

body { 
	width: 700px;
	margin: auto; /* Pour centrer notre page */
	margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. */
	font-family: "Droid Serif", serif;
	font-size: 12px;
	line-height: 1.625;
	border:1px solid red;
}


.title {
text-align:center;
}

td {
text-align:center;
}

.ingredients{
	width: 60%;
	text-align:center;
	margin: 45px 0 35px 0;
	float: left;
}


.image{
	width: 40%;
	margin: 45px 0 35px 0;
	float:right;
}

.instructions{
	width:100%;
}

/* Lined */
.lined { clear: both; padding: 0 10px; background: url(images/line.png) top left repeat; }
.lined p { font-size: 14px; line-height: 30px; margin-bottom: 30px; padding-right: 0;}

.ingredients .lined p{
	font-size: 14px; line-height: 15px; margin-bottom: 15px;
}


Cordialement
Bonjour,

En fait dès le premier coup d’œil je vois qu'il y a un soucis au niveau de la sémantique que tu utilises.
Apparemment tu codes en HTML5. La balise <center> est obsolète depuis l'HTML 4.01...

Je te conseillerai de revoir cette partie en faisant un truc du style:

<article>
    <section>
          <table>
               <tr>
               </tr>
          </table>
    </section>
</article>


Ensuite, au Pour tes ingrédients, tu devrais utiliser une liste plutôt que d'utiliser le <br/> .ex:

<!-- Ingredients -->
<section class="ingredients">	
    <ul>												
         <li>1 chou-fleur</li>
         <li>3 oignons </li>
         <li>2 gousses d’ail</li>
         <li>30 cl de bouillon de volaille</li>
         <li>2 cuillères à soupe de farine</li>
         <li>2 cuillère à soupe de crème fraiche</li>
         <li>Fromage râpé</li>
         <li>Sel, poivre</li>
         <li>Muscade (facultatif)</li>
    </ul>					
</section>


puis en css tu définis une hauteur fixe pour ta section, la liste s'affichera comme tu le souhaite. N'oublie pas de faire dans ton css:

.ingredients > ul  > li{
       list-style: none;
}


Voila Smiley biggrin
Merci Peter

Mais quand je fais la correction avec vos conseilles mon image redescent alors que ce n'est pas voulu.

Cordialement.
Bonjour,

En gardant les infos de Peter-L et en plaçant le div .image à la suite de l'ul, modifier le CSS comme suit:

.ingredients{
width: 90%;
margin: 30px auto 0 auto;
text-align:center;
}
   
.ingredients > ul {
float:left;
}
   
.ingredients > ul  > li{
list-style: none;
}
   
.image{
float:right;
}
Bonjour,

quelques remarques supplémentaires concernant ton code HTML.

Lorsque tu insères une image via la balise <img>, pense à toujours mettre l'attribut alt afin de rendre les images accessibles.

Quand tu renseignes une valeur numérique pour les attributs width et height de la balise <img>, ne précise pas d'unité.

Honnêtement, je pense que tu peux aisément te passer des tableaux dans ton code HTML ; tes données ne sont pas des données tabulaires. Ici, tu pourrais faire une liste non ordonnée.


<ul>
  <li>Difficulté : <img src="images/rate1.png" alt=""></li>
  <li>Nbr de personnes : 8</li>
  <li>Temps préparation : 10 minutes</li>
  <li>Temps repos : aucun</li>
  <li>T° de cuisson : 180°C</li>
  <li>Temps de cuisson : 50 minutes.</li>
</ul>


N'hésite pas utiliser le validateur du W3C afin de corriger d'éventuelles erreurs. Smiley cligne
Sujet clos
Aller à