High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

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

Dernière réponse le 28 oct 2009 à 22:26:20 Okutsuko, le 28 oct 2009 à 20:04:55 
 Signaler ce message aux modérateurs

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 :)
Configuration: Windows Vista
Firefox 3.5.3

Meilleures réponses pour « [HTML/CSS]Problème avec la balise Float » dans :
Enlever le soulignement sous les liens en HTML/CSS VoirPar défaut, les liens hypertextes en HTML sont soulignés, un trait de la couleur du lien apparaît en dessous du texte. Il est possible de supprimer ce soulignement à l'aide de la propriété CSS text-decoration:none : Grâce au CSS Grâce au CSS via...
Créer un site beau, dynamique et respectueux des standards VoirVoici une liste de liens qui vous aideront à mieux exploiter les standards (HTML, CSS, DOM...) pour créer des sites plus beaux, plus dynamiques et plus respectueux des standards. A la fin de cette page, il y a également une liste de...
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Les balises HTML VoirHTML, un langage à balises Le HTML n'est pas un langage de programmation. Il s'agit d'un langage permettant de décrire la mise en page et la forme d'un contenu rédigé en texte simple. Une page HTML est ainsi un simple fichier texte...
Les classes de style (CSS) VoirLes classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...
La syntaxe des style (CSS) VoirDéfinition d'un style La définition d'un style se fait à l'aide de règles en texte simple permettant de décrire l'aspect des éléments de la page. Une règle CSS est caractérisée par deux principaux éléments : Un sélecteur de balises, permettant de...
Posez votre question Répondre

1

le hollandais volant, le 28 oct 2009 à 21:03:15

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 ! Si tu ne sait pas, demande. Si tu sait, partage.

   
Répondre à le hollandais volant

2

Okutsuko, le 28 oct 2009 à 21:28:43

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épondre à Okutsuko

3

grux, le 28 oct 2009 à 21:57:11

Le problème vient de ton menu

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

   
Répondre à grux

4

Okutsuko, le 28 oct 2009 à 22:06:58

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

   
Répondre à Okutsuko

5

le hollandais volant, le 28 oct 2009 à 22:09:25

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. Si tu ne sait pas, demande. Si tu sait, partage.

   
Répondre à le hollandais volant

6

Okutsuko, le 28 oct 2009 à 22:19:52

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épondre à Okutsuko

7

 le hollandais volant, le 28 oct 2009 à 22:26:20

Derien^^

bonne soirée :-) Si tu ne sait pas, demande. Si tu sait, partage.

   
Répondre à le hollandais volant
Posez votre question Répondre
Ils ont besoin de votre aide