[HTML/CSS]Problème avec la balise Float [Résolu/Fermé]

Signaler
-
Messages postés
4963
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
31 octobre 2019
-
Bonjour,

J'ai actuellement un petit problème avec la balise float, je vous montre l'image:

http://www.monsterup.com/image.php?url=upload/1256756536745.jpg

L'image s'affiche au milieu alors qu'elle devrait s'afficher en haut à droite, je ne comprend pas :s

Mon code HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head> 
       <title>Mercure</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="listing.css" />
		<link rel="icon" type="image/png" href="icosun.ico" />
		<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="icosun.ico" /><![endif]-->
		
		
		
		
		
	</head>
	   <body>
	<div id="en_tete"></div>
 
<div id="menu">
	<div class="element_menu">
       <ul>
           <li><a href="soleil.html">Soleil</a></li>
           <li><a href="mercure.html">Mercure</a></li>
           <li>Vénus</li>
		   <li>Terre</li>
		   <li>Mars</li>
		   <li>Cérès</li>
		   <li>Jupiter</li>
		   <li>Saturne</li>
		   <li>Uranus</li>
		   <li>Neptune</li>
		   <li>Pluton</li>
		   <li>Eris</li>
		   <li>Quaoar</li>
       </ul>
	</div>  
</div>

<div id="corps">
	<image class="image" src="mercure.jpg" alt="Mercure"/>

Mercure est la planète la plus proche du Soleil et la plus petite du système solaire. Elle est de type tellurique comme la Terre, et doit son nom au dieu romain Mercure. Elle ne possède aucun satellite naturel. Sa magnitude apparente varie entre -0,4[réf. souhaitée] et 5,5. Mercure est une planète difficile à observer car elle est proche du Soleil et n'est donc observable qu'au lever et au coucher de celui-ci.

Mercure est encore une planète mystérieuse puisque seulement une partie de sa surface est connue. En effet, les seules sondes spatiales à avoir survolé la planète sont Mariner 10 à trois reprises en 1974–1975 et Messenger deux fois en 2008. Mariner 10 n'a pu cartographier que 40 à 45 % de la planète. Le second survol de Messenger le 6 octobre 2008 a permis d'étendre la surface totale observée à environ 95 % de la planète. À terme, l'orbiteur Messenger sera la première sonde à offrir une cartographie complète de Mercure	
	
	
</div>

<div id="border"></div>
<div id="pied_de_page"></div>

   
   </body>
</html>


Mon code CSS:

body
{
	width: 968px;
	margin: auto;
	margin-top: 20px; 
	margin-bottom: 20px;  
	Background-image: url("sun.jpg");
	Background-repeat: no-repeat;
}

#en_tete
{
   width: 200px;
   height: 100px;
   margin-bottom: 20px;
   background-image: url("TEST1.jpg");
   float: left;
}

#menu
{
	Width: 200px;
	margin-top:0;
	margin-bottom: 20px;
	clear: both;
	float: left;
}

a{color:red}
a:hover{color:white}
a:active{color:Yellow}
a:visited{color:green}



.element_menu
{ 
   background-image: url("TEST2.jpg");
   height: auto;
}

.element_menu ul
{    
   color: Red;
   font-family:"Times New Roman", "Times", "serif";
   padding-top: 70px;
   padding-left: 30px;
}



#corps
{
	max-Width: 741px;
	height: auto;
	margin-top: 20px;
	margin-left:219px;
	background-image: url("TEST3.jpg");
	Background-repeat:no-repeat;
	padding: 5px;
	color: white;
}

.image
{
	width: 200px;
	height: 200px;
	float: right;
	margin-right: 15px;
	margin-top: 15px;
}
	
	

#pied_de_page
{
   width: 960px;
   height: 94px;
   margin-top:20px;
   margin-bottom: 20px;
   background-image: url("footer.jpg");
   clear: both;
}


Aider moi SVP :)

7 réponses

Messages postés
4963
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
31 octobre 2019
1 025
salut !

<image class="image" src="mercure.jpg" alt="Mercure"/>


C'est ton code.

Le problème, c'est que la balise image est img

Tu dois donc mettre :
<img class="image" src="mercure.jpg" alt="Mercure"/>


Je pense que c'est ça.

Sinon, ton code est très propre, le nom des éléments sont clairs et la présentation est bien indentée ! Bravo !
Merci! J'aime bien quand c'est clair! C'est plus simple de s'y remettre ensuite ^^

Sinon, le fait de mettre image ou img ne change rien au problème... :(

Je pense que c'est un problème avec ce qui précède mon #corps, j'ai essayer d'isoler ce bout de code et ça fonctionne, le problème viendrait donc avant cela mais je ne vois pas où :s
Messages postés
13
Date d'inscription
lundi 26 octobre 2009
Statut
Membre
Dernière intervention
12 novembre 2009
2
le problème vient de ton menu

dans
.menu
met clear: right; au lieu de clear: both;
Messages postés
21
Date d'inscription
vendredi 4 janvier 2008
Statut
Membre
Dernière intervention
3 février 2011

Si je fais ça, le menu va chevaucher le corps et sera collé à ma bannière:s
Messages postés
4963
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
31 octobre 2019
1 025
Bon, dans le CSS, il ne doit y avoir que des lettres minuscules.
or, tu met des majuscules :

body
{
	width: 968px;
	margin: auto;
	margin-top: 20px; 
	margin-bottom: 20px;  
	background-image: url("sun.jpg");
	background-repeat: no-repeat;
}

#en_tete
{
   width: 200px;
   height: 100px;
   margin-bottom: 20px;
   background-image: url("TEST1.jpg");
   float: left;
}

#menu
{
	width: 200px;
	margin-top:0;
	margin-bottom: 20px;
	clear: both;
	float: left;
}

a{color:red}
a:hover{color:white}
a:active{color:yellow}
a:visited{color:green}



.element_menu
{ 
   background-image: url("TEST2.jpg");
   height: auto;
}

.element_menu ul
{    
   color: red;
   font-family:'times new roman', times, serif;
   padding-top: 70px;
   padding-left: 30px;
}



#corps
{
	max-width: 741px;
	height: auto;
	margin-top: 20px;
	margin-left:219px;
	background-image: url("TEST3.jpg");
	background-repeat:no-repeat;
	padding: 5px;
	color: white;
}

.image
{
	width: 200px;
	height: 200px;
	float: right;
	margin-right: 15px;
	margin-top: 15px;
}
	
	

#pied_de_page
{
   width: 960px;
   height: 94px;
   margin-top:20px;
   margin-bottom: 20px;
   background-image: url("footer.jpg");
   clear: both;
}


J'en ai peut-être oublié mais je ne pense pas.
Ensuite, quand tu met : font-family:"Times New Roman", "Times", "serif";

En fait, on utilise des guillement uniquement quand le nom de la police est en plusieurs mots. (et des guillements simples : 'times new roman' et non des "" Mais cela n'est pas le plus important.



Le problème, je viens de voir, vient du #en_tete : il est en float. Du coup, il entre en conflit avec ton image qui est aussi en float.
On peut le remarquer très simplement en changeant la hauteur du #en_tete. Et à vrai dire, le fait que le #menu est en float aussi, n'arrange rien…

Étant donné que les deux div "#en_tete" et "#menu" sont similaires (à gauche dans une colonne identique), pourquoi ne pas les regrouper dans une nouvelle div, par exemple #colonne_gauche, qui elle sera en float:left ?

Comme ceci :

<div id="colonne_gauche">
	<div id="en_tete"></div>
	<div id="menu">
		<div class="element_menu">
			<ul>
				<li><a href="soleil.html">Soleil</a></li>
				<li><a href="mercure.html">Mercure</a></li>
				<li>Vénus</li>
				<li>Terre</li>
				<li>Mars</li>
				<li>Cérès</li>
				<li>Jupiter</li>
				<li>Saturne</li>
				<li>Uranus</li>
				<li>Neptune</li>
				<li>Pluton</li>
				<li>Eris</li>
				<li>Quaoar</li>
			</ul>
		</div><!-- fin #element_menu -->
	</div><!-- fin #menu -->
</div><!-- fin #colonne_gauche -->


et en CSS :

#colonne_gauche 
{
   width: 200px;
   float: left;
}

#en_tete
{
   height: 100px;
   margin-bottom: 20px;
   background-image: url("TEST1.jpg");
}

#menu
{
   margin-top:0;
   margin-bottom: 20px;
}


Et là, ça marche !
Cela fera un div de plus, mais si on me trop de flottants, c'est plus gérable. Une autre solution aurait été de mette les éléments "#en_tete" et "#menu" en normal et la partie centrale en float:right.
Messages postés
21
Date d'inscription
vendredi 4 janvier 2008
Statut
Membre
Dernière intervention
3 février 2011

Super! Vraiment Génial! Un Gros Gros merci, j'ai failli m'arracher les cheveux rien que pour ce petit détail. ^^

Encore merci!! Bonne Soirée!!!
Messages postés
4963
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
31 octobre 2019
1 025
derien^^

bonne soirée :-)