18073 sujets

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

Mettre une image autour des articles

Bonjour , je suis debutante et j'ai creer un blog et j'ai besoin de vos lumieres .
J'ai mis un cadre avec des images autour de mes modules grace aux attributs :
.box-top { background:transparent url(http ....
dans mon css et j'aimerais faire de meme avec tout mes articles . Je sais kil est possible de mettre un cadre de couleur avec l'attributs "border" mais une image ???
VOICI LE blog en question :
http://fvanessa.over-blog.org/article-2708712.html
Bonjour,

Tout d'abord, c'est vilain (et inutile) de toucher au menu contextuel de la souris. Ici, je souhaitais voir ton code source avec une extension spéciale de Firefox, mais il me faut d'abord désactiver le javascript pour libérer le menu contextuel...
Du coup, je n'ai plus trop envie d'aller voir le code.


Concernant ton problème, a priori, il suffit de faire comme pour tes menus :
nom-du-bloc-div#contenu {
   background: #couleur url(adresse de l'image) position répétition;
   }
"Tout d'abord, c'est vilain (et inutile) de toucher au menu contextuel de la souris. Ici, je souhaitais voir ton code source avec une extension spéciale de Firefox, mais il me faut d'abord désactiver le javascript pour libérer le menu contextuel...
Du coup, je n'ai plus trop envie d'aller voir le code".

je n'ai pas d'extension speciale pour firefox, je suis sous IE, je comprend pas pourkoi tu dois desactiver le js
mon css est :
http://fdata.over-blog.com/0/33/45/49/css/custom.css


ca dois faire ca ????? :

.article { margin-top:10px; padding:0px; background-image: url(http://img238.imageshack.us/img238/802/articles8dq.gif);}
.article-top { background:transparent url(http://img208.imageshack.us/img208/1826/haut1zs.gif); background-position: top; }
.article-right { background: transparent url( http://img102.imageshack.us/img102/6931/droite7gp.gif);
background-position: right;}
.article-left { background:transparent url(http://img102.imageshack.us/img102/8293/gauche1qi.gif );
background-position: left;}
.article-bottom {background:transparent url(http://img78.imageshack.us/img78/6724/bas3bt.gif );background-position:bottom ;}
Le menu contextuel, c'est celui qu'on obtient par un clic du bouton droit de la souris. (J'utilise une extension sympa qui rend le code source avec des blocs de couleurs. Son appel se fait via le menu contextuel.)
Si je râle, c'est que sur ton site le menu par défaut est remplacé par un autre avec :
a écrit :
- accueil
- recommander
Internet Explorer uniquement
- Mettre en page d'accueil
- Ajouter aux favoris
Ici, pour retrouver le menu contextuel par défaut et pouvoir utiliser l'extension dont je parle, il faut désactiver le Javascript.

Il ne s'agit donc pas de ton code CSS, mais de ce passage de ton balisage :

<script language="[#red]JavaScript[/#]" type="text/javascript">
			<!--
			function position(p){
				position_x = (navigator.appName.indexOf("Netscape")!=-1 )? p.pageX : event.clientX+document.documentElement.scrollLeft;
				position_y = (navigator.appName.indexOf("Netscape")!=-1) ? p.pageY : document.documentElement.scrollTop+event.clientY;
			}

			function Om()
			{
				document.getElementById("[#red]menuClicDroit[/#]").style.top = position_y+"px";
				document.getElementById("[#red]menuClicDroit[/#]").style.left = position_x+"px";
				document.getElementById("[#red]menuClicDroit[/#]").style.visibility = "visible";
				return(false);
			}

			function Fm()
			{
				document.getElementById("[#red]menuClicDroit[/#]").style.visibility = "hidden";
			}

			(...)
		
			document.onmousemove = position;
			document.onmousedown = Om2;
			document.oncontextmenu = Om;
			document.onclick = Fm;
			//-->
		</script>




Concernant ton problème, il faut te tourner vers les solutions CSS permettant de faire des cadres arrondis (avec quelques images), car le fonctionnement est indentique à celui que tu dois suivre ici.

Tu peux lire ceci : Boîte avec bordures en html et css
et regarder le code source+CSS de celle-ci : Boîte avec bordures en html et css #2
Modifié par Smiley neko (16 May 2006 - 12:51)
merci c genial, d'autant ke je suis super limites je n'ai pas acces au javascript

ca y est le clic droit est retablis

les pages ke tu m'a donnés sont super interessante, mais apparamment je serais obliges de rajouter a chaque article du code html (<div class="boite"><h2>Titre de ma boîte</h2><p>Lorem ipsum bla bla bla...</p>
</div> ca risque d'etre long et ennuyeux si c'est ca

je vais essayer tout de meme merci
Autre chose.

Comme ton design est de type fluide, ça demande d'avantage de réflexion pour que le bloc concerné (celui au centre) puisse s'entendre ou rétrécir sans altérer le design.
C'est facile à faire avec les cadres arrondis qu'on voit dans les liens, mais ça risque d'être quelque peu plus ardu avec tes images. Il faudra peut-être scinder les images du haut et du bas, pour isoler les parties des cotés, et avoir neuf images dans ce genre :

upload/5688-05-exemple-.png
(Image du site de mpop.)
Modifié par Smiley neko (16 May 2006 - 13:05)
j'ai essayer mais le probleme c'est k'il me met mon cadre dans l'article alors ke je voulais le cadre soit autour de l'article
pour decouper l'image, je vais le faire mais c'est les dimensions qui m'embete car c'est pas mon fort,

il y a un blog ki a reussi a le faire : http://fannycanet.over-blog.com/

j'ai pas encore eu le temps de regarder comment elle avait fait
Sujet clos
Aller à