28172 sujets

CSS et mise en forme, CSS3

(résolu)Adaptation d'un système d'ombrage photo à un site

Bonjour à tous, je suis tombé sur un système d'ombrage de photo que je trouve très intéressant.
voir ici et ici

Je voudrais adapter ce système au contour de mon site qui fait 900px de large pour la bordure de droite et celle du bas (comme pour les photos).
La hauteur doit pouvoir s'adapter en fonction du contenu.
Mais pour le moment je cale, je n'y arrive pas! (il y a bien la page d'explication du système, mais je ne parle pas anglais...)

Est-ce que ça vous semble possible comme projet et si oui est-ce que vous pourriez me donner des pistes ou alors un système qui existe déjà ?

Merci d'avance et bonne journée Smiley cligne
Modifié par chromatik (21 Apr 2009 - 16:55)
Salut,

Juste une question : dans le cas de ton site, quel est l'avantage de ce système par rapport aux ombres portées en background-image css ?
Question pertinente! Je pense que je me suis entêté dans mon idée d'utiliser ce système...
depuis ce matin j'ai mis en place un système plus standard avec les ombres en background,

mais j'ai un petit bug que je ne comprends pas (newbie du css), est-ce que vous pourriez m'aider?

Mon but de mettre une ombre a droite et dans le footer
voici une image du problème, les deux parties sont sensés se rejoindre
upload/21108-Sans-titre.jpg

voici mon code html

<body>
<div id="conteneur">
	<div id="texte">
<p>Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et 						dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.</p>
	</div>

</div>
   
		<div id="footer">
		</div>
    
</body>


et le code css

body{
	background-color:#f4edde;
}

#conteneur {
	width: 812px;
	background: transparent url(media/fond_cal.png);
	background-repeat: repeat-y;
	margin:0;
}
#texte {
margin: 0 20px 0 20px;
}
#footer  {
	width: 812px;
	background: transparent url(media/footer.png);
	background-repeat: no-repeat;
	background-position: right top;
	height: 43px;
}



Si vous savez m'aider, grand merci Smiley cligne
et si j'incorpore mon footer dans le div conteneur, il y un effet du superposition Smiley bawling
upload/21108-Sanstitre2.jpg

please help ça me rend fou cette histoire Smiley biggol lol

merci
a écrit :
les deux parties sont sensés se rejoindre
Les navigateurs appliquent souvent des styles par défaut aux éléments des pages web, styles qu'il te revient de corriger/annuler s'ils ne te conviennent pas. Par exemple, les paragraphes (<p>) se voient souvent appliquer des marges Smiley cligne Smiley cligne Smiley cligne
Sujet clos
Aller à