28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Cela fait plusieurs jours que je galère avec ce problème de lien sur ie 6 Smiley decu

Les solutions données dans le forum fonctionnent très bien sans scroll, mais avec le position:relative pour les liens, ils restent bien entendu fixés à leur emplacement lorsqu'on descend dans la page ... très ennuyeux Smiley decu

En gros j'ai une photo en fond, un fond transparent moins large par dessus, puis du texte dedans avec des liens. Le contenu varie, je dois donc pouvoir faire défiler la partie transparente en hauteur.

Quelqu'un aurait-il une solution pour résoudre ce problème ?

Merci beaucoup pour votre aide.
Salut,

Pour constater un peu plus précisément ton problème et être en mesure de t'aider, il serait bien que tu nous fournisses dans l'idéal une page en ligne, ou au moins l'intégralité de ton code, et/ou des images explicatives si nécessaire, comme le recommande la règle 13 du forum. Smiley cligne
En l'état, j'ai peur qu'il ne soit difficile de t'apporter une solution.
Apparemment une question de position:fixed, non ? Fais une recherche sur ce terme, tu devrais trouver la solution.
Désolé je débute sur le forum Smiley confused , en effet c'est pas forcément très clair.

Comme le tout est dans un cms et pas facile à sortir par bout, j'ai fait une page html bidon, avec un css qui représente bien mon problème.

Code Html:

<div id="content">
  <div id="middle_content">
  <div id="middle_content_sans_bg">
  <div id="box_middle">
        <p>Lorem</p>
        <p> </p>
        <p><a href="#lorem">Lorem ipsum dolor sit amet</a></p>
        <p>Illa poetis videor requirere, quippiam et autem ut et esset voluptate neque consilia sed voluptatibus est virtutum minima et, interesse exquirere et peccandi quae carere se, angere.. Admodum atomorum, sed quod summum erant ipsa iis successerit non.. Ut personae quod, meis allevatio nobis quam nam latine assumenda fugiendam, reperiri quae aequum, amicitia amicorum, delectet animo et.. Se eamque fingi perdiderunt, qui quae imbutus hoc aliquo laudatur oratio firmitatem, denique esse, doloris autem movere reperietur ad omnes locum, igitur sublata ad, sic praesertim labore siculis vero fidem atque, eveniunt necesse vel istae fingitur, animal si, ante nihil, ea multos nihil, amputata essent et declinationem de id est est quo, nihil admirer et, cum ei id ex antiquitate viam sunt hoc non de, euripidis miserius sic nobis quem, poetis graecos beatus id enim, facilius bonum contra et animos ipsum, se sapientia, quod non placeat, vero nasci.</p>
        <p> </p>
        <p><a id="evaluer" name="lorem"></a><strong>Lorem ipsum dolor sit amet</strong></p>
        <p> </p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipisci elit. De sit praeda sed eos tolerabiles quae homines minus, bona et, timentis modo enim ita.. Vivi viros modice tum itaque quam, meam virtute vivendi robustus transferam temperantiamque contra cruciantur esse haec ei bonorum necessitatibus, tempore posse comparandae, utamur si hominum breviter malis cum, et octavio laboramus scripta is, iucunde quibus nos vacare delectant esset orestem facta captet.. Sed nihil nec expetendis, quae aut omnis et etiam et voluptate inquam quae est monet ac, aegritudines ex constituto sapientium quam turbent, error complexiones tractat est, horrent mihi atque velit conscientiam rebus nihil quod tueri timidiores partes inquam quo, arbitror magnos dolore non occulte terentii quo, solido quod ipse, atque quoddam potest proficiscuntur meminerunt.</p>
	</div>
  </div>
</div>
</div>


Code CSS:

div#content
{
	background-color:#99CC33;
}

div#middle_content
{
	margin:auto;
	width:600px;
	height:400px;
	border:#000000 1px solid;
	background-image:url(../img/backgrounds/img_28_b.jpg);
}

div#middle_content_sans_bg 
{
	width:600px;
	height:400px;
	overflow-x:hidden;
	overflow-y:auto;
}

div#box_middle
{
	margin:auto;
	width:500px;
	background: none; 
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/middle_int_big.png", sizingMethod="scale");
}

* {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}

p {
	margin:10px;
}

a {
	color:#FF0033;
	z-index:3;
	position:relative;
}


Voilà, j'espère que ça ira.

Merci encore Smiley smile
Modifié par Yoomi (15 Jul 2008 - 17:15)