28173 sujets

CSS et mise en forme, CSS3

Superpose 2 divs, le 2nd n'affiche pas le background sous firefox

Bonjour a tous,
Voila,
j'ai un wrapper avec une couleur de fond (rouge), et je viens y superposer
un autre div(container) avec un background fondu du gris au blanc, et par dessus des thumbnails.Notez que je mets un titre sur mon wrapper rouge.
MON GROS PB:je n'obtiens pas le border, le fond de mon div container sous firefox...PLEASSSE!!

MERCI!

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>EXPERIMENT</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
  <div class="title">MONTREAL CANADIENS WALLPAPERS</div>
  <div id="container">
    <div class="thumbnailcontainer"><img src="thumbnail.gif" alt="thumbnail"/>
      <p>titletitletitletitletitletitletitle</p>
    </div>
    <div class="thumbnailcontainer"><img src="thumbnail.gif" alt="thumbnail"/>
      <p>titletitletitletitletitletitletitle</p>
    </div>
    <div class="thumbnailcontainer"><img src="thumbnail.gif" alt="thumbnail"/>
      <p>titletitletitletitletitletitletitle</p>
    </div>
    <div class="thumbnailcontainer"><img src="thumbnail.gif" alt="thumbnail"/>
      <p>titletitletitletitletitletitletitle</p>
    </div>
    <div class="thumbnailcontainer"><img src="thumbnail.gif" alt="thumbnail"/>
      <p>titletitletitletitletitletitletitle</p>
    </div>
    <div class="thumbnailcontainer"><img src="thumbnail.gif" alt="thumbnail"/>
      <p>titletitletitletitletitletitletitle</p>
    </div>
    <div class="thumbnailcontainer"><img src="thumbnail.gif" alt="thumbnail"/>
      <p>titletitletitletitletitletitletitle</p>
    </div>
    <div class="thumbnailcontainer"><img src="thumbnail.gif" alt="thumbnail"/>
      <p>titletitletitletitletitletitletitle</p>
    </div>
    <div class="thumbnailcontainer"><img src="thumbnail.gif" alt="thumbnail"/>
      <p>titletitletitletitletitletitletitle</p>
    </div>
    <div class="thumbnailcontainer"><img src="thumbnail.gif" alt="thumbnail"/>
      <p>titletitletitletitletitletitletitle</p>
    </div>
    <div class="thumbnailcontainer"><img src="thumbnail.gif" alt="thumbnail"/>
      <p>titletitletitletitletitletitletitle</p>
    </div>
    <div class="thumbnailcontainer"><img src="thumbnail.gif" alt="thumbnail"/>
      <p>titletitletitletitletitletitletitle</p>
    </div>
    <div class="thumbnailcontainer"><img src="thumbnail.gif" alt="thumbnail"/>
      <p>titletitletitletitletitletitletitle</p>
    </div>
  </div>
</div>
</body>
</html>


CSS:


/* CSS Document */

#wrapper{
	position:relative;
	top:100px;
	left:100px;
	width:534px;
	background-color:#CF2700;
	border:#AEAEAE 1px solid;
}

#container{
	position:relative;
	margin-top:12px;
	width:534px;
	background:url(wallpapersbackground.gif) no-repeat;
	background-color:#FFFFFF;
}
	
	
.thumbnailcontainer{
	position:relative;
	top:14px;
	left:4px !important;left:2px;
	float:left;
	width:128px;
	height:134px;
	margin:10px 2px !important;margin:0px 2px;
	background-image: url(thumbnailbackground.gif);
	background-repeat: no-repeat;
	
}
.thumbnailcontainer img{
	display:block;
	border:#999999 1px solid;
	margin:0;
}

.thumbnailcontainer p{
	position:relative;
	bottom:5px !important;bottom:15px;
	font:11px Arial,sans-serif;
	text-align:center;
}
.title{
	position:relative;
	top:6px;
	left:8px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
}


<edit>Pour correctement baliser ton code, il fallait l'encadrer par [ code]ton code[ /code] (sans les espaces) Je l'ai fait vu que tu semblais galérer Smiley cligne </edit>
Modifié par koala64 (31 Jan 2007 - 20:14)
Sujet clos
Aller à