[HTML/CSS]Problème avec la balise Float

Résolu

Okutsuko -
le hollandais volant Messages postés 4998 Date d'inscription Statut Membre Dernière intervention - 28 oct. 2009 à 22:26

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 :)

Afficher la suite

A voir également:

[HTML/CSS]Problème avec la balise Float
Editeur html - Télécharger - HTML
Espace html - Astuces et Solutions
Espace HTML ✓ - Forum HTML
[**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
Html download - Télécharger - HTML

7 réponses

Réponse 1 / 7

le hollandais volant Messages postés 4998 Date d'inscription Statut Membre Dernière intervention 1 057

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 !

Réponse 2 / 7

Okutsuko

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

Réponse 3 / 7

grux Messages postés 13 Date d'inscription Statut Membre Dernière intervention 2

le problème vient de ton menu

dans
.menu
met clear: right; au lieu de clear: both;

Réponse 4 / 7

Okutsuko Messages postés 21 Date d'inscription Statut Membre Dernière intervention

Si je fais ça, le menu va chevaucher le corps et sera collé à ma bannière:s

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 7

le hollandais volant Messages postés 4998 Date d'inscription Statut Membre Dernière intervention 1 057

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.

Réponse 6 / 7

Okutsuko Messages postés 21 Date d'inscription Statut Membre Dernière intervention

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!!!

Réponse 7 / 7

le hollandais volant Messages postés 4998 Date d'inscription Statut Membre Dernière intervention 1 057

derien^^

bonne soirée :-)

Discussions similaires

Balise
avec l'attribut class

Votre réponse

Discussions similaires