28173 sujets

CSS et mise en forme, CSS3

Salutation à tous,

J'ai, comme vous l'imaginez, un petit ennui. Mais comme un dessin vaut mieux qu'un long commentaire, je vous donne les 2 liens suivants:

http://www.olivierlange.com/divers/imavox/css/testNL.html

Sous Firefox, tout fonctionne comme je le souhaite, j'ai bien mes différentes div l'un sous l'autre, sans marge (j'ai tester en mettant mon img dans un div, meme souci). Par contre, internet Explorer me place des marges en haut et en bas que je ne peux absolument pas supprimer (tester de multiples manières).

Alors, je sais fort bien que je maitrise plus le PHP5 que le CSS, mais quand même! J'ai l'impression de ne plus savoir coder Oo

Si l'un de vous a une idée, je suis preneur.

le code de la page (c'est que de la démo, et oui, je sais, je n'ai pas mis de classe, car c'est une newsletter, et j'ai constaté des bugs / non reconnaissance en mettant les infos css dans une balise en début de page, plutot que dans les champs):
<div id="content" style="width:600px; background-color: white; margin:0px; font-family:Trebuchet MS, Arial, Helvetica, sans-serif; font-size:12px; color:#14245F;">
	<div id="title" style="width:600px; height:130px; background-color:red">
		<div style="position:relative; left:555px; top: 0px; height:45px ">
			<img src="http://www.imavox.ch/preview/corner_top.jpg" />
		</div>
		<div id="logoImavox" style="position:relative; left:0px; top: -30px; height:110px">
			<img src="http://www.imavox.ch/preview/logo.jpg" />
		</div>
		<div style=" margin-right: 15px; color:#14245F; text-align:right; position:relative; top:-90px; left:0px;">

			<h1>Newsletter Octobre 2007</h1>
		</div>
		
	</div>
	<img src="http://www.imavox.ch/preview/dot_greyv1.gif"  />
	<div id="title" style=" width:600px; height:130px; background-color:red; position:relative; ">
		<div style="position:relative; left:555px; top: 0px; height:45px ">
			<img src="http://www.imavox.ch/preview/corner_top.jpg"  />
		</div>

		<div id="logoImavox" style="position:relative; left:0px; top: -30px; height:110px">
			<img src="http://www.imavox.ch/preview/logo.jpg" />
		</div>
		<div style=" margin-right: 15px;	color:#14245F; text-align:right; position:relative; top:-90px; left:0px;">
			<h1>Newsletter Octobre 2007</h1>
		</div>
		
	</div>

</div>



Merci du coup de main
Onet

P.S: en fait, le code à en grande partie été récupérer pour debuggage, donc je suis ouvert à toutes proposition, tant que j'arrive à fixer ces fichu div l'une par rapport à l'autre sous IE!
Bonjour à toi.
Ayant eu un tout petit peu de temps à tuer en mangeant mon sandwich quotidien, j'ai regardé un brin ton code, et je te propose d'essayer avec celui-ci:

<div id="title" style="width: 600px; height: 175px; background-color: red;">
    <div style="width: 600px; height: 45px; background: url(http://www.imavox.ch/preview/corner_top.jpg) no-repeat right top">
    </div>
    <div id="logoImavox" style="height: 130px; background: url(http://www.imavox.ch/preview/logo.jpg) no-repeat top left;">
        <h1 style="margin-right: 15px; color: rgb(20, 36, 95); text-align: right; padding-top: 50px;">Newsletter Octobre 2007</h1>
    </div>
</div>

J'y ai fait "quelques" aménagements. Normalement, ce type de code te posera moins de problème.
Je te conseille également la lecture de cet excellent article paru sur pompage.net.
Modifié par smitty (03 Oct 2007 - 13:55)
Salut,

Je te remercie de ta réponse et de ton temps. Une chose que j'ai du oublier de préciser... Comme il s'agit d'une newsletter, et devant être imprimée, c'est volontairement que je n'ai pas mis d'image en background, car celles-ci ne sont pas imprimées en standars. DOnc par souci de mise en page et d'uniformité, on a choisi de ne mettre que des images en temps que telles.

Onet
Argh, hum... Ok. Si j'ai un petit moment (malheureusement, pas de nouvelle pause sandwich de prévue, mais sait-on jamais), je regarderai de nouveau. J'imagine personnellement qu'il y avait un petit souci de taille et de positionnement des différents éléments.
smitty a écrit :
Argh, hum... Ok. Si j'ai un petit moment (malheureusement, pas de nouvelle pause sandwich de prévue, mais sait-on jamais), je regarderai de nouveau. J'imagine personnellement qu'il y avait un petit souci de taille et de positionnement des différents éléments.


Peut être, mais a première vue, il ne me semble pas. C'est la ou ca m'hallucine. Une fois de plus, c'est parfait sous Firefox, mais quand a IE, voila quoi. Et j'y ai passé prêt de 3h ce matin... depression totale Smiley cligne

Onet
Salut,

Un bon tour sur la Faq plus tôt qu'un anti-dépresseur
	<img src="http://www.imavox.ch/preview/dot_greyv1.gif" style="display: block;" />


Pour éliminer ces méchantes marges