18041 sujets

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

[Résolu] Positionnement Flottant

Bonjour, j'essaie de comprendre d'où vient mon erreur et je ne trouve pas.
En gros, j'ai un souci avec la légende qui se trouve en-dessous de la photo, j'ai beau lui dire "italique", rien à faire. Avant de mettre cette boîte en flottant tout baigne et dès que j'impose le flottant, c'est le conflit.
Autre chose j'ai un soulignement vert (signe de problème possible sur IE 6 avec la boîte h1) c'est important ou pas ?



<body>
<div id="global">
<div id="interieur"> 
<div id="logo"><p>LOREM</p></div>
<p class="menu_droite"><a href="#">Liens utiles</a> |  <a href="#">Contact</a> | <a href="#">Accueil</a> |</p>
<p class="menu_gauche"><a href="#">Lorem 1</a> | <a href="#">Lorem 2</a> | <a href="#">Lorem 3</a> | <a href="#">Lorem 4</a> | <a href="#">Lorem 5</a> | <a href="#">Lorem 6</a> | </p>


<div id="bloc_texte"> 
  <div id="image"><img src="images/Fleur.png" width="216" height="288" />
  <p class="legende">L&eacute;gende de la photo.</p>
  </div>
    <h1>Lorem Ipsum</h1> 
    <h2>Lorem ipsum dolor</h2> 
    <p><span class="gras">Lorem</span> ipsum dolor sit amet, consectetuer adipiscing elit, <span class="gras">sed diem nonummy</span> nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat.</p> 
    <h1>Lorem Ipsum</h1> 
    <h2>Lorem ipsum dolor sit amet</h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <span class="gras">Sed libero</span>. Etiam eros. Ut cursus nisl ut ipsum. Nam ligula ante, condimentum eu, ultricies et, aliquam iaculis, magna. Nam convallis molestie enim. In eu est vehicula ipsum cursus adipiscing. Nam facilisis, felis in <span class="gras">sagittis</span> scelerisque, nisl dui lacinia odio, eget dictum est orci quis arcu. <span class="gras">Suspendisse</span> luctus, nisl quis tempus tincidunt, dolor turpis bibendum elit, ac rutrum mi ligula ultricies urna. Ut pede augue, nonummy vitae, vehicula non, semper at, metus. Sed urna.</p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <span class="gras">Sed libero</span>. Etiam eros. Ut cursus nisl ut ipsum. Nam ligula ante, condimentum eu, ultricies et, aliquam iaculis, magna. Nam convallis molestie enim. In eu est vehicula ipsum cursus adipiscing. Nam facilisis, felis in <span class="gras">sagittis</span> scelerisque, nisl dui lacinia odio, eget dictum est orci quis arcu. <span class="gras">Suspendisse</span> luctus, nisl quis tempus tincidunt, dolor turpis bibendum elit, ac rutrum mi ligula ultricies urna. Ut pede augue, nonummy vitae, vehicula non, semper at, metus. Sed urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <span class="gras">Sed libero</span>. Etiam eros. Ut cursus nisl ut ipsum. Nam ligula ante, condimentum eu, ultricies et, aliquam iaculis, magna. Nam convallis molestie enim. In eu est vehicula ipsum cursus adipiscing. Nam facilisis, felis in <span class="gras">sagittis</span> scelerisque, nisl dui lacinia odio, eget dictum est orci quis arcu. <span class="gras">Suspendisse</span> luctus, nisl quis tempus tincidunt, dolor turpis bibendum elit, ac rutrum mi ligula ultricies urna. Ut pede augue, nonummy vitae, vehicula non, semper at, metus. Sed urna.</p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <span class="gras">Sed libero</span>. Etiam eros. Ut cursus nisl ut ipsum. Nam ligula ante, condimentum eu, ultricies et, aliquam iaculis, magna. Nam convallis molestie enim. In eu est vehicula ipsum cursus adipiscing. Nam facilisis, felis in <span class="gras">sagittis</span> scelerisque, nisl dui lacinia odio, eget dictum est orci quis arcu. <span class="gras">Suspendisse</span> luctus, nisl quis tempus tincidunt, dolor turpis bibendum elit, ac rutrum mi ligula ultricies urna. Ut pede augue, nonummy vitae, vehicula non, semper at, metus. Sed urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <span class="gras">Sed libero</span>. Etiam eros. Ut cursus nisl ut ipsum. Nam ligula ante, condimentum eu, ultricies et, aliquam iaculis, magna. Nam convallis molestie enim. In eu est vehicula ipsum cursus adipiscing. Nam facilisis, felis in <span class="gras">sagittis</span> scelerisque, nisl dui lacinia odio, eget dictum est orci quis arcu. <span class="gras">Suspendisse</span> luctus, nisl quis tempus tincidunt, dolor turpis bibendum elit, ac rutrum mi ligula ultricies urna. Ut pede augue, nonummy vitae, vehicula non, semper at, metus. Sed urna.</p>
</div> 

</div>
</div>
<p class="pied_page"><a href="#">Ipsum1</a> | <a href="#">Ipsum2</a> | Consectetuer © Lorem ipsum dolor sit amet</p>  
</body>







body {
	margin: 0px;
	padding: 0px;
}
#global {
	width: 960px;
	background-color: #FFF8EC;
	border: 1px #cccccc solid;
}
#interieur {
	margin: 10px 25px 10px 10px;
}
	
#logo p {
	width: 115px;
	height: 100px;
	background-color: #495D17;
	text-align: center;
	color: #FFFFFF;
	font: bold 16px Arial, Helvetica, sans-serif;
	letter-spacing: 5px;
	margin: 0px;
	float: left;
	margin-right: 50px;
}
.menu_droite {
	font: normal 13px Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	float: right;	
}
a {
	color: #465A17;
	text-decoration: none;
}
a:hover {
	color: #B30A60;
	text-decoration: underline;
}
.menu_gauche {
	font: bold 12px Arial, Helvetica, sans-serif;
	float: left;
	margin-top: 80px;
}
.menu_gauche a {
	color: #465A17;
	text-decoration: none;
	padding: 2px 5px 2px 5px;
}
.menu_gauche a:hover {
	background-color: #658321;
	color: #FFFFFF;
	text-decoration: none;
}
#bloc_texte {	
	clear: both;
}
#bloc_texte p {	
	font: normal 11px Arial, Helvetica, sans-serif;
	color: #666666;	
}
h1 {
	font: bold 16px Arial, Helvetica, sans-serif;
	color: #B30A60;
	letter-spacing: 3px;
	padding-top: 10px;
}
h2 {
	text-transform: uppercase;
	color: #666666;
	font: bold 12px Arial, Helvetica, sans-serif;
}
#image {
	float: right;
	width: 226px;
	background-color: white;
	color: #666666;
	border: 1px #cccccc solid;
	padding-top: 10px;
	padding-left: 10px;
	height: 300px;
	margin-left: 40px;
	margin-bottom: 30px;

}
.legende {
	font: italic 10px Arial, Helvetica, sans-serif;
	color: #666666;
	text-align: center;
	margin-top: 20px;
}
.gras {
	font-weight: bold;
	color: #333333;
}
.pied_page {
	font: normal 9px Arial, Helvetica, sans-serif;
	color: #666666;	
	clear: both;
	margin-top: 20px;	
}
.pied_page a {
	color: #465A17;
	font-weight: bold;
}

Modifié par renato (03 Feb 2010 - 20:46)
Salut,

Aurais tu une page en ligne, qui faciliterait l'évaluation du problème pour y apporter solution ? Smiley smile
Oui mais en mettre une en ligne nous aiderait à t'aider, à toi de voir, ca prend 1mn à mettre en ligne. Smiley cligne
A condition d'avoir déjà fait la démarche pour un hébergeur, chose que je n'ai pour l'instant pas encore fait.

Mais si vous connaissez un hébergement gratuit (pour les tests) je suis preneur.
A +
salut

attention aux propriétés abrégées, au balisage, aux doubles déclarations css, aux float. je me suis permis de reprendre le balisage parce-que là... et, çà fonctionne.la preuve

j'ai supprimer les abrégées, libre à toi de les remettres.


<!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-FR" lang="fr-FR">
<head>
<meta http-equiv="Content-Type" content="text/html; iso-8859-1" />
	<title>tests css</title>
	<link rel="stylesheet" rev="stylesheet" type="text/css" href="styles.css" media="all" />
</head>
<body>
 
<div id="global"> 

<div id="logo">
<p>LOREM</p>

<div class="menu_droite">
<a href="fictif.htm">Liens utiles</a> |  
<a href="fictif.htm">Contact</a> | 
<a href="fictif.htm">Accueil</a>
</div><!--menu-droite-->
<div class="menu_gauche">
<a href="fictif.htm">Lorem 1</a> | 
<a href="fictif.htm">Lorem 2</a> | 
<a href="fictif.htm">Lorem 3</a> | 
<a href="fictif.htm">Lorem 4</a> | 
<a href="fictif.htm">Lorem 5</a> | 
<a href="fictif.htm">Lorem 6</a> 
</div><!--menu-gauche-->
</div><!--logo-->

<div id="contenu">
   
<div id="image">
<img src="fleur.jpg" width="216" height="288" alt="fleur" /> 
<p class="legende">
L&eacute;gende de la photo.
</p>   
</div>

<div id="bloc_texte">

<h1>Lorem Ipsum</h1>      
<h2>Lorem ipsum dolor</h2>      
<p>
<span class="gras">Lorem</span> 
ipsum dolor sit amet, consectetuer adipiscing elit, 
<span class="gras">sed diem nonummy</span> 
nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat.
</p>      
<h1>Lorem Ipsum</h1>      
<h2>Lorem ipsum dolor sit amet</h2>      
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
<span class="gras">Sed libero</span>
. Etiam eros. Ut cursus nisl ut ipsum. Nam ligula ante, condimentum eu, ultricies et, aliquam iaculis, magna. Nam convallis molestie enim. In eu est vehicula ipsum cursus adipiscing. Nam facilisis, felis in 
<span class="gras">sagittis</span> 
scelerisque, nisl dui lacinia odio, eget dictum est orci quis arcu. 
<span class="gras">Suspendisse</span> 
luctus, nisl quis tempus tincidunt, dolor turpis bibendum elit, ac rutrum mi ligula ultricies urna. Ut pede augue, nonummy vitae, vehicula non, semper at, metus. Sed urna.
</p>           
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
<span class="gras">Sed libero</span>
. Etiam eros. Ut cursus nisl ut ipsum. Nam ligula ante, condimentum eu, ultricies et, aliquam iaculis, magna. Nam convallis molestie enim. In eu est vehicula ipsum cursus adipiscing. Nam facilisis, felis in 
<span class="gras">sagittis</span> 
scelerisque, nisl dui lacinia odio, eget dictum est orci quis arcu. 
<span class="gras">Suspendisse</span> 
luctus, nisl quis tempus tincidunt, dolor turpis bibendum elit, ac rutrum mi ligula ultricies urna. Ut pede augue, nonummy vitae, vehicula non, semper at, metus. Sed urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
<span class="gras">Sed libero</span>. 
Etiam eros. Ut cursus nisl ut ipsum. Nam ligula ante, condimentum eu, ultricies et, aliquam iaculis, magna. Nam convallis molestie enim. In eu est vehicula ipsum cursus adipiscing. Nam facilisis, felis in 
<span class="gras">sagittis</span> 
scelerisque, nisl dui lacinia odio, eget dictum est orci quis arcu. 
<span class="gras">Suspendisse</span> 
luctus, nisl quis tempus tincidunt, dolor turpis bibendum elit, ac rutrum mi ligula ultricies urna. Ut pede augue, nonummy vitae, vehicula non, semper at, metus. Sed urna.
</p>           
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
<span class="gras">Sed libero</span>
. Etiam eros. Ut cursus nisl ut ipsum. Nam ligula ante, condimentum eu, ultricies et, aliquam iaculis, magna. Nam convallis molestie enim. In eu est vehicula ipsum cursus adipiscing. Nam facilisis, felis in 
<span class="gras">sagittis</span> 
scelerisque, nisl dui lacinia odio, eget dictum est orci quis arcu. 
<span class="gras">Suspendisse</span> 
luctus, nisl quis tempus tincidunt, dolor turpis bibendum elit, ac rutrum mi ligula ultricies urna. Ut pede augue, nonummy vitae, vehicula non, semper at, metus. Sed urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
<span class="gras">Sed libero</span>
. Etiam eros. Ut cursus nisl ut ipsum. Nam ligula ante, condimentum eu, ultricies et, aliquam iaculis, magna. Nam convallis molestie enim. In eu est vehicula ipsum cursus adipiscing. Nam facilisis, felis in 
<span class="gras">sagittis</span> 
scelerisque, nisl dui lacinia odio, eget dictum est orci quis arcu. 
<span class="gras">Suspendisse</span> 
luctus, nisl quis tempus tincidunt, dolor turpis bibendum elit, ac rutrum mi ligula ultricies urna. Ut pede augue, nonummy vitae, vehicula non, semper at, metus. Sed urna.
</p>
</div><!--bloc-texte-->

<div class="pied_page">
<a href="fictif.htm">Ipsum1</a> | <a href="fictif.htm">Ipsum2</a> | Consectetuer &copy; Lorem ipsum dolor sit amet
</div><!--pied-page-->
</div><!--contenu-->

</div><!--global-->
</body> 
</html>



html,body {
font-family: Arial,Helvetica,sans-serif; 
margin: 0;     
padding: 0; 
} 
#global {      
background-color: #FFF8EC;
width: 960px;     
border: 1px solid #ccc; 
}
#contenu {
	float: left;
	width: 960px;
}
#logo {
	float: left;
	width: 960px;
}      
#logo p {
background-color: #495D17;  
width: 115px;     
height: 100px;         
text-align: center;     
color: #FFF;     
font-weight: bold;
font-size: 16px;
letter-spacing: 5px;     
margin: 0 50px 0 0; 
}
#bloc_texte p {
font-size: 11px;     
color: #666;     
}
#image {     
float: right;
width: 268px;
height: 350px; 
color: #666;     
border: 1px solid #ccc;     
padding: 10px 0 0 10px;     
margin-left: 0 0 30px 40px; 
}
.menu_droite {
float: right;   
font-size: 13px;     
letter-spacing: 1px;          
} 
a {     
color: #465A17;     
text-decoration: none; 
} 
a:hover {     
color: #B30A60;     
text-decoration: underline; 
} 
.menu_gauche {     
font-weight: bold;     
float: left;     
margin-top: 80px; 
} 
.menu_gauche a {     
color: #465A17;     
text-decoration: none;     
padding: 2px 5px; 
} 
.menu_gauche a:hover {     
background-color: #658321;     
color: #FFF;     
text-decoration: none; 
} 
/*#bloc_texte {         
clear: both; 
}*/ 
.legende {     
font-style: italic;
font-size:  10px;   
color: #666;     
text-align: center;     
margin-top: 20px; 
} 
.gras {     
font-weight: bold;     
color: #333; 
} 
.pied_page {     
font-size: 9px;     
color: #666;         
clear: both;     
margin-top: 20px;     
} 
.pied_page a {     
color: #465A17;    
font-weight: bold; 
}
h1 {     
font-weight: bold;
font-size: 16px;    
color: #B30A60;     
letter-spacing: 3px;     
padding-top: 10px; 
} 
h2 {     
text-transform: uppercase;     
color: #666;
font-weight: bold;    
font-size: 12px; 
}
renato a écrit :
Mais si vous connaissez un hébergement gratuit (pour les tests) je suis preneur.
A +

Free, par exemple. Ou le service de pages perso de tout autre fournisseur d'accès s'il est correct.
Un service comme Dropbox peut marcher aussi, il me semble que les fichiers .html et .css placés dans le dossier Public sont envoyées avec le bon type MIME.
Sujet clos
Aller à