28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de mise en page image

Bonjour !
Je poste ce sujet car j'ai un petit problème pour la mise en page de mon site : Lien vers la page ou est présent le problème
Le problème comme vous pouvez le constater c'est que sur la première ligne d'images il n'y a pas la dernière si vous voyez ce que je veux dire ...
J'ai essayé tout de ce que je pense pouvoir faire ... c'est pourquoi je vous demande votre aide !

Voici le code (HTML, PHP et JavaScript) de la page de la galerie photo (le code CSS est plus bas):


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
		<link rel="icon" href="img/favicon.ico" />
        <title>Galerie - Club Manga - Lycée Aristide Briand Saint Nazaire</title>
		<link rel="stylesheet" href="style/style.css" />
		<link rel="stylesheet" media="screen and (max-width: 1025px)" href="style/style-1025.css" />
		<link rel="stylesheet" media="screen and (max-width: 875px)" href="style/style-875.css" />
		<link rel="stylesheet" media="screen and (max-width: 651px)" href="style/style-651.css" />
		<link rel="stylesheet" media="screen and (max-width: 555px)" href="style/style-555.css" />
                <link rel="stylesheet" media="screen and (max-width: 1500px)" href="style/style-1500.css" />
                <link rel="stylesheet" media="screen and (max-width: 1300px)" href="style/style-1300.css" />
                <link rel="stylesheet" media="screen and (max-width: 1100px)" href="style/style-1100.css" />
                <link rel="stylesheet" media="screen and (max-width: 940px)" href="style/style-900.css" />
                <link rel="stylesheet" href="style/style-galerie.css" />
                <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
                <script type="text/javascript" src="/zoombox/zoombox.js"></script>
                <link href="/zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />
     </head>

    <body>
		<header>
			<h1>Club Manga Lycée Aristide Briand Saint Nazaire</h1>
<div style="border:4px black solid; width:45%; text-align:center; margin-right:auto; margin-left:auto; background-color:rgba(180,0,0,0.75);">
<?php
session_start();

if(!@$_SESSION['session'])
	{
	require_once('config.php');
	$titre_page='Index';
	include_once('haut.php');
	
if(isset($_GET['erreur']))
	{
	echo'<span class="erreur">';
	$erreur=$_GET['erreur'];
	if($erreur=="pseudo")
		{
		echo'Erreur : Votre pseudo est invalide';
		}
	if($erreur=="passe")
		{
		echo'Erreur : Votre mot de passe est invalide';
		}
	if($erreur=="connexion")
		{
		echo"Erreur : Votre mot de passe ne correspond pas avec votre pseudo";
		}
	echo'</span>';
	}
	
	?>
<form method="post" action="login.php">
<table width="300" border="0" align="center">
<tr>
<td colspan="2" class="menu">Identification</td>
</tr>
<tr>
<td><label for="pseudo">Pseudo : </label></td>
<td><input type="text" name="pseudo" id="pseudo" /></td>
</tr>
<tr>
<td><label for="mdp">Mot de passe : </label></td>
<td><input type="password" name="mdp" id="mdp" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Envoyer" />
</td>
</tr>
</table>
</form>
<div align="center"><a href="inscription.php">Pas encore inscrit ?</a>
<?php 
if($localite != 'local')
echo'<br /><a href="perdu.php">Mot de passe perdu ?</a>';
echo'</div>';
	}
else
	{
	require_once('config.php');
	require_once('verifications.php');
	$titre_page='Index membres';
	include_once('haut.php');
	echo'<div align="center"><strong>Bienvenue dans votre espace membres '. $pseudo .' !</strong>
	<br /><a href="profil.php">Modification du profil</a>
	<br /><a href="logout.php">Deconnexion</a></div>';
	}
include_once('bas.php');
?>
</div>
		</header>
		<nav>
			<nav>
					<div id="menu_accueil"><a href="accueil.php">Accueil</a></div>
					<div id="menu_news"><a href="news.php">News</a></div>
					<div id="menu_infos"><a href="infos.php">Infos</a></div>
					<div id="menu_galerie"><a href="galerie.php">Galerie</a></div>
					<div id="menu_contact"><a href="contact.php">Contact</a></div>
			</nav>
		</nav>
		<section>
			<article>
				<h3>Page en cours de conception !</h3>
<?php
if($pseudo==Cybak || $pseudo==Administrateur || $pseudo==Admin){
echo "<h2><a href=\"admin/galerie-upload.php\">Acces administrateur</a></h2>";
}
else{

}
?>

<script type="text/javascript">
        jQuery(function($){
            $('a.zoombox').zoombox();
        </script>

<ul>

<?php
$dos = "img/galerie/min";
$dir = opendir($dos);
while($file = readdir($dir)){
    $allow_ext = array("jpg");
    $ext = strtolower(substr($file,-3));
    if(in_array($ext,$allow_ext)){
?>

<li>
<a href="img/galerie/<?php echo $file; ?>" class="zoombox zgallery1">
<img src="img/galerie/min/<?php echo $file; ?>"/>
</a>
</li>

<?php
}
}
?>

</ul>

			</article>		
		</section>
		<footer>
			<h4>Copyright © 2014 Astrod All Rights Reserved</h4>
		</footer>
    </body>
</html>


Voici le code CSS de la page de la galerie photo :


section
{
    height:1000px;
}


ul li{
     position:relative;float:left;
     width:200px;height:150px;margin:10px;list-style:none;
     border:6px solid rgba(0,0,0,0.7);
}
ul li:nth-child(4n){clear:left;} 
          
ul li a{
     display:block;overflow:hidden;
     width:200px;height:150px;
     margin-top:0px;margin-left:0px;
     border:0px solid rgba(0,0,0,0.7);
     transition-property:width,height,margin,z-index,border;
     transition-duration:0.4s;
}

ul li a:hover{
     position:absolute;
     width:200px;height:150px;
     margin-top:-56px;margin-left:-56px;
     z-index:100;
     border:6px solid rgba(0,0,0,0.7);
}
          
ul li a img{
     position:absolute;
     width:200px;height:150px;z-index:20;
     transition-property:width,height,z-index;
     transition-duration:0.4s;
}
          
ul li a:hover img{
     width:200px;height:150px;
     z-index:100;
}
Sujet clos
Aller à