Sujet Précédent Sujet Suivant

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

Résolu/Fermé
Okutsuko - 28 oct. 2009 à 20:04
le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 - 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 :)
A voir également:

7 réponses

Réponse 1 / 7
le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 1 057
28 oct. 2009 à 21:03
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 !
0
Réponse 2 / 7
Okutsuko
28 oct. 2009 à 21:28
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
0
Réponse 3 / 7
grux Messages postés 13 Date d'inscription lundi 26 octobre 2009 Statut Membre Dernière intervention 12 novembre 2009 2
28 oct. 2009 à 21:57
le problème vient de ton menu

dans
.menu
met clear: right; au lieu de clear: both;
0
Réponse 4 / 7
Okutsuko Messages postés 21 Date d'inscription vendredi 4 janvier 2008 Statut Membre Dernière intervention 3 février 2011
28 oct. 2009 à 22:06
Si je fais ça, le menu va chevaucher le corps et sera collé à ma bannière:s
0

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 samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 1 057
28 oct. 2009 à 22:09
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.
0
Réponse 6 / 7
Okutsuko Messages postés 21 Date d'inscription vendredi 4 janvier 2008 Statut Membre Dernière intervention 3 février 2011
28 oct. 2009 à 22:19
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!!!
0
Réponse 7 / 7
le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 1 057
28 oct. 2009 à 22:26
derien^^

bonne soirée :-)
0

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Balise </br>
erf -
erf -

3 réponses
Saut de lignes sans <br/>
Rapi-shiny -
Rapi-shiny -

13 réponses
Balise
avec l'attribut class
CrazyGeekMan -
CrazyGeekMan -

7 réponses