[CSS] Contenir les Absolute dans une div

Résolu/Fermé
Zayer - 19 févr. 2010 à 03:26
scriptiz Messages postés 1424 Date d'inscription dimanche 21 décembre 2008 Statut Membre Dernière intervention 14 septembre 2023 - 20 févr. 2010 à 00:40
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

scriptiz Messages postés 1424 Date d'inscription dimanche 21 décembre 2008 Statut Membre Dernière intervention 14 septembre 2023 425
19 févr. 2010 à 11:02
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
Un énorme merci scriptiz! Sa ma beaucoup aidé! Merci pour la démo!! :)
0
scriptiz Messages postés 1424 Date d'inscription dimanche 21 décembre 2008 Statut Membre Dernière intervention 14 septembre 2023 425
20 févr. 2010 à 00:40
No prob, faut dire que j'étais inspirée pour le message d'habitude mes réponses sont plus courtes ^^

Bonne continuation à toi :)
0