Images l'une à côté de l'autre
Nighti
Messages postés
2
Statut
Membre
-
Nighti Messages postés 2 Statut Membre -
Nighti Messages postés 2 Statut Membre -
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
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>
1 réponse
-
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;
}
