2 div superposés...

Hello à tous,

Sur un système de news, j'ai deux éléments :
- Le premier est une image
- Le second est un texte.

Sur la page d'accueil du site, je cherche à faire en sorte que le texte forme un bandeau avec fond blanc + transparence sur le bas de l'image...

J'ai donc deux <div> :

La première pour l'image :

.news {
	width: 200px;
	border: 1px solid #000000;
	height: 200px;
	background:#fff;
	border-radius: 10px 10px 10px 10px;
	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, "sans-serif";
 	-webkit-font-smoothing: antialiased;
  	-moz-font-smoothing: antialiased;
  	font-smoothing: antialiased;
	font-size: 20px;
	color: #000000;
	float: left;
	margin-top: 30px;
	margin-left: 40px;
   	margin-bottom: 50px;
	max-height: 200px;
	position:relative;
}

La seconde pour le bandeau texte:

.news .bandeau {
	background: #ffffff;
	position: relative;
    	min-height: 35px;
	border-radius: 10px 10px 10px 10px;
    	width: 190px;
	padding-top: 5px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 5px; 
    	z-index: 100; 
	text-align: center;
	border: 1px solid #000000;
} 

Le souci, c'est que le bandeau est tout le temps en dessous de l'image mais pas sur l'image... Mmmm'voyez ?

Je débute en css et un coup de main me rendrais bien service

Merci !

Salut

Déjà voici un raccourci qui peut t'éviter des lignes d'écriture :

.news .bandeau{

padding: 5px;

}

au lieu de padding-top, padding-bottom, etc. Pareil pour border-radius puisque tu mets 10px partout.

Pareil margin-top: 30px; margin-left: 40px; margin-bottom: 50px; c'est exactement la même chose que :

news{

margin: 30px 0 50px 40px;
}


Retiens:[#red] top / right / bottom /left[/#]

Pense à mettre les équivalents pour les autres moteurs : -webkit-border-radius pour Safari et Chrome, o-border-radius pour Opera, etc.



D'autre part,
Tes deux éléments sont en position relative, joue alors sur les propriétés left, bottom, right et top. Pour plus d'info regarde là
Modifié par jmlapam (14 Sep 2011 - 01:11)

Merci pour ta réponse ! Le problème est réglé

Merci encore.
Je vais regarder pour virer toutes les lignes de code inutiles ^^