28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je suis novice en CSS et je n'arrive pas a réaliser une mise en page.

http://images.imagup.com/03/1210927558_aide-cadre-vs.gif

Le problème est que le DIV bleu (a_la_une_titre_texte) se superpose au dessus du DIV de bas (a_la_une_big_image_bas ) or j'aimerai qu'il se place en dessous.

ça fait 2 jours que je m'arrache les cheveux donc je fais appel à vous.

Code HTML/PHP
<div id=\"a_la_une_big_image\" style=\"background: url($premiere_img[1]); background-position : center top;\">

	<div id=\"a_la_une_titre_texte\">
	<div id=\"a_la_une_titre\"><a href=\"".$votre_url."/news/$valurl\" title=\"\">".$dernier2->titreNews."</a></div>
	<div id=\"a_la_une_texte\">".$txtnws."</div>
	</div>
	
	<div id=\"a_la_une_big_image_haut\"></div>
	<div id=\"a_la_une_big_image_milieu\"></div>
	<div id=\"a_la_une_big_image_bas\"></div>
 
	</div>


Code CSS
#a_la_une_big_image {  width : 400px; height : 200px; position:absolute; }  

#a_la_une_titre_texte {  width : 400px; height:60px; filter:alpha(opacity=80);-moz-opacity:.80;opacity:.80; background:#2997dd bottom; bottom:0;  position:absolute; }   
#a_la_une_titre a, a:active, a:visited { font-family : Arial, Verdana, sans-serif; color : #ffffff; font-size : 16px; padding: 0 0 0 0; background:transparent none repeat scroll 0%;}
#a_la_une_titre a:hover{ text-decoration : underline; }
#a_la_une_texte a, a:active, a:visited { font-family : Arial, Verdana, sans-serif; color : #ffffff; font-size : 11px; padding: 0 0 0 0; background:transparent none repeat scroll 0%;}
#a_la_une_texte a:hover{ text-decoration : underline; }
#a_la_une_big_image_bas {  background : url(./images/alaune_bas.gif) no-repeat; width : 400px; height : 10px; }

#a_la_une_big_image_haut { background : url(./images/alaune_haut.gif) no-repeat; width : 400px; height : 10px; top:0px; }
#a_la_une_big_image_milieu {  background:none; border-left:#FF0000 1px solid; border-right:#FF0000 1px solid; width : 398px; height : 180px; bottom:0;left:0; right:0; } 


Merci d'avance les CSSeux ... Smiley cligne