13/07/2012, 21:25:59
C'est la div #content.
Oui mon problème c'est que l'image qui s'affiche est la même partout. Alors que j'ai une image différente pour chaque page.
Voici le code CSS :
Et voici mon gabarit :
L'image s'affiche c'est qu'il a bien reconnu ma variable mais l'image ne change pas pour chaque page. Et c'est là que je ne comprends pas pourquoi !
Oui mon problème c'est que l'image qui s'affiche est la même partout. Alors que j'ai une image différente pour chaque page.
Voici le code CSS :
Code :
/* browsers interpret margin and padding a little differently, we'll remove all default padding and margins and set them later on */
* {
margin: 0;
padding: 0;
}
/*Set initial font styles*/
body {
text-align: left;
font-family: "Arial bold", Helvetica, sans-serif;
font-size: 13px;
line-height: 16px;
}
/*set font size for all divs, this overrides some body rules*/
div {
font-size: 1em;
}
/*if img is inside "a" it would have borders, we don't want that*/
img {
border: 0;
}
/*default link styles*/
/* set all links to have underline and bluish color */
a, a:link a:active {
text-decoration: none;
/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */
background-color: inherit;
/* color: #18507C; */
}
a:visited {
text-decoration: underline;
background-color: inherit;
color: [[$Fond]];
/* a different color can be used for visited links */
}
/* remove underline on hover and change color */
a:hover {
text-decoration: none;
background-color: inherit;
/* color: #385C72; */
}
/*****************basic layout *****************/
body {
margin: 0;
padding: 0;
/* default text color for entire site*/
color: #333;
/* you can set your own image and background color here */
background: [[$Fond]];
}
div#pagewrapper {
/* min max width, IE wont understand these, so we will use java script magic in the <head> */
max-width: 99em;
min-width: 60em;
/* now that width is set this centers wrapper */
margin: 0 auto;
background-color: [[$FondContent]];
color: black;
width: 960px;
}
/* header, we will hide h1 a text and replace it with an image, we assign a height for it so the image wont cut off */
div#header {
/* adjust according your image size */
height: 192px;
margin: 0;
padding: 0;
/* you can set your own image here, will go behind h1 a image */
background: url([[root_url]]/uploads/images/bandeau-960.jpg) no-repeat center top;
/* border just the bottom */
/* border-bottom: 1px solid #D9E2E6; */
}
div#header h1 a {
/* you can set your own image here */
background: none;
/* this will make the "a" link a solid shape */
display: block;
/* adjust according your image size */
height: 192px;
/* this hides the text */
text-indent: -999em;
/* old firefox would have shown underline for the link, this explicitly hides it */
text-decoration: none;
}
div#header h1 {
margin: 0;
padding: 0;
/*these keep IE6 from pushing the header to more than the set size*/
line-height: 0;
font-size: 0;
/* this will keep IE6 from flickering on hover */
background: none;
}
div#header h2 {
/* this is where the site name is */
float: right;
line-height: 1.2em;
/* this keeps IE6 from not showing the whole text */
font-size: 1.5em;
/* keeps the size uniform */
margin: 35px 65px 0px 0px;
/* adjust according your text size */
color: #f4f4f4;
}
div#content {
/* some air above and under menu and content */
/* margin: 1.5em auto 2em 0; */
padding: 0px;
font-color: [[$EcritureContent]];
width: 960px;
float: center;
background: [[$FondContent]] url([[root_url]]/uploads/images/[[$bkground]]) no-repeat center top ;
}
/* this gets all the outside calls that were used on the div#main before */
div.back1 {
/* this will give room for sidebar to be on the left side, make sure this number is bigger than sidebar width */
/* margin-left: 29%; */
/* and some air on the right */
/* margin-right: 2%; */
float: center;
/* you can set your own image here */
background-image: none;
}
/* this is an IE6 hack, you may see these through out the CSS */
* html div.back1 {
/* unlike other browser IE6 needs float:right and a width */
float: right;
/* width: 69%; */
/* and we take this out or it will stop at the bottom */
margin-left: 0%;
/* and some air on the right */
/* margin-right: 10px; */
/* you can set your own image here */
background: [[$FondContent]];
}
div.fondpage {
background-size: 960px;
}
div.back2 {
/* you can set your own image here */
background: url([[root_url]]/uploads/ngrey/mainleft1.gif) no-repeat left top;
}
div.back3 {
/* you can set your own image here */
background: url([[root_url]]/uploads/ngrey/wbtmleft.gif) no-repeat left bottom;
}
div#main {
/* this is the last inside div so we set the space inside it to keep all content away from the edges of images/box */
margin-left: 238px;
margin-right: 238px;
float: center;
/* padding: 10px 15px 150px 15px; */
/* you can set your own image here */
}
div.retouraccueil {
background: url([[root_url]]/uploads/images/Logo-accueil.jpg) no-repeat left top;
height: 31px;
width: 100px;
padding-top: 8px;
padding-left: 28px;
}
div.footback {
/* keep footer below content and menu */
height: 220px;
clear: both;
/* this sets 10px on right to let the right image show, the balance 10px left on next div */
padding: 0px 10px 0px 0px;
/* you can set your own image here */
background: [[$FondContent]] url([[root_url]]/uploads/images/frise-bas-960.jpg) no-repeat center top;
}
div#footer {
/* this sets 10px on left to balance 10px right on last div */
padding-top: 165px;
/* color of text, the link color is set below */
color: #595959;
/* you can set your own image here */
background: none;
}
div.leftfoot {
float: left;
width: 30%;
margin-left: 20px
}
div#footer p {
/* sets different font size from default */
font-size: 10px;
/* some air for footer */
padding-top: 0;
/* centered text */
text-align: center;
margin: 0;
line-height: 12px;
}
div#footer p a {
/* footer link would be same color as default we want it same as footer text */
color: #595959;
text-decoration: underline;
}
/* as we hid all hr for accessibility we create new hr with div class="hr" element */
div.hr {
height: 1px;
padding: 1em;
border-bottom: 1px dotted black;
margin: 1em;
}
/* relational links under content */
div.left49 {
/* combined percentages of left+right equaling 100% might lead to rounding error on some browser */
width: 70%;
}
div.right49 {
float: right;
width: 29%;
/* set right to keep text on right */
text-align: right;
}
/********************CONTENT STYLING*********************/
/* HEADINGS */
div#content h1 {
/* font size for h1 */
font-size: 21px;
line-height: 25px;
margin: 0;
}
div#content h2 {
/* font size for h2 the higher the h number the smaller the font size, most times */
font-size: 15px;
text-align: left;
/* some air around the text */
padding-bottom: 1px;
/* set borders around header */
/* border-bottom: 1px solid #899092; */
/* border-left: 1.1em solid #899092;*/
/* a larder than h1 line height */
line-height: 18px;
/* and some air under the border */
margin: 0 0 0.5em 0;
}
div#content h3 {
color: #294B5F;
font-size: 1.3em;
line-height: 1.3em;
margin: 0 0 0.5em 0;
}
div#content h4 {
font-size: 13px;
line-height: 16px;
margin: 0 0 0.25em 0;
}
div#content h5 {
color: #294B5F;
font-size: 1.1em;
line-height: 1.3em;
margin: 0 0 0.25em 0;
}
div#content h6 {
color: [[$Fond]];
font-size: 12px;
font-weight: bold;
font-style: italic;
}
.resa {
color: [[$Fond]];
font-size: 12px;
font-weight: bold;
font-style: italic;
}
.resa a {
font-style: underline;
}
.address {
font-size: 10px;
line-height: 16px;
}
/* END HEADINGS */
/* TEXT */
p {
/* default p font size, this is set different in some other divs */
font-size: 13px;
/* some air around p elements */
margin: 0 0 1.5em 0;
line-height: 16px;
padding: 0;
}
blockquote {
border-left: 10px solid #ddd;
margin-left: 10px;
}
strong, b {
/* explicit setting for these */
font-weight: bold;
}
em, i {
/* explicit setting for these */
font-style: italic;
}
/* Wrapping text in <code> tags. Makes CSS not validate */
code, pre {
/* css-3 */
white-space: pre-wrap;
/* Mozilla, since 1999 */
white-space: -moz-pre-wrap;
/* Opera 4-6 */
white-space: -pre-wrap;
/* Opera 7 */
white-space: -o-pre-wrap;
/* Internet Explorer 5.5+ */
word-wrap: break-word;
font-family: "Courier New", Courier, monospace;
font-size: 1em;
}
pre {
/* black border for pre blocks */
border: 1px solid #000;
/* set different from surroundings to stand out */
background-color: #ddd;
margin: 0 1em 1em 1em;
padding: 0.5em;
line-height: 1.5em;
font-size: 90%;
}
/* Separating the divs on the template explanation page */
div.templatecode {
margin: 0 0 2.5em;
}
/* END TEXT */
/* LISTS */
/* lists in content need some margins to look nice */
div#main ul,
div#main ol,
div#main dl {
font-size: 1.0em;
line-height: 1.4em;
margin: 0 0 1.5em 0;
}
div#main ul li,
div#main ol li {
margin: 0 0 0.25em 3em;
}
/* definition lists topics on bold */
div#main dl {
margin-bottom: 2em;
padding-bottom: 1em;
border-bottom: 1px solid #c0c0c0;
}
div#main dl dt {
font-weight: bold;
margin: 0 0 0 1em;
}
div#main dl dd {
margin: 0 0 1em 1em;
}
/* END LISTS */Et voici mon gabarit :
Code :
{process_pagedata}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
{* Change lang="en" to the language of your site *}
{* note: anything inside these are smarty comments, they will not show up in the page source *}
<head>
<title>{sitename} - {title}</title>
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}
{metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}
{capture assign='bkground'}{page_image}{/capture}
{*{if ($smarty.capture.bkground ne '')}*}
{*<div style="background: url(uploads/images/{page_image}) center top no-repeat;" class="fondpage"> </div>*}
{*<img src="uploads/images/{page_image}" alt="{page_image}" class="taClasse" /> *}
{*{/if}*}
{cms_stylesheet}
{* This is how all the stylesheets attached to this template are linked to it *}
{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optimization *}
{* the literal below and the /literal at the end are needed whenever there are {"curly brackets"} as smarty will think it's something to process and will throw an error *}
{literal}
<script type="text/JavaScript">
<!--
//pass min and max - measured against window width
function P7_MinMaxW(a,b){
var nw="auto",w=document.documentElement.clientWidth;
if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</script>
<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}
</style>
<![endif]-->
{/literal}
{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Top menu + 2 columns" *}
<!--[if lte IE 6]>
<script type="text/javascript" src="modules/MenuManager/CSSMenu.js"></script>
<![endif]-->
{* The above JavaScript is required for CSSMenu to work in IE *}
</head>
<body>
<div id="pagewrapper">
{* Horizontal ruler that is hidden for visual browsers by CSS *}
{* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet "Layout: Top menu + 2 columns" *}
<div id="header">
{* a link back to home page and the header left image/logo, text is hidden using CSS *}
<h1>{cms_selflink dir="start" text="$sitename" title ="Hôtels de Cauterets"}</h1>
</div>
{* End Header *}
{* Start Navigation *}
<div id="menu_vert">
{* stylesheet "Navigation: CSSMenu - Horizontal" *}
{menu loadprops=0 template='cssmenu.tpl'}
</div>
{* End Navigation *}
{assign var='id-page' value=$entry->alias}
{* Start Content *}
<div id="content">
{* Start Content Area, the back1, back2, back3, hold the 3 outside images, main holds the 4th one, to make the box complete, if the template were fixed width not fluid we could use just 2 divs and 2 images, 1 top 1 bottom *}
<div class="back1">
{* <div class="back2"> *}
{* <div class="back3"> *}
<div id="main">
<div class="retouraccueil" style="float: right;">{cms_selflink dir="start" text="Retour à l'accueil"}</div>
{* <h2>{title}</h2> *}
{content}
<br />{* to insure space below content *}
<div class="clear"></div>
{* </div> *}
{* </div> *}
</div>
</div>
{* End Content Area *}
</div>
{* End Content *}
{* Start Footer. Edit the footer in the Global Content Block called "footer" *}
<div class="footback">
<div id="footer">
{* stylesheet "Navigation: FatFootMenu" *}
<div id="footrt">
{global_content name='footer'}
</div>
<div class="clear"></div>
</div>
</div>
{* End Footer *}
</div>
{* end pagewrapper *}
</body>
</html>L'image s'affiche c'est qu'il a bien reconnu ma variable mais l'image ne change pas pour chaque page. Et c'est là que je ne comprends pas pourquoi !