Bonjour, désolé je suis un débutant qui débute,

je cherche simplement à avoir un cadre sur les photos de mon blog, en cherchant sur ce forum j'ai compris qu'il fallait que je crée une feuille css :

img {

border:0.5px solid #0000CC;

padding:4.5px;

background-color:#FFFFFF;

}


que j'ai mis dans un fichier puis sur mon ftp, ensuite je crée ma page html ou j'inscris :



<link rel="stylesheet" href="monftp/style.css" type="text/css" title="defaut" />

<img src="http://www.image.jpg">


et là j'ai mon image avec mon cadre, c'est parfait, mais...

Comment intégrer tout ça sur mon blog (blogspot/blogger) ??!! où les mettre dans mon "modèle" ?

Merci d'avance. Smiley cligne
Modifié par pouf.le.kaskadeur (12 Mar 2006 - 10:00)
Bonjour,

théoriquement dans l'administration de ton blog tu dois avoir accès à la feuille de style pour pouvoir l'éditer.

Il suffit d'y rajouter le petit bout de css que tu souhaites.

img {
border:0.5px solid #0000CC;
padding:4.5px;
background-color:#FFFFFF;
}


Heu... par contre je te signale que les demi pixels ben ça n'existe pas Smiley cligne

Sinon, et ce n'est évidemment pas pour te faire fuir, je pense qu'il doit exister un forum d'entraide du blog que tu utilises.

Tu pourrais également y poser ta question car tes interlocuteurs auront l'avantage de connaitre le maniement de votre interface d'administration.
clb56 a écrit :
Bonjour,

théoriquement dans l'administration de ton blog tu dois avoir accès à la feuille de style pour pouvoir l'éditer.

Il suffit d'y rajouter le petit bout de css que tu souhaites.

img {
border:0.5px solid #0000CC;
padding:4.5px;
background-color:#FFFFFF;
}


Heu... par contre je te signale que les demi pixels ben ça n'existe pas Smiley cligne

Sinon, et ce n'est évidemment pas pour te faire fuir, je pense qu'il doit exister un forum d'entraide du blog que tu utilises.

Tu pourrais également y poser ta question car tes interlocuteurs auront l'avantage de connaitre le maniement de votre interface d'administration.


jme disais bien que le pixel devait être la plus petite unité de mesure
Smiley biggrin , le problème c'est que pour "blogger", il n'y a pas de forum français, je comprends bien l'anglais mais pour ce type de vocabulaire je risque d'avoir un peu de mal !

je vois que j'ai accès à la feuille de style jvais essayer d'implenter ça pour voir Smiley cligne
je l'ai mis un peu partout mais je ne sais vraiment pas où l'implanter, je vous mets le modèle de mon blog si jamais vous savez où je dois l'insérer :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
 <MainPage><title><$BlogTitle$></title></MainPage>
 <ArchivePage><title><$BlogPageTitle$></title></ArchivePage>
 <ItemPage><title><Blogger><$BlogItemTitle$></Blogger> - <$BlogTitle$></title></ItemPage>
 
 <meta name="keywords" content="<Blogger><ItemPage><$BlogItemTitle$>, </ItemPage></Blogger><$BlogTitle$>" />
 <meta name="description" content="<Blogger><ItemPage><$BlogItemTitle$> | </ItemPage></Blogger><$BlogTitle$>" />
 <$BlogMetaData$>
 
 <link rel="stylesheet" href="http://www.typepad.com/.shared/themes/common/base-weblog.css" type="text/css" />
 
 <link rel="stylesheet" href="http://www.typepad.com/.shared/themes/lilia/theme-bluecrush.css" type="text/css" />

 
<style type="text/css">
#b-navbar
     {
     height:0px;
     visibility:hidden;
     display:none;
     }
.hide
     {
     display:none;
     }
.show
     {
     display:inline;
     }
.out {
     background: buttonface;
     border: 1px solid buttonface;
     margin: 1;
     }
.over {
     background: buttonface;
     border-top: 1px solid buttonshadow;
     border-left: 1px solid buttonshadow;
     border-bottom: 1px solid buttonhighlight;
     border-right: 1px solid buttonhighlight;
     margin: 1;
}
</style>
<script type="text/javascript">

function sh (id) { 

   whichpost = document.getElementById(id); 
   
   if (whichpost.className=="show") { 
      whichpost.className="hide"; 
   } 
   else { 
      if (whichpost.className=="hide") { 
      whichpost.className="show"; 
      } 
   } 
}


<ItemPage>
    var hasChanged = 0;
    var hostName = 'blogspot.com';

function setCookie (name, value, expires) {
    document.cookie = name + '=' + escape(value) + '; expires=' + expires.toGMTString() + '; domain=' + hostName + '; path=/';
    }

function getCookie (name) {
    var key = name + '=';
    var c = document.cookie;
    var i = c.indexOf(key);
    if (i < 0) return '';
    var j = c.indexOf(';', i + key.length);
    if (j < 0) j = c.length;
    return unescape(c.substring(i + key.length, j));
    }

function rememberMe (f) {
    var now = new Date();
    now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000);
    setCookie('author', f.anonName.value, now);
    setCookie('site', f.anonURL.value, now);
    }

function setFormValues (f) {
    f.anonName.value = getCookie("author");
    f.anonURL.value = getCookie("site");
    }

function doLoaded () {
    if (!document.frmComment) return;
    setFormValues(document.frmComment);
    if (document.frmComment.anonName.value)
    document.frmComment.rememberInfo.checked = 1;
    }
    onload = doLoaded;
    
function escapeQuotes(text) {

	text=text.replace(/'/g,"\\'");
	text=text.replace(/\n/g,"\\n");
	return text;
}

function insertTags(tagOpen, tagClose, sampleText) {

    var txtarea = document.cFrm.postBody;
	// IE
	if(document.selection) {
		var theSelection = document.selection.createRange().text;
		if(!theSelection) { theSelection=sampleText;}
		txtarea.focus();
		if(theSelection.charAt(theSelection.length - 1) == " "){
			theSelection = theSelection.substring(0, theSelection.length - 1);
			document.selection.createRange().text = tagOpen + theSelection + tagClose + " ";
		} else {
			document.selection.createRange().text = tagOpen + theSelection + tagClose;
		}
	// Mozilla
	} else if(txtarea.selectionStart || txtarea.selectionStart == '0') {
 		var startPos = txtarea.selectionStart;
		var endPos = txtarea.selectionEnd;
		var myText = (txtarea.value).substring(startPos, endPos);
		if(!myText) { myText=sampleText;}
		if(myText.charAt(myText.length - 1) == " "){ // exclude ending space char, if any
			subst = tagOpen + myText.substring(0, (myText.length - 1)) + tagClose + " "; 
		} else {
			subst = tagOpen + myText + tagClose; 
		}
		txtarea.value = txtarea.value.substring(0, startPos) + subst + txtarea.value.substring(endPos, txtarea.value.length);
		txtarea.focus();
		var cPos=startPos+(tagOpen.length+myText.length+tagClose.length);
		txtarea.selectionStart=cPos;
		txtarea.selectionEnd=cPos;
	// All others
	} else {
		tagOpen=tagOpen.replace(/\n/g,"");
		tagClose=tagClose.replace(/\n/g,"");
		document.infoform.infobox.value=tagOpen+sampleText+tagClose;
		txtarea.focus();
	}
	if (txtarea.createTextRange) txtarea.caretPos = document.selection.createRange().duplicate();
}


    //Preview
function PreviewpostBody(){
   if (cFrm.postBody.value=='') return;
   var preview=window.open('','Preview','width=500,height=200');preview.document.open();
   var text=cFrm.postBody.value;while(text.indexOf("\n") > -1)
   text=text.replace("\n","<br/>");
   preview.document.write('<html><style>*{font-size:11px;font-family:Verdana,Arial,Sans-Serif}<\/style><bo'+'dy>'+text+'<\/body><\/html>');
   preview.document.close();
}
</ItemPage>
</script>
</head>

<body class="layout-two-column-right">

	<div id="container">
		<div id="container-inner" class="pkg">

			
			<!-- banner -->
<div id="banner">
	<div id="banner-inner" class="pkg">
		
		<h1 id="banner-header"><a href="<$BlogURL$>" accesskey="1"><$BlogTitle$></a></h1>
		<h2 id="banner-description"></h2>
	</div>
</div>

			<div id="pagebody">
				<div id="pagebody-inner" class="pkg">

					<div id="alpha">
						<div id="alpha-inner" class="pkg">
						
<!-- entry -->
   <MainOrArchivePage>

   <Blogger>
	<h2 class="date-header"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader>&nbsp;</h2>


<div class="entry" id="post-<$BlogItemNumber$>">
			<h3 class="entry-header"><$BlogItemTitle$></h3>
	
	<div class="entry-content">
		<div class="entry-body">
		
			<p><$BlogItemBody$></p>

		</div>
		
	</div>

	<p class="entry-footer">
		<span class="post-footers"><p align=right><p class="right"> Ce post, publié à <$BlogItemDateTime$> par <u>pouf.le.kaskadeur</u> a suscité : <BlogItemCommentsEnabled> <a href="<$BlogItemPermalinkURL$>#commentaire"><script type="text/javascript">var a = <$BlogItemCommentCount$>; if(a == 0) {document.write('0 commentaire');} else if(a == 1) {document.write('1 commentaire');}else{document.write(a+' commentaires');}</script></a></BlogItemCommentsEnabled> . </p><$BlogItemControl$>
	</p>

</div>

   </Blogger>

   </MainOrArchivePage>
    
   <ItemPage>


							<!-- content nav -->
<p class="content-nav">
	&laquo; <a href="<$BlogURL$>">Accueil</a><span><BloggerPreviousItems> | <a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a> &raquo;</span><span class="hide"></BloggerPreviousItems>&nbsp;</span>
</p>

   <Blogger>


	<h2 class="date-header"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></h2>


<div class="entry" id="post-<$BlogItemNumber$>">
			<h3 class="entry-header"><$BlogItemTitle$></h3>
	
	<div class="entry-content">
		<div class="entry-body">
			<p><$BlogItemBody$></p>

		</div>
		
	</div>
	<p class="entry-footer">
		<span class="post-footers"><$BlogItemDateTime$> </span>  <a class="permalink" href="<$BlogItemPermalinkUrl$>">Lien Permanent</a> <span class="separator">|</span> <a href="javascript:sh('sendmail')">Envoyer cet article à un ami</a> <$BlogItemControl$> <$BlogItemControl$></p>

   <div class="hide" id="sendmail">


c'est que le début mais il y a, je pense, le plus important Smiley smile
Bon, en fait, il suffisait de le mettre entre la balise <style type="text/css" media="screen"> </style> presque n'importe où, mais ça ne m'intéresse pas puisque finalement peu de mes images sont des "img"...tant pis Smiley decu