18067 sujets

Questions générales et questions de débutants

[Résolu]Problème de positionnement, comment couper un DIV en 4 !

Pages :
Bonjour,
J'ai fini la lecture de CSS2, j'ai adoré !
Mais voila maintenant je me sent obligé de revoir mes fondamentaux et je suis en pleinne refont de mon site, menu en CSS etc
Bref c'est bien sympa, ma seule hantise est de me retrouvé contaminé par l'une de ces maladies dont sont souvent atteinte les neewbee et dont vous parlez dans l'ouvrage.

Aprés cette introduction entrons dans le vif du sujet, mes plus grosses difficultés proviennent du positionnement dans les bloc

voici le bloc que je voudrait réaliser :
http://gkooo.free.fr/Forum/alsacreation/news/news.jpg

j'ai commencé par prendre le fond, car la longeur du texte est limité à 120 signes et ne pourra donc jamais depasser cette taille.
http://gkooo.free.fr/Forum/alsacreation/news/news_fond.jpg

voici mon code source HTML, j'ai essayé de créer le moins de balise possible, et rester dans les balises communes 
<div id="news">
	<img width="120" height="96" src="images/Inaugurationsmt06_large.jpg" alt="inauguration_smt_2006" />
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In lem ipsum dolor sit amet, consectetuer adipiscing </p>
	<div class="news_bottom">
	<a href="#"> 10/12/2006 :</a><a href="#"><img src="images/btn_suite_bleu_clair.gif" alt="btn_suite" width="43" height="19" border="0" /></a>
	</div>
</div>


voici maintenant mon CSS
#news { padding-left:10px;padding-top:10px;padding-right:2px;font-size:10pt;text-align:left;color:#999999;background-image:url(images/news.gif);background-repeat: no-repeat;
		width:342px; height:130px}
#news img {border: #66ccc; border-style: solid; border-width:thin;
			margin-right:10px;float: left;}
#news p {margin-top:0px; margin-left:130px; margin-right:1px}
#news a {border:none;border:none;} 
#news a img	 { margin-right:7px; border:none;border:none;float: right;}


Resultat :
http://gkooo.free.fr/Forum/alsacreation/news/news_1.jpg

Resultats en diminuant la police :
http://gkooo.free.fr/Forum/alsacreation/news/news_2.jpg
Mon problème est le suivant :
- L'ais-je bien descendu ? en français dans le texte : Suis-je atteind d'une quelconque maladie de developpeur CSS ?
- Comment placer correctement la date et le titre de la news, en bas a gauche, et la puce orange en bas a droite ? (ne pas tenir compte des couleur et autres elements non correspondants, je les réglerais plus tard.)
Car pour le moment si le texte fait moins de 120 signes la puce et la date remonte, en plus ils sont pas alignés

MErci d'avance !
Modifié par gcooo (16 Dec 2006 - 01:26)
gcooo a écrit :
- L'ais-je bien descendu ? en français dans le texte : Suis-je atteind d'une quelconque maladie de developpeur CSS ?

Euh... Smiley rolleyes
J'ai pas compris la question...

gcooo a écrit :
- Comment placer correctement la date et le titre de la news, en bas a gauche, et la puce orange en bas a droite ?

Pour cela, il faut que tu dises au conteneur général dans lesquels ils se trouvent .news_bottom si je ne me trompe pas, qu'il ne doit pas flotter à droite de l'image.
Pour cela tu utilises : clear:left;
Normalement ça devrait fonctionner... Smiley ravi
Modifié par Cygnus (13 Dec 2006 - 23:09)
Bonjour,

Je crois (pas sur !) que j'ai compris...

Il faut que quelque soit la longeur du texte, ta date et l'image du bas soient alignés et au bas de ton bloc. C'est ça ?
<style>

#news { 
width: 342px;
position: relative;
border: 1px solid black;
overflow: hidden;
}

#news_imgage { /* remplace ton image */
background: red;
width: 120px;
height: 96px;
border: 1px solid #66ccc; 
margin-right:10px;
float: left;

}

#news p { 
width: 208px;
margin-top:0px; 
margin-left:130px; 
margin-right:1px;
}

#news_bottom{
position: absolute;
bottom: 0;
left: 0;
}

#news a {
border:none;
display: block;
float: left;
clear: both;
} 

#news_bottom_imgage	 { /* remplace ton image */
width: 43px;
height: 19px;
background: blue;
margin-right:7px; 
border:none;
float: right;
 }
 
</style>
</head>

<body>

<div id="news">

	<div id="news_imgage">
	</div>

	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In lem ipsum dolor sit amet, consectetuer adipiscing<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In lem ipsum dolor sit amet, consectetuer adipiscing
	 </p>

	<div id="news_bottom">
		<a href="#"> 10/12/2006 :</a>
		<div id="news_bottom_imgage"><!-- remplace ton image -->
		<div>

	</div>

</div>


Comme ça ?

Si je peux me permettre juste un petit conseil,
essaye d'indenter ton code (une balise par ligne et un décalage pour tes blocs imbriqués ...) c'est une bonne habitude à prendre, ça sera plus clair pour toi (et les autres) et ça t'évitera des doublons ou des erreurs stupides.
Crois moi ce n'est pas une perte de temps !!!

Bon courage
Merci à vous 2 pour vos réponses

>>Cygnus
Excuse moi mais je n'ai pas compris ta solution, mon conteneur c'est #news, j'ai essayé de ne pas créer de balise et de redefinir les balises html dans mon div news
la balise <img> pour positionner mon image
la balise <p> pour positionner mon texte
la balise <a> pour positionner le titre de ma video et la date, vu que c'est cliquable
la balise <a><img> (une image cliquable, je ne suis pas sur que ce que j'ai fait soit correct ...) pour positionner mon bouton

quand à ma phrase imcomprehensible, je voulais juste savoir si ma methode de réalisation (éviter de créer des balises supplémentaire) est correcte.

>>ghost
J'ai créer le document à partir de ton code, je te remercie d'ailleurs de ce travail, mais voila, lorsque je modifie mon Lorem ipsum, par exemple je ne garde que le mot "lorem" la date et l'image remonte, à l'inverse si je met tous le paragraphe, ben ca descend ...

Pour l'indentage merci il faut vraiment que je me force en effet

EDIT : ghost, j'ai ajouté une hauteur à la balise news et maintenant, lorsque je reduit mon lorem ipsum en dessous de 120 signes, la date et le bouton ne remontent plus !! bien évidement si je dépasse 120 signes, la date et le bouton descendent mais ca ne peut pas arriver, la base de donnée renvoie 120 signes maxi.
je vais tenter de terminer avec cette methode, si j'arrive je modifirais le titre.
Encore merci.
Modifié par gcooo (13 Dec 2006 - 23:57)
j'avance j'avance ...
J'ai le résultat esconté (presque)
maintenant pouvez vous m'expliquez cela

voici le resultat sous FireFox 2.0 :

http://gkooo.free.fr/Forum/alsacreation/news/news_ff.jpg

et voici le resultat sous IE 7 :

http://gkooo.free.fr/Forum/alsacreation/news/news_ie7.jpg

1. Sous FireFox :
- le border autour de l'image n'apparait pas.
- la police est trés "strict" trés fine
mais le résultat est presque bon
2. Sous IE :
- le border autour de l'image n'apparait toujours pas
- l'image n'apparait pas Smiley eek
- la police est plus "grossière", plus large

2ieme question :
voici l'aperçu sous DreamWeaver :
http://gkooo.free.fr/Forum/alsacreation/news/news_dw.jpg
Pourquoi ?

Voici mon code :
<!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>Document sans nom</title>

<style>



#news { 
width: 352px;
height:139px;
background-image:url(images/news.gif);
background-repeat: no-repeat;
position: relative;
overflow: hidden;

}



#news_imgage { /* remplace ton image */
margin-top:13px;
margin-left:10px;
margin-bottom:10px;
margin-right:10px;
width: 120px;
height: 96px;
border: 1px solid #66ccc; 
margin-right:10px;
float: left;
}



#news p { 
width: 208px;
margin-top:13px;
margin-left:130px; 
margin-right:1px;
}



#news_bottom{
position: absolute;
bottom: 0;
left: 0;
}



#news a {
border:none;
display: block;
float: left;
clear: both;
} 



#news_bottom_imgage	 {
width: 43px;
height: 19px;
margin-right:6px;
margin-bottom:1px;
border:none;
float: right;
}

 

</style>
</head>

<body>
<div id="news">
	<div id="news_imgage">
	<img width="120" height="96" src="images/Inaugurationsmt06_large.jpg" alt="inauguration_smt_2006" />
	</div>
	<p>Lorem ipsum dolor sit amet,
	 </p>
	<div id="news_bottom">
		<a href="#"> 10/12/2006 :</a>
		<div id="news_bottom_imgage"><a href="#"><img src="images/btn_suite_bleu_clair.gif" alt="btn_suite" width="43" height="19" border="0" /></a>
		</div>
	</div>
</div>
</body>
</html>

Modifié par gcooo (14 Dec 2006 - 00:35)
gcooo a écrit :
Excuse moi mais je n'ai pas compris ta solution, mon conteneur c'est #news, j'ai essayé de ne pas créer de balise et de redefinir les balises html dans mon div news


En fait mon idée est simple :
pour éviter que ta zone de texte contenant la date, le titre et ton boutton ne remonte, je te conseillais simplement de les obliger à s'aligner à gauche en dessous de l'image.

Si je ne me trompe pas, tu as déjà un div qui englobe ces éléments-là : 
<div class="news_bottom">
  <a href="#"> 10/12/2006 :</a>
  <a href="#"><img src="images/btn_suite_bleu_clair.gif" alt="btn_suite" width="43" height="19" border="0" /></a>
</div>


Il suffit donc de rajouter : 
.news_bottom {clear:left;}

pour résoudre le problème est forcer le passage à la ligne ...
Modifié par Cygnus (14 Dec 2006 - 00:53)
Oki et merci de me faire l'honneur de m'offrir ton 600ieme post Smiley cligne
Je viens de tester ta methode, en effet nikel ca passe bien à la ligne pour la date, par contre le bouton reste une ligne en dessous de la date maintenant.peut etre un float qui manque quelque part ?
et toujours le même problème, l'image n'apparait pas sous IE ??
Modifié par gcooo (14 Dec 2006 - 01:01)
gcooo a écrit :
Oki et merci de me faire l'honneur de m'offrir ton 600ieme post Smiley cligne

Smiley rolleyes
Ah oui, tiens !
Eh bien, tout le plaisir est pour moi Smiley ravi
ha merde j'ai edité le post précédent, j'espere que tu va la lire ...
mon ami insomniaque ... (ou quebecquois ...)
Re,

Vite fait, teste
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>
#news { 
width: 352px;
background-image:url(images/news.gif);
background-repeat: no-repeat;
position: relative;
overflow: hidden;
padding-bottom: 19px;
}

img { 
margin: 13px 10px 10px 10px;
width: 120px;
height: 96px;
margin-right:10px;
float: left;

}

#news p { 
width: 208px;
margin-top:13px;
margin-left:130px; 
margin-right:1px;

}



a.gauche {
position: absolute;
bottom: 0;
left: 0;
}

a.droite {
position: absolute;
bottom: 3px;
right: 6px;

}

a img{
width: 43px;
margin: 0;
height: 19px;

}	  
</style>

</head>
<body>

<div id="news">
	<img src="image.jpg" alt="inauguration_smt_2006" />
	<p>Lorem ipsum dolor sit amet,
	</p>
	<a href="#" class="gauche"> 10/12/2006 :</a>
	<a href="#" class="droite"><img src="image.gif" alt="btn_suite"  /></a>
</div>

</body>
</html>
MERCI, sous FireFox j'ai enfin obtenu le résultat souhaité.
Maintenant sous DreamWeaver c'est pas tout à fait ca, mais la c'est "normal" ?
Par contre sous IE 7, c'est Pas Bon du tout
Bilan :

Sous FireFox : l'image n'a pas de cadre
Sous IE : l'image n'apparait pas, le texte n'apparait pas
Sous Dreamweaver : l'image n'apparait pas, la marge entre l'image et le texte n'est pas bonne, ...

http://gkooo.free.fr/Forum/alsacreation/news/news_compar.jpg

Voici mon code adapté en fonction de vos diverses informations :
<!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>Document sans nom</title>

<style>

#news { 
width: 352px;
height:141px;
background-image:url(images/news.gif);
background-repeat: no-repeat;
position: relative;
overflow: hidden;
margin-bottom:10px;
}

#news img {
border:none;
}

#news_image {
margin-top:13px;
margin-left:10px;
margin-bottom:10px;
margin-right:10px;
width: 120px;
height: 96px;
border: 1px solid #66ccc; 
float: left;
}

#news p { 
width: 208px;
margin-top:13px;
margin-left:130px; 
margin-right:1px;
color:#999999;
font-family:Arial, Helvetica, sans-serif;
font-size:12pt;
}

#news_bottom{
position: absolute;
bottom: 0;
left: 0;
}

#news a {
margin-left:8px;
border:none;
display: block;
float: left;
clear: both;
text-decoration:none;
color:#999999;
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
font-weight:bold;
} 

#news a:hover {
text-decoration:underline;
color:#006699;
} 

.titre_news {
color: #ff9900;
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
font-weight:bold;
}

a.gauche {
position: absolute;
bottom: 0;
left: 0;
}

a.droite {
position: absolute;
bottom: 5px;
right: 6px;
}

</style>
</head>

<body>
<div id="news">
	<div id="news_image">
	<img width="120" height="96" src="images/Inaugurationsmt06_large.jpg" alt="inauguration_smt_2006" />
	</div>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla dignissim tempor elit. Donec non lectus nec purus metus.
  </p>
	<a href="#" class="gauche"> 10/12/2006 : <span class="titre_news">ceci est le titre de ma video</span></a>
	<a href="#" class="droite"><img src="images/btn_suite_bleu_clair.gif" alt="btn_suite"  /></a>
	</div>
</div>
</body>
</html>

Modifié par gcooo (14 Dec 2006 - 10:50)
Bon ...
Alor en reprenant par copié-collé ton code, il apparait qu'il y a un problème de balises <div> :
tu en ouvres 2 et tu en fermes 3... Smiley sweatdrop
A mon avis, ton problème vient de là sous IE 7 ! Smiley rolleyes

Quant au comportement sous Dream, ne t'y fies pas. Si tu veux voir ce que ça donne, utilises l'aperçu navigateur, il est fait pour cela !

Je te conseille fortement d'indenter correctement ton code et de le commenter pour que celui-ci soit plus compréhensible pour toi d'une part, et pour les personnes qui cherchent à le comprendre d'autre part ...
Modifié par Cygnus (14 Dec 2006 - 23:35)
Sinon...
Personnellement je n'aurais pas fait cela tout à fait comme ça... Il me semble que tu te compliques beaucoup la vie, et que tu utilises beaucoup d'éléments qui ne sont pas forcément nécessaires (d'ailleurs, pourquoi autant de positions absolues ?!?)

En reprenant ton exemple, je ferais quelque chose comme ceci : 
<body>
<div id="news">
  <img width="120" height="96" src="images/Inaugurationsmt06_large.jpg" alt="inauguration_smt_2006" />
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla dignissim tempor elit. Donec non lectus nec purus metus.</p>
    <div id="news_bottom">
      <a href="#" class="droite"><img src="images/btn_suite_bleu_clair.gif" alt="btn_suite" /></a>
      <a href="#"> 10/12/2006 : <span class="titre_news">ceci est le titre de ma video</span></a>
    </div>
</div>
</body>


#news { 
width: 352px;
height:141px;
background:url(images/news.gif) top left no-repeat;
overflow: hidden;  /* quelle est son utilité ?!? */
margin-bottom:10px;
}

#news img {
border:none;
}

#news_image {
margin: 13px 10px 10px 10px;
width: 120px;
height: 96px;
border: 1px solid #66ccc; 
float: left;
}

#news p { 
width: 208px;
margin: 13px 1px 0 130px
color:#999999;
font:12pt "Arial", Helvetica, sans-serif;  /*penses à définir tes polices en unité em */
}

#news_bottom{
clear:left
}

#news_bottom a {
margin-left:8px;
border:none;
display: block;
text-decoration:none;
color:#999999;
font:bold 10 pt "Arial", Helvetica, sans-serif;
}

#news a:hover {
text-decoration:underline;
color:#006699;
} 

.titre_news {
color: #ff9900;
font:bold 10 pt "Arial", Helvetica, sans-serif;
}

a.droite {
float:right;
bottom: 5px;
right: 6px;
}


Il y a certainement des erreurs ...
J'ai tout fait à la volée, en hooligan.
Mais je pense qu'il y a des choses qui pourront te servir... Smiley murf
Cygnus a écrit :
Bon ...
Alor en reprenant par copié-collé ton code, il apparait qu'il y a un problème de balises <div> :
tu en ouvres 2 et tu en fermes 3... Smiley sweatdrop


Smiley eek
je ne trouve pas ce que tu me dit ??
j'en ouvre 4 (pas 2 ??)
<div id="news">
--<div id="news_imgage">
--</div>
--<div id="news_bottom">
----<div id="news_bottom_imgage">
----</div>
--</div>
</div>
Modifié par gcooo (15 Dec 2006 - 00:58)
Cygnus a écrit :
Sinon...
Personnellement je n'aurais pas fait cela tout à fait comme ça... Il me semble que tu te compliques beaucoup la vie, et que tu utilises beaucoup d'éléments qui ne sont pas forcément nécessaires (d'ailleurs, pourquoi autant de positions absolues ?!?)


Alors la Merci voila exactement le genre de réponse que je recherche, il y a tellement de methode différentes pour un résultats quasi-identique, que j'ai besoin de ce genre d'info pour coder "correctement" en CSS, la réponse à ta question "pourquoi tant de position absolues", ben parce que les exemples sur lesquelles je me suis basés étaient réalisés comme ca !

Je vais relire ton code et essayer de refaire ma news avec du code plus propre Smiley cligne
Modifié par gcooo (15 Dec 2006 - 01:02)
Alors Cygnus, j'ai repris ton code "tel quel" et sous IE 7 pas d'images ???
sous FF ca donne ca
http://gkooo.free.fr/Forum/alsacreation/news/news_cygnus_FF.jpg

j'ai alors tenter d'utiliser #news_image que tu as laisser dans mon CSS mais non utilisé dans le HTML, ca m'a permis de placer correctement mon image dans la fenetre, mais la "ligne" du bas a perdu sa belle mise en page ...

Par defaut, j'irais toucher #news p et je commencerais a essayer de changer son attribut position (genre float right) pour qu'il remonte a droite ?
maintenant je ne suis sur de rien ...


si tu fait un copier/coller du code, tu peut tester avec les images ici
j'ai également mit la page XHTML en ligne : ici

voici la copie de ton code :
<!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>Document sans nom</title>

<style>
#news { 
width: 352px;
height:141px;
background:url(images/news.gif) top left no-repeat;
margin-bottom:10px;
}

#news img {
border:none;
}

#news_image {
margin: 13px 10px 10px 10px;
width: 120px;
height: 96px;
border: 1px solid #66ccc; 
float: left;
}

#news p { 
width: 208px;
margin: 13px 1px 0 130px
color:#999999;
font:12pt "Arial", Helvetica, sans-serif;  
}

#news_bottom{
clear:left
}

#news_bottom a {
margin-left:8px;
border:none;
display: block;
text-decoration:none;
color:#999999;
font:bold 10 pt "Arial", Helvetica, sans-serif;
}


#news a:hover {
text-decoration:underline;
color:#006699;
} 

.titre_news {
color: #ff9900;
font:bold 10 pt "Arial", Helvetica, sans-serif;
}


a.droite {
float:right;
bottom: 5px;
right: 6px;
}
</style>

</head>

<body>
<div id="news">
  <img width="120" height="96" src="images/Inaugurationsmt06_large.jpg" alt="inauguration_smt_2006" />
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla dignissim tempor elit. Donec non lectus nec purus metus.</p>
    <div id="news_bottom">
      <a href="#" class="droite"><img src="images/btn_suite_bleu_clair.gif" alt="btn_suite" /></a>
      <a href="#"> 10/12/2006 : <span class="titre_news">ceci est le titre de ma video</span></a>
    </div>
</div>

</body>
</html>

Modifié par gcooo (15 Dec 2006 - 01:34)
gcooo a écrit :
Smiley eek
je ne trouve pas ce que tu me dit ??
j'en ouvre 4 (pas 2 ??)
<div id="news">
--<div id="news_imgage">
--</div>
--<div id="news_bottom">
----<div id="news_bottom_imgage">
----</div>
--</div>
</div>


Pas dans l'exemple fournit plus haut en tous cas : 
<div id="news">
	<div id="news_image">
	</div>
	</div>
</div>


Bon, sinon ...
Concernant mon code, il ya effectivement des erreurs ...
J'ai notamment supprimé le div #news_image en oubliant de mettre une id à l'image ...

Sinon, je viens de voir pourquoi (je pense ... Smiley lol ) ton image n'est pas reconnu sous IE7... Il semblerait que son nom soit : Inaugurationsmt06_large.jpg.bmp et non pas Inaugurationsmt06_large.jpg Smiley sweatdrop

D'ailleurs à ce propos évite d'avoir des noms de fichiers aussi longs, ils risquent d'être tronquer !
Modifié par Cygnus (15 Dec 2006 - 10:34)
Cygnus a écrit :


Pas dans l'exemple fournit plus haut en tous cas : 
<div id="news">
	<div id="news_image">
	</div>
	</div>
</div>


Vu ! oui en effet, ca devait etre une copie du code 'en cours de realisation'
Cygnus a écrit :

Bon, sinon ...
Concernant mon code, il ya effectivement des erreurs ...
J'ai notamment supprimé le div #news_image en oubliant de mettre une id à l'image ...

comme ca ?
<body>
<div id="news">
  <img id="news_image" width="120" height="96" src="images/Inaugurationsmt06_large.jpg" alt="inauguration_smt_2006" />
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla dignissim tempor elit. Donec non lectus nec purus metus.</p>
    <div id="news_bottom">
      <a href="#" class="droite"><img src="images/btn_suite_bleu_clair.gif" alt="btn_suite" /></a>
      <a href="#"> 10/12/2006 : <span class="titre_news">ceci est le titre de ma video</span></a>
    </div>
</div>

résultat l'image est remontée mais pas le texte, en tous cas pas en totalitée. Sous FireFox :
http://gkooo.free.fr/Forum/alsacreation/news/news_cygnus_FF2.jpg

EDIT : ca c'est sous FireFox
Par contre sous IE, ce coup ci c'est mieux (sauf l'image qui n'est pas revenue ...)
Sous IE :
http://gkooo.free.fr/Forum/alsacreation/news/news_cygnus_IE2.jpg

Cygnus a écrit :

Sinon, je viens de voir pourquoi (je pense ... Smiley lol ) ton image n'est pas reconnu sous IE7... Il semblerait que son nom soit : Inaugurationsmt06_large.jpg.bmp et non pas Inaugurationsmt06_large.jpg Smiley sweatdrop

D'ailleurs à ce propos évite d'avoir des noms de fichiers aussi longs, ils risquent d'être tronquer !

Smiley eek Ou as tu trouvé Inaugurationsmt06_large.jpg.bmp
Modifié par gcooo (15 Dec 2006 - 10:49)
Bon ...
Voilà le résultat de mes recherches : 
#news { 
width: 352px;
height:141px;
background:url(news.gif) top left no-repeat;
margin-bottom:10px;
padding: 13px 0 0 13px;
}

#news img {
border:none;
}

#news_image {
margin: 0 10px 8px 0;
border: 1px solid #66ccc; 
float: left;
}

#news p { 
margin: 0 30px 0 0;
color:#999999;
font:0.8em "Arial", Helvetica, sans-serif;
text-align:justify;
}

#news_bottom{
clear:left
}

#news_bottom a {
border:none;
text-decoration:none;
color:#999999;
font: 0.75em "Arial", Helvetica, sans-serif;
}

#news_bottom a.texte {
display:block;
padding-top:5px;
}

#news a:hover {
text-decoration:underline;
color:#006699;
} 

.titre_news {
color: #ff9900;
font:bold 1em "Arial", Helvetica, sans-serif;
}

a.droite {
float:right;
margin-right: 20px;
}


Et : 
<div id="news">
  <img id="news_image" width="120" height="96" src="Inaugurationsmt06_large.jpg" alt="inauguration_smt_2006" />
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla dignissim tempor elit. Donec non lectus nec purus metus.</p>
    <div id="news_bottom">
      <a href="#" class="droite"><img src="btn_suite_bleu_clair.gif" alt="btn_suite" /></a>
      <a href="#" class="texte"> 10/12/2006 : <span class="titre_news">ceci est le titre de ma video</span></a>
    </div>
</div>


Concernant le format de ton image, en voulant l'enregistrer pour faire les essais, je me suis rendue compte que le format pris en compte était un bitmap.
Je te conseille de le ré-enreigstrez avec ton logiciel d'image ...
Et de lui donner un nom plus court ! Smiley langue
Pages :
Sujet clos
Aller à