[CSS] Contenir les Absolute dans une div

Résolu
Zayer -  
scriptiz Messages postés 1424 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,


Et oui, c'est encore moi!! Je ne suis pas très avancé en CSS :S

J'ai réussis a faire une boite a news (Voir: https://forums.commentcamarche.net/forum/affich-16647375-css-boite-a-news-z-index + image)

(Code source plus bas)

Mais voila que ma boite est en haut de ma page :

Le premiere image : Page vide avec une boite (IE8)
http://img4.imageshack.us/img4/197/ccm1.png

Et maintenant jen mets deux sur ma page d'accueil:

La deuxieme :L(sous Firefox)
http://img297.imageshack.us/img297/7413/ccm2.png

A l'aide! :( SVP!

Merci :D

-----------------------------------------
FEUILLE DE STYLE 
<!-- NEWS BOX -->
.news_cadre {
	position: relative;
	background-color:white;
	border:1px black solid;
	width: 500px;
	height: 200px;
	
	left:100px;
	top:20px;
	padding-top:30px;
}
.news_titre {
	position: absolute;
  background-color:#CCCCFF;
	top: -25px;
	left:20px;
	width:200px;
	height:24px;
	padding-left:10px;
	
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:small;
	font-weight:bold;
	vertical-align:middle;
}
.news_desc {
	position: absolute;
	left:24px;
	top:0px;
	font-style:italic;
}

.news_img {
  position: absolute;
  top: -25px;
  left: -25px;
  background-color:#CCCCFF;
  width:46px;
  height:55px;
}



Code HTML 
    <div class="news_cadre">
  		<p class="news_titre">
  		Tout nouveau!</p>
		<p class="news_img">
				<img alt="Icone" height="44" src="xampp/htdocs/img/style1/icons/package.png" width="44" style="vertical-align:middle;"></p>
  		<p class="news_desc">Publié le 18 février 2010</p>

 <p>Ceci est est une nouvelle! </p>
  

</div>
A voir également:

3 réponses

Réponse 1 / 3
scriptiz Messages postés 1424 Date d'inscription   Statut Membre Dernière intervention   425
 
Alors fait attention quand tu utilise l'attribut CSS position.

Quand tu le met en relative ça veut dire que tu va le décaler par rapport à son endroit de base.

Donc si tu met ceci : 
position:relative;
top:50px;
left:50px;


Ca va avoir pour effet de décaler l'élément sur lequel tu as appliqué ce code, de 50 pixels vers la droite, et de 50 pixels vers le bas, et ceci à partir de l'emplacement où l'élément aurait dut se trouver sans position relative.

Par contre si tu utilise la position absolute, la position est calculée à partir de la fenêtre du navigateur.
Donc si tu met ceci : 
position:absolute;
top: 50px;
left: 50px;


Ca va avoir pour effet de décaler l'élément tout en haut à gauche de la fenêtre, avec un espace de 50pixels entre le haut de ton navigateur et l'élément, et de 50 pixels entre la gauche de ton navigateur et ton élément.

Voici un exemple de ce que tu cherches à faire, évidemment pour toi il vaudra que ce soit le logo qui soit au-dessus si j'ai bien compris, toujours est-il que le concept y est :
http://demango.ovh.org/news_zayer.html

Fait un clique droit pour voir le code source.
3
Réponse 2 / 3
Zayer
 
Un énorme merci scriptiz! Sa ma beaucoup aidé! Merci pour la démo!! :)
0
Réponse 3 / 3
scriptiz Messages postés 1424 Date d'inscription   Statut Membre Dernière intervention   425
 
No prob, faut dire que j'étais inspirée pour le message d'habitude mes réponses sont plus courtes ^^

Bonne continuation à toi :)
0

Discussions similaires

comment remplacer un #div/0! par une cellule vide
zara70 -
Vaucluse -

3 réponses
Commentaires
Manicko -
Radinoz -

1 réponse
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
indice et exposant en css ?
yiv -
Kitkatryne -

19 réponses
mails envoyés qui n'arrivent pas au destinataire
bebert -
Xileh -

1 réponse