Images l'une à côté de l'autre

Fermé

Nighti Messages postés 2 Date d'inscription mercredi 22 avril 2015 Statut Membre Dernière intervention 22 avril 2015 - 22 avril 2015 à 21:11
Nighti Messages postés 2 Date d'inscription mercredi 22 avril 2015 Statut Membre Dernière intervention 22 avril 2015 - 22 avril 2015 à 21:13

Bonsoir,

voila je suis bloqué sur ce soucis, après avoir cherché sur des forums, je n'ai toujours pas trouvé de réponse. J'ai probablement fait une erreur quelque part.
Je cherche à mettre mes 3 images l'une à coté de l'autre, avec une petite marge les séparant. Puis avoir le texte en dessus de l'image, centré par rapport à celle-ci.
Voici le HTML


<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Works</title>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
    <div id="format">
    	<div id="header">
        	<a href="index.html" title="acceuil"><img src="logoAmandineRcouleur.png" alt="logoamandine"/></a>
        </div>
        <div id="menu">
        	<ul>
            	<li><a href="index.html">Acceuil</a></li>
            	<li><a href="page1.html">Works</a></li>
            	<li><a href="">About</a></li>
            	<li><a href="">Contact</a></li>
            </ul>
        </div>    
    	<div id="block">
                <a href=""><img src="typovernaculaire.png" alt="typovernaculaire"/></a>
                <h1>Typo Vernaculaire</h1>
            	<a href=""><img src="lienetcorrespondance.png" alt="femme et chouette"/></a>
                <h2>Liens et Correspondances</h2>
                <a href=""><img src="bonbon.png" alt="logo bonbon"/></a>
                <h3>Musée du Bonbon</h3>
                </div>
        </div>
        <div id="footer"></div>
	</div>
</body>
</html>

A voir également:

1 réponse

Réponse 1 / 1

Nighti Messages postés 2 Date d'inscription mercredi 22 avril 2015 Statut Membre Dernière intervention 22 avril 2015
22 avril 2015 à 21:13

et le CSS


@charset "utf-8";
/* CSS Document */
#format{
	width:960px;
	position:absolute;
	left:50%;
	margin-left:-480px;
}
	#header{
		text-align:center;
		padding:20px 0px 10px 0px;
		
	}
	#menu{
		margin:10px 240px 30px 240px;
		padding:0px;
		background-color:white;
		font-family:Helvetica Neue; 
		src:url(Helvetica%20Neue%20Light_0.ttf);
		text-align:center;
		display:inline-block;
	}
		#menu li{
			list-style:none;
			float:left;
			border-left:1px;			
			border-top :1px solid #333;
			border-bottom :1px solid #333;
			padding:10px 0px 10px 0px;
		}
		#menu a{
			color:black;
			text-decoration:none;
			display:block;
			float:left;   
			width:100px;
			line-height:20px;
		}
		#menu a:hover{
			background-color:#333;
			opacity:0.5;
			color:white;
		}
	#block {
		width:960px;
		display:inline;
  		width:960px;
  		height:318px;
		float:center;
	}

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

Aligner 2 photos côte à côte...

calcule nombre des pixels "noir" dans un image (noir/blanc)

A quoi correspond cette croix sur snapchat

J'ai oublier mon code mtn momo svp aidé moi a le debloquer

Discussions similaires

Newsletters