28172 sujets

CSS et mise en forme, CSS3

[Résolu] Conseil Galerie

Bonjour à tous,

Qui peut me dire comment faire ma galerie sans liste, car on me signale que l'on ne peux pas incorporer des div dans les listes, j'ai bien essayé de remplacer avec des class et div sans résultat identique à celui-çi.

http://philippe-delasalle.fr/test_galerie/WebAgency_test/

Merci de votre aide !

[code=html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<title>WebAgency</title>
</head>
<body>

<div id="bloc_page"><!--Début bloc page-->

<div id="galerie"><!--Ouverture de la div galerie-->

<ul class="picture"><!--Ouverture du bloc galerie-->
<li><!--Ouverture du bloc image1-->
<img src="images/portfolio/01.jpg" width="480px" height="400px" alt="personnage design">
<div class="rond-oeil">
<span class="fa fa-eye" aria-hidden="true"></span>
</div>
<div class="effet">
<div class="fond-noir"></div>
<div class="picture-text">
<h1>Créative</h1>
<p>
Dessin d'un personnage design.
</p>
</div>
</div>
</li><!--Fermeture du bloc image1-->

<li><!--Ouverture du bloc image2-->
<img src="images/portfolio/02.jpg" width="480px" height="400px" alt="lapin futuriste">
<div class="rond-oeil">
<span class="fa fa-eye" aria-hidden="true"></span>
</div>
<div class="effet">
<div class="fond-noir"></div>
<div class="picture-text">
<h1>Créative</h1>
<p>
Dessin d'un lapin futuriste.
</p>
</div>
</div>
</li><!--Fermeture du bloc image2-->

<li><!--Ouverture du bloc image3-->
<img src="images/portfolio/03.jpg" width="480px" height="400px" alt="logo vintage">
<div class="rond-oeil">
<span class="fa fa-eye" aria-hidden="true"></span>
</div>
<div class="effet">
<div class="fond-noir"></div>
<div class="picture-text">
<h1>Corporate</h1>
<p>
Réalisation d'un logo vintage.
</p>
</div>
</div>
</li><!--Fermeture du bloc image3-->

<li><!--Ouverture du bloc image4-->
<img src="images/portfolio/04.jpg" width="480px" height="400px" alt="PLV">
<div class="rond-oeil">
<span class="fa fa-eye" aria-hidden="true"></span>
</div>
<div class="effet">
<div class="fond-noir"></div>
<div class="picture-text">
<h1>Corporate</h1>
<p>
Réalisation de PLV.
</p>
</div>
</div>
</li><!--Fermeture du bloc image4-->

<li><!--Ouverture du bloc image5-->
<img src="images/portfolio/05.jpg" width="480px" height="400px" alt="packaging">
<div class="rond-oeil">
<span class="fa fa-eye" aria-hidden="true"></span>
</div>
<div class="effet">
<div class="fond-noir"></div>
<div class="picture-text">
<h1>Portfolio</h1>
<p>
Réalisation d'une charte graphique packaging.
</p>
</div>
</div>
</li><!--Fermeture du bloc image5-->

<li><!--Ouverture du bloc image6-->
<img src="images/portfolio/06.jpg" width="480px" height="400px" alt="ville futuriste">
<div class="rond-oeil">
<span class="fa fa-eye" aria-hidden="true"></span>
</div>
<div class="effet">
<div class="fond-noir"></div>
<div class="picture-text">
<h1>Créative</h1>
<p>
Dessin d'une ville futuriste.
</p>
</div>
</div>
</li><!--Fermeture du bloc image6-->

<li><!--Ouverture du bloc image7-->
<img src="images/portfolio/07.jpg" width="480px" height="400px" alt="logo Fuzland">
<div class="rond-oeil">
<span class="fa fa-eye" aria-hidden="true"></span>
</div>
<div class="effet">
<div class="fond-noir"></div>
<div class="picture-text">
<h1>Corporate</h1>
<p>
Réalisation du logo de la société Fuzland.
</p>
</div>
</div>
</li><!--Fermeture du bloc image7-->

<li><!--Ouverture du bloc image8-->
<img src="images/portfolio/08.jpg" width="480px" height="400px" alt="Mockup">
<div class="rond-oeil">
<span class="fa fa-eye" aria-hidden="true"></span>
</div>
<div class="effet">
<div class="fond-noir"></div>
<div class="picture-text">
<h1>Corporate</h1>
<p>
Mockup pour la société Be-Thème.
</p>
</div>
</div>
</li><!--Fermeture du bloc image8-->
</ul><!--Fermeture du bloc galerie-->
</div><!--Fermeture de la div galerie-->

</div>
</body>
</html>
][/code]



/*Eléments principaux de la page*/
body
{
	font-family: Helvetica, Arial, "Trebuchet MS", sans-serif;
	font-weight: normal;
	font-style: normal;
	color: #000000;
	margin: 0;
	padding: 0;
	overflow-x: hidden;

}

ul
{
	list-style-type: none;
	margin:0;
	padding: 0;
}

#bloc_page
{
	
	width:100%;
	margin: 0 auto;
	overflow-x:hidden;
}



h1,h2
{
	text-transform: uppercase;
	font-size: 25px;
	color: #000000;
	margin:0;
	padding:0;
}

p
{
	font-size: 1em;
	line-height: 1.6em;
}

textarea
{
	font-size: 1em;
	font-family: Helvetica, Arial, "Trebuchet MS", sans-serif;
}

header
{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

#galerie
{
	margin-top: 50px;
	text-align: center;
}

.picture
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.picture li
{
	display: inline-block;
	padding: 0;
	position: relative;
	overflow: hidden;
	margin: 10px;
}

.picture li:hover .effet
{
	opacity: 1;
}

.picture li:hover img
{
	opacity: 1;
	transform: scale(1.15,1.15);
	-webkit-transform:scale(1.15,1.15);
	-moz-transform:scale(1.15,1.15);
	-ms-transform:scale(1.15,1.15);
	-o-transform:scale(1.15,1.15);
}

.picture img
{
	margin: 0;
	padding: 0;
	float: left;
	z-index: 4;
}

.picture .effet
{
	cursor: pointer;
	position: absolute;
	opacity: 0;
	-webkit-transition:all 0.45s ease-in-out;
	-moz-transition:all 0.45s ease-in-out;
	-o-transition:all 0.45s ease-in-out;
	-ms-transition:all 0.45s ease-in-out;
	transition:all 0.45s ease-in-out;
}

.picture img
{
	-webkit-transition:all 0.25s ease-in-out;
	-moz-transition:all 0.25s ease-in-out;
	-o-transition:all 0.25s ease-in-out;
	-ms-transition:all 0.25s ease-in-out;
	transition:all 0.25s ease-in-out;
}

.picture .fond-noir
{
	background-color: rgba(0,0,0,0.65);
	height: 200px;
	width: 480px;
	margin-top: 300px;
	z-index: 6;
	position: absolute;
}

.picture .picture-text h1
{
	text-transform: uppercase;
	color: #5cadd3;
	font-size: 24px;
	text-align: left;
	margin-left: 10px;
	margin-top: 20px;
}

.picture-text p
{
	text-align: left;
	margin-left: 10px;
}

.picture .picture-text
{
	z-index: 10;
	color: #fff;
	position: absolute;
	width: 480px;
	height: 300px;
	text-align: center;
	top:300px;
}

.rond-oeil
{
	position: absolute;
	/* rond oeil */
	z-index: 7;

}

.rond-oeil span /* oeil */

{
	position: absolute;
	width: 30px;
	height: 30px;
	background-color: #5cadd3;
	border:1px solid #ffffff;
	border-radius: 50%;
	margin-top: 290px;
	margin-left: 410px;
	color: #ffffff;
	line-height: 30px;
	z-index: 8;
}
Bonsoir Wesheida,
qu'entends-tu par une galerie puis par une liste ?

S'il s'agissait d'un diaporama d'images (SlideShow) (ou de plusieurs <div>_</div> de texte défilant), les exemples sont innombrables sur le web ... par CSS3 ou Javascript car en dépit de ce qu'on te signale (?) tu pourras (presque) tout faire qui relève du logisme de l'intelligence humaine (sauf à coup sûr satisfaire ta copine, ton copain).
Modifié par pictural (08 Nov 2016 - 21:02)
... sinon des <span>, et des <a> cliquables en <li>.

Mais franchement, je ne comprends pas la substance de ton topique.
Bonjour,

Moi c'est toi que je ne comprend pas, mais bon enfin c'est pas grave, j'ai résolu mon problème.

Bonne journée
Sujet clos
Aller à