28173 sujets

CSS et mise en forme, CSS3

[Résolu]Probleme d'affichage d'image?? HELP

J'ai un petit probleme d'affichage.
J'aimerai affiché les photos par 4 dans un conteneur sur plusieur lignes.
mais j'ai un probleme il n'affiche que les 4 premieres.
voici les 2 codes


html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>

<body>
<ul id="menu">
			<li><a id="menu1" href="index.html">&nbsp;</a></li>
			<li><a id="menu2" href="calendrier.html">&nbsp;</a></li>
			<li><a id="menu3" href="photos.html">&nbsp;</a></li>
			<li><a id="menu4" href="quisommesnous.html">&nbsp;</a></li>
			<li><a id="menu5" href="contacts.html">&nbsp;</a></li>
</ul>
<div id="conteneur">

<!-- Ceci est la balise a recopier pour les news.-->
 <div id="angy">&nbsp;</div>
 <div id="ramon">&nbsp;</div>
 <div id="franco">&nbsp;</div>
 <div id="ariane">&nbsp;</div>
 <br>
 <div id="1">&nbsp;</div>
 <div id="2">&nbsp;</div>
 <div id="3">&nbsp;</div>
 <div id="4">&nbsp;</div>
 <br>
 <div id="5">&nbsp;</div>
 <div id="6">&nbsp;</div>
 <div id="7">&nbsp;</div>
 <div id="8">&nbsp;</div>
 <br>
 <div id="9">&nbsp;</div>
 <div id="10">&nbsp;</div>
 <div id="11">&nbsp;</div>
 <div id="12">&nbsp;</div>
 <br>
 <div id="13">&nbsp;</div>
 <div id="14">&nbsp;</div>
 
 
 <div id="spacer">&nbsp;</div>
<!-- Ceci est la balise a recopier pour les news.-->
  
  
  
  
  
  
  
	</div>
<p id="footer">Tous droits réservés © 2006 Acidjack Project</p>


</body>
</html>


CSS:


body {
	background-color: #52062F;
	background-image: url(images/fond.jpg);
	background-repeat: no-repeat;
	background-position: 50% 5%;
	margin: 10px 0;
	padding: 0;
	text-align: center;
	color: #F88BC6;
	font: 0.8em;
	scrollbar-face-color:#52062F;
  	scrollbar-arrow-color:#D84E9C;
 	scrollbar-track-color:#D84E9C;
 	scrollbar-shadow-color:black;
 	scrollbar-highlight-color:#D15B9B;
 	scrollbar-3dlight-color:#D84E9C;
 	scrollbar-darkshadow-Color:#D15B9B;

}
div#conteneur
{
	width: 720px;
	height: 380px;
	margin: 0 auto;
	text-align: left;
	overflow:auto;
	margin-top: 140px;
}

* html div#conteneur
{
	height: 365px;
}


ul#menu
{
	height: 26px ;
	margin: 0 ;
	padding: 0 ;
	background: url(images/menu.gif) repeat-x ;
	list-style-type: none ;
}

ul#menu li
{
	float: left ;
	text-align: center ;
}

ul#menu li a
{
	width: 130px ;
	line-height: 25px ;
	display: block ;
	text-decoration: none ;
	border: none ;
	position: relative ;
			left: 270px ;
			top: 124px ;
}

* html ul#menu li a
{
	position: relative ;
			left: 266px ;
			top: 125px ;

}
ul#menu li a#menu1

		{

			width: 90px ;

		}
ul#menu li a#menu2

		{

			width: 105px ;

		}
ul#menu li a#menu3

		{

			width: 80px ;

		}
ul#menu li a#menu4

		{

			width: 185px ;

		}
ul#menu li a#menu5

		{

			width: 90px ;

		}

div#contenu
{
	padding: 10px 10px 0 35px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	}
	
* html div#contenu
{
		padding: 5px 10px 0 35px;
		}

div#contenu h2
{
	padding-left: 50px ;
	line-height: 25px ;
	font-size: 1.0em ;
	background: url(images/petitefleur.gif) no-repeat left bottom ;
	color: #52062F ;
	border-bottom: 1px solid #52062F ;
	font-style: italic;	
	}
div#contenu p
{
	text-align: justify ;
	text-indent: 2em ;
	line-height: 1.7em ;
}
div#contenu a
{
	color: #8a0 ;
}

div#contenu a:hover
{
	color: #9b2;
}
/* On met en forme les liens contenu dans la page */

p#footer
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.6em;
	margin: 0 ;
	padding-right: 10px ;
	line-height: 85px ;
	text-align: center ;
	color: #52062F ;
}


* html p#footer
{
	line-height: 95px ;
}
div#contenu2 
{
padding: 0 15px 0 100px;
}

pre
{
	overflow: auto ;
	background-color: #52062F;
	border: 2px solid #D15B9B ;
	padding: 5px 0 0 5px ;
	font-size: 1.1em ;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-style:italic;
}


span#signature
{
	padding-left: 76%;
	font-style: italic;
	font-size: 0.9em;
}


* html pre
{
	font-size: 0.9em ;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-style:italic;
	width: 550px ;
	height:auto;
}
* html span#signature
{
	padding-left: 68%;
	font-style: italic;
	font-size: 0.8em;
}

div#spacer {
  clear:both
}


div#angy
{
	background-image:url(photos/angy.jpg);
	background-repeat:no-repeat;
	width:122px;
	height:205px;
 	margin: 30px;
 	float: left;
}

* html div#angy
{
 	margin-left: 15px;
	margin-top: 28px;
}
div#ramon
{
	background-image:url(photos/ramon.jpg);
	background-repeat:no-repeat;
	width:122px;
	height:205px;
 	margin: 30px;
 	float: left;
}
* html div#ramon
{
 	margin-left: 30px;
	margin-top: 28px;
}

div#franco
{
	background-image:url(photos/franco.jpg);
	background-repeat:no-repeat;
	width:122px;
	height:205px;
 	margin: 30px;
 	float: left;
}
* html div#franco
{
 	margin-left: 30px;
	margin-top: 28px;
}
div#ariane
{
	background-image:url(photos/ariane.jpg);
	background-repeat:no-repeat;
	width:122px;
	height:205px;
 	margin: 30px;
 	float: left;
	margin-right: 0px;

}
* html div#ariane
{
	margin-top: 28px;
	margin-right: 0px;
}
div#1
{
	background-image:url(photos/1.jpg);
	background-repeat:no-repeat;
	width:122px;
	height:205px;
 	margin: 30px;
 	float: left;
}
* html div#1
{
 	margin-left: 30px;
	margin-top: 28px;
}
div#2
{
	background-image:url(photos/franco.jpg);
	background-repeat:no-repeat;
	width:122px;
	height:205px;
 	margin: 30px;
 	float: left;
}
* html div#2
{
 	margin-left: 30px;
	margin-top: 28px;
}
div#3
{
	background-image:url(photos/franco.jpg);
	background-repeat:no-repeat;
	width:122px;
	height:205px;
 	margin: 30px;
 	float: left;
}
* html div#3
{
 	margin-left: 30px;
	margin-top: 28px;
}
div#4
{
	background-image:url(photos/franco.jpg);
	background-repeat:no-repeat;
	width:122px;
	height:205px;
 	margin: 30px;
 	float: left;
	margin-right: 0px;

}
* html div#ariane
{
	margin-top: 28px;
	margin-right: 0px;
}
div#5
{
	background-image:url(photos/franco.jpg);
	background-repeat:no-repeat;
	width:122px;
	height:205px;
 	margin: 30px;
 	float: left;
}
* html div#5
{
 	margin-left: 30px;
	margin-top: 28px;
}
div#6
{
	background-image:url(photos/franco.jpg);
	background-repeat:no-repeat;
	width:122px;
	height:205px;
 	margin: 30px;
 	float: left;
}
* html div#6
{
 	margin-left: 30px;
	margin-top: 28px;
}
div#7
{
	background-image:url(photos/franco.jpg);
	background-repeat:no-repeat;
	width:122px;
	height:205px;
 	margin: 30px;
 	float: left;
}
* html div#7
{
 	margin-left: 30px;
	margin-top: 28px;
}
div#8
{
	background-image:url(photos/franco.jpg);
	background-repeat:no-repeat;
	width:122px;
	height:205px;
 	margin: 30px;
 	float: left;
	margin-right: 0px;

}
* html div#ariane
{
	margin-top: 28px;
	margin-right: 0px;
}
div#9
{
	background-image:url(photos/franco.jpg);
	background-repeat:no-repeat;
	width:122px;
	height:205px;
 	margin: 30px;
 	float: left;
}
* html div#9
{
 	margin-left: 30px;
	margin-top: 28px;
}
div#10
{
	background-image:url(photos/franco.jpg);
	background-repeat:no-repeat;
	width:122px;
	height:205px;
 	margin: 30px;
 	float: left;
}
* html div#10
{
 	margin-left: 30px;
	margin-top: 28px;
}
div#11
{
	background-image:url(photos/franco.jpg);
	background-repeat:no-repeat;
	width:122px;
	height:205px;
 	margin: 30px;
 	float: left;
}
* html div#11
{
 	margin-left: 30px;
	margin-top: 28px;
}
div#12
{
	background-image:url(photos/franco.jpg);
	background-repeat:no-repeat;
	width:122px;
	height:205px;
 	margin: 30px;
 	float: left;
	margin-right: 0px;

}
* html div#ariane
{
	margin-top: 28px;
	margin-right: 0px;
}
div#13
{
	background-image:url(photos/franco.jpg);
	background-repeat:no-repeat;
	width:122px;
	height:205px;
 	margin: 30px;
 	float: left;
}
* html div#13
{
 	margin-left: 30px;
	margin-top: 28px;
}
div#14
{
	background-image:url(photos/franco.jpg);
	background-repeat:no-repeat;
	width:122px;
	height:205px;
 	margin: 30px;
 	float: left;
}
* html div#14
{
 	margin-left: 30px;
	margin-top: 28px;
}



help i need somebody help!
Modifié par acidjack (13 May 2006 - 13:24)
Sujet clos
Aller à