28173 sujets

CSS et mise en forme, CSS3

bonjour,

J'ai un problème de positionnement voila mon code xhtml-php :

<form method="POST" action="a_foto.php" enctype="multipart/form-data">
<div id="contenuc">	
	<input type="hidden" value="<?php echo $idBien; ?>" id="idbien" name="idbien">
	<h2>Gestion des photos</h2>
	<ul id="photosave">
	<?php
		$sql="SELECT * FROM `photo` WHERE fkBien='$idBien';" ;
		//echo $sql;
		$req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
		while($data = mysql_fetch_assoc($req))
			{
				echo '<li>';
				echo '<img src="'.$data['url'].$data['nomfic'].'" alt="photo" /><br />';
				echo '<img style="height:15px;width:15px;" src="../image/delete.png" title="Supprimer cette photo" alt="Effacer"/>';
				echo '<img style="height:15px;width:15px;" src="../image/heart.png" title="Mettre en favoris" alt="Coeur"/>';
				echo '</li>';
			}
		mysql_close(); 
	?>
	</ul>
	<br />
	<div id="enregistrerimage">
	<!-- Limiter la taille des fichiers à 200Ko -->
	<input type="hidden" name="MAX_FILE_SIZE" value="200000" />
	<fieldset id="photo">
	<!-- champs d'envoi de fichier, de type file -->
	<p><label for="photo1">Ajouter une photo&nbsp;</label><input type="file" name="photo" />&nbsp;
	<!-- bouton d'envoi -->
	<input type="submit" class="StandardButton120" name="envoi" value="Enregistrer" /></p>
	</fieldset>
	</div>
</div>
</form> 


et voila le css

ul#photosave{
	margin: 0px;
	padding: 10px;
   list-style-type: none ;
  }
ul#photosave li{
	margin: 0px;
 	padding: 5px;
  	float:left;
  }

ul#photosave img{
	padding: 5px;
	height:60px;
	width:80px;
}

div#enregistrerimage
{
	margin:0px 0px;
	width: 770px ;
	display: block;
}
div#contenuc
{
	margin:0px 0px;
	width: 770px ;
	text-align: left;
	color: #FF9933 ;
	border: 1px solid #0033FF;
}


Comme vous voyez, c'est tout simple.
une liste,des puces puis un div avec qq éléments a l'interieur.

le probleme c'est que le cadre de contenuc ne s'agrandit pas pour laisser de la place a mon divenregistrerimage.
De plsu il le plasse a la suite des images alors que le float:left est convenu pour la liste a puce, mais apres il devrait pas continuer non?

merci d'avance... Smiley cligne upload/3729-ex.JPG


ps j'ai rajouté une photo de ce que cela donnait.
le input qui permet d'ajouter une image, je le voudrais a la ligne.
Mais d'ailleurs il ne devrait pas suivre le flux, vu qu'il ne fait pas partie de ma liste a puce.....je comprends pas Smiley decu
Modifié par nath-0-0 (08 Dec 2005 - 18:03)
Administrateur
Salut,

Le problème avec un exemple contenant du HTML généré en PHP, c'est que la grande majorité des membres ne vont pas pouvoir tester ton code chez eux en local.

Si tu veux avoir plus de chances d'être aidée, je te conseille vivement de montrer une page en ligne.
Bonjour nath-0-0 Smiley smile
nath-0-0 a écrit :

le probleme c'est que je peux pas car il est pas en ligne Smiley bawling

Alors tu nous donnes le code « après » qu'il a été interprété (sans le php).
Ça peut se faire en copiant les sources de la page généré dans ton navigateur favori.
quelle bonne idée Smiley eek meme pas penser,que je suis bete!!!


<form method="POST" action="a_foto.php" enctype="multipart/form-data">
<div id="contenuc">	
	<input type="hidden" value="48" id="idbien" name="idbien">
	<h2>Gestion des photos</h2>
	<p id="foto">
	Vous pouvez ins&eacute;rer 10 photos au maximum.La photo favorie apparaitra dans la liste des biens.<br/>
	Pour supprimer une photo il faut d'abord choisir une autre photo en tant que favorie.
	</p>
	<ul id="photosave">

	<li style="border:1px solid #FF0000;">
<img src="../photo/bi48f1.jpg" alt="photo" /><br />favori
</li>
<li><img src="../photo/bi48f2.jpg" alt="photo" /><br />
<a href="a_foto.php?idbien=48&etat=supprimer&idphoto=35">
<img style="height:15px;width:15px;" src="../image/delete.gif" title="Supprimer cette photo" alt="Effacer"/></a>
<a href="a_foto.php?idbien=48&etat=coeur&idphoto=35">
<img style="height:15px;width:15px;" src="../image/heart.gif" title="Mettre en favoris" alt="Coeur"/></a></li>	
</ul>
	<br />
	<div id="enregistrerimage">
	<!-- Limiter la taille des fichiers à 200Ko -->
	<input type="hidden" name="MAX_FILE_SIZE" value="200000" />
	<fieldset id="photo">
	<!-- champs d'envoi de fichier, de type file -->
	<p><label for="photo1">Ajouter une photo&nbsp;</label><input type="file" name="photo" />&nbsp;

	<!-- bouton d'envoi -->
	<input type="submit" class="StandardButton120" name="envoi" value="Enregistrer" /></p>
	</fieldset>
	</div>
</div>
</form> 


voila ce qui est fait
voici la solution, on ajoute

clear: both;

div#enregistrerimage
{
	margin:0px 0px;
	width: 770px ;
	left : 0px;
	clear: both;
}